/* global React, Icon, BRL, NUM, Ticker, Sparkline, Drawer */


const STATUS_LABELS = {
  aberto: { label: 'EM ABERTO', cls: '' },
  'venc-hoje': { label: 'VENCE HOJE', cls: 'badge-amber' },
  atraso: { label: 'EM ATRASO', cls: 'badge-red' },
  pago: { label: 'PAGO', cls: 'badge-lime' },
};

const NF_STATUS_LABELS = {
  pend: { label: 'AGUARDA APROVAÇÃO', cls: 'badge-amber' },
  aprov: { label: 'APROVADA · CAP CRIADO', cls: 'badge-cyan' },
  pago: { label: 'PAGA', cls: 'badge-lime' },
  recusado: { label: 'RECUSADA', cls: 'badge-red' },
};

const FinanceiroContext = React.createContext({ TITULOS_CAR: [], TITULOS_CAP: [], NFS_CONTRA_BTM: [], reload: () => {}, loading: true });

function MFinanceiro({ onNav }) {
  const [data, setData] = React.useState({ TITULOS_CAR: [], TITULOS_CAP: [], NFS_CONTRA_BTM: [] });
  const [loading, setLoading] = React.useState(true);

  const reload = React.useCallback(async () => {
    try {
      const [car, cap, nfs] = await Promise.all([
        window.dataApi.listTitulos('car'),
        window.dataApi.listTitulos('cap'),
        window.dataApi.listNfsContra(),
      ]);
      setData({ TITULOS_CAR: car, TITULOS_CAP: cap, NFS_CONTRA_BTM: nfs });
    } catch {
      setData({ TITULOS_CAR: [], TITULOS_CAP: [], NFS_CONTRA_BTM: [] });
    } finally {
      setLoading(false);
    }
  }, []);

  React.useEffect(() => { reload(); }, [reload]);

  const TITULOS_CAR = data.TITULOS_CAR;
  const TITULOS_CAP = data.TITULOS_CAP;
  const NFS_CONTRA_BTM = data.NFS_CONTRA_BTM;

  const [tab, setTab] = React.useState('overview');
  const [titulo, setTitulo] = React.useState(null);
  const [tituloTab, setTituloTab] = React.useState('det');
  const [nf, setNf] = React.useState(null);
  const [nfTab, setNfTab] = React.useState('resumo');
  const [showImport, setShowImport] = React.useState(false);
  const [showLanc, setShowLanc] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const showToast = (msg, ms = 4000) => { setToast(msg); setTimeout(() => setToast(null), ms); };

  return (
    <FinanceiroContext.Provider value={{ TITULOS_CAR, TITULOS_CAP, NFS_CONTRA_BTM, reload, loading }}>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow"><span>Gestão Financeira, Contábil e Fiscal</span><span className="chip">M07</span></div>
            <h1 className="page-title">Financeiro · DRE por empenho · Fluxo de caixa 90d</h1>
            <p className="page-sub">Contas a pagar/receber vinculadas a empenhos · Conciliação automática por PDF · NF contra a BTM com aprovação manual.</p>
          </div>
          <div className="flex items-center gap-3">
            <button className="btn" onClick={() => setShowImport(true)}><Icon name="upload" /> Importar extrato PDF</button>
            <button className="btn btn-primary" onClick={() => setShowLanc(true)}><Icon name="plus" /> Novo lançamento</button>
          </div>
        </div>

        <div className="grid-4" style={{ marginBottom: 14 }}>
          <KpiSmall l="A RECEBER 30D" v={BRL(TITULOS_CAR.filter(t => t.status !== 'pago').reduce((a, t) => a + t.valor, 0))} sub={`${TITULOS_CAR.filter(t => t.status !== 'pago').length} títulos`} cls="lime" />
          <KpiSmall l="A PAGAR 30D" v={BRL(TITULOS_CAP.filter(t => t.status !== 'pago').reduce((a, t) => a + t.valor, 0))} sub={`${TITULOS_CAP.filter(t => t.status !== 'pago').length} títulos`} cls="amber" />
          <KpiSmall l="SALDO PROJETADO 30D" v="R$ 1,24M" sub="+R$ 302.610" cls="lime" />
          <KpiSmall l="DRE MTD" v="38.4%" sub="margem líquida" cls="lime" />
        </div>

        <div className="tabs" style={{ marginBottom: 14 }}>
          <div className={`tab ${tab === 'overview' ? 'active' : ''}`} onClick={() => setTab('overview')}>Visão Geral</div>
          <div className={`tab ${tab === 'cap' ? 'active' : ''}`} onClick={() => setTab('cap')}>Contas a Pagar <span className="count">{TITULOS_CAP.length}</span></div>
          <div className={`tab ${tab === 'car' ? 'active' : ''}`} onClick={() => setTab('car')}>Contas a Receber <span className="count">{TITULOS_CAR.length}</span></div>
          <div className={`tab ${tab === 'conc' ? 'active' : ''}`} onClick={() => setTab('conc')}>Conciliação</div>
          <div className={`tab ${tab === 'nf' ? 'active' : ''}`} onClick={() => setTab('nf')}>NF contra BTM <span className="count">{NFS_CONTRA_BTM.filter(n => n.status === 'pend').length}</span></div>
          <div className={`tab ${tab === 'dre' ? 'active' : ''}`} onClick={() => setTab('dre')}>DRE por Empenho</div>
        </div>

        {tab === 'overview' && <Overview />}
        {(tab === 'cap' || tab === 'car') && <ContasTab tipo={tab} onOpen={(t) => { setTitulo(t); setTituloTab('det'); }} />}
        {tab === 'conc' && <Conciliacao />}
        {tab === 'nf' && <NFContra onOpen={(n) => { setNf(n); setNfTab('resumo'); }} />}
        {tab === 'dre' && <DREEmpenho onNav={onNav} />}
      </div>

      {titulo && <TituloDrawer titulo={titulo} onClose={() => setTitulo(null)} tab={tituloTab} onTab={setTituloTab} onNav={onNav} />}
      {nf && <NfDrawer nf={nf} onClose={() => setNf(null)} tab={nfTab} onTab={setNfTab} />}
      {showImport && <ImportExtratoModal onClose={() => setShowImport(false)} onDone={(nome, mov) => { setShowImport(false); showToast(`Extrato ${nome} importado · ${mov} movimentações detectadas · conciliação iniciada (vai pra aba Conciliação)`); setTab('conc'); }} />}
      {showLanc && <NovoLancamentoModal onClose={() => setShowLanc(false)} onCreate={(tipo, id) => { setShowLanc(false); showToast(`${tipo === 'cap' ? 'CAP' : 'CAR'} ${id} criado · status EM ABERTO · vencimento adicionado à agenda do M07`); setTab(tipo); }} />}
      {toast && (
        <div className="alert-banner alert-lime" style={{ position: 'fixed', bottom: 22, right: 22, zIndex: 300, maxWidth: 500, boxShadow: '0 12px 32px rgba(0,0,0,0.5)', animation: 'drawer-fade 0.18s ease-out' }}>
          <Icon name="check" size={14} />
          <div style={{ flex: 1 }}>{toast}</div>
          <button className="btn btn-ghost btn-sm" onClick={() => setToast(null)}><Icon name="x" size={11} /></button>
        </div>
      )}
    </FinanceiroContext.Provider>
  );
}

