/**
 * AuditSection.js — حسابرسیِ پیوسته (فاز ۵)
 * داشبوردِ کنترل‌های زنده: انطباق با بانک آرتیکل، نقصِ بُعد، سلامتِ اسناد،
 * یکپارچگیِ داده، و ناهنجاریِ مبلغ. هر کنترل = یک کوئریِ همیشه‌فعال.
 */

import SectionBase from "../SectionBase.js";
const BaseView = SectionBase;

const SEV = {
    ok:   { label: "سالم",  color: "#059669", bg: "#dcfce7", icon: "✓" },
    warn: { label: "هشدار", color: "#b45309", bg: "#fef3c7", icon: "⚠" },
    fail: { label: "خطا",   color: "#dc2626", bg: "#fee2e2", icon: "✗" },
};

export default class AuditSection extends BaseView {

    static title = "";

    constructor(props = {}) {
        super(props);
        this.api  = props.api;
        this._data = null;
    }

    async template() {
        return `
            <div class="event-toolbar">
                <button class="acc-btn acc-btn--primary acc-btn--sm" data-ref="runBtn">🔄 اجرای کنترل‌ها</button>
                <span class="audit-overall" data-ref="overall" style="margin-right:auto;"></span>
            </div>
            <div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:10px 14px;
                        margin-bottom:14px;font-size:12px;color:#1e40af;line-height:1.7;">
                <strong>📌 حسابرسیِ پیوسته:</strong> چون هر آرتیکل اتمی و تراز است و از بانکِ آرتیکل می‌آید،
                بیشترِ کنترل‌های حسابرسی به کوئریِ زنده تبدیل می‌شوند — نه نمونه‌گیریِ پایان‌سال.
            </div>
            <div data-ref="grid"></div>
        `;
    }

    async afterRender() {
        this.on(this.ref("runBtn"), "click", () => this._load());
        await this._load();
    }

    async _load() {
        const grid = this.ref("grid");
        grid.innerHTML = `<div class="acc-loading"><div class="acc-spinner"></div>در حال اجرای کنترل‌ها...</div>`;
        try {
            const res = await this.api.get("/accounting/audit");
            this._data = res?.data ?? null;
            if (!this._data) throw new Error("داده‌ای دریافت نشد");
            this._render();
        } catch (e) {
            grid.innerHTML = `<div class="acc-error">خطا در اجرای حسابرسی: ${this.escape(e?.message ?? "")}</div>`;
        }
    }

    _render() {
        const d = this._data;
        const s = d.summary;
        const ov = SEV[s.overall] ?? SEV.ok;
        const overall = this.ref("overall");
        if (overall) {
            overall.innerHTML = `<span class="status-badge" style="background:${ov.bg};color:${ov.color};">
                ${ov.icon} وضعیتِ کلی: ${ov.label}</span>
                <small style="color:#94a3b8;margin-right:8px;">
                ${(s.confirmed_flows ?? 0).toLocaleString("fa-IR")} آرتیکلِ تأییدشده · ${s.fails} خطا · ${s.warns} هشدار</small>`;
        }

        this.ref("grid").innerHTML = `<div class="audit-grid">${d.controls.map((c, i) => this._cardHtml(c, i)).join("")}</div>`;

        this.ref("grid").querySelectorAll(".audit-card__head").forEach(h => {
            h.addEventListener("click", () => {
                const card = h.closest(".audit-card");
                card.classList.toggle("audit-card--open");
            });
        });
    }

    _cardHtml(c, idx) {
        const sev = SEV[c.severity] ?? SEV.ok;
        const hasRows = (c.rows || []).length > 0;
        const body = hasRows ? `
            <div class="audit-card__body">
                <table class="flows-table">
                    <thead><tr>${c.headers.map(h => `<th>${this.escape(h)}</th>`).join("")}</tr></thead>
                    <tbody>
                        ${c.rows.map(r => `<tr>${r.map(cell => `<td>${this.escape(String(cell))}</td>`).join("")}</tr>`).join("")}
                    </tbody>
                </table>
                ${c.count > c.rows.length ? `<div style="font-size:11px;color:#94a3b8;padding:6px 0;">نمایش ${c.rows.length} از ${c.count} مورد</div>` : ""}
            </div>` : "";

        return `
            <div class="audit-card ${idx === 0 && hasRows ? "audit-card--open" : ""}" style="border-color:${sev.color}33;">
                <div class="audit-card__head">
                    <span class="audit-card__title">${this.escape(c.title)}</span>
                    <span class="status-badge" style="background:${sev.bg};color:${sev.color};">${sev.icon} ${sev.label}${c.count ? " · " + c.count : ""}</span>
                    ${hasRows ? `<span class="audit-card__toggle">▾</span>` : ""}
                </div>
                <div class="audit-card__summary">${this.escape(c.summary || "")}</div>
                ${body}
            </div>`;
    }
}
