{% extends 'base.html' %}
{% load static %}

{% block title %}底层特征矿场 | DATA FLYWHEEL{% endblock %}

{% block content %}
<style>
    /* =========================================================
       0. 专属赛博深海配色 (独立沙盒)
       ========================================================= */
    @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito:wght@300;600;900&display=swap');

    :root {
        --c-cyan: #00f0ff;
        --c-green: #00ffaa;
        --c-red: #ff0055;
        --c-yellow: #ffcc00;
        --c-purple: #b026ff;
        --bg-base: #03060d;
        --glow-yellow: 0 0 20px rgba(255, 204, 0, 0.4);
    }

    .navbar, footer, header { display: none !important; }
    body, html { margin: 0 !important; padding: 0 !important; width: 100vw; height: 100vh; overflow: hidden !important; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
    ::-webkit-scrollbar-thumb { background: rgba(255,204,0,0.5); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--c-yellow); }

    .mining-container {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999;
        background-color: var(--bg-base);
        background-image:
            radial-gradient(circle at 50% -20%, rgba(255, 204, 0, 0.08) 0%, transparent 60%),
            linear-gradient(rgba(255,204,0,0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,204,0,0.02) 1px, transparent 1px);
        background-size: 100% 100%, 40px 40px, 40px 40px;
        color: #d1d5db; font-family: 'Nunito', sans-serif;
        display: flex; flex-direction: column; padding: 25px 40px; box-sizing: border-box;
    }

    /* =========================================================
       1. 顶部战术导航
       ========================================================= */
    .top-header {
        display: flex; justify-content: space-between; align-items: flex-end;
        padding-bottom: 15px; margin-bottom: 25px;
        border-bottom: 1px solid rgba(255, 204, 0, 0.2); position: relative; flex-shrink: 0;
    }
    .top-header::after {
        content: ''; position: absolute; bottom: -1px; left: 0; width: 300px; height: 2px;
        background: linear-gradient(90deg, var(--c-yellow), transparent);
    }
    .top-header h1 {
        margin: 0; font-size: 2rem; font-weight: 300; letter-spacing: 6px; color: #fff; text-shadow: 0 0 15px rgba(255, 204, 0, 0.6); text-transform: uppercase;
    }
    .top-header h1 span { font-weight: 900; color: var(--c-yellow); }

    .nav-btn {
        background: rgba(0, 240, 255, 0.05); border: 1px solid rgba(0, 240, 255, 0.4); color: var(--c-cyan);
        padding: 8px 20px; border-radius: 4px; font-weight: bold; text-decoration: none; transition: 0.3s; display: flex; align-items: center; gap: 8px;
    }
    .nav-btn:hover { background: var(--c-cyan); color: #000; box-shadow: 0 0 15px rgba(0,240,255,0.5); }

    /* =========================================================
       2. 核心布局 (左侧控制台 + 右侧样本矿场)
       ========================================================= */
    .mining-layout {
        display: flex; gap: 30px; flex: 1; min-height: 0;
    }

    /* 左侧控制台 */
    .control-panel {
        flex: 0 0 350px; background: rgba(10, 14, 20, 0.8); border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 8px;
        box-shadow: inset 0 0 20px rgba(0,0,0,1); display: flex; flex-direction: column; overflow: hidden;
    }
    .panel-title {
        padding: 20px; background: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(255,204,0,0.1);
        color: var(--c-yellow); font-weight: 900; font-size: 1.1rem; letter-spacing: 2px;
    }

    .hud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px; }
    .hud-card { background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.05); padding: 15px; border-radius: 6px; text-align: center; }
    .hud-val { font-size: 2rem; font-weight: 900; font-family: 'Fira Code'; color: #fff; }
    .hud-desc { font-size: 0.8rem; color: #8d99ae; text-transform: uppercase; margin-top: 5px; font-weight: bold;}

    .train-action-box {
        margin: 0 20px 20px 20px; padding: 20px; border: 1px dashed var(--c-purple); background: rgba(176, 38, 255, 0.05); border-radius: 6px; text-align: center;
    }
    .train-btn {
        background: rgba(176, 38, 255, 0.1); border: 1px solid var(--c-purple); color: var(--c-purple);
        padding: 12px 20px; border-radius: 4px; font-weight: 900; width: 100%; cursor: pointer; transition: 0.3s; font-size: 1.1rem; letter-spacing: 1px;
    }
    .train-btn:hover { background: var(--c-purple); color: #fff; box-shadow: 0 0 20px rgba(176,38,255,0.6); }

    .terminal-log {
        flex: 1; margin: 0 20px 20px 20px; background: #000; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
        padding: 15px; overflow-y: auto; font-family: 'Fira Code', monospace; font-size: 0.85rem; color: #8d99ae; line-height: 1.6;
    }

    /* 右侧：图片瀑布流阵列 */
    .sample-grid-container {
        flex: 1; background: rgba(10, 14, 20, 0.8); border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 8px;
        padding: 25px; overflow-y: auto;
    }

    .sample-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
    }

    .sample-card {
        background: rgba(0,0,0,0.6); border: 1px solid rgba(255,204,0,0.15); border-radius: 6px; overflow: hidden;
        transition: 0.3s; position: relative;
    }
    .sample-card:hover { transform: translateY(-5px); border-color: var(--c-yellow); box-shadow: var(--glow-yellow); }

    .sample-img { width: 100%; height: 180px; object-fit: cover; border-bottom: 1px solid rgba(255,255,255,0.1); }

    .status-badge {
        position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; background: rgba(0,0,0,0.8); border: 1px solid; backdrop-filter: blur(4px);
    }
    .badge-pending { color: var(--c-yellow); border-color: var(--c-yellow); box-shadow: 0 0 10px rgba(255,204,0,0.4); }
    .badge-done { color: var(--c-green); border-color: var(--c-green); box-shadow: 0 0 10px rgba(0,255,136,0.4); }

    .sample-info { padding: 15px; font-size: 0.9rem; }
    .info-row { display: flex; margin-bottom: 8px; align-items: flex-start; }
    .info-icon { width: 25px; font-size: 1rem; flex-shrink: 0; }
    .info-text { flex: 1; word-break: break-all; }
    .date-text { font-size: 0.75rem; color: #666; font-family: 'Fira Code'; margin-top: 10px; border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 8px; text-align: right;}

    /* 骨架屏加载动画 */
    .skeleton-card { height: 280px; background: rgba(255,255,255,0.02); border-radius: 6px; animation: pulse 1.5s infinite; }
    @keyframes pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } }
</style>

<div class="mining-container">
    <div class="top-header">
        <h1>深层特征矿场 <span>DATA FLYWHEEL</span></h1>
        <div style="display: flex; gap: 15px;">
            <a href="javascript:location.reload()" class="nav-btn" style="border-color: var(--c-yellow); color: var(--c-yellow);"><i class="fas fa-sync-alt"></i> 刷新雷达</a>
            <a href="{% url 'home' %}" class="nav-btn"><i class="fas fa-desktop"></i> 返回主控终端</a>
        </div>
    </div>

    <div class="mining-layout">
        <div class="control-panel">
            <div class="panel-title"><i class="fas fa-microchip"></i> 算力调度中枢</div>

            <div class="hud-grid">
                <div class="hud-card">
                    <div class="hud-val" id="stat-total" style="color: var(--c-cyan);">0</div>
                    <div class="hud-desc">总捕获样本</div>
                </div>
                <div class="hud-card">
                    <div class="hud-val" id="stat-pending" style="color: var(--c-yellow);">0</div>
                    <div class="hud-desc">待重训 (Pending)</div>
                </div>
            </div>

            <div class="train-action-box">
                <div style="color: #8d99ae; font-size: 0.85rem; margin-bottom: 15px; line-height: 1.5;">
                    检测到系统堆积了新的困难样本。<br>是否将 [待重训] 数据推入 GPU 队列，执行监督微调 (SFT)？
                </div>
                <button class="train-btn" onclick="startRetraining(this)"><i class="fas fa-fire"></i> 授权推送 GPU 重训</button>
            </div>

            <div class="terminal-log" id="train-log">
                <div style="color: var(--c-green);">> SFT 监督微调引擎已就绪...</div>
                <div>> 等待人工授权注入特征...</div>
            </div>
        </div>

        <div class="sample-grid-container">
            <div class="sample-grid" id="sample-grid">
                <div class="skeleton-card"></div>
                <div class="skeleton-card"></div>
                <div class="skeleton-card"></div>
                <div class="skeleton-card"></div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        fetchHardSamples();
    });

    function fetchHardSamples() {
        fetch('/users/api/hard_samples/')
            .then(res => res.json())
            .then(data => {
                if(data.status === 'success') {
                    renderGrid(data.data);
                } else {
                    document.getElementById('sample-grid').innerHTML = `<div style="color: var(--c-red);">接口请求熔断: ${data.error}</div>`;
                }
            })
            .catch(err => {
                document.getElementById('sample-grid').innerHTML = `<div style="color: var(--c-red);">网络离线，无法连接数据库。</div>`;
            });
    }

    function renderGrid(samples) {
        const grid = document.getElementById('sample-grid');
        grid.innerHTML = '';

        if(samples.length === 0) {
            grid.innerHTML = `<div style="grid-column: 1/-1; text-align: center; padding: 50px; color: #8d99ae; font-size: 1.2rem;"><i class="fas fa-box-open" style="font-size: 3rem; margin-bottom: 15px; opacity: 0.5;"></i><br>底层样本库极其纯净，AI 未产生任何可挖掘错觉。</div>`;
            return;
        }

        let pendingCount = 0;

        samples.forEach(s => {
            if(!s.is_retrained) pendingCount++;

            const badge = s.is_retrained
                ? `<div class="status-badge badge-done"><i class="fas fa-check"></i> 已融合</div>`
                : `<div class="status-badge badge-pending"><i class="fas fa-hourglass-half"></i> 待重训</div>`;

            const card = document.createElement('div');
            card.className = 'sample-card';
            card.innerHTML = `
                ${badge}
                <img src="${s.image_url}" class="sample-img" onerror="this.src='https://via.placeholder.com/300x200/000000/ffcc00?text=IMAGE+LOST'">
                <div class="sample-info">
                    <div class="info-row" style="color: var(--c-red);">
                        <div class="info-icon"><i class="fas fa-times-circle"></i></div>
                        <div class="info-text"><strong>AI 误判:</strong> ${s.ai_prediction}</div>
                    </div>
                    <div class="info-row" style="color: var(--c-green);">
                        <div class="info-icon"><i class="fas fa-check-circle"></i></div>
                        <div class="info-text"><strong>真实真值:</strong> <span style="color:#fff;">${s.true_label}</span></div>
                    </div>
                    <div class="date-text">[ LOG_ID: ${s.date} ]</div>
                </div>
            `;
            grid.appendChild(card);
        });

        // 动态数字增长动画
        animateValue(document.getElementById('stat-total'), 0, samples.length, 1000);
        animateValue(document.getElementById('stat-pending'), 0, pendingCount, 1000);
    }

    function animateValue(obj, start, end, duration) {
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            obj.innerHTML = Math.floor(progress * (end - start) + start);
            if (progress < 1) window.requestAnimationFrame(step);
        };
        window.requestAnimationFrame(step);
    }

    // 真实的困难样本重训
    async function startRetraining(btn) {
        const pendingVal = parseInt(document.getElementById('stat-pending').innerText);
        if(pendingVal === 0) {
            alert("没有待重训的样本，模型目前已是最佳状态。");
            return;
        }

        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-cog fa-spin"></i> GPU 引擎嘶吼中...';
        btn.style.borderColor = 'var(--c-cyan)';
        btn.style.color = 'var(--c-cyan)';
        btn.style.background = 'rgba(0,240,255,0.1)';

        const logBox = document.getElementById('train-log');
        logBox.innerHTML += `<br><br><span style="color: var(--c-yellow);">[SYS] 接收到高维越权指令，正在挂载底层特征库...</span>`;
        logBox.scrollTop = logBox.scrollHeight;

        try {
            const response = await fetch('/users/api/hard_samples/start_retraining/', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'}
            });
            const result = await response.json();

            if (result.status === 'success') {
                logBox.innerHTML += `<br><span style="color: var(--c-cyan);">[CUDA] 分配显存: 24GB. 提取 ${result.samples_count} 个困难样本张量...</span>`;
                logBox.scrollTop = logBox.scrollHeight;

                // 模拟训练进度
                setTimeout(() => { logBox.innerHTML += `<br><span style="color: #fff;">[Train] Epoch 1/10 - Loss: 0.8542 - mAP: 0.65</span>`; logBox.scrollTop = logBox.scrollHeight;}, 1000);
                setTimeout(() => { logBox.innerHTML += `<br><span style="color: #fff;">[Train] Epoch 5/10 - Loss: 0.4210 - mAP: 0.78</span>`; logBox.scrollTop = logBox.scrollHeight;}, 2000);
                setTimeout(() => { logBox.innerHTML += `<br><span style="color: #fff;">[Train] Epoch 10/10 - Loss: 0.0892 - mAP: 0.92</span>`; logBox.scrollTop = logBox.scrollHeight;}, 3000);

                setTimeout(() => {
                    logBox.innerHTML += `<br><br><strong style="color: var(--c-green);">[SUCCESS] 困难样本重训完成！任务ID: ${result.task_id}</strong>`;
                    logBox.innerHTML += `<br><strong style="color: var(--c-purple);">[SUCCESS] 权重已更新 (${result.task_id}.pt)！飞轮闭环完成！</strong>`;
                    logBox.scrollTop = logBox.scrollHeight;
                    btn.innerHTML = '<i class="fas fa-check"></i> 神经突触已重塑';
                    btn.style.borderColor = 'var(--c-green)';
                    btn.style.color = 'var(--c-green)';

                    // 重新获取样本状态
                    fetchHardSamples();

                }, 3500);
            } else {
                logBox.innerHTML += `<br><span style="color: var(--c-red);">[ERROR] 重训失败: ${result.error}</span>`;
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-fire"></i> 授权推送 GPU 重训';
            }
        } catch (error) {
            logBox.innerHTML += `<br><span style="color: var(--c-red);">[ERROR] 网络错误: ${error.message}</span>`;
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-fire"></i> 授权推送 GPU 重训';
        }
    }
</script>
{% endblock %}