{% extends "base.html" %}
{% block title %}个人总览{% endblock %}
{% block breadcrumb_title %}个人总览{% endblock %}
{% block head_extra %}
<style>
    .resource-card { position: relative; overflow: hidden; }
    .resource-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(148, 163, 184, .16); border-radius: inherit; }
    .resource-liquid { position: relative; height: 132px; margin-top: 10px; padding: 13px 12px 10px; overflow: hidden; border: 1px solid #dbe4ee; border-radius: 8px; background: #f8fafc; }
    .resource-liquid::after { content: ""; position: absolute; z-index: 0; top: 58px; right: 12px; left: 12px; height: 6px; border-radius: 999px; background: #e2e8f0; }
    .resource-liquid-fill { position: absolute; z-index: 1; top: 58px; right: 12px; left: 12px; width: auto; height: 6px; border-radius: 999px; background: #38bdf8; transform: scaleX(var(--usage-ratio, 0)); transform-origin: left; transition: transform .6s ease, background-color .2s ease; }
    .resource-liquid-fill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .25); }
    .resource-liquid-label { position: relative; z-index: 2; display: block; color: #334155; font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
    .resource-liquid.is-warning .resource-liquid-fill { background: #f59e0b; }
    .resource-liquid.is-critical .resource-liquid-fill { background: #ef4444; }
    .resource-liquid.is-unlimited .resource-liquid-fill { background: #a78bfa; transform: scaleX(0); }
    .resource-stat-lines { position: relative; z-index: 2; margin-top: 23px; padding-top: 8px; border-top: 1px solid #e2e8f0; font-size: 13px; line-height: 1.65; }
    .resource-stat-lines > div { display: flex; justify-content: space-between; gap: 12px; }
    .resource-stat-lines span { color: #6b7280; }
    .resource-stat-lines strong { color: #1f2937; font-weight: 600; }
    @media (prefers-reduced-motion: reduce) { .resource-liquid-fill { transition: none; } }
    @media (max-width: 640px) { .resource-liquid { height: 124px; padding-inline: 10px; } .resource-stat-lines { font-size: 12px; } .resource-liquid-fill { right: 10px; left: 10px; } }
</style>
{% endblock %}
{% block content %}
<div class="page-header" style="margin-bottom: 24px">
    <div>
        <h2 style="font-size: 28px; font-weight: 700">个人总览</h2>
        <p style="margin-top: 6px; color: #6b7280">
            欢迎回来，<strong id="dashboardUser">{{ user.get('cn', user.get('username', '用户')) }}</strong>
        </p>
    </div>
    <button class="btn btn-secondary" type="button" onclick="refreshUserDashboard(this)">
        <svg style="width: 16px; height: 16px; display: inline-block; margin-right: 4px; vertical-align: -3px" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        刷新
    </button>
</div>

<div class="stats-grid" style="margin-bottom: 24px">
    <div class="stat-card">
        <div class="stat-label">运行中作业</div>
        <div class="stat-value" id="myRunning" style="color: #10b981">—</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">排队中作业</div>
        <div class="stat-value" id="myPending" style="color: #f59e0b">—</div>
    </div>
    <div class="stat-card resource-card">
        <div class="stat-label">本月核时</div>
        <div class="resource-liquid" id="myCpuResource" role="meter" aria-label="本月核时使用比例" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="resource-liquid-fill" id="myCpuLiquid" aria-hidden="true"></div>
            <span class="resource-liquid-label" id="myCpuPercent">—</span>
            <div class="resource-stat-lines">
                <div><span>已用</span><strong id="myCpuUsed">—</strong></div>
                <div><span>剩余</span><strong id="myCpuRemaining">—</strong></div>
                <div><span>累计</span><strong id="myCpuAvailable">—</strong></div>
            </div>
        </div>
    </div>
    <div class="stat-card resource-card">
        <div class="stat-label">本月卡时</div>
        <div class="resource-liquid" id="myGpuResource" role="meter" aria-label="本月卡时使用比例" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="resource-liquid-fill" id="myGpuLiquid" aria-hidden="true"></div>
            <span class="resource-liquid-label" id="myGpuPercent">—</span>
            <div class="resource-stat-lines">
                <div><span>已用</span><strong id="myGpuUsed">—</strong></div>
                <div><span>剩余</span><strong id="myGpuRemaining">—</strong></div>
                <div><span>累计</span><strong id="myGpuAvailable">—</strong></div>
            </div>
        </div>
    </div>
</div>

<div class="card" style="margin-bottom: 20px">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
        <h3 class="card-title" style="margin-bottom: 0">我的近期作业</h3>
        <a href="/jobs" class="btn btn-secondary" style="font-size: 13px; padding: 6px 14px">查看全部 →</a>
    </div>
    <div class="data-table-scroll" role="region" aria-label="我的近期作业" tabindex="0">
        <table class="table data-table data-table--wide" id="myJobsTable">
            <thead>
                <tr>
                    <th class="col-number">作业 ID</th>
                    <th>作业名称</th>
                    <th>状态</th>
                    <th>分区</th>
                    <th class="col-number">核心数</th>
                    <th>运行时间</th>
                    <th>开始 / 完成时间</th>
                </tr>
            </thead>
            <tbody id="myJobsBody">
                <tr><td colspan="7" class="text-center py-8 text-gray-500">加载中…</td></tr>
            </tbody>
        </table>
    </div>
</div>

<div class="card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
        <h3 class="card-title" style="margin-bottom: 0">集群节点状态</h3>
        <span id="partitionUpdated" style="font-size: 12px; color: #9ca3af">—</span>
    </div>
    <div class="data-table-scroll" role="region" aria-label="集群节点状态" tabindex="0">
        <table class="table data-table" id="myPartitionsTable">
            <thead>
                <tr>
                    <th>分区</th>
                    <th class="col-number">总节点</th>
                    <th class="col-number">占用</th>
                    <th class="col-number">空闲</th>
                    <th class="col-number">离线</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody id="myPartitionsBody">
                <tr><td colspan="6" class="text-center py-8 text-gray-500">加载中…</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 操作说明卡片 -->
<div class="card" style="margin-top: 20px; background-color: #eff6ff; border-left: 4px solid #3b82f6">
    <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #1e40af">
        <span aria-hidden="true" style="margin-right: 8px">ⓘ</span>总览使用说明
    </h3>
    <ul style="list-style: disc; margin-left: 24px; color: #1e40af; font-size: 14px; line-height: 1.8">
        <li>顶部指标展示当前作业数量及本月 CPU/GPU 额度使用情况，点击“刷新”同步最新数据</li>
        <li>近期作业区域显示个人作业状态，点击“查看全部”可进入作业管理页筛选和取消作业</li>
        <li>分区状态中的空闲、占用和离线节点用于判断提交作业的资源可用性</li>
    </ul>
</div>
{% endblock %}

{% block page_scripts %}
<script>
    const MY_STATE_MAP = {
        RUNNING: { text: "运行中", cls: "badge-success" },
        PENDING: { text: "排队中", cls: "badge-warning" },
        COMPLETED: { text: "已完成", cls: "badge-info" },
        FAILED: { text: "失败", cls: "badge-error" },
        CANCELLED: { text: "已取消", cls: "badge-error" },
        TIMEOUT: { text: "超时", cls: "badge-error" },
        OUT_OF_MEMORY: { text: "内存溢出", cls: "badge-error" },
    };

    function formatHours(value) {
        const number = Number(value);
        return Number.isFinite(number) ? `${number.toFixed(2)} h` : "—";
    }

    function formatQuotaHours(value) {
        return value == null ? "无限" : formatHours(value);
    }

    function renderResource(prefix, resource) {
        const data = resource || {};
        document.getElementById(`${prefix}Used`).textContent = formatHours(data.used_hours);
        document.getElementById(`${prefix}Remaining`).textContent = formatQuotaHours(data.remaining_hours);
        document.getElementById(`${prefix}Available`).textContent = formatQuotaHours(data.available_hours);
        const liquid = document.getElementById(`${prefix}Liquid`);
        const resourceMeter = liquid.parentElement;
        const percentLabel = document.getElementById(`${prefix}Percent`);
        const quota = Number(data.available_hours);
        const hasQuota = Number.isFinite(quota) && quota >= 0;
        const used = Number(data.used_hours);
        const usedRatio = hasQuota && Number.isFinite(used) && quota > 0
            ? Math.min(Math.max((used / quota) * 100, 0), 100)
            : 0;
        liquid.style.setProperty("--usage-ratio", `${usedRatio / 100}`);
        resourceMeter.classList.toggle("is-unlimited", !hasQuota);
        resourceMeter.classList.toggle("is-warning", hasQuota && usedRatio >= 80 && usedRatio < 95);
        resourceMeter.classList.toggle("is-critical", hasQuota && usedRatio >= 95);
        resourceMeter.setAttribute("aria-valuenow", usedRatio.toFixed(0));
        resourceMeter.setAttribute("aria-valuetext", hasQuota ? `${usedRatio.toFixed(0)}% 已用` : "无限额度");
        percentLabel.textContent = hasQuota ? `${usedRatio.toFixed(0)}% 已用` : "无限额度";
    }

    function renderMyJobs(activeJobs, recentJobs) {
        const tbody = document.getElementById("myJobsBody");
        const activeIds = new Set(activeJobs.map((job) => String(job.job_id)));
        const jobs = [
            ...activeJobs.map((job) => ({ ...job, _time: job.time || "—", _date: job.start_time || "—" })),
            ...recentJobs
                .filter((job) => !activeIds.has(String(job.job_id)))
                .map((job) => ({ ...job, _time: job.elapsed || "—", _date: job.end_time || "—" })),
        ].slice(0, 12);

        if (!jobs.length) {
            tbody.innerHTML = '<tr><td colspan="7" class="text-center py-8 text-gray-500">暂无近期作业</td></tr>';
            return;
        }
        tbody.innerHTML = jobs.map((job) => {
            const stateKey = String(job.state || "").split("+")[0];
            const state = MY_STATE_MAP[stateKey] || { text: job.state || "未知", cls: "badge-info" };
            const cpus = job.cpus ?? job.alloc_cpus;
            return `<tr>
                <td><strong>${job.job_id ?? "—"}</strong></td>
                <td>${job.name || "—"}</td>
                <td><span class="badge ${state.cls}">${state.text}</span></td>
                <td>${job.partition || "—"}</td>
                <td class="col-number">${cpus ?? "—"}</td>
                <td>${job._time}</td>
                <td>${job._date}</td>
            </tr>`;
        }).join("");
    }

    function renderPartitions(partitions) {
        const tbody = document.getElementById("myPartitionsBody");
        if (!partitions.length) {
            tbody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-gray-500">暂无集群分区数据</td></tr>';
            return;
        }
        tbody.innerHTML = partitions.map((partition) => {
            const isUp = String(partition.state || "").toUpperCase() === "UP";
            return `<tr>
                <td><strong>${partition.name || "—"}</strong></td>
                <td class="col-number">${partition.total_nodes ?? 0}</td>
                <td class="col-number">${partition.alloc_nodes ?? 0}</td>
                <td class="col-number">${partition.idle_nodes ?? 0}</td>
                <td class="col-number">${partition.offline_nodes ?? 0}</td>
                <td><span class="badge ${isUp ? "badge-success" : "badge-error"}">${isUp ? "正常" : "停用"}</span></td>
            </tr>`;
        }).join("");
    }

    async function loadUserDashboard() {
        const data = await (await fetch("/api/slurm/my/dashboard")).json();
        const activeJobs = data.active_jobs || [];
        document.getElementById("myRunning").textContent = activeJobs.filter((job) => job.state === "RUNNING").length;
        document.getElementById("myPending").textContent = activeJobs.filter((job) => job.state === "PENDING").length;
        renderResource("myCpu", (data.resources || {}).cpu);
        renderResource("myGpu", (data.resources || {}).gpu);
        renderMyJobs(activeJobs, data.recent_jobs || []);
        renderPartitions(data.partitions || []);
        document.getElementById("partitionUpdated").textContent = `更新于 ${new Date().toLocaleTimeString()}`;
    }

    async function refreshUserDashboard(button) {
        if (button) button.disabled = true;
        try {
            await loadUserDashboard();
            showToast("总览已刷新", "success");
        } catch (error) {
            console.error("[user-dashboard] 加载失败", error);
            showToast("加载总览失败，请稍后重试", "error");
        } finally {
            if (button) button.disabled = false;
        }
    }

    loadUserDashboard().catch((error) => {
        console.error("[user-dashboard] 加载失败", error);
        showToast("加载总览失败，请检查 Slurm 服务", "error");
    });
</script>
{% endblock %}