/**
 * نمای مرکز کد نوسازی — اتصال پرونده‌های ملک به GIS و ERP
 */
import { renderGisParcelPanel, bindGisParcelPanel } from './melk-gis-panel.js';

const STATUS_CFG = {
    open:        { label: 'باز',      color: '#3b82f6' },
    in_progress: { label: 'در جریان', color: '#f59e0b' },
    review:      { label: 'بررسی',    color: '#8b5cf6' },
    closed:      { label: 'بسته',     color: '#94a3b8' },
};

export function melkHubEsc(t) {
    return String(t ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

export function renderRenovationHubSearch(esc = melkHubEsc) {
    return `
    <div class="em-reno-hub-search">
        <label class="em-reno-hub-label">کد نوسازی</label>
        <div class="em-reno-hub-search-row">
            <input type="text" class="red-inp em-reno-code-inp" data-ref="renoCodeInput"
                   placeholder="مثلاً 1-14-18-23-0-0-0" dir="ltr">
            <button type="button" class="red-btn red-btn--primary" data-ref="renoSearchBtn">🔍 نمایش پرونده کامل</button>
        </div>
        <div class="em-reno-suggest" data-ref="renoSuggest"></div>
        <p class="em-reno-hint">کد نوسازی از نقشه هوشمند ERP استخراج می‌شود — همه پرونده‌های ملک، اطلاعات GIS و کمیسیون در یک نما.</p>
    </div>`;
}

export function renderRenovationHub(data, esc = melkHubEsc, opts = {}) {
    const gis = data.gis;
    const parcelFull = data.parcel_full || null;
    const cases = data.melk_cases || [];
    const commission = data.commission || {};
    const blockParcels = data.block_parcels || [];
    const blockCases = data.block_cases || [];

    const panelParcel = parcelFull || (gis ? {
        id: gis.parcel_id,
        parcel_id: gis.parcel_id,
        code: gis.code,
        block_code: gis.block_code,
        address: gis.address,
        status: gis.status,
        district_name: gis.district_name,
        neighborhood_name: gis.neighborhood_name,
        land: gis.land,
        building: gis.building,
        use: gis.use,
        owners: gis.owners,
        units: gis.units,
        score: gis.score || { score: 0, level: 'risky' },
    } : null);

    const gisHtml = panelParcel ? `
    <aside class="em-reno-gis-sidebar">
        ${renderGisParcelPanel(panelParcel, esc, { erpUrl: opts.erpUrl })}
    </aside>` : `
    <aside class="em-reno-gis-sidebar em-reno-gis-sidebar--empty">
        <div class="em-empty-inline">پارسل GIS با این کد یافت نشد — فقط پرونده‌های ملک نمایش داده می‌شوند.</div>
    </aside>`;

    const casesHtml = cases.length ? `
    <section class="em-reno-section">
        <h3 class="em-reno-section-title">📋 پرونده‌های اقتصاد ملک (${cases.length})</h3>
        <div class="em-reno-case-grid">
            ${cases.map(c => {
                const st = STATUS_CFG[c.status] || STATUS_CFG.open;
                return `<button type="button" class="em-reno-case-card" data-case-id="${c.id}">
                    <div class="em-reno-case-top">
                        <span class="em-case-key">${esc(c.case_key)}</span>
                        <span class="em-status" style="background:${st.color}">${esc(c.status_label || st.label)}</span>
                    </div>
                    <div class="em-reno-case-title">${esc(c.title)}</div>
                    <div class="em-reno-case-meta">
                        <span>👥 ${c.participant_count || 0}</span>
                        <span>📝 ${c.note_count || 0}</span>
                    </div>
                </button>`;
            }).join('')}
        </div>
    </section>` : '<div class="em-empty-inline">پرونده ملکی برای این کد ثبت نشده</div>';

    const commHtml = commission.available && commission.file_count ? `
    <section class="em-reno-section">
        <h3 class="em-reno-section-title">⚖️ کمیسیون ماده ۱۰۰ (${commission.file_count})</h3>
        <div class="em-reno-comm-list">
            ${(commission.files || []).map(f => `
                <div class="em-reno-comm-item">
                    <strong>${esc(f.OwnerName || '—')}</strong>
                    <span>${esc(f.CI_Commission || f.CI_CommissionType || '')}</span>
                    <span class="em-reno-comm-date">${esc(f.CommissionDate || '')}</span>
                </div>`).join('')}
        </div>
    </section>` : '';

    const blockHtml = (blockParcels.length > 1 || blockCases.length) ? `
    <section class="em-reno-section em-reno-section--block">
        <h3 class="em-reno-section-title">🧱 بلوک ${esc(data.block_code || '')}</h3>
        ${blockParcels.length ? `<p class="em-reno-block-note">${blockParcels.length} ملک در این بلوک</p>` : ''}
        ${blockCases.length ? `<div class="em-reno-block-cases">پرونده‌های مرتبط بلوک: ${blockCases.map(c =>
            `<button type="button" class="em-link-btn" data-block-case="${c.id}">${esc(c.case_key)}</button>`).join(' ')}</div>` : ''}
    </section>` : '';

    return `
    <div class="em-reno-hub" data-reno-code="${esc(data.renovation_code)}">
        <div class="em-reno-hub-head">
            <div class="em-reno-hub-code" dir="ltr">${esc(data.renovation_code)}</div>
            <div class="em-reno-hub-sub">مرکز یکپارچه کد نوسازی</div>
        </div>
        <div class="em-reno-hub-layout">
            ${gisHtml}
            <div class="em-reno-hub-main">
                ${casesHtml}
                ${commHtml}
                ${blockHtml}
            </div>
        </div>
    </div>`;
}

export function bindRenovationHub(root, { request, esc, erpUrl, onOpenCase, onSearch, parcelFull }) {
    if (!root) return;
    const inp = root.querySelector('[data-ref="renoCodeInput"]');
    const btn = root.querySelector('[data-ref="renoSearchBtn"]');
    const suggest = root.querySelector('[data-ref="renoSuggest"]');

    const doSearch = () => {
        const code = inp?.value?.trim();
        if (!code) return;
        onSearch?.(code);
    };

    btn?.addEventListener('click', doSearch);
    inp?.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') { e.preventDefault(); doSearch(); }
    });

    let t;
    inp?.addEventListener('input', () => {
        clearTimeout(t);
        t = setTimeout(async () => {
            const q = inp.value.trim();
            if (q.length < 2 || !request) { if (suggest) suggest.innerHTML = ''; return; }
            try {
                const res = await request('GET', `melk/renovation-codes?q=${encodeURIComponent(q)}`);
                const rows = res?.data ?? [];
                if (!suggest) return;
                suggest.innerHTML = rows.map(r =>
                    `<button type="button" class="em-reno-suggest-item" data-code="${esc(r.renovation_code)}">${esc(r.renovation_code)}</button>`
                ).join('');
                suggest.querySelectorAll('.em-reno-suggest-item').forEach(b => {
                    b.addEventListener('click', () => {
                        inp.value = b.dataset.code;
                        suggest.innerHTML = '';
                        doSearch();
                    });
                });
            } catch { /* */ }
        }, 280);
    });

    root.querySelector('[data-ref="openGisMapBtn"]')?.addEventListener('click', () => {
        const code = root.querySelector('.em-reno-hub')?.dataset.renoCode;
        if (code) sessionStorage.setItem('acc_gis_search_code', code);
        window.open((erpUrl || '/acc-engine/') + 'index.php?tab=gis', '_blank');
    });

    if (parcelFull) {
        bindGisParcelPanel(root, { parcel: parcelFull, esc, erpUrl });
    }

    root.querySelectorAll('[data-case-id]').forEach(el => {
        el.addEventListener('click', () => onOpenCase?.(+el.dataset.caseId));
    });
    root.querySelectorAll('[data-block-case]').forEach(el => {
        el.addEventListener('click', () => onOpenCase?.(+el.dataset.blockCase));
    });
}
