{% extends "base.html" %}
{#
============================================================
集群用户管理页
路由: GET /cluster-users
============================================================
#}
{% block title %}集群用户管理{% endblock %}
{% block breadcrumb_title %}集群用户管理{% endblock %}

{% block content %}
<!-- 页面标题行 -->
<div class="flex justify-between items-center" style="margin-bottom: 24px">
    <div>
        <h2 style="font-size: 28px; font-weight: 700">集群用户管理</h2>
        <p style="color: #6b7280; margin-top: 6px">
            使用 sacctmgr 维护账户关联（Association）
        </p>
    </div>
    <button class="btn btn-primary" onclick="showCreateAssocModal()">
        + 添加关联
    </button>
</div>

<!-- 过滤与统计 -->
<div class="card" style="margin-bottom: 16px">
    <div class="flex items-center gap-3 flex-wrap">
        <label for="assocAccountFilter" style="font-weight: 600; color: #374151">账户筛选</label>
        <select id="assocAccountFilter" style="min-width: 220px">
            <option value="">默认账户</option>
        </select>
        <button class="btn btn-secondary" onclick="loadAssociations()">刷新</button>
        <span style="color: #6b7280; font-size: 14px; margin-left: auto">
            总计: <strong id="assocCount">—</strong> 条关联
        </span>
    </div>
</div>

<!-- 关联列表 -->
<div class="card">
    <div class="data-table-scroll" role="region" aria-label="集群用户关联列表" tabindex="0">
        <table class="table data-table data-table--wide has-actions" id="associationsTable">
            <thead>
                <tr>
                    <th>用户</th>
                    <th>账户</th>
                    <th>集群</th>
                    <th>分区</th>
                    <th>QOS</th>
                    <th>默认 QOS</th>
                    <th class="col-number">核时限额 (h)</th>
                    <th class="col-number">卡时限额 (h)</th>
                    <th>Comment</th>
                    <th class="col-status">默认</th>
                    <th class="col-actions">操作</th>
                </tr>
            </thead>
            <tbody id="associationsTableBody">
                <tr>
                    <td colspan="11" 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>选择账户后点击“添加关联”，为用户分配可使用的 Slurm 账户和集群</li>
        <li>默认账户用于用户未指定账户时提交作业，可按需设置默认 QOS 和分区</li>
        <li>分区属于关联标识，创建后不可编辑；更换分区需新建关联并删除旧关联</li>
        <li>核时/卡时限额会参与调度校验，修改后对后续作业生效</li>
    </ul>
</div>
{% endblock %}

{% block modals %}
<!-- 创建关联弹窗 -->
<div id="createAssocModal" class="modal" style="display: none">
    <div class="modal-content">
        <div class="modal-header">
            <h3>添加账户关联</h3>
            <button class="modal-close" onclick="closeCreateAssocModal()">
                &times;
            </button>
        </div>
        <form id="createAssocForm" onsubmit="handleCreateAssoc(event)">
            <div class="form-group">
                <label for="create_assoc_user">用户名</label>
                <input
                    type="text"
                    id="create_assoc_user"
                    name="username"
                    required
                    autocomplete="off"
                />
            </div>
            <div class="form-group">
                <label for="create_assoc_account">账户</label>
                <select id="create_assoc_account" name="account" required></select>
            </div>
            <div class="form-group">
                <label for="create_assoc_partition">分区</label>
                <input
                    type="text"
                    id="create_assoc_partition"
                    name="partition"
                    placeholder="留空表示全局"
                />
            </div>
            <div class="form-group">
                <label for="create_assoc_qos">QOS 列表</label>
                <select id="create_assoc_qos" name="qos" multiple size="4"></select>
                <div style="font-size:12px;color:#9ca3af;margin-top:5px">按住 Ctrl/Command 可多选</div>
            </div>
            <div class="form-group">
                <label for="create_assoc_default_qos">默认 QOS</label>
                <select id="create_assoc_default_qos" name="default_qos"></select>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeCreateAssocModal()"
                >
                    取消
                </button>
                <button type="submit" class="btn btn-primary">创建</button>
            </div>
        </form>
    </div>
</div>

<!-- 编辑关联弹窗 -->
<div id="editAssocModal" class="modal" style="display: none">
    <div class="modal-content">
        <div class="modal-header">
            <h3>编辑关联</h3>
            <button class="modal-close" onclick="closeEditAssocModal()">
                &times;
            </button>
        </div>
        <form id="editAssocForm" onsubmit="handleEditAssoc(event)">
            <input type="hidden" id="edit_assoc_account" name="account" />
            <input type="hidden" id="edit_assoc_user" name="username" />
            <input type="hidden" id="edit_assoc_partition" name="partition" />
            <div class="form-group">
                <label>用户 / 账户</label>
                <input
                    type="text"
                    id="edit_assoc_identity"
                    disabled
                    style="background-color: #f3f4f6; cursor: not-allowed"
                />
            </div>
            <div class="form-group">
                <label for="edit_assoc_partition_display">分区（关联标识，不可修改）</label>
                <input
                    type="text"
                    id="edit_assoc_partition_display"
                    disabled
                    style="background-color: #f3f4f6; cursor: not-allowed"
                />
            </div>
            <div class="form-group">
                <label for="edit_assoc_qos">QOS 列表</label>
                <select id="edit_assoc_qos" name="qos" multiple size="4"></select>
                <div style="font-size:12px;color:#9ca3af;margin-top:5px">按住 Ctrl/Command 可多选</div>
            </div>
            <div class="form-group">
                <label for="edit_assoc_default_qos">默认 QOS</label>
                <select id="edit_assoc_default_qos" name="default_qos"></select>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeEditAssocModal()"
                >
                    取消
                </button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- 核时/卡时拨付弹窗 -->
<div id="tresMinutesModal" class="modal" style="display: none">
    <div class="modal-content" style="max-width: 520px">
        <div class="modal-header">
            <h3 id="tresMinutesModalTitle">核时/卡时拨付</h3>
            <button class="modal-close" onclick="closeTRESMinutesModal()">
                &times;
            </button>
        </div>
        <form id="tresMinutesForm" onsubmit="handleTRESMinutesSubmit(event)">
            <input type="hidden" id="tres_account" name="account" />
            <input type="hidden" id="tres_username" name="username" />
            <input type="hidden" id="tres_partition" name="partition" />
            <div class="form-group">
                <label for="tres_cpu_hours">调整 CPU 核时（负数表示扣除）</label>
                <input
                    type="number"
                    id="tres_cpu_hours"
                    name="cpu_hours"
                    min="-1000000"
                    max="1000000"
                    step="0.1"
                    placeholder="如 120"
                />
            </div>
            <div class="form-group">
                <label for="tres_gpu_hours">调整 GPU 卡时（负数表示扣除）</label>
                <input
                    type="number"
                    id="tres_gpu_hours"
                    name="gpu_hours"
                    min="-1000000"
                    max="1000000"
                    step="0.1"
                    placeholder="如 24"
                />
            </div>
            <div style="font-size: 12px; color: #6b7280; margin-top: -6px; margin-bottom: 12px;">
                正数拨付，负数表示扣除；扣除后不会低于历史已用量。
            </div>
            <div id="tresCurrentSummary" style="margin-bottom: 16px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; color: #475569; font-size: 13px;"></div>
            <div class="form-group">
                <label for="tres_comment">Comment（拨付说明）</label>
                <textarea id="tres_comment" name="comment" rows="3" maxlength="478" required
                          placeholder="填写拨付原因、项目或工单号，便于追溯"></textarea>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeTRESMinutesModal()"
                >
                    取消
                </button>
                <button type="submit" class="btn btn-primary">确认拨付</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
    /* ── 数据加载 ─────────────────────────────────────────── */

    function escapeHtml(value) {
        const node = document.createElement("span");
        node.textContent = String(value ?? "");
        return node.innerHTML
            .replaceAll('"', "&quot;")
            .replaceAll("'", "&#39;");
    }

    async function loadAccountOptions() {
        const accounts = await fetchAccounts();
        const filterSelect = document.getElementById("assocAccountFilter");
        const createSelect = document.getElementById("create_assoc_account");

        const options = accounts
            .map((a) => `<option value="${a.name}">${a.name}</option>`)
            .join("");

        if (createSelect) {
            createSelect.innerHTML = options || "";
        }

        if (filterSelect) {
            const current = filterSelect.value;
            filterSelect.innerHTML =
                '<option value="">默认账户</option>' + options;
            if (current) filterSelect.value = current;
        }
    }

    async function loadQosOptions() {
        const qos = await fetchQos();
        const options = qos
            .map((item) => `<option value="${escapeHtml(item.name)}">${escapeHtml(item.name)}</option>`)
            .join("");
        ["create_assoc_qos", "edit_assoc_qos"].forEach((id) => {
            const select = document.getElementById(id);
            if (select) select.innerHTML = options;
        });
        ["create_assoc_default_qos", "edit_assoc_default_qos"].forEach((id) => {
            const select = document.getElementById(id);
            if (select) select.innerHTML = '<option value="">不设置默认 QoS</option>' + options;
        });
    }

    function setSelectedQos(selectId, values) {
        const select = document.getElementById(selectId);
        const selected = new Set(values || []);
        if (select) Array.from(select.options).forEach((option) => {
            option.selected = selected.has(option.value);
        });
    }

    async function loadAssociations() {
        const tbody = document.getElementById("associationsTableBody");
        const accountFilter =
            document.getElementById("assocAccountFilter").value || null;
        const assocs = await fetchAssociations(accountFilter);

        if (!assocs || assocs.length === 0) {
            tbody.innerHTML =
                '<tr><td colspan="11" class="text-center py-8 text-gray-500">暂无关联数据</td></tr>';
            document.getElementById("assocCount").textContent = "0";
            return;
        }

        tbody.innerHTML = assocs
            .map((assoc) => {
                const qos = assoc.qos && assoc.qos.length > 0 ? assoc.qos.join(", ") : "—";
                const isAccountLevel = !assoc.user;
                const userLabel = isAccountLevel ? "（账户级）" : assoc.user;
                const actionButtons = isAccountLevel
                    ? "<span style=\"color:#9ca3af\">—</span>"
                    : `
                        <button class="btn btn-secondary"
                                style="padding: 4px 12px; font-size: 12px; margin-right: 4px;"
                                onclick="showTRESMinutesModal('${assoc.account}', '${assoc.user}', '${assoc.partition || ""}')">拨付</button>
                        <button class="btn btn-secondary"
                                style="padding: 4px 12px; font-size: 12px; margin-right: 4px;"
                                onclick="showEditAssocModal('${assoc.account}', '${assoc.user}', '${assoc.partition || ""}')">编辑</button>
                        <button class="btn"
                                style="padding: 4px 12px; font-size: 12px; background-color: #dc3023; color: white;"
                                onclick="deleteAssocConfirm('${assoc.account}', '${assoc.user}', '${assoc.partition || ""}')">删除</button>
                      `;
                return `
                <tr>
                    <td><strong>${userLabel || "—"}</strong></td>
                    <td>${assoc.account || "—"}</td>
                    <td>${assoc.cluster || "—"}</td>
                    <td>${assoc.partition || "—"}</td>
                    <td style="font-size: 13px; color: #6b7280;">${qos}</td>
                    <td>${assoc.default_qos || "—"}</td>
                    <td class="col-number">${assoc.cpu_minutes == null ? "无限" : (assoc.cpu_minutes / 60).toFixed(2)}</td>
                    <td class="col-number">${assoc.gpu_minutes == null ? "无限" : (assoc.gpu_minutes / 60).toFixed(2)}</td>
                    <td title="${escapeHtml(assoc.comment || "")}">${escapeHtml(assoc.comment || "—")}</td>
                    <td class="col-status">${assoc.is_default ? "是" : "否"}</td>
                    <td class="col-actions"><div class="data-table-actions">${actionButtons}</div></td>
                </tr>`;
            })
            .join("");

        document.getElementById("assocCount").textContent = assocs.length;
    }

    /* ── 创建关联 ───────────────────────────────────────────── */

    function showCreateAssocModal() {
        document.getElementById("createAssocForm").reset();
        setSelectedQos("create_assoc_qos", []);
        document.getElementById("create_assoc_default_qos").value = "";
        document.getElementById("createAssocModal").style.display = "flex";
    }

    function closeCreateAssocModal() {
        document.getElementById("createAssocModal").style.display = "none";
    }

    async function handleCreateAssoc(event) {
        event.preventDefault();
        const fd = new FormData(event.target);
        const payload = {
            username: fd.get("username"),
            account: fd.get("account"),
            partition: fd.get("partition") || null,
            qos: Array.from(document.getElementById("create_assoc_qos").selectedOptions).map((option) => option.value).join(",") || null,
            default_qos: fd.get("default_qos") || null,
        };

        const success = await createAssociation(payload);
        if (success) {
            closeCreateAssocModal();
            loadAssociations();
        }
    }

    /* ── 编辑关联 ───────────────────────────────────────────── */

    let editingAssociation = null;

    async function showEditAssocModal(account, username, partition) {
        const assocs = await fetchAssociations(account);
        const target = assocs.find(
            (a) =>
                a.account === account &&
                a.user === username &&
                (a.partition || "") === (partition || ""),
        );
        if (!target) {
            showToast("获取关联信息失败", "error");
            return;
        }

        editingAssociation = target;
        document.getElementById("edit_assoc_account").value = account;
        document.getElementById("edit_assoc_user").value = username;
        document.getElementById("edit_assoc_identity").value = `${username} / ${account}`;
        document.getElementById("edit_assoc_partition").value = target.partition || "";
        document.getElementById("edit_assoc_partition_display").value =
            target.partition || "全局";
        setSelectedQos("edit_assoc_qos", target.qos || []);
        document.getElementById("edit_assoc_default_qos").value = target.default_qos || "";
        document.getElementById("editAssocModal").style.display = "flex";
    }

    function closeEditAssocModal() {
        document.getElementById("editAssocModal").style.display = "none";
        editingAssociation = null;
    }

    async function handleEditAssoc(event) {
        event.preventDefault();
        const fd = new FormData(event.target);
        const account = fd.get("account");
        const username = fd.get("username");
        const selectedQos = Array.from(
            document.getElementById("edit_assoc_qos").selectedOptions,
        ).map((option) => option.value);
        const defaultQos = fd.get("default_qos") || "";
        const payload = { partition: fd.get("partition") || "" };
        const originalQos = (editingAssociation?.qos || []).slice().sort().join(",");
        if (selectedQos.slice().sort().join(",") !== originalQos) {
            payload.qos = selectedQos.join(",");
        }
        if (defaultQos !== (editingAssociation?.default_qos || "")) {
            payload.default_qos = defaultQos;
        }

        const success = await updateAssociation(account, username, payload);
        if (success) {
            closeEditAssocModal();
            loadAssociations();
        }
    }

    /* ── 删除关联 ───────────────────────────────────────────── */

    async function deleteAssocConfirm(account, username, partition) {
        if (!confirm(`确定要删除关联 "${username}/${account}" 吗？此操作无法撤销！`))
            return;
        const success = await deleteAssociation(account, username, partition || null);
        if (success) loadAssociations();
    }

    /* ── 核时/卡时拨付 ───────────────────────────────────── */

    async function showTRESMinutesModal(account, username, partition) {
        const assocs = await fetchAssociations(account);
        const target = assocs.find(
            (a) =>
                a.account === account &&
                a.user === username &&
                (a.partition || "") === (partition || ""),
        );
        if (!target) {
            showToast("获取关联信息失败", "error");
            return;
        }

        document.getElementById("tresMinutesModalTitle").textContent = `核时/卡时拨付：${username} / ${account}`;
        document.getElementById("tres_account").value = account;
        document.getElementById("tres_username").value = username;
        document.getElementById("tres_partition").value = partition || "";
        document.getElementById("tres_cpu_hours").value = "";
        document.getElementById("tres_gpu_hours").value = "";
        const cpuLimit = target.cpu_minutes == null ? "无限" : `${(target.cpu_minutes / 60).toFixed(2)} h`;
        const gpuLimit = target.gpu_minutes == null ? "无限" : `${(target.gpu_minutes / 60).toFixed(2)} h`;
        const previousComment = target.comment || "无";
        document.getElementById("tresCurrentSummary").textContent =
            `当前限额：CPU ${cpuLimit}，GPU ${gpuLimit}；上一条 Comment：${previousComment}`;
        document.getElementById("tres_comment").value = "";
        document.getElementById("tresMinutesModal").style.display = "flex";
    }

    function closeTRESMinutesModal() {
        document.getElementById("tresMinutesModal").style.display = "none";
    }

    async function handleTRESMinutesSubmit(event) {
        event.preventDefault();
        const fd = new FormData(event.target);
        const account = fd.get("account");
        const username = fd.get("username");
        const partition = fd.get("partition");
        const cpuRaw = fd.get("cpu_hours");
        const gpuRaw = fd.get("gpu_hours");
        const comment = (fd.get("comment") || "").trim();

        const payload = { account, partition: partition || null, comment };
        if (cpuRaw) payload.cpu_hours = parseFloat(cpuRaw);
        if (gpuRaw) payload.gpu_hours = parseFloat(gpuRaw);
        if (payload.cpu_hours === undefined && payload.gpu_hours === undefined) {
            showToast("请至少填写核时或卡时", "warning");
            return;
        }
        if (!comment) {
            showToast("请填写 Comment（拨付说明）", "warning");
            return;
        }

        const submitButton = event.submitter;
        if (submitButton) submitButton.disabled = true;
        const success = await grantUserCredits(username, payload);
        if (submitButton) submitButton.disabled = false;
        if (success) {
            closeTRESMinutesModal();
            loadAssociations();
        }
    }

    /* ── 页面初始化 ───────────────────────────────────────── */

    document.addEventListener("DOMContentLoaded", async () => {
        await loadAccountOptions();
        await loadQosOptions();
        await loadAssociations();
        enableTableSorting("associationsTable");
        const filter = document.getElementById("assocAccountFilter");
        filter.addEventListener("change", loadAssociations);
    });
</script>
{% endblock %}