/**
 * FinancialsSection.js — داشبورد مالی یکپارچه پروژه
 * اتصال: حسابداری | خرید | فروش واحد | حقوق و دستمزد
 */
import SectionBase from "../../accounting/SectionBase.js";

const fmt = n => Number(n || 0).toLocaleString('fa-IR');

export default class FinancialsSection extends SectionBase {

    constructor(props = {}) {
        super(props);
        this.cpmView    = props.cpmView ?? null;
        this._projectId = null;
        this._data      = null;
        this._subTab    = "overview";
    }

    async template() {
        return `
            <div class="cpm-section-wrap">
                <div class="cpm-section-notice" data-ref="notice">
                    <span>⚠️ لطفاً ابتدا یک پروژه از تب «پروژه‌ها» انتخاب کنید.</span>
                </div>
                <div data-ref="content" style="display:none">
                    <div class="cpm-sub-tabs" data-ref="subTabs">
                        <button class="cpm-sub-tab cpm-sub-tab--active" data-tab="overview">📊 خلاصه مالی</button>
                        <button class="cpm-sub-tab" data-tab="assignments">⚙️ هزینه منابع</button>
                        <button class="cpm-sub-tab" data-tab="purchase">🛒 فاکتورهای خرید</button>
                        <button class="cpm-sub-tab" data-tab="payroll">👥 حقوق مرتبط</button>
                        <button class="cpm-sub-tab" data-tab="sales">🏠 فروش واحدها</button>
                        <button class="cpm-sub-tab" data-tab="events">📒 رویدادهای حسابداری</button>
                    </div>
                    <div data-ref="tabBody" style="margin-top:12px"></div>
                </div>
            </div>
        `;
    }

    async afterRender() { /* notice shown by default */ }

    async onProjectChange(project) {
        this._projectId = project?.id ?? null;
        if (!this._projectId) {
            this.ref("notice").style.display = "flex";
            this.ref("content").style.display = "none";
            return;
        }
        this.ref("notice").style.display = "none";
        this.ref("content").style.display = "block";
        this.ref("subTabs").querySelectorAll(".cpm-sub-tab").forEach(btn =>
            this.on(btn, "click", () => this._switchTab(btn.dataset.tab))
        );
        await this._load();
    }

    async _load() {
        const body = this.ref("tabBody");
        body.innerHTML = `<div class="cpm-loading"><div class="acc-spinner"></div></div>`;
        try {
            const r = await this.api.get(`/pc/projects/${this._projectId}/financials`);
            this._data = r;
            this._renderTab();
        } catch {
            body.innerHTML = `<div class="acc-empty">خطا در بارگذاری داده‌های مالی</div>`;
        }
    }

    _switchTab(tab) {
        this._subTab = tab;
        this.ref("subTabs").querySelectorAll(".cpm-sub-tab").forEach(b =>
            b.classList.toggle("cpm-sub-tab--active", b.dataset.tab === tab)
        );
        this._renderTab();
    }

    _renderTab() {
        const body = this.ref("tabBody");
        if (!this._data) return;
        switch (this._subTab) {
            case "overview":    this._renderOverview(body);    break;
            case "assignments": this._renderAssignments(body); break;
            case "purchase":    this._renderPurchase(body);    break;
            case "payroll":     this._renderPayroll(body);     break;
            case "sales":       this._renderSales(body);       break;
            case "events":      this._renderEvents(body);      break;
        }
    }

