/**
 * CommissionViewerSection.js — نمایش پرونده‌های کمیسیون ماده ۱۰۰ برای یک کد نوسازی
 */
import SectionBase from "../../accounting/SectionBase.js";

const VOTE_TYPES = {
    1: { label:'جریمه',          color:'#f59e0b', icon:'💰' },
    3: { label:'تخریب / قلع بنا', color:'#ef4444', icon:'🔨' },
    4: { label:'سایر',           color:'#64748b', icon:'📋' },
    8: { label:'برائت',           color:'#10b981', icon:'✅' },
    9: { label:'منتفی',           color:'#94a3b8', icon:'➖' },
    12:{ label:'اعاده به حالت اولیه', color:'#dc2626', icon:'↩️' },
};

const COMMISSION_TYPE = {
    1: 'بدوی',
    2: 'تجدیدنظر',
    4: 'اصلاحی',
};

/* نسخه متنی نوع رأی (در ستون VoteType جدول commission متن فارسی است) */
const VOTE_TYPES_LABELS = {
    'جريمه':                { color:'#f59e0b' },
    'جریمه':                { color:'#f59e0b' },
    'تخريب':                { color:'#ef4444' },
    'تخریب':                { color:'#ef4444' },
    'برائت':                { color:'#10b981' },
    'منتفی':                { color:'#94a3b8' },
    'منتفي':                { color:'#94a3b8' },
    'ساير':                 { color:'#64748b' },
    'سایر':                 { color:'#64748b' },
    'اعاده به حالت اولیه':  { color:'#dc2626' },
};

export default class CommissionViewerSection extends SectionBase {

    constructor(props = {}) {
        super(props);
        this._initialCode = props.initialCode ?? null;
        this._currentCode = null;
        this._data        = null;
    }

    async template() {
        return `
        <div class="acc-section-wrap">
            <div class="acc-toolbar">
                <h2 class="acc-section-title">🔨 کمیسیون ماده ۱۰۰</h2>
                <div style="display:flex;gap:8px;align-items:center;">
                    <input type="text" data-ref="codeInput"
                           placeholder="کد نوسازی... مثلاً 10-76-363-21-1-0-0"
                           class="acc-input"
                           dir="ltr"
                           style="width:280px;text-align:center;font-family:monospace;">
                    <button class="acc-btn acc-btn--primary" data-ref="searchBtn">🔍 جستجو</button>
                    <button class="acc-btn acc-btn--secondary" data-ref="refreshBtn">🔄</button>
                </div>
            </div>
            <div data-ref="wrap"><div class="acc-empty">کد نوسازی را وارد کنید</div></div>
        </div>`;
    }

    async afterRender() {
        this.on(this.ref("searchBtn"),  "click", () => this._load());
        this.on(this.ref("refreshBtn"), "click", () => this._load(true));
        this.on(this.ref("codeInput"),  "keydown", e => {
            if (e.key === "Enter") { e.preventDefault(); this._load(); }
        });

        if (this._initialCode) {
            this.ref("codeInput").value = this._initialCode;
            await this._load();
        }
    }

    async _load(forceRefresh = false) {
        const code = this.ref("codeInput")?.value?.trim();
        if (!code) { this._toast("کد را وارد کنید", "#f59e0b"); return; }

        this._currentCode = code;
        this.ref("wrap").innerHTML = `<div class="acc-loading">⏳ بارگذاری پرونده‌ها...</div>`;
        try {
            const res = await this.api.get("/commission/by-code", { code });
            this._data = res;
            this._render();
        } catch(e) {
            this.ref("wrap").innerHTML = `<div class="acc-error">❌ خطا در بارگذاری</div>`;
        }
    }

