/* === drilldown.jsx =================================================
   F5 — Drill-down em 3 níveis + QW3 — Badge "dados simulados".

   DrilldownPanel: drawer lateral que abre sobre o preview. Lê o dataset
   sintético (window.SyntheticData) e navega:
     Nível 1  KPI agregado  (o card clicado abre o painel)
     Nível 2  quebra por dimensão (categoria / fornecedor / filial / mês)
     Nível 3  registro individual (uma PO com timeline de eventos)
   Σ da quebra = agregado do Nível 1 (vem do mesmo dataset → consistente).

   Renderizado dentro de NousPreview → funciona no editor E no link do
   prospect. Controlado por state.drilldown; fechado por padrão.

   Helper global: window.openDrilldown(onSetState, state, { metric, title })
   ===================================================================== */

/* abre o painel a partir de qualquer KPI clicável */
window.openDrilldown = function (onSetState, state, opts) {
    onSetState({
        ...state,
        drilldown: {
            open: true,
            metric: (opts && opts.metric) || 'spend',     /* 'spend' | 'saving' */
            title: (opts && opts.title) || 'Detalhamento',
            dimension: (opts && opts.dimension) || 'category',
            dimValue: null,
            recordId: null,
        },
    });
};

const DD_DIMENSIONS = [
    { id: 'category', label: 'Categoria', field: 'category', icon: 'layers' },
    { id: 'supplier', label: 'Fornecedor', field: 'supplier', icon: 'building' },
    { id: 'site', label: 'Filial', field: 'site', icon: 'package' },
    { id: 'month', label: 'Mês', field: 'ym', icon: 'clock' },
];

function ddMeasure(po, metric) { return metric === 'saving' ? po.saving : po.value; }

/* agrega POs por dimensão; retorna [{key,label,value,count}] desc + total */
function ddBreakdown(pos, dimField, metric) {
    const map = new Map();
    let total = 0;
    for (const po of pos) {
        const k = po[dimField];
        const v = ddMeasure(po, metric);
        total += v;
        const cur = map.get(k) || { key: k, label: k, value: 0, count: 0 };
        cur.value += v; cur.count += 1;
        map.set(k, cur);
    }
    let rows = Array.from(map.values()).sort((a, b) => b.value - a.value);
    /* fornecedor: top 12 + Outros para não estourar a lista */
    if (dimField === 'supplier' && rows.length > 13) {
        const head = rows.slice(0, 12);
        const tail = rows.slice(12);
        head.push({
            key: '__outros__', label: `Outros (${tail.length})`,
            value: tail.reduce((s, r) => s + r.value, 0),
            count: tail.reduce((s, r) => s + r.count, 0), isOthers: true,
        });
        rows = head;
    }
    if (dimField === 'ym') rows = rows.sort((a, b) => a.key.localeCompare(b.key));
    return { rows, total };
}

/* timeline determinística de eventos de uma PO (P2P) */
function ddPoEvents(po) {
    const SD = window.SyntheticData;
    const seed = SD ? SD.hashString(po.id) : 1;
    const r = (seed % 5);
    const [y, m] = po.ym.split('-').map(Number);
    const day = 2 + (seed % 24);
    const base = new Date(y, m - 1, Math.min(28, day));
    const addDays = (d, n) => { const x = new Date(d); x.setDate(x.getDate() + Math.round(n)); return x; };
    const fmt = (d) => d.toLocaleDateString('pt-BR');
    const lt = po.leadTime;
    const steps = [
        { label: 'Requisição de Compra criada', actor: 'ERP', off: 0 },
        { label: 'Aprovação de categoria', actor: 'Comprador', off: 0.8 + r * 0.2 },
        { label: 'Pedido de Compra emitido', actor: 'Agente', off: 1.5 + r * 0.3 },
        { label: 'Recebimento concluído', actor: 'Almoxarifado', off: 1.5 + lt },
        { label: 'Registro NF de entrada', actor: 'Fiscal', off: 3 + lt },
        { label: 'Pagamento ao fornecedor', actor: 'Financeiro', off: 6 + lt + r },
    ];
    return steps.map(s => ({ ...s, date: fmt(addDays(base, s.off)) }));
}