    /* ══════════════════════════════════════════════════════════
       ۱. خلاصه مالی
    ══════════════════════════════════════════════════════════ */
    _renderOverview(body) {
        const s = this._data.summary;
        const pct = Math.min(100, s.budget_used_pct);
        const budgetColor = pct >= 90 ? "#dc2626" : pct >= 70 ? "#f59e0b" : "#22c55e";
        const plColor = s.net_pl >= 0 ? "#059669" : "#dc2626";

        body.innerHTML = `
            <div class="fin-kpi-grid">
                <div class="fin-kpi-card">
                    <div class="fin-kpi-card__label">💰 بودجه پروژه</div>
                    <div class="fin-kpi-card__value">${fmt(s.budget)} ریال</div>
                </div>
                <div class="fin-kpi-card">
                    <div class="fin-kpi-card__label">📦 هزینه منابع (تأیید)</div>
                    <div class="fin-kpi-card__value">${fmt(s.total_assignment_confirmed)} ریال</div>
                    <div class="fin-kpi-card__sub">از ${fmt(s.total_assignment_cost)} ریال کل</div>
                </div>
                <div class="fin-kpi-card">
                    <div class="fin-kpi-card__label">🛒 هزینه خرید</div>
                    <div class="fin-kpi-card__value">${fmt(s.total_purchase)} ریال</div>
                </div>
                <div class="fin-kpi-card">
                    <div class="fin-kpi-card__label">👥 هزینه حقوق</div>
                    <div class="fin-kpi-card__value">${fmt(s.total_payroll)} ریال</div>
                </div>
                <div class="fin-kpi-card fin-kpi-card--total">
                    <div class="fin-kpi-card__label">⚖️ کل هزینه‌ها</div>
                    <div class="fin-kpi-card__value">${fmt(s.total_cost)} ریال</div>
                </div>
                <div class="fin-kpi-card">
                    <div class="fin-kpi-card__label">🏠 درآمد فروش</div>
                    <div class="fin-kpi-card__value">${fmt(s.total_revenue)} ریال</div>
                </div>
                <div class="fin-kpi-card fin-kpi-card--pl" style="--pl-color:${plColor}">
                    <div class="fin-kpi-card__label">📈 سود / زیان خالص</div>
                    <div class="fin-kpi-card__value" style="color:${plColor}">
                        ${s.net_pl >= 0 ? "+" : ""}${fmt(s.net_pl)} ریال
                    </div>
                </div>
            </div>

            <div class="fin-budget-bar-wrap">
                <div class="fin-budget-bar-header">
                    <span>🎯 مصرف بودجه</span>
                    <span style="font-weight:700;color:${budgetColor}">${s.budget_used_pct}٪</span>
                </div>
                <div class="fin-budget-bar-track">
                    <div class="fin-budget-bar-fill" style="width:${pct}%;background:${budgetColor}"></div>
                </div>
                <div class="fin-budget-bar-labels">
                    <span>۰</span>
                    <span>${fmt(s.total_cost)} ریال مصرف شده</span>
                    <span>${fmt(s.budget)} ریال بودجه</span>
                </div>
            </div>

            <div class="fin-cost-breakdown">
                <div class="fin-cost-breakdown__title">تفکیک هزینه‌ها</div>
                ${this._buildBreakdownBar(s)}
            </div>
        `;

        // Reload button
        const reloadBtn = document.createElement("button");
        reloadBtn.className = "acc-btn acc-btn--secondary acc-btn--sm";
        reloadBtn.style.marginTop = "14px";
        reloadBtn.textContent = "🔄 بروزرسانی";
        reloadBtn.addEventListener("click", () => this._load());
        body.appendChild(reloadBtn);
    }

    _buildBreakdownBar(s) {
        const total = s.total_cost || 1;
        const parts = [
            { label: "منابع",  val: s.total_assignment_confirmed, color: "#3b82f6" },
            { label: "خرید",   val: s.total_purchase,             color: "#8b5cf6" },
            { label: "حقوق",   val: s.total_payroll,              color: "#f59e0b" },
        ].filter(p => p.val > 0);

        if (!parts.length) return `<div style="color:#94a3b8;font-size:13px">هنوز هزینه‌ای ثبت نشده.</div>`;

        const bars = parts.map(p => {
            const w = ((p.val / total) * 100).toFixed(1);
            return `<div class="fin-breakdown-segment" style="width:${w}%;background:${p.color}"
                         title="${p.label}: ${fmt(p.val)} ریال (${w}٪)"></div>`;
        }).join("");

        const legend = parts.map(p => `
            <div class="fin-breakdown-legend-item">
                <span class="fin-breakdown-dot" style="background:${p.color}"></span>
                <span>${p.label}: ${fmt(p.val)} ریال</span>
            </div>`).join("");

        return `
            <div class="fin-breakdown-bar">${bars}</div>
            <div class="fin-breakdown-legend">${legend}</div>
        `;
    }