    _render() {
        const d = this._data;
        if (!d?.files?.length) {
            this.ref("wrap").innerHTML = `
            <div class="acc-empty" style="padding:40px;text-align:center;">
                <div style="font-size:48px;">📭</div>
                <div style="margin-top:8px;">پرونده‌ای برای کد <b>${this.escape(d?.code)}</b> یافت نشد</div>
            </div>`;
            return;
        }

        this.ref("wrap").innerHTML = `
        ${this._renderSummary(d)}
        ${this._renderTimeline(d.files)}
        ${this._renderFiles(d.files)}
        `;

        // bind accordion (details/summary HTML native)
        // bind tab کلیک‌های داخلی
        this.ref("wrap").querySelectorAll("[data-vote-id]").forEach(el =>
            el.addEventListener("click", () => this._showVoteDetail(el.dataset.voteId))
        );
    }

    _renderSummary(d) {
        const s = d.summary ?? {};
        return `
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px;">
            <div style="background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;padding:12px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">📁 پرونده‌ها</div>
                <div style="font-size:24px;font-weight:700;">${s.files_count ?? 0}</div>
            </div>
            <div style="background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;padding:12px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">⚠️ تخلفات</div>
                <div style="font-size:24px;font-weight:700;">${s.trepass_count ?? 0}</div>
            </div>
            <div style="background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;padding:12px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">⚖️ رأی‌ها</div>
                <div style="font-size:24px;font-weight:700;">${s.votes_count ?? 0}</div>
            </div>
            <div style="background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:12px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">📋 خلاصه</div>
                <div style="font-size:24px;font-weight:700;">${s.summary_count ?? 0}</div>
            </div>
            <div style="background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:12px;border-radius:10px;">
                <div style="font-size:11px;opacity:.85;">💰 جمع جریمه</div>
                <div style="font-size:16px;font-weight:700;">${this._fmt(s.total_penalty)} ﷼</div>
            </div>
            ${s.first_date ? `
            <div style="background:#fff;border:1px solid #e2e8f0;padding:12px;border-radius:10px;">
                <div style="font-size:11px;color:#64748b;">📅 بازه</div>
                <div style="font-size:12px;font-weight:700;color:#475569;margin-top:4px;">از ${s.first_date}</div>
                <div style="font-size:12px;font-weight:700;color:#475569;">تا ${s.last_date}</div>
            </div>` : ''}
        </div>`;
    }

    _renderTimeline(files) {
        // ادغام همه رأی‌ها به یک timeline زمانی
        const events = [];
        files.forEach(f => {
            if (f.UrbanRequestDate) events.push({ date: f.UrbanRequestDate, type: 'request', file: f, label: `📥 درخواست پرونده #${f.UrbanNidKartablItem ?? '—'}` });
            if (f.CommissionDate)   events.push({ date: f.CommissionDate,   type: 'commission', file: f, label: `🏛️ کمیسیون پرونده #${f.UrbanNidKartablItem ?? '—'}` });
            (f.votes ?? []).forEach(v => {
                const vt = VOTE_TYPES[v.CI_VoteType] ?? { label:'سایر', color:'#64748b', icon:'📋' };
                events.push({
                    date: v.VoteDate, type: 'vote', file: f, vote: v,
                    label: `${vt.icon} رأی ${vt.label} ${v.VoteValue > 0 ? '— '+this._fmt(v.VoteValue)+' ﷼' : ''}`,
                    color: vt.color,
                });
            });
        });
        events.sort((a, b) => (a.date ?? '').localeCompare(b.date ?? ''));

        if (!events.length) return '';
        return `
        <details style="margin-bottom:14px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
            <summary style="padding:10px 14px;cursor:pointer;font-weight:700;background:#f8fafc;">
                ⏱️ Timeline رویدادها (${events.length})
            </summary>
            <div style="padding:14px;">
                <div style="border-right:2px solid #cbd5e1;padding-right:14px;">
                    ${events.map(e => `
                    <div style="position:relative;padding:6px 0;">
                        <div style="position:absolute;right:-21px;top:10px;width:12px;height:12px;background:${e.color ?? '#3b82f6'};border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px ${e.color ?? '#3b82f6'};"></div>
                        <div style="font-size:12px;font-weight:600;color:#1e293b;">${e.label}</div>
                        <div style="font-size:11px;color:#94a3b8;">${e.date ?? ''}</div>
                    </div>`).join("")}
                </div>
            </div>
        </details>`;
    }

