/* global React, Icon, BRL, NUM, ScoreDial, StatusPill, Section, Ticker, Drawer */
function MProspeccao({ onNav }) {
  const [editais, setEditais] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [loadError, setLoadError] = React.useState(null);
  const [selected, setSelected] = React.useState(null);
  const [drawerTab, setDrawerTab] = React.useState('visao');
  const [showFilterModal, setShowFilterModal] = React.useState(false);
  const [showAddModal, setShowAddModal] = React.useState(false);
  const [refreshing, setRefreshing] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [aderenciaMin, setAderenciaMin] = React.useState(70);
  const [ordenar, setOrdenar] = React.useState('score');

  const reload = React.useCallback(async () => {
    try {
      setLoadError(null);
      const rows = await window.dataApi.listEditais();
      setEditais(rows);
    } catch (e) {
      setLoadError(e?.message || 'Falha ao carregar editais');
    } finally {
      setLoading(false);
    }
  }, []);

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

  const showToast = (msg, ms = 4000) => {
    setToast(msg);
    setTimeout(() => setToast(null), ms);
  };

  const editaisFiltrados = React.useMemo(() => {
    const filtrados = editais.filter(e => (e.score ?? 0) >= aderenciaMin);
    const ord = [...filtrados];
    if (ordenar === 'score') ord.sort((a, b) => (b.score ?? 0) - (a.score ?? 0));
    else if (ordenar === 'valor') ord.sort((a, b) => b.valor - a.valor);
    else if (ordenar === 'prazo') ord.sort((a, b) => new Date(a.abertura) - new Date(b.abertura));
    return ord;
  }, [editais, aderenciaMin, ordenar]);

  const sel = selected ? editais.find(e => e.id === selected) : null;
  const openEdital = (id) => { setSelected(id); setDrawerTab('visao'); };
  const closeDrawer = () => setSelected(null);

  const handleRefresh = async () => {
    if (refreshing) return;
    setRefreshing(true);
    await reload();
    setRefreshing(false);
    showToast('Lista de editais atualizada do banco · varredura PNCP automática ainda mock');
  };

  const handleAdded = async (form) => {
    try {
      const created = await window.dataApi.insertEdital(form);
      await reload();
      setShowAddModal(false);
      showToast(`Edital ${created.numero} adicionado · persistido no Supabase`);
    } catch (e) {
      const msg = e?.message || String(e);
      if (/duplicate key/i.test(msg) || /unique/i.test(msg)) {
        showToast(`Erro: já existe um edital com o número informado.`, 6000);
      } else {
        showToast(`Erro ao salvar: ${msg}`, 6000);
      }
    }
  };

  const handleDescartar = async (edital) => {
    try {
      await window.dataApi.updateEditalStatus(edital.id, 'descartado');
      await reload();
      closeDrawer();
      showToast(`Edital ${edital.numero} marcado como DESCARTADO`);
    } catch (e) {
      showToast(`Erro ao descartar: ${e?.message || e}`, 6000);
    }
  };

  return (
    <>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow"><span>Prospecção Automática</span><span className="chip">M01</span></div>
            <h1 className="page-title">Editais aderentes ao seu portfólio</h1>
            <p className="page-sub">Varredura contínua em <strong>PNCP</strong>, <strong>Comprasnet</strong>, <strong>LICITANET</strong>, <strong>AMMLICITA</strong> e <strong>LICITAR</strong> — cruzamento automático com NCM e descrição dos produtos da BTM.</p>
          </div>
          <div className="flex items-center gap-3">
            <button className="btn" onClick={() => setShowFilterModal(true)}><Icon name="filter" /> Filtros de Ramo & Região</button>
            <button className="btn" onClick={handleRefresh} disabled={refreshing}>
              {refreshing ? <span className="spinner"></span> : <Icon name="refresh" />}
              {refreshing ? 'Atualizando PNCP...' : 'Atualizar PNCP'}
            </button>
            <button className="btn btn-primary" onClick={() => setShowAddModal(true)}><Icon name="plus" /> Adicionar manual</button>
          </div>
        </div>

        <div className="subbar">
          <div className="filter-chip active">UF: RJ, SP, ES, MG, SC, PR, RS <Icon name="x" size={10} /></div>
          <div className="filter-chip active">Ramo: Mat. Escritório · Papelaria · Escolar <Icon name="x" size={10} /></div>
          <div className="filter-chip active">Valor mín: R$ 50.000 <Icon name="x" size={10} /></div>
          <div className="filter-chip">+ Adicionar filtro</div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>Aderência mínima</span>
            <div className="segmented">
              {[60, 70, 80].map(v => (
                <div key={v} className={`seg${aderenciaMin === v ? ' active' : ''}`} onClick={() => setAderenciaMin(v)}>{v}%</div>
              ))}
            </div>
          </div>
        </div>

        {loadError && (
          <div className="alert-banner alert-red" style={{ marginBottom: 12 }}>
            <Icon name="warn" size={13} />
            <div style={{ flex: 1 }}>Falha ao carregar editais do Supabase: {loadError}</div>
            <button className="btn btn-ghost btn-sm" onClick={reload}>Tentar novamente</button>
          </div>
        )}

        {/* Lista de editais — largura total */}
        <div className="card">
          <div className="card-head">
            <div className="t">{loading ? 'Carregando editais...' : `${editaisFiltrados.length} editais encontrados`} {!loading && editaisFiltrados.length !== editais.length && <span style={{ color: 'var(--fg-3)', fontSize: 11 }}>(de {editais.length})</span>}</div>
            <div className="s">{loading ? '...' : `${editais.length} registros no banco`}</div>
            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>Ordenar:</span>
              <div className="segmented">
                {[
                  { id: 'score', l: 'SCORE' },
                  { id: 'valor', l: 'VALOR' },
                  { id: 'prazo', l: 'PRAZO' },
                ].map(o => (
                  <div key={o.id} className={`seg${ordenar === o.id ? ' active' : ''}`} onClick={() => setOrdenar(o.id)}>{o.l}</div>
                ))}
              </div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 38 }}></th>
                <th>Edital</th>
                <th>Órgão / Plataforma</th>
                <th>UF</th>
                <th>Abertura</th>
                <th>Itens</th>
                <th style={{ textAlign: 'right' }}>Valor estim.</th>
                <th>Status</th>
                <th style={{ width: 32 }}></th>
              </tr>
            </thead>
            <tbody>
              {loading && (
                <tr>
                  <td colSpan={9} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
                    <span className="spinner" style={{ marginRight: 8 }}></span> Buscando editais no Supabase...
                  </td>
                </tr>
              )}
              {!loading && editaisFiltrados.length === 0 && (
                <tr>
                  <td colSpan={9} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
                    {editais.length === 0
                      ? 'Nenhum edital cadastrado ainda. Use "Adicionar manual" para começar.'
                      : `Nenhum edital com aderência ≥ ${aderenciaMin}%. Tente baixar o filtro.`}
                  </td>
                </tr>
              )}
              {!loading && editaisFiltrados.map(e => (
                <tr key={e.id} onClick={() => openEdital(e.id)} style={{ cursor: 'pointer' }}>
                  <td><ScoreDial score={e.score ?? 0} /></td>
                  <td className="id-col" style={{ color: 'var(--fg-0)', fontWeight: 500 }}>{e.numero}</td>
                  <td>
                    <div style={{ fontSize: 12 }}>{e.orgao}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{e.plataforma}</div>
                  </td>
                  <td><span className="badge">{e.uf}</span></td>
                  <td className="mono" style={{ fontSize: 11.5 }}>
                    <div>{new Date(e.abertura).toLocaleDateString('pt-BR')}</div>
                    <div style={{ color: 'var(--fg-3)', fontSize: 10.5 }}>{new Date(e.abertura).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}</div>
                  </td>
                  <td className="num-col">{e.itens}</td>
                  <td className="num-col" style={{ color: 'var(--lime)', fontWeight: 500 }}>{BRL(e.valor)}</td>
                  <td><StatusPill status={e.status} /></td>
                  <td><Icon name="chevR" size={12} style={{ color: 'var(--fg-3)' }} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {showFilterModal && <FilterModal onClose={() => setShowFilterModal(false)} />}
      {showAddModal && <AddEditalModal onClose={() => setShowAddModal(false)} onAdd={handleAdded} />}
      {sel && <EditalDrawer edital={sel} onClose={closeDrawer} tab={drawerTab} onTab={setDrawerTab} onNav={onNav} onDescartar={handleDescartar} />}
      {toast && (
        <div className="alert-banner alert-lime" style={{ position: 'fixed', bottom: 22, right: 22, zIndex: 300, maxWidth: 460, 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 AddEditalModal({ onClose, onAdd }) {
  const [form, setForm] = React.useState({
    numero: 'PE-' + String(Math.floor(Math.random() * 900) + 100) + '/2026',
    orgao: '',
    plataforma: 'PNCP',
    uf: 'RJ',
    cidade: '',
    valor: '',
    abertura: '',
    itens: '',
    verba: '',
  });
  const [erro, setErro] = React.useState(null);
  const [saving, setSaving] = React.useState(false);

  const set = (k, v) => setForm({ ...form, [k]: v });

  const submit = async () => {
    if (!form.orgao || !form.valor || !form.abertura || !form.itens) {
      setErro('Preencha os campos obrigatórios (Órgão, Valor, Abertura, Itens)');
      return;
    }
    setErro(null);
    setSaving(true);
    try {
      await onAdd({ ...form, valor: parseFloat(form.valor), itens: parseInt(form.itens), status: 'novo', score: 75, match: 'media' });
    } 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: 640, maxHeight: '85vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="plus" />
          <div className="t">Adicionar edital manualmente</div>
          <div className="s">não capturado por varredura automática</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 editais recebidos por canal não-PNCP (e-mail direto, indicação, portais não integrados). Após salvar, a IA fará cruzamento automático com NCMs cadastrados.
              </div>
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">NÚMERO DO EDITAL <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" value={form.numero} onChange={e => set('numero', e.target.value)} placeholder="PE-187/2026" />
            </div>
            <div>
              <div className="field-label">PLATAFORMA <span style={{ color: 'var(--red)' }}>*</span></div>
              <select className="input" value={form.plataforma} onChange={e => set('plataforma', e.target.value)}>
                <option>PNCP</option>
                <option>Comprasnet</option>
                <option>LICITANET</option>
                <option>AMMLICITA</option>
                <option>LICITAR</option>
                <option>BLL</option>
                <option>Outro</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">CIDADE</div>
              <input className="input" value={form.cidade} onChange={e => set('cidade', e.target.value)} placeholder="Ex: Niterói" />
            </div>
            <div>
              <div className="field-label">UF <span style={{ color: 'var(--red)' }}>*</span></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 className="grid-2">
            <div>
              <div className="field-label">VALOR ESTIMADO (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">QUANTIDADE 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 className="grid-2">
            <div>
              <div className="field-label">DATA/HORA DE ABERTURA <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" type="datetime-local" value={form.abertura} onChange={e => set('abertura', e.target.value)} />
            </div>
            <div>
              <div className="field-label">VERBA / FONTE (opcional)</div>
              <input className="input mono" value={form.verba} onChange={e => set('verba', e.target.value)} placeholder="PMS-NIT" />
            </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} disabled={saving}>Cancelar</button>
          <button className="btn btn-primary" onClick={submit} disabled={saving}>
            {saving ? <><span className="spinner"></span> Salvando...</> : <><Icon name="check" /> Adicionar edital</>}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── EDITAL DRAWER ─────────────────────────────────────────── */
function EditalDrawer({ edital, onClose, tab, onTab, onNav, onDescartar }) {
  const [descarting, setDescarting] = React.useState(false);
  const handleDescartar = async () => {
    if (descarting) return;
    setDescarting(true);
    try { await onDescartar?.(edital); } finally { setDescarting(false); }
  };

  const [itens, setItens] = React.useState(null);
  const [mensagens, setMensagens] = React.useState(null);
  const [historico, setHistorico] = React.useState(null);
  const [documentos, setDocumentos] = React.useState(null);

  const reloadAll = React.useCallback(async () => {
    if (!edital?.id) return;
    try {
      const [i, d, m, h] = await Promise.all([
        window.dataApi.listEditalItens(edital.id),
        window.dataApi.listEditalDocumentos(edital.id),
        window.dataApi.listEditalMensagens(edital.id),
        window.dataApi.listEditalHistorico(edital.id),
      ]);
      setItens(i); setDocumentos(d); setMensagens(m); setHistorico(h);
    } catch (err) {
      setItens([]); setDocumentos([]); setMensagens([]); setHistorico([]);
    }
  }, [edital?.id]);

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

  const reloadMensagens = React.useCallback(async () => {
    if (!edital?.id) return;
    try { setMensagens(await window.dataApi.listEditalMensagens(edital.id)); } catch {}
  }, [edital?.id]);

  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>{edital.plataforma}</span><span className="chip">M01</span><StatusPill status={edital.status} /></>}
      title={<span className="mono" style={{ fontWeight: 600 }}>{edital.numero} · {edital.orgao}</span>}
      subtitle={`${edital.cidade || '—'} · ${edital.uf} · ${edital.itens} itens · ${BRL(edital.valor)}`}
      headRight={
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <ScoreDial score={edital.score ?? 0} />
          <span className="badge badge-lime">ADERÊNCIA {(edital.match || 'media').toUpperCase()}</span>
        </div>
      }
      tabs={[
        { id: 'visao', label: 'Visão geral' },
        { id: 'itens', label: 'Itens', count: itens?.length ?? '…' },
        { id: 'docs', label: 'Documentos', count: documentos?.length ?? '…' },
        { id: 'hist', label: 'Histórico', count: historico?.length ?? '…' },
        { id: 'msg', label: 'Mensagens', count: mensagens?.length ?? '…' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        edital.status === 'descartado' ? (
          <div className="alert-banner alert-red" style={{ flex: 1 }}>
            <Icon name="warn" size={13} />
            <div style={{ flex: 1 }}>Edital descartado. Para reativar, mude o status pela tela de edição.</div>
          </div>
        ) : (
          <>
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNav('ocr')}>
              <Icon name="check" /> Participar — enviar à Análise
            </button>
            <button className="btn" onClick={() => onNav('precificacao')}><Icon name="dollar" /> Precificar</button>
            <button className="btn btn-danger" onClick={handleDescartar} disabled={descarting}>
              {descarting ? <><span className="spinner"></span> Descartando...</> : <><Icon name="x" /> Descartar</>}
            </button>
          </>
        )
      }
    >
      {tab === 'visao' && <TabVisaoGeral edital={edital} itens={itens} />}
      {tab === 'itens' && <TabItens itens={itens} />}
      {tab === 'docs' && <TabDocumentos documentos={documentos} />}
      {tab === 'hist' && <TabHistorico historico={historico} />}
      {tab === 'msg' && <TabMensagens mensagens={mensagens} editalId={edital.id} onReload={reloadMensagens} />}
    </Drawer>
  );
}

/* ── TAB CONTENT ──────────────────────────────────────────── */
function TabVisaoGeral({ edital, itens }) {
  const list = itens || [];
  const cobertos = list.filter(i => i.match >= 70).length;
  const margem = list.length > 0
    ? (list.filter(i => i.match >= 70).reduce((a, i) => a + i.margem, 0) / Math.max(1, cobertos)).toFixed(1)
    : '0.0';
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 8 }}>DADOS PRINCIPAIS</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, marginBottom: 22 }}>
        <Field label="VALOR ESTIMADO" value={BRL(edital.valor)} valueClass="text-lime" />
        <Field label="ABERTURA" value={new Date(edital.abertura).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })} />
        <Field label="ITENS NO LOTE" value={edital.itens} />
        <Field label="VERBA / FONTE" value={edital.verba || '—'} mono />
      </div>

      <div className="field-label" style={{ marginBottom: 8 }}>CRUZAMENTO BTM × EDITAL</div>
      {itens === null ? (
        <div style={{ padding: 14, color: 'var(--fg-3)', fontSize: 12 }}>
          <span className="spinner" style={{ marginRight: 8 }}></span> Carregando itens...
        </div>
      ) : list.length === 0 ? (
        <div style={{ padding: 14, color: 'var(--fg-3)', fontSize: 12 }}>Nenhum item cadastrado para este edital.</div>
      ) : (
        <>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {list.slice(0, 6).map((it, i) => <MatchRow key={i} desc={it.desc} pct={it.match} hits={it.estoque > 0 ? Math.ceil(it.estoque / 80) : 0} alert={it.match > 0 && it.match < 90} miss={it.match === 0} />)}
          </div>
          <div style={{ marginTop: 10, padding: 10, background: 'var(--lime-soft)', border: '1px solid var(--lime-border)', borderRadius: 5 }}>
            <div className="mono" style={{ fontSize: 11.5, color: 'var(--lime)' }}>
              <strong>{cobertos} de {list.length} itens</strong> cobertos · margem projetada <strong>{margem}%</strong>
            </div>
          </div>
        </>
      )}

      <div className="field-label" style={{ marginTop: 22, marginBottom: 8 }}>SCORE E ADERÊNCIA</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Field label="SCORE FINAL" value={`${edital.score}/100`} valueClass="text-lime" />
        <Field label="ADERÊNCIA" value={(edital.match || '').toUpperCase() || '—'} valueClass={edital.match === 'alta' ? 'text-lime' : edital.match === 'media' ? 'text-amber' : 'text-fg-3'} />
      </div>
    </div>
  );
}

function TabItens({ itens }) {
  return (
    <div style={{ padding: 4 }}>
      <table className="tbl">
        <thead>
          <tr>
            <th style={{ width: 38 }}>#</th>
            <th>Descrição</th>
            <th>NCM</th>
            <th className="num-col">Qtd.</th>
            <th className="num-col">Vlr unit.</th>
            <th className="num-col">Total</th>
            <th>Match BTM</th>
          </tr>
        </thead>
        <tbody>
          {itens === null && (
            <tr><td colSpan={7} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
              <span className="spinner" style={{ marginRight: 8 }}></span> Carregando itens...
            </td></tr>
          )}
          {itens && itens.length === 0 && (
            <tr><td colSpan={7} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>Nenhum item cadastrado para este edital.</td></tr>
          )}
          {(itens || []).map((it, i) => (
            <tr key={it.id || i}>
              <td className="id-col">{String(it.numero_item ?? (i + 1)).padStart(2, '0')}</td>
              <td>
                <div style={{ fontSize: 12 }}>{it.desc}</div>
                {it.btm && <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>BTM: {it.btm}</div>}
              </td>
              <td className="mono" style={{ fontSize: 11 }}>{it.ncm}</td>
              <td className="num-col">{it.qtd}</td>
              <td className="num-col">{BRL(it.unit)}</td>
              <td className="num-col" style={{ color: 'var(--lime)' }}>{BRL(it.qtd * it.unit)}</td>
              <td>
                {it.match === 0 ? (
                  <span className="badge badge-red">SEM MATCH</span>
                ) : (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <div className="bar" style={{ width: 60, height: 4 }}>
                      <div className="fill" style={{ width: it.match + '%', background: it.match >= 90 ? 'var(--lime)' : it.match >= 70 ? 'var(--amber)' : 'var(--red)' }}></div>
                    </div>
                    <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-2)' }}>{it.match}%</span>
                  </div>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function TabDocumentos({ documentos }) {
  if (documentos === null) {
    return <div style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)', fontSize: 12 }}>
      <span className="spinner" style={{ marginRight: 8 }}></span> Carregando documentos...
    </div>;
  }
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>ANEXOS DO EDITAL ({documentos.length})</div>
      {documentos.length === 0 ? (
        <div style={{ padding: 14, color: 'var(--fg-3)', fontSize: 12 }}>Nenhum documento cadastrado para este edital.</div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {documentos.map((d) => (
            <div key={d.id} className="clickable" style={{ display: 'grid', gridTemplateColumns: '40px 1fr 80px 100px', gap: 12, alignItems: 'center', padding: '10px 12px', background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6 }}>
              <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 === 'xls' || d.ext === 'xlsx') ? 'var(--green)' : 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} · publicado {d.publicado}</div>
              </div>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-2)' }}>{d.paginas ? d.paginas + ' págs' : '—'}</span>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="btn btn-ghost btn-sm" onClick={e => e.stopPropagation()} disabled={!d.url}><Icon name="eye" size={11} /></button>
                <button className="btn btn-ghost btn-sm" onClick={e => e.stopPropagation()} disabled={!d.url}><Icon name="download" size={11} /></button>
              </div>
            </div>
          ))}
        </div>
      )}
      <div className="alert-banner alert-cyan" style={{ marginTop: 16 }}>
        <Icon name="info" size={13} />
        Upload de arquivos será habilitado quando o Storage do Supabase for configurado (fase posterior).
      </div>
    </div>
  );
}

function TabHistorico({ historico }) {
  if (historico === null) {
    return <div style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)', fontSize: 12 }}>
      <span className="spinner" style={{ marginRight: 8 }}></span> Carregando histórico...
    </div>;
  }
  if (historico.length === 0) {
    return <div style={{ padding: 18, color: 'var(--fg-3)', fontSize: 12 }}>Nenhum evento registrado para este edital.</div>;
  }
  return (
    <div style={{ padding: 18 }}>
      <div className="timeline">
        {historico.map((h) => (
          <div key={h.id} 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>
  );
}

function TabMensagens({ mensagens, editalId, onReload }) {
  const [showForm, setShowForm] = React.useState(false);
  const [assunto, setAssunto] = React.useState('');
  const [corpo, setCorpo] = React.useState('');
  const [saving, setSaving] = React.useState(false);
  const [erro, setErro] = React.useState(null);

  const submit = async () => {
    if (!assunto.trim() || !corpo.trim()) {
      setErro('Preencha assunto e mensagem.');
      return;
    }
    setErro(null);
    setSaving(true);
    try {
      await window.dataApi.insertEditalMensagem(editalId, { tipo: 'interna', assunto, corpo });
      await onReload?.();
      setAssunto(''); setCorpo(''); setShowForm(false);
    } catch (e) {
      setErro(e?.message || 'Falha ao salvar.');
    } finally {
      setSaving(false);
    }
  };

  if (mensagens === null) {
    return <div style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)', fontSize: 12 }}>
      <span className="spinner" style={{ marginRight: 8 }}></span> Carregando mensagens...
    </div>;
  }

  return (
    <div style={{ padding: 0 }}>
      {mensagens.length === 0 && !showForm && (
        <div style={{ padding: 18, color: 'var(--fg-3)', fontSize: 12 }}>Nenhuma mensagem registrada.</div>
      )}
      {mensagens.map((m) => (
        <div key={m.id} style={{ padding: '14px 18px', borderBottom: '1px solid var(--line-1)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-0)' }}>{m.de}</span>
            <span className={`badge badge-${m.tipo === 'oficial' ? 'cyan' : m.tipo === 'esclarecimento' ? 'amber' : 'lime'}`}>{m.tipo === 'oficial' ? 'OFICIAL' : m.tipo === 'esclarecimento' ? 'ESCLARECIMENTO' : 'INTERNA'}</span>
            <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)', marginLeft: 'auto' }}>{m.quando}</span>
          </div>
          <div style={{ fontSize: 12.5, fontWeight: 500, marginBottom: 4 }}>{m.assunto}</div>
          <div style={{ fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.5 }}>{m.corpo}</div>
        </div>
      ))}
      <div style={{ padding: 16, borderTop: '1px solid var(--line-1)' }}>
        {!showForm ? (
          <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setShowForm(true)}>
            <Icon name="plus" size={12} /> Adicionar anotação interna
          </button>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div className="field-label">NOVA ANOTAÇÃO INTERNA</div>
            <input className="input" placeholder="Assunto" value={assunto} onChange={e => setAssunto(e.target.value)} autoFocus />
            <textarea className="input" placeholder="Texto da anotação..." rows={4} value={corpo} onChange={e => setCorpo(e.target.value)} style={{ resize: 'vertical', fontFamily: 'inherit' }} />
            {erro && <div className="alert-banner alert-red"><Icon name="warn" size={13} />{erro}</div>}
            <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
              <button className="btn" onClick={() => { setShowForm(false); setErro(null); }} disabled={saving}>Cancelar</button>
              <button className="btn btn-primary" onClick={submit} disabled={saving}>
                {saving ? <><span className="spinner"></span> Salvando...</> : <><Icon name="check" size={12} /> Salvar anotação</>}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ── FIELD / MATCHROW (reused) ─────────────────────────────── */
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>
  );
}

function MatchRow({ desc, pct, hits, alert, miss }) {
  const color = miss ? 'var(--red)' : alert ? 'var(--amber)' : 'var(--lime)';
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 50px 36px', gap: 8, alignItems: 'center', fontSize: 11.5 }}>
      <span style={{ color: miss ? 'var(--fg-3)' : 'var(--fg-1)', textDecoration: miss ? 'line-through' : 'none', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{desc}</span>
      <div className="bar" style={{ height: 4 }}>
        <div className="fill" style={{ width: pct + '%', background: color }}></div>
      </div>
      <span className="mono" style={{ color, fontSize: 10.5, textAlign: 'right' }}>{hits > 0 ? `${hits}×` : '—'}</span>
    </div>
  );
}

/* ── FILTER MODAL (unchanged) ──────────────────────────────── */
function FilterModal({ onClose }) {
  const [tab, setTab] = React.useState('ramos');
  const [ramos, setRamos] = React.useState(['Material Escritório', 'Papelaria', 'Escolar']);
  const novosRamos = ['Material Limpeza', 'EPI', 'Informática', 'Mobiliário', 'Médico-Hospitalar', 'Tecnologia', 'Eletrodomésticos'];
  const ufs = ['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'];
  const ativos = ['RJ', 'SP', 'ES', 'MG', 'SC', 'PR', 'RS'];

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 100 }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 720, maxHeight: '80vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="filter" />
          <div className="t">Filtros de Ramo, CNAE e Região</div>
          <div className="s">aberto a inclusão · expansão futura</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div className="tabs">
          <div className={`tab ${tab === 'ramos' ? 'active' : ''}`} onClick={() => setTab('ramos')}>Ramos & CNAEs <span className="count">{ramos.length}</span></div>
          <div className={`tab ${tab === 'ufs' ? 'active' : ''}`} onClick={() => setTab('ufs')}>Estados <span className="count">{ativos.length}</span></div>
          <div className={`tab ${tab === 'palavras' ? 'active' : ''}`} onClick={() => setTab('palavras')}>Palavras-chave</div>
          <div className={`tab ${tab === 'valor' ? 'active' : ''}`} onClick={() => setTab('valor')}>Valor & Score</div>
        </div>
        <div style={{ padding: 18 }}>
          {tab === 'ramos' && (
            <div>
              <div className="field-label" style={{ marginBottom: 8 }}>RAMOS ATIVOS</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 14 }}>
                {ramos.map(r => (
                  <div key={r} className="filter-chip active">{r} <Icon name="x" size={10} onClick={() => setRamos(ramos.filter(x => x !== r))} /></div>
                ))}
              </div>
              <div className="field-label" style={{ marginBottom: 8 }}>SUGESTÕES — TRATATIVAS COM NOVOS FORNECEDORES</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 14 }}>
                {novosRamos.filter(r => !ramos.includes(r)).map(r => (
                  <div key={r} className="filter-chip" onClick={() => setRamos([...ramos, r])}>+ {r}</div>
                ))}
              </div>
              <div className="field-label" style={{ marginBottom: 6 }}>CNAEs VINCULADOS (37 ativos)</div>
              <input className="input" placeholder="Buscar CNAE... ex: 4647-8/01" style={{ marginBottom: 8 }} />
              <pre className="code" style={{ maxHeight: 140 }}>
{`4647-8/01  Comércio atacadista de artigos de escritório e papelaria
4761-0/03  Comércio varejista de artigos de papelaria
4647-8/02  Comércio atacadista de livros, jornais e outras publicações
4789-0/01  Comércio varejista de suvenires, bijuterias e artesanatos
4744-0/05  Comércio varejista de materiais de construção em geral [sugestão]
+33 outros CNAEs ativos no cadastro da BTM`}
              </pre>
              <div className="alert-banner alert-cyan" style={{ marginTop: 12 }}>
                <Icon name="info" size={13} />
                Você pode incluir <strong>quaisquer CNAEs adicionais</strong> conforme amplie o portfólio com novos fornecedores. O sistema cruzará automaticamente com NCMs equivalentes.
              </div>
            </div>
          )}
          {tab === 'ufs' && (
            <div>
              <div className="field-label" style={{ marginBottom: 10 }}>ESTADOS COBERTOS</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(9, 1fr)', gap: 6 }}>
                {ufs.map(uf => (
                  <div key={uf} className={`filter-chip${ativos.includes(uf) ? ' active' : ''}`} style={{ justifyContent: 'center' }}>{uf}</div>
                ))}
              </div>
              <div style={{ marginTop: 12, fontSize: 11.5, color: 'var(--fg-3)' }}>Clique para ativar/desativar. UFs ativos disparam alertas automáticos.</div>
            </div>
          )}
          {tab === 'palavras' && (
            <div>
              <div className="field-label">PALAVRAS-CHAVE QUE DISPARAM ALERTA IMEDIATO</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
                {['papel A4', 'resma', 'caneta esferográfica', 'lápis HB', 'pasta AZ', 'grampeador', 'material de escritório', 'material escolar', 'expediente'].map(p => (
                  <div key={p} className="filter-chip active">{p} <Icon name="x" size={10} /></div>
                ))}
              </div>
              <input className="input" placeholder="+ adicionar palavra-chave" style={{ marginTop: 12 }} />
            </div>
          )}
          {tab === 'valor' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div>
                <div className="field-label">VALOR MÍNIMO (R$)</div>
                <input className="input" defaultValue="50.000" />
              </div>
              <div>
                <div className="field-label">ADERÊNCIA MÍNIMA</div>
                <input className="input" defaultValue="70" type="number" />
              </div>
              <div>
                <div className="field-label">VALOR MÁXIMO INDIVIDUAL DO LOTE (R$)</div>
                <input className="input" defaultValue="5.000.000" />
              </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}>Cancelar</button>
          <button className="btn btn-primary" onClick={onClose}>Aplicar Filtros</button>
        </div>
      </div>
    </div>
  );
}

window.MProspeccao = MProspeccao;