    /* ══════════════════════════════════════════════════════════
       ۲. هزینه تخصیص منابع
    ══════════════════════════════════════════════════════════ */
    _renderAssignments(body) {
        const list = this._data.assignment_costs ?? [];
        if (!list.length) {
            body.innerHTML = `<div class="acc-empty">تخصیصی ثبت نشده است.</div>`;
            return;
        }
        const rows = list.map(a => `
            <tr class="${a.is_confirmed ? "fin-row--confirmed" : ""}">
                <td>${this.escape(a.wbs_name || "—")}</td>
                <td>${this.escape(a.task_name)}</td>
                <td>${this.escape(a.resource_name)}<br>
                    <small style="color:#94a3b8">${this._resTypeLabel(a.resource_type)}</small>
                </td>
                <td>${a.quantity} ${this.escape(a.resource_unit || "")}</td>
                <td>${fmt(a.cost_per_unit)}</td>
                <td><strong>${fmt(a.total_cost)}</strong></td>
                <td>
                    ${a.is_confirmed
                        ? `<span class="cpm-badge" style="background:#ecfdf5;color:#059669">✅ تأیید شده</span>
                           <br><small style="color:#94a3b8">رویداد #${a.acc_event_id}</small>`
                        : `<button class="acc-btn acc-btn--success acc-btn--xs" data-confirm="${a.id}">ثبت حسابداری</button>`
                    }
                </td>
            </tr>
        `).join("");

        body.innerHTML = `
            <p class="fin-hint">با کلیک «ثبت حسابداری»، یک رویداد <code>PROJECT_COST</code> در ماژول حسابداری ثبت می‌شود.</p>
            <table class="acc-table" style="width:100%">
                <thead><tr>
                    <th>WBS</th><th>وظیفه</th><th>منبع</th>
                    <th>مقدار</th><th>نرخ واحد</th><th>هزینه کل</th><th>وضعیت</th>
                </tr></thead>
                <tbody>${rows}</tbody>
                <tfoot><tr>
                    <td colspan="5" style="text-align:left;font-weight:700;padding:10px 12px">جمع تأیید شده:</td>
                    <td colspan="2" style="font-weight:700;color:#059669;padding:10px 12px">
                        ${fmt(this._data.summary.total_assignment_confirmed)} ریال
                    </td>
                </tr></tfoot>
            </table>
        `;

        body.querySelectorAll("[data-confirm]").forEach(btn =>
            btn.addEventListener("click", async () => {
                btn.disabled = true; btn.textContent = "در حال ثبت...";
                try {
                    await this.api.post(`/pc/assignments/${btn.dataset.confirm}/confirm`, {});
                    await this._load();
                    this._switchTab("assignments");
                } catch (err) {
                    alert("خطا: " + (err?.message ?? ""));
                    btn.disabled = false; btn.textContent = "ثبت حسابداری";
                }
            })
        );
    }

    _resTypeLabel(t) {
        return { human:"انسانی", equipment:"تجهیزات", material:"مواد", other:"سایر" }[t] ?? t;
    }

    /* ══════════════════════════════════════════════════════════
       ۳. فاکتورهای خرید
    ══════════════════════════════════════════════════════════ */
    _renderPurchase(body) {
        const list = this._data.purchase_invoices ?? [];

        const statusLabel = s => ({
            draft:"پیش‌نویس", finalized:"نهایی‌شده", cancelled:"لغوشده"
        })[s] ?? s;
        const statusColor = s => ({
            draft:"#f59e0b", finalized:"#059669", cancelled:"#dc2626"
        })[s] ?? "#6b7280";

        const rows = list.length ? list.map(i => `
            <tr>
                <td>${this.escape(i.invoice_no)}</td>
                <td>${this.escape(i.supplier_name || "—")}</td>
                <td>${i.invoice_date || "—"}</td>
                <td><span class="cpm-status-badge" style="background:${statusColor(i.status)}22;color:${statusColor(i.status)}">${statusLabel(i.status)}</span></td>
                <td>${fmt(i.net_amount)}</td>
                <td>${fmt(i.vat_amount)}</td>
                <td><strong>${fmt(i.total_amount)}</strong></td>
            </tr>
        `).join("") : `<tr><td colspan="7" style="text-align:center;padding:20px;color:#94a3b8">فاکتور خریدی مرتبط نشده است.<br><small>در ماژول خرید هنگام ثبت فاکتور، پروژه را انتخاب کنید.</small></td></tr>`;

        body.innerHTML = `
            <p class="fin-hint">برای الصاق فاکتور خرید به این پروژه، در ماژول <strong>خرید ← فاکتورها</strong> هنگام ثبت فاکتور، فیلد «پروژه» را پر کنید.</p>
            <table class="acc-table" style="width:100%">
                <thead><tr>
                    <th>شماره فاکتور</th><th>تأمین‌کننده</th><th>تاریخ</th>
                    <th>وضعیت</th><th>مبلغ خالص</th><th>مالیات</th><th>جمع کل</th>
                </tr></thead>
                <tbody>${rows}</tbody>
                ${list.length ? `<tfoot><tr>
                    <td colspan="6" style="text-align:left;font-weight:700;padding:10px 12px">جمع نهایی‌شده:</td>
                    <td style="font-weight:700;color:#7c3aed;padding:10px 12px">${fmt(this._data.summary.total_purchase)} ریال</td>
                </tr></tfoot>` : ""}
            </table>
        `;
    }

    /* ══════════════════════════════════════════════════════════
       ۴. دوره‌های حقوق
    ══════════════════════════════════════════════════════════ */
    _renderPayroll(body) {
        const list = this._data.payroll_periods ?? [];

        const rows = list.length ? list.map(p => `
            <tr>
                <td>${this.escape(p.period_name)}</td>
                <td>${p.period_code}</td>
                <td><span class="cpm-status-badge">${p.status}</span></td>
                <td>${fmt(p.total_gross)}</td>
                <td>${fmt(p.total_deductions)}</td>
                <td><strong>${fmt(p.total_net)}</strong></td>
            </tr>
        `).join("") : `<tr><td colspan="6" style="text-align:center;padding:20px;color:#94a3b8">دوره حقوقی مرتبطی یافت نشد.<br><small>در ماژول حقوق هنگام ایجاد دوره، پروژه را انتخاب کنید.</small></td></tr>`;

        body.innerHTML = `
            <p class="fin-hint">برای الصاق دوره حقوقی به این پروژه، در ماژول <strong>حقوق ← دوره‌ها</strong> هنگام ایجاد دوره، فیلد «پروژه» را پر کنید.</p>
            <table class="acc-table" style="width:100%">
                <thead><tr>
                    <th>دوره</th><th>کد</th><th>وضعیت</th>
                    <th>ناخالص</th><th>کسورات</th><th>خالص</th>
                </tr></thead>
                <tbody>${rows}</tbody>
                ${list.length ? `<tfoot><tr>
                    <td colspan="5" style="text-align:left;font-weight:700;padding:10px 12px">جمع خالص (نهایی):</td>
                    <td style="font-weight:700;color:#f59e0b;padding:10px 12px">${fmt(this._data.summary.total_payroll)} ریال</td>
                </tr></tfoot>` : ""}
            </table>
        `;
    }

    /* ══════════════════════════════════════════════════════════
       ۵. فروش واحدها
    ══════════════════════════════════════════════════════════ */
    _renderSales(body) {
        const list = this._data.sold_units ?? [];

        const rows = list.length ? list.map(u => `
            <tr>
                <td>${this.escape(u.code || "")}</td>
                <td>${this.escape(u.name)}</td>
                <td>${u.floor ?? "—"}</td>
                <td>${fmt(u.area_sqm)} m²</td>
                <td>${this.escape(u.buyer_name || "—")}</td>
                <td>${this.escape(u.invoice_no || "—")}</td>
                <td>${u.invoice_date || "—"}</td>
                <td><strong style="color:#059669">${fmt(u.invoice_amount)}</strong></td>
            </tr>
        `).join("") : `<tr><td colspan="8" style="text-align:center;padding:20px;color:#94a3b8">واحدی فروخته نشده است.</td></tr>`;

        body.innerHTML = `
            <table class="acc-table" style="width:100%">
                <thead><tr>
                    <th>کد</th><th>نام واحد</th><th>طبقه</th><th>متراژ</th>
                    <th>خریدار</th><th>شماره فاکتور</th><th>تاریخ</th><th>مبلغ</th>
                </tr></thead>
                <tbody>${rows}</tbody>
                ${list.length ? `<tfoot><tr>
                    <td colspan="7" style="text-align:left;font-weight:700;padding:10px 12px">جمع درآمد:</td>
                    <td style="font-weight:700;color:#059669;padding:10px 12px">${fmt(this._data.summary.total_revenue)} ریال</td>
                </tr></tfoot>` : ""}
            </table>
        `;
    }

    /* ══════════════════════════════════════════════════════════
       ۶. رویدادهای حسابداری
    ══════════════════════════════════════════════════════════ */
    _renderEvents(body) {
        const list = this._data.acc_events ?? [];

        const stateColor = s => ({
            pending:"#f59e0b", posted:"#059669", confirmed:"#2563eb",
            cancelled:"#dc2626", failed:"#dc2626"
        })[s] ?? "#6b7280";

        const typeLabel = t => ({
            PROJECT_COST: "هزینه پروژه",
            SALE_INVOICE: "فروش واحد",
        })[t] ?? t;

        const rows = list.length ? list.map(e => `
            <tr>
                <td>#${e.id}</td>
                <td><span class="cpm-badge" style="background:#eff6ff;color:#2563eb">${typeLabel(e.event_type)}</span></td>
                <td><span class="cpm-status-badge" style="background:${stateColor(e.workflow_state)}22;color:${stateColor(e.workflow_state)}">${e.workflow_state}</span></td>
                <td><strong>${fmt(e.amount)}</strong></td>
                <td style="font-size:11px;color:#64748b">${this.escape(e.description || "")}</td>
                <td style="font-size:11px">${e.created_at?.slice(0,16) ?? ""}</td>
            </tr>
        `).join("") : `<tr><td colspan="6" style="text-align:center;padding:20px;color:#94a3b8">رویداد حسابداری‌ای یافت نشد.</td></tr>`;

        body.innerHTML = `
            <p class="fin-hint">رویدادهای <code>PROJECT_COST</code> و <code>SALE_INVOICE</code> مرتبط با این پروژه در اینجا نمایش داده می‌شوند.</p>
            <table class="acc-table" style="width:100%">
                <thead><tr>
                    <th>#</th><th>نوع رویداد</th><th>وضعیت</th><th>مبلغ</th><th>توضیحات</th><th>تاریخ</th>
                </tr></thead>
                <tbody>${rows}</tbody>
            </table>
        `;
    }
}