    _renderFiles(files) {
        return files.map((f, idx) => this._renderFile(f, idx)).join("");
    }

    _renderFile(f, idx) {
        const com = COMMISSION_TYPE[f.CI_Commission] ?? `نوع ${f.CI_Commission ?? '—'}`;
        const statusColor = f.IsRun == 1 ? '#10b981' : (f.votes.length ? '#3b82f6' : '#f59e0b');

        return `
        <details ${idx === 0 ? 'open' : ''} style="margin-bottom:10px;background:#fff;border:1.5px solid ${statusColor};border-radius:10px;overflow:hidden;">
            <summary style="padding:12px 14px;cursor:pointer;background:${statusColor}1a;">
                <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;">
                    <div>
                        <b style="font-size:14px;color:${statusColor};">📁 پرونده #${this.escape(f.UrbanNidKartablItem ?? '—')}</b>
                        <small style="color:#64748b;margin-right:8px;">${com}</small>
                    </div>
                    <div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center;">
                        <span style="background:${statusColor};color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;">${this.escape(f.status_label)}</span>
                        ${f.total_penalty > 0 ? `<span style="background:#fef3c7;color:#92400e;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;">💰 ${this._fmt(f.total_penalty)} ﷼</span>` : ''}
                    </div>
                </div>
                <div style="margin-top:6px;font-size:12px;color:#64748b;">
                    👤 ${this.escape(f.OwnerName ?? '—')}
                    ${f.Regplaque ? ` | پلاک ثبتی: ${this.escape(f.Regplaque)}` : ''}
                    ${f.CommissionDate ? ` | 📅 ${f.CommissionDate}` : ''}
                </div>
                ${f.Address ? `<div style="margin-top:4px;font-size:12px;color:#475569;">📍 ${this.escape(f.Address)}</div>` : ''}
            </summary>

            <div style="padding:14px;">
                ${this._renderFileMeta(f)}
                ${this._renderTrepassList(f.trepasses)}
                ${this._renderVoteList(f.votes, f.trepasses)}
                ${this._renderSummaryRows(f.summary_rows)}
                ${this._renderAdminInfo(f)}
            </div>
        </details>`;
    }

    /** تخلفات از wp_gis_vote_result */
    _renderTrepassList(trepasses) {
        if (!trepasses?.length) return '<div style="color:#94a3b8;font-size:12px;padding:6px;">⚠️ تخلفی ثبت نشده</div>';
        return `
        <h4 style="margin:8px 0 6px 0;font-size:13px;color:#475569;">⚠️ تخلفات (${trepasses.length})</h4>
        <div style="display:flex;flex-direction:column;gap:4px;">
        ${trepasses.map(t => {
            const max = parseFloat(t.MaxPenalty) || 0;
            return `
            <div style="background:#fef3c7;border-right:3px solid #f59e0b;padding:8px 12px;border-radius:6px;font-size:12px;">
                <div style="display:flex;justify-content:space-between;align-items:start;gap:8px;flex-wrap:wrap;">
                    <div style="flex:1;min-width:0;">
                        <b>${this.escape(t.Title ?? '—')}</b>
                        ${t.TrepassValue ? `<span style="color:#7c2d12;margin-right:6px;">— ${t.TrepassValue} م²</span>` : ''}
                        ${t.Floor != null && t.Floor !== '' ? `<small style="color:#92400e;margin-right:6px;">طبقه ${t.Floor}</small>` : ''}
                        ${t.CI_Years ? `<small style="background:#fff;padding:1px 6px;border-radius:4px;margin-right:6px;">سال ${t.CI_Years}</small>` : ''}
                    </div>
                    ${max > 0 ? `<span style="background:#fff;color:#92400e;padding:1px 8px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;">حداکثر ${this._fmt(max)}</span>` : ''}
                </div>
                ${t.Trepass_Comments ? `<div style="margin-top:4px;color:#78350f;font-size:11px;">${this.escape(t.Trepass_Comments)}</div>` : ''}
                ${(t.UsingTitle || t.UsingGroupTitle) ? `<div style="margin-top:3px;font-size:10px;color:#a16207;">${this.escape(t.UsingGroupTitle ?? '')} ${t.UsingTitle ? '— '+this.escape(t.UsingTitle) : ''}</div>` : ''}
            </div>`;
        }).join('')}
        </div>`;
    }