/* ====================== PAINEL ====================== */
function DrilldownPanel({ state, onSetState }) {
    const dd = state.drilldown;
    if (!dd || !dd.open) return null;
    const SD = window.SyntheticData;
    if (!SD) return null;
    const ds = SD.getDataset(state);
    const metric = dd.metric || 'spend';
    const dimDef = DD_DIMENSIONS.find(d => d.id === dd.dimension) || DD_DIMENSIONS[0];

    const close = () => onSetState({ ...state, drilldown: { ...dd, open: false } });
    const setDim = (id) => onSetState({ ...state, drilldown: { ...dd, dimension: id, dimValue: null, recordId: null } });
    const setDimValue = (key) => onSetState({ ...state, drilldown: { ...dd, dimValue: key, recordId: null } });
    const setRecord = (id) => onSetState({ ...state, drilldown: { ...dd, recordId: id } });
    const back = () => {
        if (dd.recordId) return setRecord(null);
        if (dd.dimValue) return setDimValue(null);
        return close();
    };

    const { rows, total } = ddBreakdown(ds.pos, dimDef.field, metric);
    const max = Math.max(...rows.map(r => r.value), 1);
    const level = dd.recordId ? 3 : dd.dimValue ? 2.5 : 2;

    /* registros (Nível 3 lista) */
    const records = dd.dimValue
        ? ds.pos.filter(p => (dd.dimValue === '__outros__'
            ? !rows.slice(0, 12).some(r => r.key === p[dimDef.field])
            : p[dimDef.field] === dd.dimValue))
            .sort((a, b) => ddMeasure(b, metric) - ddMeasure(a, metric))
            .slice(0, 30)
        : [];
    const record = dd.recordId ? ds.pos.find(p => p.id === dd.recordId) : null;

    const dimValueLabel = dd.dimValue === '__outros__' ? 'Outros' : dd.dimValue;

    return (
        <div className="dd-overlay" onMouseDown={(e) => { if (e.target.classList.contains('dd-overlay')) close(); }}>
            <aside className="dd-panel" role="dialog" aria-label="Detalhamento">
                {/* Header + breadcrumb */}
                <div className="dd-head">
                    <div className="dd-crumb">
                        <button className="dd-crumb-link" onClick={() => onSetState({ ...state, drilldown: { ...dd, dimValue: null, recordId: null } })}>
                            {dd.title}
                        </button>
                        {dd.dimValue && <><Icon name="chevron-right" size={11} /><button className="dd-crumb-link" onClick={() => setRecord(null)}>{dimValueLabel}</button></>}
                        {record && <><Icon name="chevron-right" size={11} /><span className="dd-crumb-cur">PO {record.id}</span></>}
                    </div>
                    <button className="dd-close" onClick={close} aria-label="Fechar"><Icon name="x" size={16} /></button>
                </div>

                {/* Métrica + total agregado (consistente com a soma abaixo) */}
                <div className="dd-metricbar">
                    <div className="dd-metric-toggle">
                        <button className={`dd-mt${metric === 'spend' ? ' active' : ''}`} onClick={() => onSetState({ ...state, drilldown: { ...dd, metric: 'spend' } })}>Spend</button>
                        <button className={`dd-mt${metric === 'saving' ? ' active' : ''}`} onClick={() => onSetState({ ...state, drilldown: { ...dd, metric: 'saving' } })}>Saving</button>
                    </div>
                    <div className="dd-total">
                        <span className="dd-total-label">{metric === 'saving' ? 'Saving identificado' : 'Spend endereçável'}</span>
                        <span className="dd-total-value">{SD.fmtBRL(total)}</span>
                    </div>
                </div>

                {/* NÍVEL 3 — registro individual */}
                {record ? (
                    <div className="dd-body">
                        <button className="dd-back" onClick={back}><Icon name="arrow-left" size={12} /> Voltar</button>
                        <div className="dd-record-head">
                            <div className="dd-record-id">Pedido de Compra · {record.id}</div>
                            <div className="dd-record-tags">
                                <span className="dd-tag">{record.category}</span>
                                <span className="dd-tag">{record.site}</span>
                                {record.maverick && <span className="dd-tag dd-tag--warn">maverick</span>}
                                {record.split && <span className="dd-tag dd-tag--warn">split order</span>}
                            </div>
                        </div>
                        <div className="dd-record-grid">
                            <div className="dd-rk"><span>Fornecedor</span><strong>{record.supplier}</strong></div>
                            <div className="dd-rk"><span>Valor</span><strong>{SD.fmtBRL(record.value)}</strong></div>
                            <div className="dd-rk"><span>Saving estimado</span><strong>{SD.fmtBRL(record.saving)}</strong></div>
                            <div className="dd-rk"><span>Lead time</span><strong>{record.leadTime} dias</strong></div>
                            <div className="dd-rk"><span>Status</span><strong>{record.status}</strong></div>
                            <div className="dd-rk"><span>Competência</span><strong>{record.ym}</strong></div>
                        </div>
                        <div className="dd-tl-title">Timeline do processo (P2P)</div>
                        <div className="dd-timeline">
                            {ddPoEvents(record).map((ev, i) => (
                                <div className="dd-tl-row" key={i}>
                                    <span className="dd-tl-dot" />
                                    <div className="dd-tl-main">
                                        <div className="dd-tl-label">{ev.label}</div>
                                        <div className="dd-tl-meta">{ev.actor} · {ev.date}</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                        <button className="dd-action" onClick={close}><Icon name="check" size={12} /> Marcar como revisado</button>
                    </div>
                ) : dd.dimValue ? (
                    /* NÍVEL 2.5 — lista de registros da dimensão */
                    <div className="dd-body">
                        <button className="dd-back" onClick={back}><Icon name="arrow-left" size={12} /> Voltar</button>
                        <div className="dd-list-title">{dimDef.label}: <strong>{dimValueLabel}</strong> · {records.length} pedidos (top)</div>
                        <div className="dd-records">
                            {records.map((po) => (
                                <button className="dd-rec-row" key={po.id} onClick={() => setRecord(po.id)}>
                                    <span className="dd-rec-id">{po.id}</span>
                                    <span className="dd-rec-sup">{po.supplier}</span>
                                    <span className="dd-rec-val">{SD.fmtBRL(ddMeasure(po, metric))}</span>
                                    <Icon name="chevron-right" size={12} />
                                </button>
                            ))}
                        </div>
                    </div>
                ) : (
                    /* NÍVEL 2 — quebra por dimensão */
                    <div className="dd-body">
                        <div className="dd-dim-tabs">
                            {DD_DIMENSIONS.map(d => (
                                <button key={d.id} className={`dd-dim${dd.dimension === d.id ? ' active' : ''}`} onClick={() => setDim(d.id)}>
                                    <Icon name={d.icon} size={12} /> {d.label}
                                </button>
                            ))}
                        </div>
                        <div className="dd-bars">
                            {rows.map((r) => (
                                <button className="dd-bar-row" key={r.key} onClick={() => setDimValue(r.key)}>
                                    <span className="dd-bar-label" title={r.label}>{r.label}</span>
                                    <span className="dd-bar-wrap">
                                        <span className="dd-bar" style={{ width: (r.value / max * 100) + '%' }} />
                                    </span>
                                    <span className="dd-bar-val">{SD.fmtBRL(r.value)}</span>
                                    <span className="dd-bar-pct">{(r.value / total * 100).toFixed(1).replace('.', ',')}%</span>
                                    <Icon name="chevron-right" size={12} />
                                </button>
                            ))}
                        </div>
                        <div className="dd-foot-note">
                            <Icon name="check-circle" size={11} /> Soma das {rows.length} linhas = {SD.fmtBRL(total)} · dados simulados, consistentes entre as telas
                        </div>
                    </div>
                )}
            </aside>
        </div>
    );
}

/* ====================== QW3 — BADGE "dados simulados" ====================== */
function DemoBadge({ state }) {
    const [open, setOpen] = React.useState(false);
    if (state.showDemoBadge === false) return null;
    const empresa = (state.vars && state.vars.empresa) || (state.cosmetic && state.cosmetic.company) || 'a empresa';
    return (
        <div className="demo-badge-wrap">
            {open && (
                <div className="demo-badge-pop" onMouseLeave={() => setOpen(false)}>
                    <div className="demo-badge-pop-title">Dados simulados</div>
                    <p>
                        Esta demonstração usa dados sintéticos plausíveis, gerados a partir do
                        perfil de <strong>{empresa}</strong>. No piloto de 90 dias, todos os
                        números são substituídos pelos dados reais do seu ERP.
                    </p>
                    <a href="https://upflux.ai" target="_blank" rel="noopener noreferrer" className="demo-badge-link">
                        Como funciona o piloto <Icon name="arrow-up-right" size={11} />
                    </a>
                </div>
            )}
            <button className="demo-badge" onClick={() => setOpen(v => !v)} title="Sobre os dados desta demo">
                <Icon name="eye" size={12} />
                <span>Demo · dados simulados</span>
            </button>
        </div>
    );
}

Object.assign(window, { DrilldownPanel, DemoBadge, ddBreakdown });