function useFinanceiro() {
  return React.useContext(FinanceiroContext);
}

function ImportExtratoModal({ onClose, onDone }) {
  const [file, setFile] = React.useState(null);
  const [banco, setBanco] = React.useState('BB');
  const [conta, setConta] = React.useState('BB CC 12.847-3');
  const [periodo, setPeriodo] = React.useState('');
  const [importando, setImportando] = React.useState(false);
  const fileRef = React.useRef(null);

  const submit = () => {
    if (!file) return;
    setImportando(true);
    setTimeout(() => {
      const mov = Math.floor(Math.random() * 18) + 8;
      onDone(file, mov);
    }, 2000);
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 200, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 540, maxHeight: '85vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="upload" />
          <div className="t">Importar extrato bancário</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div className="alert-banner alert-cyan">
            <Icon name="info" size={13} />
            <div>
              <strong>Conciliação automática via IA</strong>
              <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                Suporta PDF (OFX, extratos de BB/Itaú/Sicredi) e arquivos OFX/CSV. Após o upload, a IA tenta casar cada movimentação com CAPs/CARs do sistema. Divergências aparecem na aba Conciliação.
              </div>
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">BANCO</div>
              <select className="input" value={banco} onChange={e => { setBanco(e.target.value); setConta(e.target.value === 'BB' ? 'BB CC 12.847-3' : e.target.value === 'ITAU' ? 'Itaú CC 38201-1' : 'Sicredi CC 5210-X'); }}>
                <option value="BB">Banco do Brasil</option>
                <option value="ITAU">Itaú</option>
                <option value="SICREDI">Sicredi</option>
              </select>
            </div>
            <div>
              <div className="field-label">CONTA</div>
              <input className="input mono" value={conta} onChange={e => setConta(e.target.value)} />
            </div>
          </div>

          <div>
            <div className="field-label">PERÍODO (opcional)</div>
            <input className="input mono" type="text" value={periodo} onChange={e => setPeriodo(e.target.value)} placeholder="Ex: 01/05/2026 - 12/05/2026 (auto-detectado pelo PDF)" />
          </div>

          <div>
            <div className="field-label">ARQUIVO DO EXTRATO <span style={{ color: 'var(--red)' }}>*</span></div>
            <div style={{ padding: 22, border: '2px dashed var(--line-2)', borderRadius: 6, textAlign: 'center', background: 'var(--bg-2)', cursor: 'pointer' }} onClick={() => fileRef.current?.click()}>
              <Icon name="upload" size={28} style={{ color: 'var(--fg-3)' }} />
              <div style={{ fontSize: 12.5, marginTop: 8, color: 'var(--fg-1)' }}>
                {file || 'Clique para escolher (PDF, OFX, CSV — até 20MB)'}
              </div>
              <input ref={fileRef} type="file" accept=".pdf,.ofx,.csv" style={{ display: 'none' }} onChange={e => e.target.files[0] && setFile(e.target.files[0].name)} />
            </div>
          </div>
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={importando}>Cancelar</button>
          <button className="btn btn-primary" onClick={submit} disabled={!file || importando}>
            {importando ? <><span className="spinner"></span> Conciliando...</> : <><Icon name="upload" /> Importar e conciliar</>}
          </button>
        </div>
      </div>
    </div>
  );
}

