/**
 * AssetsDashboardSection.js — داشبورد اموال
 */
import SectionBase from "../../accounting/SectionBase.js";

export default class AssetsDashboardSection extends SectionBase {

    async template() {
        return `
        <div class="acc-section-wrap">
            <div class="acc-toolbar">
                <h2 class="acc-section-title">📊 داشبورد اموال</h2>
                <button class="acc-btn acc-btn--secondary" data-ref="refreshBtn">🔄</button>
            </div>
            <div data-ref="wrap"><div class="acc-loading">⏳ بارگذاری...</div></div>
        </div>`;
    }

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

    async _load() {
        this.ref("wrap").innerHTML = `<div class="acc-loading">⏳ بارگذاری...</div>`;
        try {
            const res = await this.api.get("/assets/dashboard");
            this._render(res);
        } catch { this.ref("wrap").innerHTML = `<div class="acc-error">❌ خطا</div>`; }
    }

    _render(d) {
        this.ref("wrap").innerHTML = `
        <!-- KPI -->
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px;">
            <div style="background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;padding:14px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">📦 کل اموال</div>
                <div style="font-size:28px;font-weight:700;">${d.total_assets ?? 0}</div>
            </div>
            <div style="background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:14px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">💰 ارزش دفتری</div>
                <div style="font-size:24px;font-weight:700;">${this._fmt(d.active_value)}</div>
            </div>
            <div style="background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:14px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">🔧 در تعمیر</div>
                <div style="font-size:28px;font-weight:700;">${d.in_repair_count ?? 0}</div>
            </div>
            <div style="background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;padding:14px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">📋 درخواست تعمیر باز</div>
                <div style="font-size:28px;font-weight:700;">${d.open_wo_count ?? 0}</div>
            </div>
            <div style="background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;padding:14px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">📅 نگهداری در راه</div>
                <div style="font-size:28px;font-weight:700;">${d.due_pm_count ?? 0}</div>
            </div>
            <div style="background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff;padding:14px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">💵 هزینه تعمیر (امسال)</div>
                <div style="font-size:22px;font-weight:700;">${this._fmt(d.maintenance_cost_ytd)}</div>
            </div>
        </div>

        <!-- توزیع بر اساس دسته -->
        <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:14px;">
            <h3 style="margin:0 0 12px 0;font-size:14px;">📊 توزیع بر اساس دسته</h3>
            <table class="acc-table">
                <thead><tr><th>دسته</th><th>تعداد</th><th>ارزش دفتری</th></tr></thead>
                <tbody>
                ${(d.by_category ?? []).map(c => `<tr>
                    <td><b>${c.icon} ${this.escape(c.name)}</b></td>
                    <td><span style="background:#dbeafe;color:#1e40af;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;">${c.cnt}</span></td>
                    <td><b style="color:#059669;">${this._fmt(c.value)} ﷼</b></td>
                </tr>`).join("")}
                </tbody>
            </table>
        </div>`;
    }

    _fmt(v) { return new Intl.NumberFormat("fa-IR").format(Math.round(Number(v ?? 0))); }
    escape(s) { return String(s ?? "").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }
}
