{% extends "base.html" %}
{#
============================================================
账户管理页
路由: GET /accounts
============================================================
#}
{% block title %}账户管理{% endblock %}
{% block breadcrumb_title %}账户管理{% endblock %}

{% block content %}
<!-- 页面标题行 -->
<div class="flex justify-between items-center" style="margin-bottom: 24px">
    <h2 style="font-size: 28px; font-weight: 700">Slurm 账户管理</h2>
    <button class="btn btn-primary" onclick="showCreateAccountModal()">
        + 创建账户
    </button>
</div>

<!-- 账户列表卡片 -->
<div class="card">
    <div class="flex justify-between items-center" style="margin-bottom: 16px">
        <h3 class="card-title" style="margin-bottom: 0">账户列表</h3>
        <span style="color: #6b7280; font-size: 14px">
            总计: <strong id="accountCount">—</strong> 个账户
        </span>
    </div>
    <div class="data-table-scroll" role="region" aria-label="账户列表" tabindex="0">
        <table class="table data-table data-table--medium has-actions" id="accountsTable">
            <thead>
                <tr>
                    <th>账户名</th>
                    <th>组织</th>
                    <th>描述</th>
                    <th>协调员</th>
                    <th>标记</th>
                    <th>CPU 核时</th>
                    <th>剩余核时</th>
                    <th>GPU 卡时</th>
                    <th>剩余卡时</th>
                    <th class="col-actions">操作</th>
                </tr>
            </thead>
            <tbody id="accountsTableBody">
                <tr>
                    <td colspan="10" 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>可通过“额度”操作设置 CPU 核时和 GPU 卡时上限，留空表示不修改</li>
        <li>删除账户前请确认没有关联用户或正在运行的作业，操作无法撤销</li>
    </ul>
</div>

<div id="accountTresModal" class="modal" style="display:none">
    <div class="modal-content" style="max-width:520px">
        <div class="modal-header"><h3 id="accountTresModalTitle">账户核时/卡时限额</h3>
            <button class="modal-close" onclick="closeAccountTresModal()">&times;</button></div>
        <form id="accountTresForm" onsubmit="handleAccountTresSubmit(event)">
            <input type="hidden" id="account_tres_name">
            <div class="form-group"><label for="account_cpu_hours">CPU 核时上限（小时）</label>
                <input type="number" id="account_cpu_hours" min="0" step="0.1" placeholder="留空表示不修改"></div>
            <div class="form-group"><label for="account_gpu_hours">GPU 卡时上限（小时）</label>
                <input type="number" id="account_gpu_hours" min="0" step="0.1" placeholder="留空表示不修改"></div>
            <div class="form-group"><label for="account_tres_comment">Comment</label>
                <input type="text" id="account_tres_comment" maxlength="478" required></div>
            <div class="modal-footer"><button type="button" class="btn btn-secondary" onclick="closeAccountTresModal()">取消</button>
                <button type="submit" class="btn btn-primary">保存额度</button></div>
        </form>
    </div>
</div>
{% endblock %}

{% block modals %}
<!-- 创建账户弹窗 -->
<div id="createAccountModal" class="modal" style="display: none">
    <div class="modal-content">
        <div class="modal-header">
            <h3>创建新账户</h3>
            <button class="modal-close" onclick="closeCreateAccountModal()">
                &times;
            </button>
        </div>
        <form id="createAccountForm" onsubmit="handleCreateAccount(event)">
            <div class="form-group">
                <label for="create_account_name">账户名</label>
                <input
                    type="text"
                    id="create_account_name"
                    name="name"
                    required
                    autocomplete="off"
                />
            </div>
            <div class="form-group">
                <label for="create_account_org">组织</label>
                <input
                    type="text"
                    id="create_account_org"
                    name="organization"
                    autocomplete="off"
                />
            </div>
            <div class="form-group">
                <label for="create_account_description">描述</label>
                <textarea
                    id="create_account_description"
                    name="description"
                    rows="3"
                    style="
                        width: 100%;
                        padding: 8px 12px;
                        border: 1px solid #d1d5db;
                        border-radius: 6px;
                        font-size: 14px;
                        font-family: inherit;
                        resize: vertical;
                    "
                ></textarea>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeCreateAccountModal()"
                >
                    取消
                </button>
                <button type="submit" class="btn btn-primary">创建</button>
            </div>
        </form>
    </div>
</div>

<!-- 编辑账户弹窗 -->
<div id="editAccountModal" class="modal" style="display: none">
    <div class="modal-content">
        <div class="modal-header">
            <h3>编辑账户</h3>
            <button class="modal-close" onclick="closeEditAccountModal()">
                &times;
            </button>
        </div>
        <form id="editAccountForm" onsubmit="handleEditAccount(event)">
            <input type="hidden" id="edit_account_name" name="name" />
            <div class="form-group">
                <label>账户名</label>
                <input
                    type="text"
                    id="edit_account_name_display"
                    disabled
                    style="background-color: #f3f4f6; cursor: not-allowed"
                />
            </div>
            <div class="form-group">
                <label for="edit_account_org">组织</label>
                <input
                    type="text"
                    id="edit_account_org"
                    name="organization"
                    autocomplete="off"
                />
            </div>
            <div class="form-group">
                <label for="edit_account_description">描述</label>
                <textarea
                    id="edit_account_description"
                    name="description"
                    rows="3"
                    style="
                        width: 100%;
                        padding: 8px 12px;
                        border: 1px solid #d1d5db;
                        border-radius: 6px;
                        font-size: 14px;
                        font-family: inherit;
                        resize: vertical;
                    "
                ></textarea>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeEditAccountModal()"
                >
                    取消
                </button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

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

    async function loadAccounts() {
        const tbody = document.getElementById("accountsTableBody");
        const accounts = await fetchAccounts();

        if (!accounts || accounts.length === 0) {
            tbody.innerHTML =
                '<tr><td colspan="10" class="text-center py-8 text-gray-500">暂无账户数据</td></tr>';
            document.getElementById("accountCount").textContent = "0";
            return;
        }

        tbody.innerHTML = accounts
            .map((account) => {
                const coordinators =
                    account.coordinators && account.coordinators.length > 0
                        ? account.coordinators.join(", ")
                        : "—";
                const flags =
                    account.flags && account.flags.length > 0
                        ? account.flags.join(", ")
                        : "—";
                const cpu = account.cpu_minutes == null ? "无限" : `${(account.cpu_minutes / 60).toFixed(2)} h`;
                const cpuRemaining = account.cpu_remaining_minutes == null
                    ? (account.cpu_minutes == null ? "无限" : "—")
                    : `${(account.cpu_remaining_minutes / 60).toFixed(2)} h`;
                const gpu = account.gpu_minutes == null ? "无限" : `${(account.gpu_minutes / 60).toFixed(2)} h`;
                const gpuRemaining = account.gpu_remaining_minutes == null
                    ? (account.gpu_minutes == null ? "无限" : "—")
                    : `${(account.gpu_remaining_minutes / 60).toFixed(2)} h`;
                return `
                <tr>
                    <td><strong>${account.name}</strong></td>
                    <td>${account.organization || "—"}</td>
                    <td>${account.description || "—"}</td>
                    <td style="font-size: 13px; color: #6b7280;">${coordinators}</td>
                    <td style="font-size: 13px; color: #6b7280;">${flags}</td>
                    <td>${cpu}</td><td>${cpuRemaining}</td><td>${gpu}</td><td>${gpuRemaining}</td>
                    <td class="col-actions"><div class="data-table-actions">
                        <button class="btn btn-secondary" style="padding:4px 8px;font-size:12px" onclick="showAccountTresModal('${account.name}')">额度</button>
                        <button class="btn btn-secondary"
                                style="padding: 4px 12px; font-size: 12px; margin-right: 4px;"
                                onclick="showEditAccountModal('${account.name}')">编辑</button>
                        <button class="btn"
                                style="padding: 4px 12px; font-size: 12px; background-color: #dc3023; color: white;"
                                onclick="deleteAccountConfirm('${account.name}')">删除</button>
                    </div></td>
                </tr>`;
            })
            .join("");

        document.getElementById("accountCount").textContent = accounts.length;
    }

    async function showAccountTresModal(accountName) {
        const response = await fetch(`/api/slurm/accounts/${encodeURIComponent(accountName)}/tres-minutes`);
        const data = response.ok ? await response.json() : {};
        document.getElementById("account_tres_name").value = accountName;
        document.getElementById("accountTresModalTitle").textContent = `账户核时/卡时限额：${accountName}`;
        document.getElementById("account_cpu_hours").value = data.cpu_minutes == null ? "" : (data.cpu_minutes / 60);
        document.getElementById("account_gpu_hours").value = data.gpu_minutes == null ? "" : (data.gpu_minutes / 60);
        document.getElementById("account_tres_comment").value = "";
        document.getElementById("accountTresModal").style.display = "flex";
    }
    function closeAccountTresModal() { document.getElementById("accountTresModal").style.display = "none"; }
    async function handleAccountTresSubmit(event) {
        event.preventDefault();
        const cpu = document.getElementById("account_cpu_hours").value;
        const gpu = document.getElementById("account_gpu_hours").value;
        if (cpu === "" && gpu === "") { showToast("至少填写一种额度", "error"); return; }
        const payload = { comment: document.getElementById("account_tres_comment").value };
        if (cpu !== "") payload.cpu_minutes = Math.round(Number(cpu) * 60);
        if (gpu !== "") payload.gpu_minutes = Math.round(Number(gpu) * 60);
        if (await updateAccountTRES(document.getElementById("account_tres_name").value, payload)) {
            closeAccountTresModal(); loadAccounts();
        }
    }

    /* ── 创建账户 ───────────────────────────────────────────── */

    function showCreateAccountModal() {
        document.getElementById("createAccountForm").reset();
        document.getElementById("createAccountModal").style.display = "flex";
    }

    function closeCreateAccountModal() {
        document.getElementById("createAccountModal").style.display = "none";
    }

    async function handleCreateAccount(event) {
        event.preventDefault();
        const fd = new FormData(event.target);
        const accountData = {
            name: fd.get("name"),
            organization: fd.get("organization") || "",
            description: fd.get("description") || "",
        };

        const success = await createAccount(accountData);
        if (success) {
            closeCreateAccountModal();
            loadAccounts();
        }
    }

    /* ── 编辑账户 ───────────────────────────────────────────── */

    async function showEditAccountModal(accountName) {
        const accounts = await fetchAccounts();
        const target = accounts.find((a) => a.name === accountName);
        if (!target) {
            showToast("获取账户信息失败", "error");
            return;
        }

        document.getElementById("edit_account_name").value = accountName;
        document.getElementById("edit_account_name_display").value = accountName;
        document.getElementById("edit_account_org").value =
            target.organization || "";
        document.getElementById("edit_account_description").value =
            target.description || "";
        document.getElementById("editAccountModal").style.display = "flex";
    }

    function closeEditAccountModal() {
        document.getElementById("editAccountModal").style.display = "none";
    }

    async function handleEditAccount(event) {
        event.preventDefault();
        const fd = new FormData(event.target);
        const accountName = fd.get("name");
        const accountData = {};

        const organization = fd.get("organization");
        if (organization !== null && organization !== undefined) {
            accountData.organization = organization;
        }
        const description = fd.get("description");
        if (description !== null && description !== undefined) {
            accountData.description = description;
        }

        const success = await updateAccount(accountName, accountData);
        if (success) {
            closeEditAccountModal();
            loadAccounts();
        }
    }

    /* ── 删除账户 ───────────────────────────────────────────── */

    async function deleteAccountConfirm(accountName) {
        if (!confirm(`确定要删除账户 "${accountName}" 吗？此操作无法撤销！`))
            return;
        const success = await deleteAccount(accountName);
        if (success) loadAccounts();
    }

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

    document.addEventListener("DOMContentLoaded", () => {
        loadAccounts();
        enableTableSorting("accountsTable");
    });
</script>
{% endblock %}