function NovoLancamentoModal({ onClose, onCreate }) {
  const [tipo, setTipo] = React.useState('car');
  const [form, setForm] = React.useState({
    id: 'CAR-2026-' + String(Math.floor(Math.random() * 900) + 100),
    desc: '',
    valor: '',
    vcto: '',
    forma: 'TED',
    contraparte: '',
    cnpj: '',
    empenhoOuNf: '',
  });
  const [erro, setErro] = React.useState(null);
  const set = (k, v) => setForm({ ...form, [k]: v });

  React.useEffect(() => {
    // Atualiza prefixo do ID quando muda tipo
    set('id', (tipo === 'car' ? 'CAR' : 'CAP') + '-2026-' + String(Math.floor(Math.random() * 900) + 100));
  }, [tipo]);

  const submit = () => {
    if (!form.desc || !form.valor || !form.vcto || !form.contraparte) {
      setErro('Preencha Descrição, Valor, Vencimento e Cliente/Fornecedor');
      return;
    }
    onCreate(tipo, form.id);
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 200, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 620, maxHeight: '85vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="plus" />
          <div className="t">Novo lançamento financeiro</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div>
            <div className="field-label" style={{ marginBottom: 6 }}>TIPO DE LANÇAMENTO</div>
            <div className="segmented">
              <div className={`seg${tipo === 'car' ? ' active' : ''}`} onClick={() => setTipo('car')}>↓ A RECEBER (CAR)</div>
              <div className={`seg${tipo === 'cap' ? ' active' : ''}`} onClick={() => setTipo('cap')}>↑ A PAGAR (CAP)</div>
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">ID DO LANÇAMENTO</div>
              <input className="input mono" value={form.id} onChange={e => set('id', e.target.value)} />
            </div>
            <div>
              <div className="field-label">VENCIMENTO <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" type="date" value={form.vcto} onChange={e => set('vcto', e.target.value)} />
            </div>
          </div>

          <div>
            <div className="field-label">DESCRIÇÃO <span style={{ color: 'var(--red)' }}>*</span></div>
            <input className="input" value={form.desc} onChange={e => set('desc', e.target.value)} placeholder={tipo === 'car' ? 'NF XXX · Cliente Y' : 'Boleto Z · Fornecedor W'} />
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">{tipo === 'car' ? 'CLIENTE' : 'FORNECEDOR'} <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input" value={form.contraparte} onChange={e => set('contraparte', e.target.value)} placeholder={tipo === 'car' ? 'Prefeitura Mun. de...' : 'Suzano Distribuição'} />
            </div>
            <div>
              <div className="field-label">CNPJ/CPF</div>
              <input className="input mono" value={form.cnpj} onChange={e => set('cnpj', e.target.value)} placeholder="00.000.000/0000-00" />
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">VALOR (R$) <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" type="number" value={form.valor} onChange={e => set('valor', e.target.value)} placeholder="51576.60" />
            </div>
            <div>
              <div className="field-label">FORMA DE PAGAMENTO</div>
              <select className="input" value={form.forma} onChange={e => set('forma', e.target.value)}>
                <option>TED</option>
                <option>PIX</option>
                <option>Boleto</option>
                <option>Débito automático</option>
                <option>Dinheiro</option>
              </select>
            </div>
          </div>

          <div>
            <div className="field-label">{tipo === 'car' ? 'EMPENHO VINCULADO (opcional)' : 'NF DO FORNECEDOR (opcional)'}</div>
            <input className="input mono" value={form.empenhoOuNf} onChange={e => set('empenhoOuNf', e.target.value)} placeholder={tipo === 'car' ? '2026NE000XXX' : 'NF nº'} />
          </div>

          {erro && <div className="alert-banner alert-red"><Icon name="warn" size={13} /> {erro}</div>}
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={submit}><Icon name="check" /> Criar lançamento</button>
        </div>
      </div>
    </div>
  );
}

function KpiSmall({ l, v, sub, cls }) {
  return (
    <div className="card" style={{ padding: 12 }}>
      <div className="field-label">{l}</div>
      <div className="flex items-center gap-3" style={{ marginTop: 4 }}>
        <span className="mono" style={{ fontSize: 22, fontWeight: 600, color: cls === 'amber' ? 'var(--amber)' : cls === 'red' ? 'var(--red)' : cls === 'cyan' ? 'var(--cyan)' : cls === 'lime' ? 'var(--lime)' : 'var(--fg-0)' }}>{v}</span>
        <span style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{sub}</span>
      </div>
    </div>
  );
}

