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

const STATUS_ORDER = KANBAN_EMP.map(s => s.id);
const STATUS_LABEL = Object.fromEntries(KANBAN_EMP.map(s => [s.id, s.label]));

function MEmpenhos({ onNav }) {
  const [empenhos, setEmpenhos] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [view, setView] = React.useState('kanban');
  const [selected, setSelected] = React.useState(null);
  const [drawerTab, setDrawerTab] = React.useState('pipe');
  const [capturing, setCapturing] = React.useState(false);
  const [showLancar, setShowLancar] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const showToast = (msg, ms = 4000) => { setToast(msg); setTimeout(() => setToast(null), ms); };

  const reload = React.useCallback(async () => {
    try {
      const rows = await window.dataApi.listEmpenhos();
      setEmpenhos(rows);
    } catch {
      setEmpenhos([]);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const sel = selected ? empenhos.find(e => e.id === selected) : null;
  const openEmp = (id) => { setSelected(id); setDrawerTab('pipe'); };

  const handleCapturar = () => {
    if (capturing) return;
    setCapturing(true);
    setTimeout(() => {
      setCapturing(false);
      const novos = Math.floor(Math.random() * 3) + 1;
      showToast(`Caixa de entrada varrida · ${novos} ${novos === 1 ? 'empenho novo capturado' : 'empenhos novos capturados'} · IA validou contra lances vencedores`);
    }, 2000);
  };

  const handleLancado = async (form) => {
    try {
      const created = await window.dataApi.insertEmpenho(form);
      await reload();
      setShowLancar(false);
      showToast(`Empenho ${created.numero} lançado · status RECEBIDO`);
    } catch (e) {
      showToast(`Erro: ${e?.message || e}`, 6000);
    }
  };

  const stats = {
    hoje: empenhos.filter(e => e.dias === 0).length,
    aguardNF: empenhos.filter(e => ['val', 'nf-sol'].includes(e.status)).length,
    aguardNFTotal: empenhos.filter(e => ['val', 'nf-sol'].includes(e.status)).reduce((a, e) => a + e.valor, 0),
    transito: empenhos.filter(e => e.status === 'transp').length,
    atrasados: empenhos.filter(e => e.atraso).length,
    atrasadosTotal: empenhos.filter(e => e.atraso).reduce((a, e) => a + e.valor, 0),
    hojeTotal: empenhos.filter(e => e.dias <= 2).reduce((a, e) => a + e.valor, 0),
  };

  return (
    <>
      <Ticker />
      <div className="page page-tight" style={{ padding: '20px 22px' }}>
        <div className="page-header">
          <div>
            <div className="eyebrow"><span>Gestão de Empenhos</span><span className="chip">M05</span></div>
            <h1 className="page-title">{loading ? 'Carregando...' : `${empenhos.length} empenhos ativos · ${BRL(empenhos.reduce((a, e) => a + e.valor, 0))} em carteira`}</h1>
            <p className="page-sub">Captura automática · validação contra lance · 12 status com movimentação automática · resposta ao órgão em cada etapa.</p>
          </div>
          <div className="flex items-center gap-3">
            <div className="segmented">
              <div className={`seg${view === 'kanban' ? ' active' : ''}`} onClick={() => setView('kanban')}><Icon name="grid" size={11} /> KANBAN</div>
              <div className={`seg${view === 'list' ? ' active' : ''}`} onClick={() => setView('list')}><Icon name="list" size={11} /> LISTA</div>
            </div>
            <button className="btn" onClick={handleCapturar} disabled={capturing}>
              {capturing ? <span className="spinner"></span> : <Icon name="upload" />}
              {capturing ? 'Capturando...' : 'Capturar e-mail'}
            </button>
            <button className="btn btn-primary" onClick={() => setShowLancar(true)}><Icon name="plus" /> Lançar empenho</button>
          </div>
        </div>

        <div className="grid-4" style={{ marginBottom: 14 }}>
          <KpiSmall l="EMPENHOS HOJE" v={empenhos.filter(e => e.dias <= 2).length} sub={`+${BRL(stats.hojeTotal)}`} />
          <KpiSmall l="AGUARDANDO NF" v={stats.aguardNF} sub={BRL(stats.aguardNFTotal)} cls="amber" />
          <KpiSmall l="EM TRÂNSITO" v={stats.transito} sub="Correios + SSW" cls="cyan" />
          <KpiSmall l="A COBRAR (40d+)" v={stats.atrasados} sub={BRL(stats.atrasadosTotal)} cls="red" />
        </div>

        {view === 'kanban' && <EmpenhoKanban onSelect={openEmp} empenhos={empenhos} loading={loading} />}
        {view === 'list' && <EmpenhoLista onSelect={openEmp} empenhos={empenhos} loading={loading} />}
      </div>

      {sel && <EmpenhoDrawer empenho={sel} onClose={() => setSelected(null)} tab={drawerTab} onTab={setDrawerTab} onNav={onNav} />}
      {showLancar && <LancarEmpenhoModal onClose={() => setShowLancar(false)} onLancar={handleLancado} />}
      {toast && (
        <div className="alert-banner alert-lime" style={{ position: 'fixed', bottom: 22, right: 22, zIndex: 300, maxWidth: 480, 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>
      )}
    </>
  );
}

function LancarEmpenhoModal({ onClose, onLancar }) {
  const [form, setForm] = React.useState({
    id: '2026NE' + String(Math.floor(Math.random() * 9000) + 1000).padStart(6, '0'),
    orgao: '',
    edital: '',
    arp: '',
    valor: '',
    email: '',
    uf: 'RJ',
    triangulacao: false,
  });
  const [erro, setErro] = React.useState(null);
  const set = (k, v) => setForm({ ...form, [k]: v });

  const [saving, setSaving] = React.useState(false);
  const submit = async () => {
    if (!form.orgao || !form.valor) {
      setErro('Preencha Órgão e Valor');
      return;
    }
    setErro(null);
    setSaving(true);
    try {
      await onLancar({
        numero: form.id,
        orgao: form.orgao,
        orgaoFull: form.orgao,
        uf: form.uf,
        valor: form.valor,
        email: form.email,
        arp: form.arp,
        triangulacao: form.triangulacao,
      });
    } catch (e) {
      setErro(e?.message || 'Erro ao salvar');
    } finally {
      setSaving(false);
    }
  };

  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: 580, maxHeight: '85vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="plus" />
          <div className="t">Lançar empenho manualmente</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>Quando usar isso</strong>
              <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                Para empenhos recebidos fora do fluxo automático (cópia física, telefone, indicação). Após salvar, o pipeline de 12 etapas começa em <strong>RECEBIDO</strong> e a IA valida contra os lances vencedores.
              </div>
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">NÚMERO DO EMPENHO <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" value={form.id} onChange={e => set('id', e.target.value)} placeholder="2026NE000XXX" />
            </div>
            <div>
              <div className="field-label">UF</div>
              <select className="input" value={form.uf} onChange={e => set('uf', e.target.value)}>
                {['AC', 'AL', 'AM', 'AP', 'BA', 'CE', 'DF', 'ES', 'GO', 'MA', 'MG', 'MS', 'MT', 'PA', 'PB', 'PE', 'PI', 'PR', 'RJ', 'RN', 'RO', 'RR', 'RS', 'SC', 'SE', 'SP', 'TO'].map(uf => <option key={uf}>{uf}</option>)}
              </select>
            </div>
          </div>

          <div>
            <div className="field-label">ÓRGÃO <span style={{ color: 'var(--red)' }}>*</span></div>
            <input className="input" value={form.orgao} onChange={e => set('orgao', e.target.value)} placeholder="Ex: Prefeitura Municipal de Niterói" />
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">EDITAL DE ORIGEM <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" value={form.edital} onChange={e => set('edital', e.target.value)} placeholder="PE-187/2026" />
            </div>
            <div>
              <div className="field-label">ARP (opcional)</div>
              <input className="input mono" value={form.arp} onChange={e => set('arp', e.target.value)} placeholder="ARP nº 014/2026" />
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">VALOR DO EMPENHO (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">E-MAIL DO ÓRGÃO (opcional)</div>
              <input className="input" type="email" value={form.email} onChange={e => set('email', e.target.value)} placeholder="compras@orgao.gov.br" />
            </div>
          </div>

          <div className="flex items-center" style={{ justifyContent: 'space-between' }}>
            <div>
              <div className="field-label" style={{ marginBottom: 2 }}>EMPENHO COM TRIANGULAÇÃO</div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>Marque se algum item será comprado direto do fornecedor (não passa pelo estoque BTM).</div>
            </div>
            <div className={`toggle${form.triangulacao ? ' on' : ''}`} onClick={() => set('triangulacao', !form.triangulacao)}></div>
          </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" /> Lançar empenho</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)' : 'var(--fg-0)' }}>{v}</span>
        <span style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{sub}</span>
      </div>
    </div>
  );
}

function EmpenhoKanban({ onSelect, empenhos, loading }) {
  if (loading) return <div className="card" style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}><span className="spinner" style={{ marginRight: 8 }}></span> Carregando empenhos...</div>;
  return (
    <div className="kanban" style={{ minHeight: 480 }}>
      {KANBAN_EMP.map((col, idx) => {
        const itens = empenhos.filter(e => e.status === col.id);
        return (
          <div key={col.id} className="kan-col" style={{ flex: '0 0 220px' }}>
            <div className="kan-head" style={{ borderBottom: '1px solid var(--line-1)' }}>
              <span className="mono" style={{ fontSize: 9, color: 'var(--fg-3)', marginRight: 4 }}>{String(idx + 1).padStart(2, '0')}</span>
              {col.label}
              <span className="ct">{itens.length}</span>
            </div>
            <div className="kan-body">
              {itens.map(e => <EmpKanCard key={e.id} e={e} onClick={() => onSelect(e.id)} />)}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function EmpKanCard({ e, onClick }) {
  return (
    <div className="kan-card" onClick={onClick} style={{ borderLeft: e.atraso ? '3px solid var(--red)' : undefined }}>
      <div className="id">{e.numero}</div>
      <div className="ttl">{e.orgao}</div>
      <div className="meta">
        <span>{e.dias}d</span>
        {e.prazo !== undefined && <><span>·</span><span style={{ color: e.prazo < 0 ? 'var(--red)' : e.prazo < 7 ? 'var(--amber)' : 'var(--fg-3)' }}>{e.prazo < 0 ? `${Math.abs(e.prazo)}d atraso` : `${e.prazo}d`}</span></>}
        <span className="val">{BRL(e.valor)}</span>
      </div>
      {e.rastreio && (
        <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono', fontSize: 9.5, color: 'var(--cyan)' }}>📦 {e.rastreio}</div>
      )}
    </div>
  );
}

function EmpenhoLista({ onSelect, empenhos, loading }) {
  return (
    <div className="card">
      <table className="tbl">
        <thead>
          <tr>
            <th>Empenho</th>
            <th>Órgão</th>
            <th>UF</th>
            <th style={{ textAlign: 'right' }}>Valor</th>
            <th>Status</th>
            <th>Dias</th>
            <th>Prazo</th>
            <th>NF</th>
            <th>Edital</th>
            <th style={{ width: 32 }}></th>
          </tr>
        </thead>
        <tbody>
          {loading && (
            <tr><td colSpan={10} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
              <span className="spinner" style={{ marginRight: 8 }}></span> Carregando empenhos...
            </td></tr>
          )}
          {!loading && empenhos.length === 0 && (
            <tr><td colSpan={10} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
              Nenhum empenho cadastrado.
            </td></tr>
          )}
          {!loading && empenhos.map(e => (
            <tr key={e.id} onClick={() => onSelect(e.id)} style={{ cursor: 'pointer' }}>
              <td className="mono" style={{ color: 'var(--fg-0)', fontWeight: 500 }}>{e.numero}</td>
              <td>{e.orgao}</td>
              <td><span className="badge">{e.uf}</span></td>
              <td className="num-col" style={{ color: 'var(--lime)' }}>{BRL(e.valor)}</td>
              <td><span className="badge">{STATUS_LABEL[e.status]}</span></td>
              <td className="mono">{e.dias}d</td>
              <td className="mono" style={{ color: e.atraso ? 'var(--red)' : e.prazo !== undefined && e.prazo < 7 ? 'var(--amber)' : 'var(--fg-1)' }}>
                {e.prazo === undefined ? '—' : e.prazo < 0 ? `${Math.abs(e.prazo)}d atraso` : `${e.prazo}d`}
              </td>
              <td className="mono">{e.nf || '—'}</td>
              <td className="id-col">{e.edital}</td>
              <td><Icon name="chevR" size={11} style={{ color: 'var(--fg-3)' }} /></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ── EMPENHO DRAWER ────────────────────────────────────────── */
function EmpenhoDrawer({ empenho, onClose, tab, onTab, onNav }) {
  const docCount = empenho.status === 'val' ? 2 : empenho.status === 'nf-emit' || empenho.status === 'compra' ? 4 : 5;
  const statusBadgeCls = empenho.atraso ? 'badge-red' : ['pago', 'entreg'].includes(empenho.status) ? 'badge-lime' : ['val', 'rec'].includes(empenho.status) ? 'badge-cyan' : 'badge-amber';

  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>Empenho</span><span className="chip">M05</span><span className={`badge ${statusBadgeCls}`}>{STATUS_LABEL[empenho.status]}</span>{empenho.atraso && <span className="badge badge-red">ATRASADO</span>}</>}
      title={<span className="mono" style={{ fontWeight: 600 }}>{empenho.numero} · {empenho.orgao}</span>}
      subtitle={`${empenho.orgaoFull} · ${empenho.uf} · ${empenho.arp} (${empenho.edital})`}
      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(--lime)' }}>{BRL(empenho.valor)}</div>
        </div>
      }
      tabs={[
        { id: 'pipe', label: 'Pipeline', count: STATUS_ORDER.indexOf(empenho.status) + 1 + '/' + STATUS_ORDER.length },
        { id: 'itens', label: 'Itens & E-mail' },
        { id: 'docs', label: 'Documentos', count: docCount },
        { id: 'resp', label: 'Respostas' },
        { id: 'ia', label: 'IA & Ações' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        <>
          <button className="btn"><Icon name="print" /> Imprimir</button>
          <button className="btn"><Icon name="users" /> Avisar cliente</button>
          {empenho.status === 'val' && <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNav('logistica')}><Icon name="package" /> Gerar pedido de compras</button>}
          {empenho.status === 'transp' && <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNav('logistica')}><Icon name="truck" /> Acompanhar transporte</button>}
          {empenho.status === 'cobr' && <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNav('financeiro')}><Icon name="dollar" /> Cobrar pagamento</button>}
          {!['val', 'transp', 'cobr'].includes(empenho.status) && <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}><Icon name="arrowR" /> Avançar status</button>}
        </>
      }
    >
      {tab === 'pipe' && <TabPipeline empenho={empenho} />}
      {tab === 'itens' && <TabItensEmail empenho={empenho} />}
      {tab === 'docs' && <TabDocs empenho={empenho} />}
      {tab === 'resp' && <TabRespostas empenho={empenho} />}
      {tab === 'ia' && <TabIaAcoes empenho={empenho} onNav={onNav} />}
    </Drawer>
  );
}

function TabPipeline({ empenho }) {
  const currentIdx = STATUS_ORDER.indexOf(empenho.status);
  const baseTimes = {
    rec: { dt: '12/05 08:42', actor: empenho.email },
    val: { dt: '12/05 08:44', actor: 'IA Gerente · auto' },
    'nf-sol': { dt: '12/05 09:12', actor: 'Sistema → escritório@contabilidade.com' },
    'nf-emit': { dt: '12/05 14:08', actor: empenho.nf && empenho.nf !== '—' && empenho.nf !== 'solicitada' ? `NF ${empenho.nf} · NFE.io` : 'aguardando' },
    compra: { dt: '13/05', actor: 'Suzano Distribuição' },
    separ: { dt: '14/05', actor: 'Almox. BTM' },
    rev: { dt: '14/05', actor: 'Conferência interna' },
    exp: { dt: '15/05', actor: 'Expedição' },
    transp: { dt: '16/05', actor: empenho.rastreio || 'Correios/SSW' },
    entreg: { dt: '20/05', actor: empenho.orgao },
    cobr: { dt: empenho.atraso ? `${empenho.dias}d pós-NF` : '—', actor: empenho.atraso ? 'Financeiro · cobrança ativa' : 'aguardando' },
    pago: { dt: empenho.status === 'pago' ? '02/05' : '—', actor: empenho.status === 'pago' ? 'Banco do Brasil' : 'aguardando' },
  };

  return (
    <div style={{ padding: '8px 0' }}>
      {STATUS_ORDER.map((sid, i) => {
        const done = i < currentIdx;
        const current = i === currentIdx;
        const future = i > currentIdx;
        const label = STATUS_LABEL[sid];
        const info = baseTimes[sid] || {};
        return (
          <div key={sid} style={{ display: 'grid', gridTemplateColumns: '28px 1fr', padding: '10px 18px', alignItems: 'center', gap: 12, background: current ? 'var(--bg-2)' : undefined, position: 'relative' }}>
            {current && <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: 'var(--lime)' }}></div>}
            <div style={{ position: 'relative', display: 'grid', placeItems: 'center' }}>
              <div style={{
                width: 22, height: 22, borderRadius: '50%',
                background: done ? 'var(--lime)' : current ? 'var(--bg-3)' : 'transparent',
                border: done ? 'none' : `2px solid ${current ? 'var(--lime)' : 'var(--line-2)'}`,
                display: 'grid', placeItems: 'center',
              }}>
                {done ? <Icon name="check" size={11} style={{ color: '#0a0a0b' }} /> : current ? <span className="dot-pulse" style={{ width: 6, height: 6 }}></span> : null}
              </div>
              {i < STATUS_ORDER.length - 1 && <div style={{ position: 'absolute', top: 22, bottom: -10, width: 1.5, background: done ? 'var(--lime)' : 'var(--line-2)' }}></div>}
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 12, color: future ? 'var(--fg-3)' : 'var(--fg-0)', fontWeight: current ? 600 : 400 }}>{label}</div>
              <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{future ? '—' : info.dt}</div>
              {info.actor && !future && <div style={{ fontSize: 10, color: 'var(--fg-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{info.actor}</div>}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function TabItensEmail({ empenho }) {
  const itens = [
    { d: 'Papel A4 75g — Resma 500 fls', c: 'BTM-PA-001', q: 2400, u: 21.49, t: 51576.00, cen: 'ESTOQUE' },
    { d: 'Caneta esfer. azul 1.0mm', c: 'BTM-CN-014', q: 4800, u: 1.44, t: 6912.00, cen: 'ESTOQUE' },
    ...(empenho.triangulacao ? [{ d: 'Pasta AZ ofício preta', c: 'BTM-PT-052', q: 240, u: 13.39, t: 3213.60, cen: 'TRIANGULAÇÃO' }] : []),
  ];
  const total = itens.reduce((a, i) => a + i.t, 0);
  return (
    <div>
      <div style={{ padding: '14px 18px 6px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="field-label" style={{ margin: 0 }}>ITENS DO EMPENHO ({itens.length})</div>
        <span className="badge badge-lime">VALIDADO ✓ LANCE</span>
      </div>
      <table className="tbl">
        <thead><tr><th>Descrição</th><th>Cod</th><th style={{ textAlign: 'right' }}>Qtd</th><th style={{ textAlign: 'right' }}>Unit</th><th style={{ textAlign: 'right' }}>Total</th><th>Cenário</th></tr></thead>
        <tbody>
          {itens.map((it, i) => (
            <tr key={i}>
              <td>{it.d}</td>
              <td className="mono">{it.c}</td>
              <td className="num-col">{NUM(it.q)}</td>
              <td className="num-col">{BRL(it.u)}</td>
              <td className="num-col" style={{ fontWeight: 500 }}>{BRL(it.t)}</td>
              <td><span className={`badge ${it.cen === 'TRIANGULAÇÃO' ? 'badge-cyan' : ''}`}>{it.cen}</span></td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr style={{ background: 'var(--bg-2)' }}>
            <td colSpan={4} style={{ textAlign: 'right', padding: 10, fontFamily: 'IBM Plex Mono' }}>Total:</td>
            <td className="num-col" style={{ color: 'var(--lime)', fontWeight: 600, fontSize: 13 }}>{BRL(total)}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>

      <div style={{ padding: '18px 18px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="field-label" style={{ margin: 0 }}>E-MAIL ORIGINAL CAPTURADO</div>
        <span className="badge badge-cyan">VALIDADO</span>
      </div>
      <div style={{ padding: 14, background: 'var(--bg-2)', borderRadius: 4, margin: '0 18px 18px', fontFamily: 'IBM Plex Mono', fontSize: 11, lineHeight: 1.6, border: '1px solid var(--line-1)' }}>
        <div><span style={{ color: 'var(--fg-3)' }}>De:</span> {empenho.email}</div>
        <div><span style={{ color: 'var(--fg-3)' }}>Para:</span> contato@btmsigma.com</div>
        <div><span style={{ color: 'var(--fg-3)' }}>Assunto:</span> Empenho {empenho.numero} (Nomenclatura detectada: <strong style={{ color: 'var(--lime)' }}>EMPENHO</strong>)</div>
        <div><span style={{ color: 'var(--fg-3)' }}>Anexos:</span> <span className="file-pill" style={{ padding: '2px 6px' }}><span className="ext pdf">PDF</span> NE_{(empenho.numero || '').replace('2026NE', '')}_{empenho.orgao.replace(/[^A-Z]/g, '')}.pdf</span></div>
        <div style={{ marginTop: 8, color: 'var(--fg-1)', fontFamily: 'IBM Plex Sans', fontSize: 12 }}>
          Prezados, encaminhamos a nota de empenho referente à {empenho.arp}, originária do pregão {empenho.edital}. Solicitamos a entrega no Almoxarifado Central conforme cronograma anexo. Atenciosamente, Setor de Compras — {empenho.orgaoFull}.
        </div>
      </div>
      <div style={{ padding: '0 18px 18px', display: 'flex', gap: 6 }}>
        <button className="btn btn-sm"><Icon name="print" size={11} /> Imprimir e-mail</button>
        <button className="btn btn-sm"><Icon name="link" size={11} /> Link Portal Cliente</button>
        <button className="btn btn-sm"><Icon name="download" size={11} /> Baixar PDF</button>
      </div>
    </div>
  );
}

function TabDocs({ empenho }) {
  const currentIdx = STATUS_ORDER.indexOf(empenho.status);
  const docs = [
    { nome: `NE_${(empenho.numero || '').replace('2026NE', '')}.pdf`, ext: 'pdf', tamanho: '184 KB', published: 'há ' + empenho.dias + 'd', available: true, cat: 'EMPENHO' },
    { nome: `NF_${empenho.nf || '—'}_BTM.pdf`, ext: 'pdf', tamanho: '218 KB', published: empenho.nf && empenho.nf !== '—' && empenho.nf !== 'solicitada' ? 'há ' + Math.max(0, empenho.dias - 1) + 'd' : '—', available: empenho.nf && empenho.nf !== '—' && empenho.nf !== 'solicitada', cat: 'NF' },
    { nome: `NFe_${empenho.nf || '—'}.xml`, ext: 'xml', tamanho: '12 KB', published: empenho.nf && empenho.nf !== '—' && empenho.nf !== 'solicitada' ? 'há ' + Math.max(0, empenho.dias - 1) + 'd' : '—', available: empenho.nf && empenho.nf !== '—' && empenho.nf !== 'solicitada', cat: 'NFe' },
    { nome: `Pedido_Compras_${(empenho.numero || '').slice(-4)}.pdf`, ext: 'pdf', tamanho: '94 KB', published: currentIdx >= STATUS_ORDER.indexOf('compra') ? 'há ' + Math.max(0, empenho.dias - 2) + 'd' : '—', available: currentIdx >= STATUS_ORDER.indexOf('compra'), cat: 'COMPRA' },
    { nome: 'Romaneio.pdf', ext: 'pdf', tamanho: '76 KB', published: currentIdx >= STATUS_ORDER.indexOf('exp') ? 'há ' + Math.max(0, empenho.dias - 7) + 'd' : '—', available: currentIdx >= STATUS_ORDER.indexOf('exp'), cat: 'ROMANEIO' },
    ...(empenho.rastreio ? [{ nome: `Etiqueta_${empenho.rastreio}.pdf`, ext: 'pdf', tamanho: '52 KB', published: 'há ' + Math.max(0, empenho.dias - 10) + 'd', available: true, cat: 'RASTREIO' }] : []),
    ...(currentIdx >= STATUS_ORDER.indexOf('entreg') ? [{ nome: 'Comprovante_Entrega.pdf', ext: 'pdf', tamanho: '184 KB', published: 'há ' + Math.max(0, empenho.dias - 14) + 'd', available: true, cat: 'ENTREGA' }] : []),
  ];

  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>DOCUMENTOS DO EMPENHO</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {docs.map((d, i) => (
          <div key={i} className={d.available ? 'clickable' : ''} style={{ display: 'grid', gridTemplateColumns: '40px 1fr 90px 80px 110px', gap: 12, alignItems: 'center', padding: '10px 12px', background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, opacity: d.available ? 1 : 0.4 }}>
            <div style={{ width: 32, height: 38, background: 'var(--bg-3)', borderRadius: 4, display: 'grid', placeItems: 'center', fontFamily: 'IBM Plex Mono', fontSize: 9.5, fontWeight: 700, color: d.ext === 'pdf' ? 'var(--red)' : d.ext === 'xml' ? 'var(--cyan)' : 'var(--fg-3)' }}>{d.ext.toUpperCase()}</div>
            <div>
              <div style={{ fontSize: 12.5, color: 'var(--fg-0)' }}>{d.nome}</div>
              <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{d.tamanho} · {d.published === '—' ? 'aguardando' : 'publicado ' + d.published}</div>
            </div>
            <span className="badge" style={{ fontSize: 9.5 }}>{d.cat}</span>
            <span className="mono" style={{ fontSize: 11, color: d.available ? 'var(--lime)' : 'var(--fg-3)' }}>{d.available ? 'pronto' : 'aguardando'}</span>
            <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
              <button className="btn btn-ghost btn-sm" disabled={!d.available} onClick={e => e.stopPropagation()}><Icon name="eye" size={11} /></button>
              <button className="btn btn-ghost btn-sm" disabled={!d.available} onClick={e => e.stopPropagation()}><Icon name="download" size={11} /></button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TabRespostas({ empenho }) {
  const currentIdx = STATUS_ORDER.indexOf(empenho.status);
  const resps = [
    { stage: 'Recebimento confirmado', time: '12/05 08:46', body: `Acusamos o recebimento do empenho ${empenho.numero} e estamos providenciando o atendimento.`, threshold: 'rec' },
    { stage: 'NF emitida', time: '12/05 14:11', body: `Sua NF nº ${empenho.nf || '—'} foi emitida e segue anexa. Iniciaremos a separação.`, threshold: 'nf-emit' },
    { stage: 'Em separação', time: '14/05 09:30', body: 'Pedido em separação no almoxarifado. Confirmaremos despacho em até 48h.', threshold: 'separ' },
    { stage: 'Despacho + rastreio', time: empenho.rastreio ? '16/05 11:42' : 'aguardando', body: empenho.rastreio ? `Pedido despachado · rastreio ${empenho.rastreio} · prazo de entrega 5-7 dias úteis.` : null, threshold: 'transp' },
    { stage: 'Comprovante de entrega', time: currentIdx >= STATUS_ORDER.indexOf('entreg') ? '20/05 14:15' : 'aguardando', body: currentIdx >= STATUS_ORDER.indexOf('entreg') ? 'Mercadoria entregue conforme protocolo. Comprovante anexo.' : null, threshold: 'entreg' },
    { stage: 'Cobrança (40d pós-NF)', time: empenho.atraso ? `D+${empenho.dias}` : 'aguardando', body: empenho.atraso ? 'Notificação de cobrança encaminhada ao setor financeiro do órgão.' : null, threshold: 'cobr' },
  ];
  return (
    <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div className="field-label" style={{ marginBottom: 4 }}>RESPOSTAS AUTOMÁTICAS AO ÓRGÃO</div>
      {resps.map((r, i) => {
        const ok = currentIdx >= STATUS_ORDER.indexOf(r.threshold);
        return (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '16px 1fr 110px', gap: 12, alignItems: 'flex-start', fontSize: 12, padding: 12, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)', opacity: ok ? 1 : 0.5 }}>
            <div style={{ width: 14, height: 14, borderRadius: '50%', background: ok ? 'var(--lime)' : 'var(--bg-4)', display: 'grid', placeItems: 'center', marginTop: 2 }}>
              {ok && <Icon name="check" size={9} style={{ color: '#0a0a0b' }} />}
            </div>
            <div>
              <div style={{ fontWeight: 500, color: 'var(--fg-0)' }}>{r.stage}</div>
              {r.body && <div style={{ color: 'var(--fg-3)', fontSize: 11.5, marginTop: 2, fontStyle: 'italic' }}>"{r.body}"</div>}
            </div>
            <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)', textAlign: 'right' }}>{r.time}</div>
          </div>
        );
      })}
      <button className="btn btn-ghost btn-sm" style={{ alignSelf: 'flex-start', marginTop: 6 }}><Icon name="plus" size={11} /> Criar template personalizado</button>
    </div>
  );
}

function TabIaAcoes({ empenho, onNav }) {
  return (
    <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div className="card" style={{ background: 'linear-gradient(180deg, rgba(106,215,229,0.05), var(--bg-1))', border: '1px solid rgba(106,215,229,0.25)' }}>
        <div className="card-head" style={{ background: 'rgba(106,215,229,0.05)' }}>
          <Icon name="cpu" style={{ color: 'var(--cyan)' }} />
          <div className="t" style={{ color: 'var(--cyan)' }}>IA · Sugestão</div>
        </div>
        <div style={{ padding: 14, fontSize: 12.5, color: 'var(--fg-1)', lineHeight: 1.55 }}>
          {empenho.triangulacao ? (
            <>Identifiquei que <strong>Pasta AZ</strong> é triangulação. Posso emitir Pedido de Compras à <strong>Polibras</strong> automaticamente com INNER aplicado (20 un · qtd 240 = 12 inners exatos · sem sobra)?</>
          ) : empenho.atraso ? (
            <>Empenho com {empenho.dias} dias pós-emissão. Posso iniciar protocolo de cobrança automática — disparar e-mail para <strong>{empenho.email}</strong> e abrir ticket no setor financeiro?</>
          ) : empenho.status === 'val' ? (
            <>Empenho validado contra lance. Posso seguir o fluxo automático: solicitar NF → gerar pedido de compras → cronograma de expedição. Tudo respeitando os prazos do órgão.</>
          ) : (
            <>Empenho em <strong>{STATUS_LABEL[empenho.status]}</strong>. Posso preparar a próxima etapa do pipeline automaticamente assim que houver confirmação da etapa atual.</>
          )}
          <div style={{ marginTop: 12, display: 'flex', gap: 6 }}>
            <button className="btn btn-primary btn-sm">Sim, executar</button>
            <button className="btn btn-sm">Revisar antes</button>
            <button className="btn btn-ghost btn-sm">Ignorar</button>
          </div>
        </div>
      </div>

      <div>
        <div className="field-label" style={{ marginBottom: 10 }}>PRÓXIMAS AÇÕES</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button className="btn btn-primary" style={{ justifyContent: 'flex-start', padding: 10 }} onClick={() => onNav('logistica')}><Icon name="package" /> Gerar Pedido de Compras</button>
          <button className="btn" style={{ justifyContent: 'flex-start', padding: 10 }} onClick={() => onNav('logistica')}><Icon name="truck" /> Calcular frete CIF</button>
          <button className="btn" style={{ justifyContent: 'flex-start', padding: 10 }}><Icon name="users" /> Avisar cliente (Portal)</button>
          <button className="btn" style={{ justifyContent: 'flex-start', padding: 10 }} onClick={() => onNav('financeiro')}><Icon name="dollar" /> Antecipar fluxo de cobrança</button>
          <button className="btn btn-ghost" style={{ justifyContent: 'flex-start', padding: 10 }}><Icon name="archive" /> Arquivar empenho</button>
        </div>
      </div>
    </div>
  );
}

window.MEmpenhos = MEmpenhos;