    /** نمایش ردیف‌های خلاصه از wp_gis_commission */
    _renderSummaryRows(rows) {
        if (!rows?.length) return '';
        return `
        <h4 style="margin:14px 0 6px 0;font-size:13px;color:#475569;">📋 خلاصه (از wp_gis_commission) — ${rows.length} ردیف</h4>
        <table class="acc-table" style="font-size:11px;">
            <thead><tr>
                <th>نوع رأی</th><th>نوع کمیسیون</th><th>شماره</th><th>تاریخ</th><th>کاربری</th><th>مبلغ رأی</th>
            </tr></thead>
            <tbody>
            ${rows.map(r => {
                const vt = VOTE_TYPES_LABELS[r.VoteType] ?? { color:'#64748b' };
                return `<tr>
                    <td><span style="background:${vt.color}1a;color:${vt.color};padding:1px 6px;border-radius:6px;font-weight:700;">${this.escape(r.VoteType ?? '—')}</span></td>
                    <td>${this.escape(r.CommissionType ?? '—')}</td>
                    <td style="font-family:monospace;">${this.escape(r.VoteNo ?? '—')}</td>
                    <td>${this.escape(r.VoteDate ?? '—')}</td>
                    <td><small>${this.escape(r.UsingGroup ?? '—')}</small></td>
                    <td>${parseFloat(r.votevalue) > 0 ? '<b>'+this._fmt(r.votevalue)+'</b>' : '—'}</td>
                </tr>`;
            }).join('')}
            </tbody>
        </table>`;
    }

    /** اطلاعات اداری (دبیر، اظهارنظر کارشناس و...) */
    _renderAdminInfo(f) {
        const items = [];
        if (f.SecretariatNo)        items.push(['شماره دبیرخانه', f.SecretariatNo]);
        if (f.PenaltyValue)         items.push(['مقدار جریمه', f.PenaltyValue]);
        if (f.OwnerCellNo)          items.push(['موبایل مالک', f.OwnerCellNo]);
        if (f.OwnerNationalCode)    items.push(['کد ملی مالک', f.OwnerNationalCode]);
        if (f.BackStateTitle)       items.push(['وضعیت', f.BackStateTitle]);
        if (f.WorkflowTitel)        items.push(['Workflow', f.WorkflowTitel]);

        const comments = [];
        if (f.CommissionComments)   comments.push(['💬 توضیح کمیسیون', f.CommissionComments]);
        if (f.Run_Comments)         comments.push(['🏃 توضیح اجرا', f.Run_Comments]);
        if (f.AllUrbanComments)     comments.push(['🏙️ توضیحات شهرسازی', f.AllUrbanComments]);

        if (!items.length && !comments.length) return '';

        return `
        <details style="margin-top:10px;">
            <summary style="cursor:pointer;font-size:12px;color:#3b82f6;">📋 اطلاعات اداری بیشتر</summary>
            ${items.length ? `
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px;background:#f8fafc;padding:8px;border-radius:6px;margin-top:6px;font-size:12px;">
                ${items.map(([k,v]) => `<div><b>${k}:</b> ${this.escape(v)}</div>`).join('')}
            </div>` : ''}
            ${comments.length ? comments.map(([k,v]) => `
            <div style="margin-top:6px;background:#fff7ed;border-right:3px solid #f97316;padding:8px;border-radius:6px;font-size:11px;">
                <b>${k}:</b><br>${this.escape(v)}
            </div>`).join('') : ''}
        </details>`;
    }