/* ── OVERVIEW ──────────────────────────────────────────────── */
function Overview() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 14 }}>
      <div className="card">
        <div className="card-head"><Icon name="chart" /><div className="t">Fluxo de Caixa · 90 dias</div></div>
        <div style={{ padding: 16, height: 280 }}><FluxoChart /></div>
      </div>
      <div className="card">
        <div className="card-head"><Icon name="dollar" /><div className="t">Saldos por banco</div></div>
        <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { b: 'Banco do Brasil', c: 'CC 12.847-3', v: 487230.50 },
            { b: 'Itaú', c: 'CC 38201-1', v: 184620.20 },
            { b: 'Sicredi', c: 'CC 5210-X', v: 92140.80 },
          ].map(b => (
            <div key={b.c} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 10px', background: 'var(--bg-2)', borderRadius: 4 }}>
              <div>
                <div style={{ fontSize: 12, fontWeight: 500 }}>{b.b}</div>
                <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{b.c}</div>
              </div>
              <div className="mono" style={{ color: 'var(--lime)', fontWeight: 600 }}>{BRL(b.v)}</div>
            </div>
          ))}
          <div style={{ borderTop: '1px solid var(--line-1)', paddingTop: 10, marginTop: 4, display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 11.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>TOTAL</span>
            <span className="mono" style={{ color: 'var(--fg-0)', fontSize: 16, fontWeight: 600 }}>R$ 763.991,50</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function FluxoChart() {
  const days = Array.from({ length: 90 }, (_, i) => i);
  const entradas = days.map(d => 100 + Math.sin(d * 0.15) * 40 + (d * 17 % 21) + d * 0.5);
  const saidas = days.map(d => 80 + Math.cos(d * 0.18) * 30 + (d * 11 % 17) + d * 0.3);
  const saldo = entradas.map((e, i) => e - saidas[i] + 200);
  const W = 800, H = 240;
  const max = Math.max(...entradas, ...saidas) * 1.1;
  const path = (arr) => arr.map((v, i) => `${i === 0 ? 'M' : 'L'} ${(i / 89) * W} ${H - (v / max) * H}`).join(' ');
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
      {[0, 0.25, 0.5, 0.75, 1].map(p => <line key={p} x1="0" x2={W} y1={H * p} y2={H * p} stroke="var(--line-1)" strokeWidth="0.5" />)}
      <path d={path(entradas) + ` L ${W} ${H} L 0 ${H} Z`} fill="rgba(212,247,82,0.08)" />
      <path d={path(entradas)} stroke="var(--lime)" strokeWidth="2" fill="none" />
      <path d={path(saidas)} stroke="var(--red)" strokeWidth="2" fill="none" strokeDasharray="3 3" />
      <path d={path(saldo)} stroke="var(--cyan)" strokeWidth="1.5" fill="none" />
      <text x={10} y={20} fontSize="10" fill="var(--lime)" fontFamily="IBM Plex Mono">━ ENTRADAS</text>
      <text x={120} y={20} fontSize="10" fill="var(--red)" fontFamily="IBM Plex Mono">┄ SAÍDAS</text>
      <text x={220} y={20} fontSize="10" fill="var(--cyan)" fontFamily="IBM Plex Mono">━ SALDO</text>
      {[30, 60, 90].map(d => <text key={d} x={(d / 90) * W} y={H - 4} fontSize="9" fill="var(--fg-3)" fontFamily="IBM Plex Mono" textAnchor="middle">D+{d}</text>)}
    </svg>
  );
}

/* ── CONTAS A PAGAR / RECEBER ──────────────────────────────── */
function ContasTab({ tipo, onOpen }) {
  const car = tipo === 'car';
  const { TITULOS_CAR, TITULOS_CAP } = useFinanceiro();
  const items = car ? TITULOS_CAR : TITULOS_CAP;
  return (
    <div className="card">
      <div className="card-head">
        <Icon name="dollar" />
        <div className="t">Contas a {car ? 'Receber' : 'Pagar'}</div>
        <div className="s">{items.length} títulos · {BRL(items.reduce((a, t) => a + t.valor, 0))}</div>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Vcto</th>
            <th>ID</th>
            <th>Descrição</th>
            <th>{car ? 'Cliente' : 'Fornecedor'}</th>
            <th>{car ? 'Empenho' : 'NF origem'}</th>
            <th style={{ textAlign: 'right' }}>Valor</th>
            <th>Status</th>
            <th style={{ width: 32 }}></th>
          </tr>
        </thead>
        <tbody>
          {items.map(r => {
            const st = STATUS_LABELS[r.status];
            return (
              <tr key={r.id} onClick={() => onOpen(r)} style={{ cursor: 'pointer' }}>
                <td className="mono">{r.vcto}</td>
                <td className="mono" style={{ color: 'var(--fg-1)' }}>{r.id}</td>
                <td>{r.desc}</td>
                <td style={{ fontSize: 11.5 }}>{car ? r.cliente : r.fornecedor}</td>
                <td className="mono" style={{ fontSize: 11 }}>{car ? r.empenho : r.nfOrigem}</td>
                <td className="num-col" style={{ color: car ? 'var(--lime)' : 'var(--red)', fontWeight: 500 }}>{BRL(r.valor)}</td>
                <td><span className={`badge ${st.cls}`}>{st.label}</span></td>
                <td><Icon name="chevR" size={11} style={{ color: 'var(--fg-3)' }} /></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

/* ── CONCILIAÇÃO ───────────────────────────────────────────── */
function Conciliacao() {
  return (
    <div className="card">
      <div className="card-head"><Icon name="check" /><div className="t">Conciliação Bancária — Extrato 12/05/2026 (BB CC 12.847-3)</div><span className="badge badge-lime" style={{ marginLeft: 'auto' }}>14 / 17 OK · 3 DIVERG.</span></div>
      <table className="tbl">
        <thead><tr><th>Data</th><th>Descrição extrato</th><th style={{ textAlign: 'right' }}>Valor</th><th>Match</th><th>Lançamento sistema</th><th>Ação</th></tr></thead>
        <tbody>
          {[
            { d: '12/05', desc: 'TED REC PMS NITEROI 33804351', v: 51576.00, m: 'ok', sys: '2026NE000847 (NF 002847)' },
            { d: '12/05', desc: 'TED REC SEFAZ RJ', v: 184320.00, m: 'ok', sys: '2026NE000812' },
            { d: '11/05', desc: 'PIX REC TJ-RJ 287000', v: 287000.00, m: 'div', sys: 'sem correspondência' },
            { d: '11/05', desc: 'DEB BOLETO SUZANO DISTR', v: -48200.00, m: 'ok', sys: 'CAP 2026-184' },
            { d: '11/05', desc: 'DEB TARIFA TED', v: -12.40, m: 'div', sys: 'não lançado' },
            { d: '10/05', desc: 'TED REC UFMG FINANC', v: 87420.00, m: 'ok', sys: '2026NE000756' },
            { d: '10/05', desc: 'PIX DEB BIC BRASIL FORN', v: -8420.00, m: 'div', sys: 'lanç R$ 8.240 — divergência R$ 180' },
          ].map((r, i) => (
            <tr key={i} style={{ background: r.m === 'div' ? 'rgba(255,93,93,0.04)' : undefined }}>
              <td className="mono">{r.d}</td>
              <td className="mono" style={{ fontSize: 11 }}>{r.desc}</td>
              <td className="num-col" style={{ color: r.v > 0 ? 'var(--lime)' : 'var(--red)' }}>{BRL(r.v)}</td>
              <td>{r.m === 'ok' ? <span className="badge badge-lime">✓ MATCH</span> : <span className="badge badge-red">DIVERG.</span>}</td>
              <td style={{ fontSize: 11, color: r.m === 'ok' ? 'var(--fg-1)' : 'var(--red)' }}>{r.sys}</td>
              <td>{r.m === 'div' ? <button className="btn btn-sm btn-primary">+ Incluir lançamento</button> : <span style={{ color: 'var(--fg-3)', fontSize: 10.5 }}>—</span>}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ── NF CONTRA BTM ─────────────────────────────────────────── */
function NFContra({ onOpen }) {
  const { NFS_CONTRA_BTM } = useFinanceiro();
  return (
    <div className="card">
      <div className="card-head"><Icon name="file" /><div className="t">NF Emitidas contra BTM · captura SEFAZ + aprovação manual</div></div>
      <div style={{ padding: 12, background: 'var(--bg-2)', borderBottom: '1px solid var(--line-1)' }}>
        <div className="alert-banner alert-cyan"><Icon name="info" size={13} /> Integração ativa: SEFAZ-NACIONAL · {NFS_CONTRA_BTM.filter(n => n.status === 'pend').length} NFs pendentes de aprovação para criação de CAP.</div>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>NF</th>
            <th>Emitente</th>
            <th>Emissão</th>
            <th style={{ textAlign: 'right' }}>Valor</th>
            <th>Vencimento</th>
            <th>Status</th>
            <th style={{ width: 32 }}></th>
          </tr>
        </thead>
        <tbody>
          {NFS_CONTRA_BTM.map(n => {
            const st = NF_STATUS_LABELS[n.status];
            return (
              <tr key={n.nf} onClick={() => onOpen(n)} style={{ cursor: 'pointer' }}>
                <td className="mono">{n.nf}</td>
                <td>
                  <div>{n.emitente}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>{n.cnpj}</div>
                </td>
                <td className="mono">{n.emissao}</td>
                <td className="num-col" style={{ color: 'var(--red)' }}>{BRL(n.valor)}</td>
                <td className="mono">{n.venc}</td>
                <td><span className={`badge ${st.cls}`}>{st.label}</span></td>
                <td><Icon name="chevR" size={11} style={{ color: 'var(--fg-3)' }} /></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

/* ── DRE POR EMPENHO ───────────────────────────────────────── */
function DREEmpenho({ onNav }) {
  const linhas = [
    { id: '2026NE000847', o: 'Pref. Niterói', r: 61701.60, c: 32140.00, t: 10027.00, f: 312.40, l: 19222.20 },
    { id: '2026NE000812', o: 'SEFAZ-RJ', r: 184320.00, c: 96420.00, t: 29952.00, f: 612.80, l: 57335.20 },
    { id: '2026NE000798', o: 'TJ-PR', r: 32480.00, c: 18420.00, t: 5278.00, f: 287.10, l: 8494.90 },
    { id: '2026NE000756', o: 'UFMG', r: 87420.00, c: 47200.00, t: 14206.00, f: 487.30, l: 25526.70 },
    { id: '2026NE000721', o: 'Câmara SP', r: 18920.00, c: 11420.00, t: 3074.00, f: 184.50, l: 4241.50 },
  ];
  const totals = linhas.reduce((a, r) => ({ r: a.r + r.r, c: a.c + r.c, t: a.t + r.t, f: a.f + r.f, l: a.l + r.l }), { r: 0, c: 0, t: 0, f: 0, l: 0 });
  return (
    <div className="card">
      <div className="card-head"><Icon name="chart" /><div className="t">DRE por Empenho · lucro líquido real</div><div className="s">clique para abrir empenho</div></div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Empenho</th>
            <th>Órgão</th>
            <th style={{ textAlign: 'right' }}>Receita</th>
            <th style={{ textAlign: 'right' }}>(-) Custos</th>
            <th style={{ textAlign: 'right' }}>(-) Tributos</th>
            <th style={{ textAlign: 'right' }}>(-) Frete</th>
            <th style={{ textAlign: 'right' }}>Lucro líq.</th>
            <th style={{ textAlign: 'right' }}>Margem</th>
            <th style={{ width: 32 }}></th>
          </tr>
        </thead>
        <tbody>
          {linhas.map(r => (
            <tr key={r.id} onClick={() => onNav('empenhos')} style={{ cursor: 'pointer' }}>
              <td className="mono">{r.id}</td>
              <td>{r.o}</td>
              <td className="num-col" style={{ color: 'var(--lime)' }}>{BRL(r.r)}</td>
              <td className="num-col">{BRL(r.c)}</td>
              <td className="num-col">{BRL(r.t)}</td>
              <td className="num-col">{BRL(r.f)}</td>
              <td className="num-col" style={{ color: 'var(--lime)', fontWeight: 600 }}>{BRL(r.l)}</td>
              <td className="num-col" style={{ color: 'var(--lime)' }}>{((r.l / r.r) * 100).toFixed(1)}%</td>
              <td><Icon name="chevR" size={11} style={{ color: 'var(--fg-3)' }} /></td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr style={{ background: 'var(--bg-2)', fontWeight: 600 }}>
            <td colSpan={2} style={{ padding: 10 }}>TOTAL · {linhas.length} empenhos</td>
            <td className="num-col" style={{ color: 'var(--lime)' }}>{BRL(totals.r)}</td>
            <td className="num-col">{BRL(totals.c)}</td>
            <td className="num-col">{BRL(totals.t)}</td>
            <td className="num-col">{BRL(totals.f)}</td>
            <td className="num-col" style={{ color: 'var(--lime)' }}>{BRL(totals.l)}</td>
            <td className="num-col" style={{ color: 'var(--lime)' }}>{((totals.l / totals.r) * 100).toFixed(1)}%</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
}

/* ── TITULO DRAWER (CAP/CAR) ───────────────────────────────── */
function TituloDrawer({ titulo, onClose, tab, onTab, onNav }) {
  const car = titulo.tipo === 'car';
  const st = STATUS_LABELS[titulo.status];
  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>{car ? 'Conta a Receber' : 'Conta a Pagar'}</span><span className="chip">M07</span><span className={`badge ${st.cls}`}>{st.label}</span></>}
      title={<span style={{ fontWeight: 600 }}>{titulo.id} · {titulo.desc}</span>}
      subtitle={`${car ? titulo.cliente : titulo.fornecedor} · ${titulo.cnpj}`}
      headRight={
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>VALOR · VENCE {titulo.vcto}</div>
          <div className="mono" style={{ fontSize: 16, fontWeight: 600, color: car ? 'var(--lime)' : 'var(--red)' }}>{BRL(titulo.valor)}</div>
        </div>
      }
      tabs={[
        { id: 'det', label: 'Detalhes' },
        { id: 'doc', label: car ? 'Nota Fiscal' : 'Boleto / NF' },
        { id: 'hist', label: 'Histórico' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        <>
          {titulo.status === 'pago' ? (
            <button className="btn"><Icon name="download" /> Comprovante</button>
          ) : (
            <>
              <button className="btn"><Icon name="print" /> Imprimir</button>
              {car ? <button className="btn"><Icon name="mail" /> Cobrar cliente</button> : <button className="btn"><Icon name="download" /> Baixar boleto</button>}
              <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
                <Icon name="check" /> {car ? 'Confirmar recebimento' : 'Liberar pagamento'}
              </button>
            </>
          )}
        </>
      }
    >
      {tab === 'det' && <TituloDet titulo={titulo} onNav={onNav} />}
      {tab === 'doc' && <TituloDoc titulo={titulo} />}
      {tab === 'hist' && <TituloHist titulo={titulo} />}
    </Drawer>
  );
}

function TituloDet({ titulo, onNav }) {
  const car = titulo.tipo === 'car';
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>DADOS DO TÍTULO</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 22 }}>
        <Field label="EMISSÃO" value={titulo.emissao} mono />
        <Field label="VENCIMENTO" value={titulo.vcto} mono />
        <Field label="VALOR" value={BRL(titulo.valor)} valueClass={car ? 'text-lime' : 'text-red'} />
        <Field label="FORMA" value={titulo.forma} />
        <Field label="BANCO" value={titulo.banco} mono />
        <Field label={car ? 'NF EMITIDA' : 'NF DO FORNECEDOR'} value={car ? titulo.nf : titulo.nfOrigem} mono />
      </div>

      <div className="field-label" style={{ marginBottom: 10 }}>{car ? 'CLIENTE' : 'FORNECEDOR'}</div>
      <div style={{ padding: 14, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)', marginBottom: 22 }}>
        <div style={{ fontSize: 13.5, fontWeight: 600 }}>{car ? titulo.cliente : titulo.fornecedor}</div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>{titulo.cnpj}</div>
      </div>

      {car && titulo.empenho && titulo.empenho !== '—' && (
        <>
          <div className="field-label" style={{ marginBottom: 10 }}>EMPENHO ORIGEM</div>
          <div style={{ padding: 14, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)', marginBottom: 22, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div className="mono" style={{ fontSize: 13, fontWeight: 600 }}>{titulo.empenho}</div>
              <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 2 }}>vinculado à NF {titulo.nf}</div>
            </div>
            <button className="btn btn-sm" onClick={() => onNav('empenhos')}><Icon name="arrowR" size={11} /> Abrir empenho</button>
          </div>
        </>
      )}

      {titulo.status === 'atraso' && (
        <div className="alert-banner alert-red">
          <Icon name="warn" size={13} />
          <div>
            <strong>Título em atraso</strong>
            <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
              Vencido em {titulo.vcto}. Recomendado abrir procedimento de cobrança formal.
            </div>
          </div>
        </div>
      )}
      {titulo.status === 'venc-hoje' && (
        <div className="alert-banner alert-amber">
          <Icon name="warn" size={13} />
          <strong>Vence hoje</strong> — confirmar {car ? 'recebimento' : 'pagamento'} antes do fim do expediente.
        </div>
      )}
      {titulo.folha && (
        <div className="alert-banner alert-cyan">
          <Icon name="info" size={13} />
          Lançamento de folha · {titulo.fornecedor}. Recolhimentos INSS/IRRF gerados automaticamente.
        </div>
      )}
    </div>
  );
}

function TituloDoc({ titulo }) {
  const car = titulo.tipo === 'car';
  return (
    <div style={{ padding: 18 }}>
      <div style={{ background: '#f5f4f0', color: '#0a0a0b', padding: 28, fontFamily: "'IBM Plex Serif', serif", fontSize: 11, lineHeight: 1.55, borderRadius: 6, boxShadow: '0 6px 24px rgba(0,0,0,0.4)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 12, borderBottom: '2px solid #0a0a0b', marginBottom: 12 }}>
          <div style={{ width: 32, height: 32, background: '#0a0a0b', color: '#d4f752', display: 'grid', placeItems: 'center', fontWeight: 700, fontFamily: 'IBM Plex Mono', fontSize: 13, borderRadius: 4 }}>BTM</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 700 }}>BTM SERVIÇOS E COMÉRCIO LTDA</div>
            <div style={{ fontSize: 9 }}>CNPJ 33.804.351/0001-04 · Rio de Janeiro/RJ</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{car ? `NF ${titulo.nf}` : `BOLETO ${titulo.id}`}</div>
            <div style={{ fontSize: 9 }}>Vcto: {titulo.vcto}/2026</div>
          </div>
        </div>
        <div style={{ textAlign: 'center', fontWeight: 700, fontSize: 12, marginBottom: 8 }}>
          {car ? 'NOTA FISCAL ELETRÔNICA · DUPLICATA' : 'BOLETO DE COBRANÇA'}
        </div>
        <div style={{ marginTop: 12 }}>
          <strong>{car ? 'Sacado:' : 'Sacador:'}</strong> {car ? titulo.cliente : titulo.fornecedor}
          <div style={{ fontSize: 9, marginTop: 2 }}>{titulo.cnpj}</div>
        </div>
        <div style={{ marginTop: 12 }}>
          <strong>Descrição:</strong> {titulo.desc}
        </div>
        {car && titulo.empenho && titulo.empenho !== '—' && (
          <div style={{ marginTop: 6 }}><strong>Empenho:</strong> {titulo.empenho}</div>
        )}
        <div style={{ marginTop: 12, padding: 10, background: '#e8e7e0', borderRadius: 4, display: 'flex', justifyContent: 'space-between' }}>
          <span><strong>Valor a {car ? 'receber' : 'pagar'}:</strong></span>
          <span style={{ fontWeight: 700, fontSize: 13 }}>{BRL(titulo.valor)}</span>
        </div>
        <div style={{ marginTop: 12, fontSize: 9, color: '#54524c' }}>
          Vencimento: {titulo.vcto}/2026 · Forma: {titulo.forma} · {titulo.banco}
        </div>
        {!car && (
          <div style={{ marginTop: 14, padding: 8, background: '#0a0a0b', color: '#f5f4f0', fontFamily: 'IBM Plex Mono', fontSize: 9, letterSpacing: 1 }}>
            34195.18217 04802.{titulo.id.replace(/[^0-9]/g, '').slice(0, 5)}.{titulo.id.replace(/[^0-9]/g, '').slice(-5)} 1 9821{titulo.valor.toFixed(0).padStart(10, '0')}
          </div>
        )}
      </div>
      <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
        <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}><Icon name="download" /> Baixar PDF</button>
        <button className="btn"><Icon name="print" /> Imprimir</button>
        {!car && <button className="btn"><Icon name="link" /> Copiar linha digitável</button>}
      </div>
    </div>
  );
}

function TituloHist({ titulo }) {
  const eventos = [
    { titulo: 'Título emitido', quando: `${titulo.emissao} · 14:08`, tone: 'cyan', descricao: `Lançamento ${titulo.id} criado automaticamente a partir de ${titulo.tipo === 'car' ? `NF ${titulo.nf}` : `NF ${titulo.nfOrigem || 'avulsa'}`}.` },
    { titulo: 'Boleto/título enviado', quando: `${titulo.emissao} · 14:12`, tone: '', descricao: `Enviado via e-mail para ${titulo.tipo === 'car' ? titulo.cliente : titulo.fornecedor}.` },
    ...(titulo.status === 'pago' ? [{ titulo: 'Pagamento confirmado', quando: `${titulo.pagoEm || titulo.vcto} · 09:42`, tone: 'lime', descricao: `Conciliado automaticamente com extrato bancário (${titulo.banco}).` }] : []),
    ...(titulo.status === 'atraso' ? [{ titulo: 'Vencimento ultrapassado', quando: `${titulo.vcto}`, tone: 'red', descricao: 'Sistema disparou alerta automático para o setor financeiro.' }] : []),
  ];
  return (
    <div style={{ padding: 18 }}>
      <div className="timeline">
        {eventos.map((h, i) => (
          <div key={i} className="timeline-item">
            <div className={`timeline-dot ${h.tone}`}></div>
            <div className="timeline-content">
              <div className="t">{h.titulo}</div>
              <div className="when">{h.quando}</div>
              {h.descricao && <div className="d">{h.descricao}</div>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── NF DRAWER (NF contra BTM) ─────────────────────────────── */
function NfDrawer({ nf, onClose, tab, onTab }) {
  const st = NF_STATUS_LABELS[nf.status];
  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>NF contra BTM · captura SEFAZ</span><span className="chip">M07</span><span className={`badge ${st.cls}`}>{st.label}</span></>}
      title={<span className="mono" style={{ fontWeight: 600 }}>NF {nf.nf} · {nf.emitente}</span>}
      subtitle={`${nf.cnpj} · ${nf.uf} · emitida em ${nf.emissao} · vence ${nf.venc}`}
      headRight={
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>VALOR</div>
          <div className="mono" style={{ fontSize: 16, fontWeight: 600, color: 'var(--red)' }}>{BRL(nf.valor)}</div>
        </div>
      }
      tabs={[
        { id: 'resumo', label: 'Resumo' },
        { id: 'itens', label: 'Itens da NF' },
        { id: 'aprov', label: 'Aprovação' },
        { id: 'doc', label: 'DANFE / XML' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        nf.status === 'pend' ? (
          <>
            <button className="btn btn-danger" style={{ flex: 1, justifyContent: 'center' }}>
              <Icon name="x" /> Recusar NF
            </button>
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
              <Icon name="check" /> Aprovar e criar CAP
            </button>
          </>
        ) : (
          <>
            <button className="btn"><Icon name="download" /> DANFE PDF</button>
            <button className="btn"><Icon name="download" /> XML</button>
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
              <Icon name="arrowR" /> Abrir CAP vinculado
            </button>
          </>
        )
      }
    >
      {tab === 'resumo' && <NfResumo nf={nf} />}
      {tab === 'itens' && <NfItens nf={nf} />}
      {tab === 'aprov' && <NfAprov nf={nf} />}
      {tab === 'doc' && <NfDoc nf={nf} />}
    </Drawer>
  );
}

function NfResumo({ nf }) {
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>EMITENTE</div>
      <div style={{ padding: 14, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)', marginBottom: 22 }}>
        <div style={{ fontSize: 13.5, fontWeight: 600 }}>{nf.emitente}</div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>{nf.cnpj} · {nf.uf}</div>
      </div>

      <div className="field-label" style={{ marginBottom: 10 }}>DADOS FISCAIS</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 22 }}>
        <Field label="NÚMERO NF" value={nf.nf} mono />
        <Field label="EMISSÃO" value={nf.emissao} mono />
        <Field label="VENCIMENTO" value={nf.venc} mono />
        <Field label="CFOP" value={nf.cfop} mono />
        <Field label="BASE ICMS" value={BRL(nf.baseICMS)} />
        <Field label="ICMS" value={BRL(nf.icms)} valueClass="text-amber" />
        <Field label="IPI" value={BRL(nf.ipi)} />
        <Field label="FRETE" value={BRL(nf.frete)} />
        <Field label="VALOR TOTAL" value={BRL(nf.valor)} valueClass="text-red" />
      </div>

      <div className="field-label" style={{ marginBottom: 10 }}>OBSERVAÇÕES</div>
      <div style={{ padding: 14, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)', fontSize: 12.5, lineHeight: 1.5 }}>
        {nf.observacao}
      </div>
    </div>
  );
}

function NfItens({ nf }) {
  const itens = [
    { desc: 'Papel A4 75g — Resma 500 fls', cod: 'BTM-PA-001', ncm: '4802.56.99', qtd: Math.round(nf.valor / 14.20 * 0.6), unit: 14.20, total: Math.round(nf.valor * 0.6) },
    { desc: 'Caneta esferográfica azul 1.0mm', cod: 'BTM-CN-014', ncm: '9608.10.00', qtd: Math.round(nf.valor / 0.92 * 0.3), unit: 0.92, total: Math.round(nf.valor * 0.3) },
    { desc: 'Diversos · agregado', cod: '—', ncm: '—', qtd: 1, unit: nf.valor * 0.1, total: Math.round(nf.valor * 0.1) },
  ];
  return (
    <table className="tbl">
      <thead>
        <tr>
          <th>Item</th>
          <th>Descrição</th>
          <th>Cod</th>
          <th>NCM</th>
          <th style={{ textAlign: 'right' }}>Qtd</th>
          <th style={{ textAlign: 'right' }}>Unit</th>
          <th style={{ textAlign: 'right' }}>Total</th>
        </tr>
      </thead>
      <tbody>
        {itens.map((it, i) => (
          <tr key={i}>
            <td className="mono">{String(i + 1).padStart(2, '0')}</td>
            <td>{it.desc}</td>
            <td className="mono">{it.cod}</td>
            <td className="mono" style={{ fontSize: 11 }}>{it.ncm}</td>
            <td className="num-col">{NUM(it.qtd)}</td>
            <td className="num-col">{BRL(it.unit)}</td>
            <td className="num-col" style={{ color: 'var(--red)' }}>{BRL(it.total)}</td>
          </tr>
        ))}
      </tbody>
      <tfoot>
        <tr style={{ background: 'var(--bg-2)' }}>
          <td colSpan={6} style={{ textAlign: 'right', padding: 10, fontFamily: 'IBM Plex Mono' }}>Total:</td>
          <td className="num-col" style={{ color: 'var(--red)', fontWeight: 700 }}>{BRL(nf.valor)}</td>
        </tr>
      </tfoot>
    </table>
  );
}

function NfAprov({ nf }) {
  const [coment, setComent] = React.useState('');
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>VALIDAÇÕES AUTOMÁTICAS</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 }}>
        {[
          { ok: true, t: 'CNPJ emitente cadastrado como fornecedor' },
          { ok: true, t: 'XML válido (assinatura digital ok)' },
          { ok: true, t: 'Valor da NF compatível com pedido de compras' },
          { ok: nf.cfop === '6101', t: `CFOP ${nf.cfop} ${nf.cfop === '6101' ? 'compatível com triangulação' : 'requer verificação'}` },
          { ok: true, t: 'Impostos calculados conforme alíquota esperada' },
          { ok: nf.icms / nf.baseICMS < 0.1, t: `Alíquota ICMS ${((nf.icms / nf.baseICMS) * 100).toFixed(1)}% dentro do esperado` },
        ].map((v, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: 'var(--bg-2)', borderRadius: 4, border: '1px solid var(--line-1)', fontSize: 12 }}>
            <Icon name={v.ok ? 'check' : 'x'} size={12} style={{ color: v.ok ? 'var(--lime)' : 'var(--red)' }} />
            <span>{v.t}</span>
          </div>
        ))}
      </div>

      {nf.status === 'pend' && (
        <>
          <div className="field-label" style={{ marginBottom: 8 }}>COMENTÁRIO DA APROVAÇÃO (opcional)</div>
          <textarea
            className="input"
            placeholder="Ex: aprovado conforme pedido de compras PC-2026-4521. Sem ressalvas."
            value={coment}
            onChange={e => setComent(e.target.value)}
            style={{ resize: 'none', minHeight: 80, marginBottom: 14 }}
          />
          <div className="alert-banner alert-cyan">
            <Icon name="info" size={13} />
            <div>
              <strong>Ao aprovar:</strong>
              <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                CAP {nf.nf} será criado automaticamente · valor {BRL(nf.valor)} · vencimento {nf.venc} · forma boleto.
              </div>
            </div>
          </div>
        </>
      )}

      {nf.status === 'aprov' && (
        <div className="alert-banner alert-lime">
          <Icon name="check" size={13} />
          <div>
            <strong>NF aprovada</strong>
            <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>CAP gerado automaticamente · aguardando vencimento em {nf.venc}.</div>
          </div>
        </div>
      )}

      {nf.status === 'pago' && (
        <div className="alert-banner alert-lime">
          <Icon name="check" size={13} />
          <div>
            <strong>NF paga em {nf.pagoEm}</strong>
            <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>Conciliada automaticamente com extrato bancário.</div>
          </div>
        </div>
      )}
    </div>
  );
}

function NfDoc({ nf }) {
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>DANFE · DOCUMENTO AUXILIAR DA NF</div>
      <div style={{ background: '#f5f4f0', color: '#0a0a0b', padding: 24, fontFamily: "'IBM Plex Mono', monospace", fontSize: 9.5, lineHeight: 1.4, borderRadius: 6, marginBottom: 14, boxShadow: '0 6px 24px rgba(0,0,0,0.4)' }}>
        <div style={{ textAlign: 'center', fontWeight: 700, fontSize: 11, fontFamily: 'IBM Plex Serif, serif', marginBottom: 8 }}>DANFE — DOCUMENTO AUXILIAR DA NFe</div>
        <div style={{ display: 'flex', gap: 12, marginBottom: 10 }}>
          <div style={{ flex: 1 }}>
            <strong>EMITENTE</strong>
            <div>{nf.emitente}</div>
            <div>CNPJ {nf.cnpj}</div>
            <div>UF: {nf.uf}</div>
          </div>
          <div style={{ flex: 1 }}>
            <strong>DESTINATÁRIO</strong>
            <div>BTM SERVIÇOS E COMÉRCIO LTDA</div>
            <div>CNPJ 33.804.351/0001-04</div>
            <div>Rio de Janeiro/RJ</div>
          </div>
          <div style={{ width: 120, textAlign: 'right' }}>
            <strong>NF-e Nº {nf.nf}</strong>
            <div>Emissão: {nf.emissao}</div>
            <div>Vcto: {nf.venc}</div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid #0a0a0b', paddingTop: 8, marginTop: 8 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
            <div><strong>CFOP</strong> {nf.cfop}</div>
            <div><strong>BASE ICMS</strong> {BRL(nf.baseICMS)}</div>
            <div><strong>ICMS</strong> {BRL(nf.icms)}</div>
            <div><strong>IPI</strong> {BRL(nf.ipi)}</div>
            <div><strong>FRETE</strong> {BRL(nf.frete)}</div>
            <div><strong>TOTAL</strong> <span style={{ fontWeight: 700 }}>{BRL(nf.valor)}</span></div>
          </div>
        </div>
        <div style={{ marginTop: 10, padding: 6, background: '#0a0a0b', color: '#d4f752' }}>
          ████ ▌▌ ▌█▌ ████ ▌█▌█▌ ██▌ ▌▌▌ █▌█ ████ — CHAVE NFe 35260548120119000122550010000{nf.nf}1100000{nf.nf}
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}><Icon name="download" /> Baixar DANFE (PDF)</button>
        <button className="btn"><Icon name="download" /> Baixar XML</button>
        <button className="btn"><Icon name="print" /> Imprimir</button>
      </div>
    </div>
  );
}

function Field({ label, value, valueClass, mono }) {
  return (
    <div>
      <div className="field-label">{label}</div>
      <div className={`${valueClass || ''} ${mono ? 'mono' : ''}`} style={{ fontSize: 13, fontWeight: 500 }}>{value}</div>
    </div>
  );
}

window.MFinanceiro = MFinanceiro;