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

const PREC_STATUS = {
  rascunho:   { label: 'RASCUNHO',   cls: '',           dot: 'var(--fg-3)' },
  revisao:    { label: 'EM REVISÃO', cls: 'badge-amber',dot: 'var(--amber)' },
  pronto:     { label: 'PRONTO',     cls: 'badge-lime', dot: 'var(--lime)' },
  enviado:    { label: 'ENVIADO',    cls: 'badge-cyan', dot: 'var(--cyan)' },
  descartado: { label: 'DESCART.',   cls: '',           dot: 'var(--fg-4)' },
};

function MPrecificacao({ onNav }) {
  const [precificacoes, setPrecificacoes] = React.useState([]);
  const [aggregates, setAggregates] = React.useState({});  // { precifId: { custo, margem, itens, alertInner, descart } }
  const [loading, setLoading] = React.useState(true);
  const [loadError, setLoadError] = React.useState(null);
  const [selected, setSelected] = React.useState(null);
  const [drawerTab, setDrawerTab] = React.useState('resumo');
  const [filtroStatus, setFiltroStatus] = React.useState('todos');
  const [regimePadrao, setRegimePadrao] = React.useState('lucro-real');
  const [importing, setImporting] = React.useState(false);
  const [syncing, setSyncing] = React.useState(false);
  const [showNew, setShowNew] = 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 {
      setLoadError(null);
      const rows = await window.dataApi.listPrecificacoes();
      setPrecificacoes(rows);
      // Carrega agregados em paralelo (custo total, margem média, alertas)
      const agg = {};
      await Promise.all(rows.map(async (p) => {
        try {
          const itens = await window.dataApi.listPrecificacaoItens(p.id);
          const ativos = itens.filter(i => !i.descartado);
          const custo = ativos.reduce((s, i) => s + i.custo * i.qtd, 0);
          const margemMedia = ativos.length > 0 ? ativos.reduce((s, i) => s + i.margem, 0) / ativos.length : 0;
          agg[p.id] = {
            custo,
            margem: margemMedia,
            itens: ativos.length,
            descart: itens.filter(i => i.descartado).length,
            alertInner: itens.filter(i => i.alerta_inner).length,
          };
        } catch { agg[p.id] = { custo: 0, margem: 0, itens: 0, descart: 0, alertInner: 0 }; }
      }));
      setAggregates(agg);
    } catch (e) {
      setLoadError(e?.message || 'Falha ao carregar precificações');
    } finally {
      setLoading(false);
    }
  }, []);

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

  // Lista enriquecida com agregados (forma similar ao mock antigo)
  const lista = React.useMemo(() => precificacoes.map(p => {
    const a = aggregates[p.id] || { custo: 0, margem: 0, itens: 0, descart: 0, alertInner: 0 };
    return {
      // fields do edital expostos no top level pra UI atual continuar igual
      id: p.edital?.numero,
      numero: p.edital?.numero,
      orgao: p.edital?.orgao,
      uf: p.edital?.uf,
      cidade: p.edital?.cidade,
      plataforma: p.edital?.plataforma,
      valor: p.edital?.valor || 0,
      abertura: p.edital?.abertura,
      itens: p.edital?.itens || 0,
      // dados da precificação
      precId: p.id,
      prec: {
        status: p.status,
        regime: p.regime,
        proposta: p.proposta_gerada,
        custo: a.custo,
        margem: a.margem,
        itens: a.itens,
        descart: a.descart,
        alertInner: a.alertInner,
      },
      _raw: p,
    };
  }), [precificacoes, aggregates]);

  const listaFiltrada = React.useMemo(() => {
    if (filtroStatus === 'inner') return lista.filter(e => e.prec.alertInner > 0);
    if (filtroStatus === 'proposta') return lista.filter(e => !e.prec.proposta);
    return lista;
  }, [filtroStatus, lista]);

  const sel = selected ? lista.find(e => e.precId === selected) : null;

  // KPIs gerais
  const totalValor = lista.reduce((a, e) => a + (e.valor || 0), 0);
  const totalCusto = lista.reduce((a, e) => a + (e.prec.custo || 0), 0);
  const margemMedia = lista.length > 0 ? lista.reduce((a, e) => a + (e.prec.margem || 0), 0) / lista.length : 0;
  const alertasInner = lista.reduce((a, e) => a + (e.prec.alertInner || 0), 0);

  const handleImport = () => {
    if (importing) return;
    setImporting(true);
    setTimeout(() => {
      setImporting(false);
      const nLinhas = Math.floor(Math.random() * 80) + 40;
      showToast(`Tabela do fornecedor importada · ${nLinhas} SKUs atualizados · INNER recalculado`);
    }, 1800);
  };

  const handleSync = () => {
    if (syncing) return;
    setSyncing(true);
    setTimeout(() => {
      setSyncing(false);
      showToast('Sincronização concluída · 7 fornecedores · 14 reajustes detectados nos últimos 30d');
    }, 2000);
  };

  const handleNewCreated = (id) => {
    setShowNew(false);
    showToast(`Nova precificação ${id} criada · status RASCUNHO · cargas tributárias do regime padrão aplicadas`);
  };

  return (
    <>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow"><span>Precificação Blindada · Regra do INNER</span><span className="chip">M03</span></div>
            <h1 className="page-title">Precificação de editais</h1>
            <p className="page-sub">Markup automático de 60% OU R$ 0,01 abaixo do edital (o maior). <strong>Regra do INNER</strong> protege a margem em triangulação. <strong>Preço mínimo</strong> exibido como alerta — não trava lance.</p>
          </div>
          <div className="flex items-center gap-3">
            <button className="btn" onClick={handleImport} disabled={importing}>
              {importing ? <span className="spinner"></span> : <Icon name="download" />}
              {importing ? 'Importando...' : 'Importar tabela fornecedor'}
            </button>
            <button className="btn" onClick={handleSync} disabled={syncing}>
              {syncing ? <span className="spinner"></span> : <Icon name="upload" />}
              {syncing ? 'Sincronizando...' : 'Sincronizar fornecedores'}
            </button>
            <button className="btn btn-primary" onClick={() => setShowNew(true)}><Icon name="plus" /> Nova precificação manual</button>
          </div>
        </div>

        {/* KPIs gerais */}
        <div className="grid-4" style={{ marginBottom: 16 }}>
          <PrecKpi label="VALOR DE REFERÊNCIA · TOTAL" value={BRL(totalValor)} sub={`${lista.length} editais ativos`} />
          <PrecKpi label="CUSTO TOTAL BTM · PROJETADO" value={BRL(totalCusto)} sub={`${lista.reduce((a, e) => a + e.prec.itens, 0)} itens precificados`} />
          <PrecKpi label="MARGEM MÉDIA · PROJETADA" value={margemMedia.toFixed(1) + '%'} sub="após cargas + frete" cls="lime" />
          <PrecKpi label="ALERTAS INNER · TOTAIS" value={`${alertasInner} itens`} sub="risco de prejuízo em triangulação" cls={alertasInner > 0 ? 'amber' : 'lime'} />
        </div>

        <div className="subbar">
          <div className={`filter-chip${filtroStatus === 'todos' ? ' active' : ''}`} onClick={() => setFiltroStatus('todos')}>
            Status: TODOS {filtroStatus === 'todos' && <Icon name="x" size={10} />}
          </div>
          <div className={`filter-chip${filtroStatus === 'inner' ? ' active' : ''}`} onClick={() => setFiltroStatus(filtroStatus === 'inner' ? 'todos' : 'inner')}>
            Apenas com alertas INNER {filtroStatus === 'inner' && <Icon name="x" size={10} />}
          </div>
          <div className={`filter-chip${filtroStatus === 'proposta' ? ' active' : ''}`} onClick={() => setFiltroStatus(filtroStatus === 'proposta' ? 'todos' : 'proposta')}>
            Proposta pendente {filtroStatus === 'proposta' && <Icon name="x" size={10} />}
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>Regime tributário padrão</span>
            <div className="segmented">
              {[
                { id: 'lucro-real', l: 'LUCRO REAL' },
                { id: 'simples', l: 'SIMPLES' },
                { id: 'presumido', l: 'PRESUMIDO' },
              ].map(r => (
                <div key={r.id} className={`seg${regimePadrao === r.id ? ' active' : ''}`} onClick={() => { setRegimePadrao(r.id); showToast(`Regime padrão alterado para ${r.l} · novas precificações usarão este regime`); }}>{r.l}</div>
              ))}
            </div>
          </div>
        </div>

        {loadError && (
          <div className="alert-banner alert-red" style={{ marginBottom: 12 }}>
            <Icon name="warn" size={13} />
            <div style={{ flex: 1 }}>{loadError}</div>
            <button className="btn btn-ghost btn-sm" onClick={reload}>Tentar de novo</button>
          </div>
        )}

        <div className="card">
          <div className="card-head">
            <div className="t">
              {loading ? 'Carregando precificações...' : `${listaFiltrada.length} editais`}
              {filtroStatus !== 'todos' && !loading && <span style={{ color: 'var(--fg-3)', fontSize: 11, marginLeft: 4 }}>(de {lista.length})</span>}
            </div>
            <div className="s">
              {loading ? '...' :
               filtroStatus === 'inner' ? 'apenas com alertas INNER' :
               filtroStatus === 'proposta' ? 'apenas com proposta ainda não gerada' :
               `${lista.filter(e => e.prec.status === 'pronto').length} prontos · ${lista.filter(e => e.prec.status === 'revisao').length} em revisão · ${lista.filter(e => e.prec.status === 'enviado').length} enviados`}
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Edital</th>
                <th>Órgão / Plataforma</th>
                <th style={{ textAlign: 'right' }}>Vlr. ref.</th>
                <th style={{ textAlign: 'right' }}>Custo BTM</th>
                <th>Itens prec.</th>
                <th>Margem</th>
                <th>INNER</th>
                <th>Regime</th>
                <th>Status</th>
                <th>Proposta</th>
                <th style={{ width: 32 }}></th>
              </tr>
            </thead>
            <tbody>
              {loading && (
                <tr>
                  <td colSpan={11} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
                    <span className="spinner" style={{ marginRight: 8 }}></span> Carregando precificações do Supabase...
                  </td>
                </tr>
              )}
              {!loading && listaFiltrada.length === 0 && (
                <tr>
                  <td colSpan={11} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
                    {lista.length === 0 ? 'Nenhuma precificação cadastrada.' : 'Nenhum edital corresponde a este filtro.'}
                  </td>
                </tr>
              )}
              {!loading && listaFiltrada.map(e => {
                const st = PREC_STATUS[e.prec.status] || PREC_STATUS.rascunho;
                return (
                  <tr key={e.precId} onClick={() => { setSelected(e.precId); setDrawerTab('resumo'); }} style={{ cursor: 'pointer' }}>
                    <td>
                      <div className="id-col" style={{ color: 'var(--fg-0)', fontWeight: 500 }}>{e.numero}</div>
                      <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{new Date(e.abertura).toLocaleDateString('pt-BR')}</div>
                    </td>
                    <td>
                      <div style={{ fontSize: 12 }}>{e.orgao}</div>
                      <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{e.plataforma} · {e.uf}</div>
                    </td>
                    <td className="num-col">{BRL(e.valor)}</td>
                    <td className="num-col" style={{ color: 'var(--fg-2)' }}>{BRL(e.prec.custo)}</td>
                    <td className="num-col">
                      <span className="mono" style={{ color: 'var(--fg-0)', fontWeight: 500 }}>{e.prec.itens}</span>
                      <span className="mono" style={{ color: 'var(--fg-3)', fontSize: 10.5 }}> / {e.itens}</span>
                      {e.prec.descart > 0 && <div style={{ fontSize: 10, color: 'var(--red)', fontFamily: 'IBM Plex Mono' }}>{e.prec.descart} descart.</div>}
                    </td>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div className="bar" style={{ width: 50, height: 4 }}>
                          <div className="fill" style={{ width: Math.min(100, e.prec.margem * 2) + '%', background: e.prec.margem >= 35 ? 'var(--lime)' : e.prec.margem >= 25 ? 'var(--amber)' : 'var(--red)' }}></div>
                        </div>
                        <span className="mono" style={{ fontSize: 11.5, color: e.prec.margem >= 35 ? 'var(--lime)' : e.prec.margem >= 25 ? 'var(--amber)' : 'var(--red)', fontWeight: 600 }}>{e.prec.margem.toFixed(1)}%</span>
                      </div>
                    </td>
                    <td>
                      {e.prec.alertInner > 0 ? (
                        <span className="badge badge-amber"><Icon name="warn" size={10} /> {e.prec.alertInner}</span>
                      ) : (
                        <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>—</span>
                      )}
                    </td>
                    <td>
                      <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-2)' }}>{e.prec.regime === 'lucro-real' ? 'LUCRO REAL' : 'SIMPLES'}</span>
                    </td>
                    <td>
                      <span className={`badge ${st.cls}`}>
                        <span style={{ display: 'inline-block', width: 5, height: 5, borderRadius: '50%', background: st.dot, marginRight: 4 }}></span>
                        {st.label}
                      </span>
                    </td>
                    <td>
                      {e.prec.proposta ? (
                        <span className="badge badge-lime"><Icon name="file" size={10} /> PDF</span>
                      ) : (
                        <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>—</span>
                      )}
                    </td>
                    <td><Icon name="chevR" size={12} style={{ color: 'var(--fg-3)' }} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {sel && <PrecDrawer edital={sel} onClose={() => setSelected(null)} tab={drawerTab} onTab={setDrawerTab} onNav={onNav} />}
      {showNew && <NovaPrecificacaoModal regimePadrao={regimePadrao} onClose={() => setShowNew(false)} onCreate={handleNewCreated} />}
      {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 NovaPrecificacaoModal({ regimePadrao, onClose, onCreate }) {
  const [form, setForm] = React.useState({
    id: 'PE-' + String(Math.floor(Math.random() * 900) + 100) + '/2026',
    orgao: '',
    valor: '',
    itens: '',
    regime: regimePadrao,
    base: 'manual',
  });
  const [erro, setErro] = React.useState(null);
  const set = (k, v) => setForm({ ...form, [k]: v });

  const submit = () => {
    if (!form.id || !form.orgao || !form.valor || !form.itens) {
      setErro('Preencha ID, Órgão, Valor e Quantidade de itens');
      return;
    }
    onCreate(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: 580, maxHeight: '85vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="plus" />
          <div className="t">Nova precificação manual</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 precificar editais que vieram fora do fluxo automático (e-mail direto, indicação, conversão de PDV em licitação). A planilha será gerada vazia para você preencher item a item.
              </div>
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">ID DO EDITAL <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" value={form.id} onChange={e => set('id', e.target.value)} />
            </div>
            <div>
              <div className="field-label">BASE</div>
              <div className="segmented">
                {[
                  { id: 'manual', l: 'EM BRANCO' },
                  { id: 'modelo', l: 'COPIAR MODELO' },
                ].map(o => (
                  <div key={o.id} className={`seg${form.base === o.id ? ' active' : ''}`} onClick={() => set('base', o.id)}>{o.l}</div>
                ))}
              </div>
            </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">VALOR DE REFERÊNCIA (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="482350" />
            </div>
            <div>
              <div className="field-label">QTD DE ITENS <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" type="number" value={form.itens} onChange={e => set('itens', e.target.value)} placeholder="47" />
            </div>
          </div>

          <div>
            <div className="field-label">REGIME TRIBUTÁRIO</div>
            <div className="segmented">
              {[
                { id: 'lucro-real', l: 'LUCRO REAL' },
                { id: 'simples', l: 'SIMPLES' },
                { id: 'presumido', l: 'PRESUMIDO' },
              ].map(r => (
                <div key={r.id} className={`seg${form.regime === r.id ? ' active' : ''}`} onClick={() => set('regime', r.id)}>{r.l}</div>
              ))}
            </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" /> Criar precificação</button>
        </div>
      </div>
    </div>
  );
}

/* ── PRECIFICACAO DRAWER ───────────────────────────────────── */
function PrecDrawer({ edital, onClose, tab, onTab, onNav }) {
  const [itens, setItens] = React.useState(null);
  React.useEffect(() => {
    let mounted = true;
    if (!edital?.precId) return;
    window.dataApi.listPrecificacaoItens(edital.precId)
      .then(rows => { if (mounted) setItens(rows); })
      .catch(() => { if (mounted) setItens([]); });
    return () => { mounted = false; };
  }, [edital?.precId]);

  const st = PREC_STATUS[edital.prec.status] || PREC_STATUS.rascunho;
  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>Precificação · {edital.prec.regime === 'lucro-real' ? 'LUCRO REAL' : edital.prec.regime === 'simples' ? 'SIMPLES' : 'PRESUMIDO'}</span><span className="chip">M03</span><span className={`badge ${st.cls}`}>{st.label}</span></>}
      title={<span className="mono" style={{ fontWeight: 600 }}>{edital.numero} · {edital.orgao}</span>}
      subtitle={`${edital.cidade || '—'} · ${edital.uf} · ${edital.itens} itens · ref. ${BRL(edital.valor)}`}
      headRight={
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {edital.prec.alertInner > 0 && <span className="badge badge-amber"><Icon name="warn" size={10} /> {edital.prec.alertInner} INNER</span>}
        </div>
      }
      tabs={[
        { id: 'resumo', label: 'Resumo' },
        { id: 'planilha', label: 'Planilha', count: itens?.length ?? '…' },
        { id: 'cargas', label: 'Cargas tributárias' },
        { id: 'frete', label: 'Frete por região' },
        { id: 'proposta', label: 'Proposta' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        <>
          <button className="btn"><Icon name="download" /> Importar tabela</button>
          <button className="btn"><Icon name="file" /> Exportar planilha</button>
          {edital.prec.proposta ? (
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNav('disputa')}>
              <Icon name="upload" /> Enviar para {edital.plataforma}
            </button>
          ) : (
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
              <Icon name="check" /> Gerar Proposta de Preços
            </button>
          )}
        </>
      }
    >
      {tab === 'resumo' && <TabResumo edital={edital} itens={itens} />}
      {tab === 'planilha' && <TabPlanilha edital={edital} itens={itens} />}
      {tab === 'cargas' && <TabCargas edital={edital} />}
      {tab === 'frete' && <TabFrete />}
      {tab === 'proposta' && <TabProposta edital={edital} itens={itens} />}
    </Drawer>
  );
}

/* ── TAB CONTENT ──────────────────────────────────────────── */
function TabResumo({ edital, itens }) {
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>KPIs DA PRECIFICAÇÃO</div>
      <div className="grid-4" style={{ marginBottom: 22 }}>
        <PrecKpi label="VALOR DE REFERÊNCIA" value={BRL(edital.valor)} sub="edital (publicado)" />
        <PrecKpi label="CUSTO TOTAL BTM" value={BRL(edital.prec.custo)} sub={`${edital.prec.itens} itens precificados`} />
        <PrecKpi label="MARGEM PROJETADA" value={edital.prec.margem.toFixed(1) + '%'} sub="após cargas + frete" cls={edital.prec.margem >= 35 ? 'lime' : 'amber'} />
        <PrecKpi label="ALERTA INNER" value={`${edital.prec.alertInner} ${edital.prec.alertInner === 1 ? 'item' : 'itens'}`} sub="prejuízo se vendido a 1 unidade" cls={edital.prec.alertInner > 0 ? 'amber' : 'lime'} />
      </div>

      <div className="field-label" style={{ marginBottom: 10 }}>REGIME TRIBUTÁRIO</div>
      <div style={{ display: 'flex', gap: 12, marginBottom: 22 }}>
        <div style={{ flex: 1, padding: 14, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)' }}>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono', marginBottom: 4 }}>SELECIONADO</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--lime)' }}>{edital.prec.regime === 'lucro-real' ? 'LUCRO REAL' : 'SIMPLES NACIONAL'}</div>
          <div style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 4 }}>
            {edital.prec.regime === 'lucro-real' ? 'ICMS 7% · PIS 1,65% · COFINS 7,6%' : 'Anexo I · Alíquota efetiva 13,20%'}
          </div>
        </div>
        <div style={{ flex: 1, padding: 14, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)' }}>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono', marginBottom: 4 }}>MARKUP</div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>60% sobre custo total</div>
          <div style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 4 }}>ou R$ 0,01 abaixo do edital (o maior)</div>
        </div>
        <div style={{ flex: 1, padding: 14, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)' }}>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono', marginBottom: 4 }}>STATUS DA PROPOSTA</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: edital.prec.proposta ? 'var(--lime)' : 'var(--amber)' }}>
            {edital.prec.proposta ? 'GERADA' : 'PENDENTE'}
          </div>
          <div style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 4 }}>
            {edital.prec.proposta ? 'pronta para envio' : `gerar antes da abertura (${new Date(edital.abertura).toLocaleDateString('pt-BR')})`}
          </div>
        </div>
      </div>

      <div className="field-label" style={{ marginBottom: 8 }}>RESUMO DE COBERTURA</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 22 }}>
        <Field label="ITENS NO EDITAL" value={edital.itens} />
        <Field label="ITENS PRECIFICADOS" value={edital.prec.itens} valueClass="text-lime" />
        <Field label="ITENS DESCARTADOS" value={edital.prec.descart} valueClass={edital.prec.descart > 0 ? 'text-red' : ''} />
      </div>

      {edital.prec.alertInner > 0 && (
        <div className="alert-banner alert-amber">
          <Icon name="warn" size={14} />
          <div style={{ flex: 1 }}>
            <strong>{edital.prec.alertInner} {edital.prec.alertInner === 1 ? 'item tem' : 'itens têm'} risco de prejuízo em triangulação INNER</strong>
            <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
              Veja na aba Planilha — itens com sobra de embalagem maior que 50% do pedido.
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function TabPlanilha({ edital, itens }) {
  if (itens === null) {
    return <div style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)', fontSize: 12 }}>
      <span className="spinner" style={{ marginRight: 8 }}></span> Carregando planilha...
    </div>;
  }
  if (itens.length === 0) {
    return <div style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)', fontSize: 12 }}>
      Nenhum item precificado. Cadastre itens no edital antes (M01).
    </div>;
  }

  const cargaPct = edital.prec.regime === 'lucro-real' ? 16.25 : 13.20;

  return (
    <div>
      <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--line-1)', background: 'var(--bg-2)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="mono" style={{ fontSize: 11.5, color: 'var(--fg-2)' }}>
          {itens.length} de {edital.itens} itens · regime {edital.prec.regime === 'lucro-real' ? 'LUCRO REAL' : edital.prec.regime === 'simples' ? 'SIMPLES' : 'PRESUMIDO'} · markup {edital._raw?.markup_pct || 60}%
        </span>
      </div>
      <div style={{ overflowX: 'auto' }}>
        <table className="tbl" style={{ minWidth: 1100 }}>
          <thead>
            <tr>
              <th style={{ width: 32 }}>#</th>
              <th style={{ width: 240 }}>Descrição</th>
              <th style={{ textAlign: 'right' }}>Qtd ed.</th>
              <th style={{ textAlign: 'right' }}>Inner</th>
              <th style={{ textAlign: 'right' }}>A comprar</th>
              <th style={{ textAlign: 'right' }}>Custo</th>
              <th style={{ textAlign: 'right' }}>+Cargas</th>
              <th style={{ textAlign: 'right' }}>Edital</th>
              <th style={{ textAlign: 'right' }}>Lance</th>
              <th style={{ textAlign: 'right' }}>Margem</th>
              <th style={{ textAlign: 'right' }}>Total</th>
            </tr>
          </thead>
          <tbody>
            {itens.map(it => {
              const blocos = it.inner > 0 ? Math.ceil(it.qtd / it.inner) : 1;
              const qtdComprar = blocos * it.inner;
              const sobra = qtdComprar - it.qtd;
              const cargas = it.custo * cargaPct / 100 + it.frete;
              const totalLance = it.preco_lance * it.qtd;
              const danger = it.alerta_inner;
              return (
                <tr key={it.id} style={{ background: it.descartado ? 'rgba(84,82,76,0.18)' : danger ? 'rgba(255,93,93,0.05)' : undefined, opacity: it.descartado ? 0.55 : 1 }}>
                  <td className="mono" style={{ color: 'var(--fg-3)' }}>{String(it.idx).padStart(2, '0')}</td>
                  <td>
                    <div style={{ fontSize: 12 }}>{it.desc}</div>
                    {it.cod && <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{it.cod}</div>}
                    {danger && (
                      <div style={{ marginTop: 4, fontSize: 10.5, color: 'var(--red)', fontFamily: 'IBM Plex Mono', display: 'flex', alignItems: 'center', gap: 4 }}>
                        <Icon name="warn" size={10} /> sem produto cadastrado / cruzamento INNER falhou
                      </div>
                    )}
                  </td>
                  <td className="num-col">{NUM(it.qtd)}</td>
                  <td className="num-col" style={{ background: 'var(--bg-2)', borderRadius: 3 }}>
                    <span style={{ color: 'var(--cyan)', fontWeight: 600 }}>{it.inner}</span>
                  </td>
                  <td className="num-col">
                    <div>{NUM(qtdComprar)}</div>
                    {sobra > 0 && <div style={{ fontSize: 10, color: 'var(--amber)', fontFamily: 'IBM Plex Mono' }}>+{sobra}</div>}
                  </td>
                  <td className="num-col">{BRL(it.custo).replace('R$ ', '')}</td>
                  <td className="num-col" style={{ color: 'var(--fg-2)' }}>{BRL(cargas).replace('R$ ', '')}</td>
                  <td className="num-col">{BRL(it.edital_unit).replace('R$ ', '')}</td>
                  <td className="num-col" style={{ color: 'var(--lime)', fontWeight: 600 }}>{BRL(it.preco_lance).replace('R$ ', '')}</td>
                  <td className="num-col" style={{ color: it.margem > 35 ? 'var(--lime)' : it.margem > 20 ? 'var(--amber)' : 'var(--red)' }}>{it.margem.toFixed(1)}%</td>
                  <td className="num-col" style={{ fontWeight: 500 }}>{BRL(totalLance).replace('R$ ', '')}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', background: 'var(--bg-2)' }}>
        <div className="flex items-center gap-3" style={{ marginBottom: 8 }}>
          <div className="badge badge-cyan" style={{ fontSize: 10 }}>REGRA DO INNER</div>
          <div style={{ fontSize: 12, color: 'var(--fg-1)' }}>
            Embalagem mínima de venda do fornecedor é <strong style={{ color: 'var(--cyan)' }}>obrigatória</strong> no cadastro de custo — protege contra prejuízo em triangulação.
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, fontSize: 11.5, color: 'var(--fg-2)' }}>
          <div><strong style={{ color: 'var(--lime)' }}>✓ Aprovado</strong> · qtd. licitada ≥ múltiplo do INNER.</div>
          <div><strong style={{ color: 'var(--amber)' }}>⚠ Sobra</strong> · arredonda pro próximo bloco e calcula prejuízo no excedente.</div>
          <div><strong style={{ color: 'var(--red)' }}>✕ Crítico</strong> · sem produto cadastrado.</div>
        </div>
      </div>
    </div>
  );
}

function TabCargas({ edital }) {
  const isLucroReal = edital.prec.regime === 'lucro-real';
  return (
    <div style={{ padding: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      <div>
        <div className="card-head" style={{ padding: 0, paddingBottom: 12, borderBottom: '1px solid var(--line-1)' }}>
          <Icon name="dollar" />
          <div className="t">Configuração de Cargas Tributárias</div>
          <span className={`badge ${isLucroReal ? 'badge-lime' : ''}`} style={{ marginLeft: 'auto' }}>{isLucroReal ? 'LUCRO REAL' : 'SIMPLES'}</span>
        </div>
        <div style={{ paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <CargaInput label="ICMS — Interestadual" value="7,00" sufix="%" />
          <CargaInput label={`ICMS — Intraestadual (${edital.uf})`} value="20,00" sufix="%" />
          <CargaInput label="IPI" value="0,00" sufix="%" sub="material de escritório — alíquota zero" />
          <CargaInput label="PIS" value="1,65" sufix="%" />
          <CargaInput label="COFINS" value="7,60" sufix="%" />
          <CargaInput label="Substituição Tributária" value="0,00" sufix="%" sub="não aplicável a este edital" />
        </div>
      </div>
      <div>
        <div className="card-head" style={{ padding: 0, paddingBottom: 12, borderBottom: '1px solid var(--line-1)' }}>
          <Icon name="dollar" />
          <div className="t">SIMPLES NACIONAL</div>
          <div className="segmented" style={{ marginLeft: 'auto' }}>
            <div className={`seg${!isLucroReal ? ' active' : ''}`}>ATIVO</div>
            <div className={`seg${isLucroReal ? ' active' : ''}`}>INATIVO</div>
          </div>
        </div>
        <div style={{ paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div className="alert-banner alert-cyan">
            <Icon name="info" size={13} />
            BTM opta pelo <strong>{isLucroReal ? 'Lucro Real' : 'Simples Nacional'}</strong>. Caso futuro fornecedor seja Simples, o sistema aplica alíquotas próprias.
          </div>
          <div>
            <div className="field-label">ANEXO DO SIMPLES (Comércio)</div>
            <div className="segmented" style={{ marginTop: 4 }}>
              <div className="seg active">ANEXO I</div>
              <div className="seg">ANEXO II</div>
              <div className="seg">ANEXO III</div>
            </div>
          </div>
          <CargaInput label="Faixa atual (RBT12)" value="4.800.000" prefix="R$" sub="receita bruta últimos 12 meses" />
          <CargaInput label="Alíquota efetiva" value="13,20" sufix="%" sub="calculada conforme tabela anexo I" />
          <div className="alert-banner alert-lime">
            <Icon name="check" size={13} />
            Cálculo automático ativo · sistema escolhe regime mais vantajoso por item.
          </div>
        </div>
      </div>
    </div>
  );
}

function TabFrete() {
  const regioes = [
    { uf: 'RJ', cidade: 'Niterói', tipo: 'CORREIOS PAC', kg: 12.50, prazo: '3 dias', total: 312.40 },
    { uf: 'SP', cidade: 'São Paulo', tipo: 'CORREIOS SEDEX', kg: 28.40, prazo: '2 dias', total: 612.80 },
    { uf: 'MG', cidade: 'Belo Horizonte', tipo: 'TRANSP. BRASPRESS', kg: 18.20, prazo: '4 dias', total: 487.30 },
    { uf: 'ES', cidade: 'Vitória', tipo: 'CORREIOS PAC', kg: 22.10, prazo: '5 dias', total: 524.10 },
    { uf: 'SC', cidade: 'Joinville', tipo: 'TRANSP. JADLOG', kg: 32.40, prazo: '6 dias', total: 712.90 },
    { uf: 'PR', cidade: 'Curitiba', tipo: 'TRANSP. BRASPRESS', kg: 30.20, prazo: '6 dias', total: 684.20 },
    { uf: 'RS', cidade: 'Porto Alegre', tipo: 'TRANSP. JADLOG', kg: 38.40, prazo: '7 dias', total: 882.40 },
  ];
  return (
    <div>
      <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--line-1)', background: 'var(--bg-2)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Icon name="truck" />
        <span style={{ fontSize: 12 }}>Tabela de Frete por Região · automática na precificação</span>
        <button className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }}><Icon name="refresh" size={11} /> Recalcular Correios + SSW</button>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>UF</th>
            <th>Destino</th>
            <th>Modal</th>
            <th style={{ textAlign: 'right' }}>R$ / Kg</th>
            <th>Prazo</th>
            <th style={{ textAlign: 'right' }}>Total estimado</th>
          </tr>
        </thead>
        <tbody>
          {regioes.map((r, i) => (
            <tr key={i}>
              <td><span className="badge">{r.uf}</span></td>
              <td>{r.cidade}</td>
              <td className="mono" style={{ fontSize: 11, color: 'var(--fg-2)' }}>{r.tipo}</td>
              <td className="num-col">{BRL(r.kg).replace('R$ ', '')}</td>
              <td className="mono">{r.prazo}</td>
              <td className="num-col" style={{ color: 'var(--lime)' }}>{BRL(r.total)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function TabProposta({ edital, itens }) {
  if (!edital.prec.proposta) {
    return (
      <div style={{ padding: 32, textAlign: 'center' }}>
        <div style={{ display: 'inline-grid', placeItems: 'center', width: 56, height: 56, borderRadius: '50%', background: 'var(--bg-2)', border: '1px solid var(--line-2)', marginBottom: 14 }}>
          <Icon name="file" size={22} style={{ color: 'var(--fg-3)' }} />
        </div>
        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>Proposta ainda não gerada</div>
        <div style={{ fontSize: 12, color: 'var(--fg-3)', marginBottom: 18, maxWidth: 400, margin: '0 auto 18px' }}>
          Conclua a precificação (status: <strong style={{ color: 'var(--lime)' }}>PRONTO</strong>) e gere o PDF da proposta com timbre BTM para envio à plataforma.
        </div>
        <button className="btn btn-primary"><Icon name="check" /> Gerar Proposta de Preços</button>
      </div>
    );
  }
  return (
    <div style={{ padding: 18, display: 'grid', gridTemplateColumns: '1fr 280px', gap: 16 }}>
      <div className="card" style={{ overflow: 'hidden' }}>
        <div className="card-head">
          <Icon name="file" />
          <div className="t">Proposta_BTM_{(edital.numero || '').replace('/', '_')}.pdf</div>
          <div className="s">3 págs · 187 KB</div>
          <button className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }}><Icon name="download" size={11} /></button>
        </div>
        <div style={{ padding: 20, background: '#1a1a1f', display: 'grid', placeItems: 'center' }}>
          <div style={{ background: '#f5f4f0', color: '#0a0a0b', padding: 28, width: 420, fontFamily: "'IBM Plex Serif', serif", fontSize: 10, lineHeight: 1.55, boxShadow: '0 8px 32px rgba(0,0,0,0.5)' }}>
            <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: 10.5, fontWeight: 700 }}>BTM SERVIÇOS E COMÉRCIO LTDA</div>
                <div style={{ fontSize: 8.5 }}>CNPJ 33.804.351/0001-04 · Rio de Janeiro/RJ</div>
              </div>
            </div>
            <div style={{ textAlign: 'center', fontWeight: 700, fontSize: 11 }}>PROPOSTA DE PREÇOS</div>
            <div style={{ textAlign: 'center', fontSize: 9 }}>Pregão Eletrônico nº {(edital.numero || '').replace('PE-', '')} — {edital.orgao}</div>
            <table style={{ width: '100%', marginTop: 14, fontSize: 8.5, borderCollapse: 'collapse' }}>
              <thead>
                <tr style={{ background: '#0a0a0b', color: '#f5f4f0' }}>
                  <th style={{ padding: 3, textAlign: 'left' }}>#</th>
                  <th style={{ padding: 3, textAlign: 'left' }}>Descrição</th>
                  <th style={{ padding: 3, textAlign: 'right' }}>Qtd</th>
                  <th style={{ padding: 3, textAlign: 'right' }}>Unit</th>
                  <th style={{ padding: 3, textAlign: 'right' }}>Total</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { d: 'Papel A4 75g — Resma 500 fls', q: 2400, u: 21.49, t: 51576.00 },
                  { d: 'Caneta esferográfica azul 1.0mm', q: 4800, u: 1.44, t: 6912.00 },
                  { d: 'Pasta AZ ofício preta', q: 240, u: 13.39, t: 3213.60 },
                  { d: 'Grampeador 26/6 médio', q: 60, u: 34.89, t: 2093.40 },
                  { d: 'Marcador permanente preto', q: 96, u: 5.39, t: 517.44 },
                ].map((r, i) => (
                  <tr key={i} style={{ borderBottom: '1px solid #d8d6cf' }}>
                    <td style={{ padding: 3 }}>{String(i + 1).padStart(2, '0')}</td>
                    <td style={{ padding: 3 }}>{r.d}</td>
                    <td style={{ padding: 3, textAlign: 'right' }}>{r.q.toLocaleString('pt-BR')}</td>
                    <td style={{ padding: 3, textAlign: 'right' }}>{r.u.toFixed(2)}</td>
                    <td style={{ padding: 3, textAlign: 'right', fontWeight: 600 }}>{r.t.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr style={{ background: '#e8e7e0', fontWeight: 700 }}>
                  <td colSpan={4} style={{ padding: 4, textAlign: 'right' }}>VALOR TOTAL</td>
                  <td style={{ padding: 4, textAlign: 'right' }}>{BRL(edital.valor * 0.85)}</td>
                </tr>
              </tfoot>
            </table>
            <div style={{ marginTop: 12, fontSize: 8.5, color: '#54524c' }}>
              Validade: 60 dias · Prazo de entrega: 30 dias úteis · Frete CIF
            </div>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="card">
          <div className="card-head"><Icon name="check" /><div className="t">Validações</div></div>
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 12 }}>
            {[
              'Papel timbrado BTM aplicado',
              'Cabeçalho com CNPJ correto',
              'Validade 60 dias (compatível)',
              'Prazo de entrega 30d (compatível)',
              `${edital.prec.itens} itens precificados · ${edital.prec.descart} descartados`,
              `Margem total ${edital.prec.margem.toFixed(1)}% ≥ 35% (mínimo)`,
            ].map(v => (
              <div key={v} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="check" size={12} style={{ color: 'var(--lime)' }} />
                <span>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <button className="btn btn-primary" style={{ padding: 10, justifyContent: 'center' }}><Icon name="upload" /> Enviar para {edital.plataforma}</button>
        <button className="btn"><Icon name="download" /> Baixar PDF</button>
        <button className="btn btn-ghost"><Icon name="edit" /> Ajustar manualmente</button>
      </div>
    </div>
  );
}

/* ── REUSABLE INTERNALS ────────────────────────────────────── */
function PrecKpi({ label, value, sub, cls }) {
  return (
    <div className="card" style={{ padding: 14 }}>
      <div className="field-label">{label}</div>
      <div className="mono" style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 4, color: cls === 'lime' ? 'var(--lime)' : cls === 'amber' ? 'var(--amber)' : 'var(--fg-0)' }}>{value}</div>
      <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>{sub}</div>
    </div>
  );
}

function CargaInput({ label, value, sufix, prefix, sub }) {
  return (
    <div>
      <div className="field-label">{label}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {prefix && <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>{prefix}</span>}
        <input className="input mono" defaultValue={value} style={{ width: 120 }} />
        {sufix && <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>{sufix}</span>}
      </div>
      {sub && <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

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

window.MPrecificacao = MPrecificacao;