    _renderFileMeta(f) {
        const items = [];
        if (f.CurrentArea)        items.push(['متراژ فعلی', f.CurrentArea + ' م²']);
        if (f.DocArea)            items.push(['متراژ سند',   f.DocArea + ' م²']);
        if (f.Density)            items.push(['تراکم',       f.Density + '%']);
        if (f.UsingGroup_Mojood)  items.push(['کاربری',      f.UsingGroup_Mojood]);
        if (f.ExpertName)         items.push(['کارشناس',    f.ExpertName]);
        if (f.VoterUserName)      items.push(['دبیر',        f.VoterUserName]);

        if (!items.length) return '';
        return `
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;background:#f8fafc;padding:8px;border-radius:6px;margin-bottom:10px;font-size:12px;">
            ${items.map(([k,v]) => `<div><b>${k}:</b> ${this.escape(v)}</div>`).join('')}
        </div>`;
    }

    _renderVoteList(votes, trepasses) {
        if (!votes?.length) return '<div style="color:#94a3b8;font-size:12px;padding:6px;margin-top:10px;">⚖️ رأیی صادر نشده</div>';

        const trepassByNid = {};
        (trepasses ?? []).forEach(t => trepassByNid[t.NidTrepass] = t);

        return `
        <h4 style="margin:14px 0 6px 0;font-size:13px;color:#475569;">⚖️ رأی‌ها (${votes.length})</h4>
        <div style="display:flex;flex-direction:column;gap:6px;">
        ${votes.map(v => {
            const vt = VOTE_TYPES[v.CI_VoteType] ?? { label:'سایر', color:'#64748b', icon:'📋' };
            const linkedTitles = (v.trepass_nids ?? [])
                .map(nid => trepassByNid[nid]?.Title)
                .filter(Boolean);
            return `
            <div style="background:${vt.color}1a;border-right:3px solid ${vt.color};padding:10px 12px;border-radius:6px;font-size:12px;">
                <div style="display:flex;justify-content:space-between;align-items:start;gap:8px;flex-wrap:wrap;">
                    <div style="flex:1;min-width:0;">
                        <b style="color:${vt.color};">${vt.icon} ${vt.label}</b>
                        ${v.VoteNo ? `<small style="color:#64748b;margin-right:6px;font-family:monospace;">رأی #${this.escape(v.VoteNo)}</small>` : ''}
                        ${v.VoteDate ? `<small style="color:#94a3b8;margin-right:6px;">📅 ${v.VoteDate}</small>` : ''}
                    </div>
                    ${parseFloat(v.VoteValue) > 0 ? `<span style="background:${vt.color};color:#fff;padding:2px 10px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap;">${this._fmt(v.VoteValue)} ﷼</span>` : ''}
                </div>
                ${linkedTitles.length ? `<div style="margin-top:4px;font-size:11px;color:#64748b;">🔗 برای: ${linkedTitles.map(t => this.escape(t)).join('، ')}</div>` : ''}
                ${v.Vote_Comments ? `<details style="margin-top:6px;"><summary style="cursor:pointer;font-size:11px;color:${vt.color};">📄 متن رأی</summary><div style="margin-top:6px;padding:8px;background:#fff;border-radius:4px;font-size:11px;line-height:1.7;color:#475569;">${this.escape(v.Vote_Comments)}</div></details>` : ''}
            </div>`;
        }).join('')}
        </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;"); }
    _toast(m, b = "#10b981") {
        const t = document.createElement("div");
        t.style.cssText = `position:fixed;bottom:24px;left:24px;background:${b};color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;z-index:9999;`;
        t.textContent = m; document.body.appendChild(t); setTimeout(() => t.remove(), 3000);
    }
}
