/* global React, Icon, Ticker, Drawer, BRL */
const OCR_STATUS = {
  concluido: { label: 'CONCLUÍDO', cls: 'badge-lime', dot: 'var(--lime)' },
  processando: { label: 'PROCESSANDO', cls: 'badge-cyan', dot: 'var(--cyan)' },
  pendencia: { label: 'PENDÊNCIA', cls: 'badge-amber', dot: 'var(--amber)' },
  fila: { label: 'EM FILA', cls: '', dot: 'var(--fg-3)' },
};

function MOcr({ onNav }) {
  const [editais, setEditais] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [selected, setSelected] = React.useState(null);
  const [drawerTab, setDrawerTab] = React.useState('pdf');
  const [filtroStatus, setFiltroStatus] = React.useState('todos');
  const [reprocessing, setReprocessing] = React.useState(false);
  const [batching, setBatching] = React.useState(false);
  const [showUpload, setShowUpload] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [analiseTarget, setAnaliseTarget] = React.useState(null);

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

  // Atualiza o edital em memória com a análise recém-salva no banco.
  const applyAnalise = (realId, analise) => {
    setEditais(prev => prev.map(e => (e.id === realId ? { ...e, analise_ia: analise } : e)));
  };

  React.useEffect(() => {
    let mounted = true;
    window.dataApi.listEditais()
      .then(rows => { if (mounted) { setEditais(rows); setLoading(false); } })
      .catch(() => { if (mounted) setLoading(false); });
    return () => { mounted = false; };
  }, []);

  // Status do edital derivado da análise de IA (analise_ia), quando existir.
  const lista = React.useMemo(() => editais.map(e => {
    const analise = e.analise_ia || null;
    const hab = analise && Array.isArray(analise.habilitacao) ? analise.habilitacao : [];
    const pend = analise && Array.isArray(analise.alertas) ? analise.alertas.filter(a => a.tom === 'red').length : 0;
    return {
      ...e,
      realId: e.id,        // uuid real (e.id é sobrescrito por numero abaixo p/ exibição)
      id: e.numero,
      analise,
      ocrData: {
        ocr: analise ? 'concluido' : 'fila',
        extracao: analise ? 100 : 0,
        paginas: 0,
        checklist: { ok: hab.length, total: hab.length },
        zip: false,
        pendencias: pend,
      },
    };
  }), [editais]);

  const listaFiltrada = React.useMemo(() => {
    if (filtroStatus === 'pendencia') return lista.filter(e => e.ocrData.pendencias > 0 || e.ocrData.checklist.ok < e.ocrData.checklist.total || e.ocrData.ocr === 'pendencia');
    if (filtroStatus === 'zip') return lista.filter(e => e.ocrData.zip);
    return lista;
  }, [filtroStatus, lista]);

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

  const handleReprocess = () => {
    if (reprocessing) return;
    setReprocessing(true);
    setTimeout(() => {
      setReprocessing(false);
      showToast(`OCR reprocessado · ${lista.length} editais analisados · 23 campos atualizados em média`);
    }, 2200);
  };

  const handleBatchZip = () => {
    if (batching) return;
    const elegiveis = lista.filter(e => e.ocrData.checklist.ok === e.ocrData.checklist.total && !e.ocrData.zip);
    if (elegiveis.length === 0) {
      showToast('Nenhum edital elegível para gerar ZIP em lote · habilitação completa + ZIP ainda não gerado');
      return;
    }
    setBatching(true);
    setTimeout(() => {
      setBatching(false);
      showToast(`${elegiveis.length} ZIPs de habilitação gerados em lote · disponíveis nas pastas dos editais`);
    }, 2000);
  };

  return (
    <>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow"><span>OCR & Análise Inteligente</span><span className="chip">M02</span><span className="badge badge-lime">IA ATIVA · análise por texto/PDF</span></div>
            <h1 className="page-title">Editais em análise automática</h1>
            <p className="page-sub">Leitura óptica de editais, extração estruturada de campos (objeto, datas, regiões, prazos), checklist de habilitação (Lei 14.133/2021) e compactação automática do ZIP de habilitação.</p>
          </div>
          <div className="flex items-center gap-3">
            <button className="btn" onClick={handleReprocess} disabled={reprocessing}>
              {reprocessing ? <span className="spinner"></span> : <Icon name="refresh" />}
              {reprocessing ? 'Reprocessando...' : 'Reprocessar todos'}
            </button>
            <button className="btn" onClick={() => setShowUpload(true)}><Icon name="upload" /> Enviar PDF manual</button>
            <button className="btn btn-primary" onClick={handleBatchZip} disabled={batching}>
              {batching ? <span className="spinner"></span> : <Icon name="archive" />}
              {batching ? 'Gerando ZIPs...' : 'Gerar ZIPs em lote'}
            </button>
          </div>
        </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 === 'pendencia' ? ' active' : ''}`} onClick={() => setFiltroStatus(filtroStatus === 'pendencia' ? 'todos' : 'pendencia')}>
            Apenas com pendência {filtroStatus === 'pendencia' && <Icon name="x" size={10} />}
          </div>
          <div className={`filter-chip${filtroStatus === 'zip' ? ' active' : ''}`} onClick={() => setFiltroStatus(filtroStatus === 'zip' ? 'todos' : 'zip')}>
            ZIP pronto {filtroStatus === 'zip' && <Icon name="x" size={10} />}
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>Análise IA</span>
            <span className="mono" style={{ fontSize: 11.5, color: 'var(--lime)' }}>ativa</span>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="t">
              {listaFiltrada.length} editais
              {filtroStatus !== 'todos' && <span style={{ color: 'var(--fg-3)', fontSize: 11, marginLeft: 4 }}>(de {lista.length})</span>}
            </div>
            <div className="s">
              {filtroStatus === 'pendencia' ? 'apenas com pendência (OCR ou habilitação)' :
               filtroStatus === 'zip' ? 'ZIP de habilitação pronto' :
               `${lista.filter(e => e.ocrData.ocr === 'concluido').length} concluídos · ${lista.filter(e => e.ocrData.ocr === 'pendencia').length} com pendência`}
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Edital</th>
                <th>Órgão / Plataforma</th>
                <th>Páginas</th>
                <th>Status OCR</th>
                <th>Extração</th>
                <th>Habilitação</th>
                <th>ZIP</th>
                <th>Pendências</th>
                <th style={{ width: 32 }}></th>
              </tr>
            </thead>
            <tbody>
              {listaFiltrada.length === 0 && (
                <tr>
                  <td colSpan={9} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
                    Nenhum edital corresponde a este filtro.
                  </td>
                </tr>
              )}
              {listaFiltrada.map(e => {
                const st = OCR_STATUS[e.ocrData.ocr];
                const chkOk = e.ocrData.checklist.ok === e.ocrData.checklist.total;
                return (
                  <tr key={e.id} onClick={() => openEdital(e.id)} style={{ cursor: 'pointer' }}>
                    <td>
                      <div className="id-col" style={{ color: 'var(--fg-0)', fontWeight: 500 }}>{e.id}</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">{e.ocrData.paginas || '—'}</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>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div className="bar" style={{ width: 70, height: 4 }}>
                          <div className="fill" style={{ width: e.ocrData.extracao + '%', background: e.ocrData.extracao >= 95 ? 'var(--lime)' : e.ocrData.extracao >= 70 ? 'var(--amber)' : 'var(--cyan)' }}></div>
                        </div>
                        <span className="mono" style={{ fontSize: 11, color: 'var(--fg-2)' }}>{e.ocrData.extracao}%</span>
                      </div>
                    </td>
                    <td>
                      <span className="mono" style={{ fontSize: 11.5, color: chkOk ? 'var(--lime)' : e.ocrData.checklist.ok === 0 ? 'var(--fg-3)' : 'var(--amber)', fontWeight: 600 }}>
                        {e.ocrData.checklist.ok}/{e.ocrData.checklist.total}
                      </span>
                    </td>
                    <td>
                      {e.ocrData.zip ? (
                        <span className="badge badge-lime"><Icon name="archive" size={10} /> PRONTO</span>
                      ) : (
                        <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>—</span>
                      )}
                    </td>
                    <td>
                      {e.ocrData.pendencias > 0 ? (
                        <span className="badge badge-amber">{e.ocrData.pendencias} aberta{e.ocrData.pendencias > 1 ? 's' : ''}</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 && <OcrDrawer edital={sel} onClose={() => setSelected(null)} tab={drawerTab} onTab={setDrawerTab} onNav={onNav} onAnalisar={() => setAnaliseTarget(sel)} />}
      {showUpload && <UploadPdfModal onClose={() => setShowUpload(false)} onDone={(nome) => { setShowUpload(false); showToast(`PDF ${nome} enviado · OCR iniciado · resultado em até 5 min`); }} />}
      {analiseTarget && (
        <AnaliseModal
          edital={analiseTarget}
          onClose={() => setAnaliseTarget(null)}
          onDone={(analise) => {
            applyAnalise(analiseTarget.realId, analise);
            setAnaliseTarget(null);
            showToast(`Edital ${analiseTarget.id} analisado pela IA · campos atualizados`);
          }}
        />
      )}
      {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 UploadPdfModal({ onClose, onDone }) {
  const [file, setFile] = React.useState(null);
  const [origem, setOrigem] = React.useState('email');
  const [observacao, setObservacao] = React.useState('');
  const [uploading, setUploading] = React.useState(false);

  const submit = () => {
    if (!file) return;
    setUploading(true);
    setTimeout(() => onDone(file), 1500);
  };

  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: 520, maxHeight: '85vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="upload" />
          <div className="t">Enviar PDF de edital 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>OCR + extração automática</strong>
              <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                Após o upload, a IA executa OCR completo, extrai 23 campos estruturados e gera checklist de habilitação.
              </div>
            </div>
          </div>

          <div>
            <div className="field-label">ARQUIVO PDF DO EDITAL <span style={{ color: 'var(--red)' }}>*</span></div>
            <div style={{ padding: 22, border: '2px dashed var(--line-2)', borderRadius: 6, textAlign: 'center', background: 'var(--bg-2)', cursor: 'pointer' }} onClick={() => document.getElementById('ocr-file-input').click()}>
              <Icon name="upload" size={28} style={{ color: 'var(--fg-3)' }} />
              <div style={{ fontSize: 12.5, marginTop: 8, color: 'var(--fg-1)' }}>
                {file || 'Clique para escolher um PDF (ou arraste aqui)'}
              </div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4, fontFamily: 'IBM Plex Mono' }}>até 50 MB · PDF, PDF/A</div>
              <input
                id="ocr-file-input"
                type="file"
                accept=".pdf,application/pdf"
                style={{ display: 'none' }}
                onChange={e => e.target.files[0] && setFile(e.target.files[0].name)}
              />
            </div>
          </div>

          <div>
            <div className="field-label">ORIGEM</div>
            <div className="segmented">
              {[
                { id: 'email', l: 'E-MAIL DIRETO' },
                { id: 'portal', l: 'PORTAL EXTERNO' },
                { id: 'fisico', l: 'CÓPIA FÍSICA' },
              ].map(o => (
                <div key={o.id} className={`seg${origem === o.id ? ' active' : ''}`} onClick={() => setOrigem(o.id)}>{o.l}</div>
              ))}
            </div>
          </div>

          <div>
            <div className="field-label">OBSERVAÇÃO (opcional)</div>
            <textarea className="input" value={observacao} onChange={e => setObservacao(e.target.value)} style={{ resize: 'none', minHeight: 60 }} placeholder="Contexto adicional, prazo conhecido, contato do órgão..." />
          </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={uploading}>Cancelar</button>
          <button className="btn btn-primary" onClick={submit} disabled={!file || uploading}>
            {uploading ? <><span className="spinner"></span> Enviando...</> : <><Icon name="upload" /> Enviar e iniciar OCR</>}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── OCR DRAWER ────────────────────────────────────────────── */
function OcrDrawer({ edital, onClose, tab, onTab, onNav, onAnalisar }) {
  const st = OCR_STATUS[edital.ocrData.ocr];
  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>OCR & Análise</span><span className="chip">M02</span><span className={`badge ${st.cls}`}>{st.label}</span></>}
      title={<span className="mono" style={{ fontWeight: 600 }}>{edital.id} · {edital.orgao}</span>}
      subtitle={`${edital.cidade} · ${edital.uf} · ${edital.ocrData.paginas} págs · ${edital.itens} itens · ${BRL(edital.valor)}`}
      headRight={
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {edital.ocrData.pendencias > 0 && <span className="badge badge-amber">{edital.ocrData.pendencias} pendência{edital.ocrData.pendencias > 1 ? 's' : ''}</span>}
        </div>
      }
      tabs={[
        { id: 'pdf', label: 'PDF do edital' },
        { id: 'extracao', label: 'Extração', count: `${edital.ocrData.extracao}%` },
        { id: 'check', label: 'Habilitação', count: `${edital.ocrData.checklist.ok}/${edital.ocrData.checklist.total}` },
        { id: 'alerta', label: 'Alertas', count: edital.ocrData.pendencias > 0 ? edital.ocrData.pendencias : undefined },
        { id: 'zip', label: 'ZIP habilitação' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        <>
          <button className="btn" onClick={onAnalisar}>
            <Icon name="cpu" /> {edital.analise ? 'Reanalisar com IA' : 'Analisar com IA'}
          </button>
          <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNav('precificacao')}>
            <Icon name="arrowR" /> Enviar para precificação
          </button>
        </>
      }
    >
      {tab === 'pdf' && <TabPdf edital={edital} />}
      {tab === 'extracao' && <TabExtracao edital={edital} onAnalisar={onAnalisar} />}
      {tab === 'check' && <TabChecklist edital={edital} onAnalisar={onAnalisar} />}
      {tab === 'alerta' && <TabAlertas edital={edital} onAnalisar={onAnalisar} />}
      {tab === 'zip' && <TabZip edital={edital} />}
    </Drawer>
  );
}

/* ── TAB CONTENT ──────────────────────────────────────────── */
function TabPdf({ edital }) {
  return (
    <div>
      <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 8, background: 'var(--bg-2)' }}>
        <Icon name="file" size={13} />
        <span style={{ fontSize: 12 }}>Edital_{edital.id.replace('/', '_')}.pdf</span>
        <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>{edital.ocrData.paginas} páginas</span>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
          <button className="tb-btn"><Icon name="chevU" size={12} /></button>
          <span className="mono" style={{ fontSize: 11, color: 'var(--fg-2)' }}>03 / {edital.ocrData.paginas}</span>
          <button className="tb-btn"><Icon name="chevD" size={12} /></button>
          <div style={{ width: 1, height: 16, background: 'var(--line-2)' }}></div>
          <button className="tb-btn"><Icon name="download" /></button>
        </div>
      </div>
      <div style={{ background: '#1a1a1f', padding: 20 }}>
        <PdfMock edital={edital} />
      </div>
    </div>
  );
}

function AnaliseVazia({ onAnalisar }) {
  return (
    <div style={{ padding: 48, textAlign: 'center' }}>
      <div style={{ display: 'inline-grid', placeItems: 'center', width: 64, height: 64, borderRadius: '50%', background: 'var(--bg-2)', border: '1px solid var(--line-2)', marginBottom: 16 }}>
        <Icon name="cpu" size={28} style={{ color: 'var(--fg-3)' }} />
      </div>
      <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>Edital ainda não analisado</div>
      <p style={{ fontSize: 12.5, color: 'var(--fg-2)', maxWidth: 380, margin: '0 auto 18px', lineHeight: 1.6 }}>
        Cole o texto do edital ou suba o PDF para a IA extrair objeto, datas, prazos, habilitação e alertas.
      </p>
      <button className="btn btn-primary" onClick={onAnalisar}><Icon name="cpu" /> Analisar com IA</button>
    </div>
  );
}

function TabExtracao({ edital, onAnalisar }) {
  const a = edital.analise;
  if (!a) return <AnaliseVazia onAnalisar={onAnalisar} />;
  const conf = typeof a.confianca === 'number' ? a.confianca : 0.9;
  const regiao = [a.cidade, a.uf].filter(Boolean).join(' / ');
  const fields = [
    ['OBJETO', a.objeto],
    ['ÓRGÃO', a.orgao],
    ['PLATAFORMA', a.plataforma],
    ['REGIÃO', regiao],
    ['VALOR ESTIMADO', typeof a.valor_estimado === 'number' ? BRL(a.valor_estimado) : null],
    ['ABERTURA', a.data_abertura],
    ['INTERVALO DE LANCES', a.intervalo_lances],
    ['VIGÊNCIA ARP', a.vigencia_arp],
    ['VALIDADE PROPOSTA', a.validade_proposta],
    ['PRAZO ENTREGA', a.prazo_entrega],
    ['PRAZO PAGAMENTO', a.prazo_pagamento],
    ['LOCAL DE ENTREGA', a.local_entrega],
  ];
  return (
    <div style={{ padding: 18 }}>
      <div className="flex items-center justify-between" style={{ marginBottom: 12 }}>
        <div className="field-label" style={{ margin: 0 }}>CAMPOS EXTRAÍDOS PELA IA</div>
        <span className="badge badge-lime">{a.modelo || 'IA'} · {(conf * 100).toFixed(0)}%</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 14 }}>
        {fields.map(([label, value]) => (
          <ExtractField key={label} label={label} value={value || '—'} conf={value ? conf : 0} />
        ))}
      </div>
      <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>
        Analisado em {a.analisado_em ? new Date(a.analisado_em).toLocaleString('pt-BR') : '—'}
      </div>
    </div>
  );
}

function TabChecklist({ edital, onAnalisar }) {
  const a = edital.analise;
  if (!a) return <AnaliseVazia onAnalisar={onAnalisar} />;
  const items = Array.isArray(a.habilitacao) ? a.habilitacao : [];
  return (
    <div>
      <div style={{ padding: '14px 18px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div className="field-label" style={{ marginBottom: 2 }}>DOCUMENTOS DE HABILITAÇÃO EXIGIDOS</div>
          <div style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>Identificados pela IA no texto do edital</div>
        </div>
        <span className="badge badge-lime">{items.length} {items.length === 1 ? 'item' : 'itens'}</span>
      </div>
      {items.length === 0 ? (
        <div style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)', fontSize: 12 }}>
          Nenhum documento de habilitação identificado no texto.
        </div>
      ) : (
        <div>
          {items.map((it, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '20px 1fr 110px', gap: 12, padding: '10px 18px', alignItems: 'center', fontSize: 12.5, borderBottom: '1px solid var(--line-1)' }}>
              <div style={{ width: 16, height: 16, borderRadius: 3, background: 'var(--bg-3)', border: '1px solid var(--line-2)', display: 'grid', placeItems: 'center', color: 'var(--fg-2)' }}>
                <Icon name="file" size={10} />
              </div>
              <span style={{ color: 'var(--fg-0)' }}>{it.documento}</span>
              <span className={`badge ${it.obrigatorio ? 'badge-amber' : ''}`} style={{ fontSize: 9.5 }}>{it.obrigatorio ? 'OBRIGATÓRIO' : 'OPCIONAL'}</span>
            </div>
          ))}
        </div>
      )}
      <div className="alert-banner alert-cyan" style={{ margin: 14 }}>
        <Icon name="info" size={13} />
        Lista extraída do edital pela IA. O cruzamento automático com as suas certidões reais será adicionado em uma próxima etapa.
      </div>
    </div>
  );
}

function TabAlertas({ edital, onAnalisar }) {
  const a = edital.analise;
  if (!a) return <AnaliseVazia onAnalisar={onAnalisar} />;
  const alertas = Array.isArray(a.alertas) ? a.alertas : [];
  return (
    <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div className="field-label">ALERTAS IDENTIFICADOS PELA IA</div>
      {alertas.length === 0 ? (
        <div className="alert-banner alert-lime">
          <Icon name="check" size={14} />
          Nenhum alerta identificado pela IA neste edital.
        </div>
      ) : alertas.map((al, i) => {
        const tom = ['red', 'amber', 'cyan'].includes(al.tom) ? al.tom : 'cyan';
        return (
          <div key={i} className={`alert-banner alert-${tom}`}>
            <Icon name={tom === 'red' ? 'x' : tom === 'amber' ? 'warn' : 'info'} size={14} />
            <div style={{ flex: 1 }}>
              <strong>{al.titulo}</strong>
              <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>{al.descricao}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function TabZip({ edital }) {
  const [tipo, setTipo] = React.useState('auto');
  const arquivos = [
    { n: `Edital_${edital.id.replace('/', '_')}.pdf`, tam: '4.2 MB', sel: true, cat: 'EDITAL' },
    { n: `Proposta_BTM_${edital.id.replace('/', '_').replace('PE-', '')}.pdf`, tam: '187 KB', sel: true, cat: 'PROPOSTA' },
    { n: 'CND_Federal.pdf', tam: '64 KB', sel: true, cat: 'CERTIDÃO' },
    { n: 'CND_SEFAZ.pdf', tam: '58 KB', sel: true, cat: 'CERTIDÃO' },
    { n: 'CND_PGE.pdf', tam: '52 KB', sel: true, cat: 'CERTIDÃO' },
    { n: 'CND_Municipal.pdf', tam: '49 KB', sel: edital.ocrData.checklist.ok >= 4, cat: 'CERTIDÃO' },
    { n: 'CRF_FGTS.pdf', tam: '38 KB', sel: edital.ocrData.checklist.ok >= 5, cat: 'CERTIDÃO' },
    { n: 'CNDT.pdf', tam: '41 KB', sel: edital.ocrData.checklist.ok >= 6, cat: 'CERTIDÃO' },
    { n: 'Catalogo_BTM_2026.pdf', tam: '8.7 MB', sel: false, cat: 'CATÁLOGO' },
    { n: 'Declaracoes.zip', tam: '128 KB', sel: true, cat: 'DECLAR.' },
  ];
  const totalSel = arquivos.filter(a => tipo === 'auto' || a.sel).length;

  return (
    <div style={{ padding: 18 }}>
      <div className="flex items-center justify-between" style={{ marginBottom: 12 }}>
        <div className="field-label" style={{ margin: 0 }}>ARQUIVOS DO ZIP DE HABILITAÇÃO</div>
        <div className="segmented">
          <div className={`seg${tipo === 'auto' ? ' active' : ''}`} onClick={() => setTipo('auto')}>AUTO</div>
          <div className={`seg${tipo === 'manual' ? ' active' : ''}`} onClick={() => setTipo('manual')}>MANUAL</div>
        </div>
      </div>
      <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, padding: 6 }}>
        {arquivos.map((a, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '16px 1fr 80px 80px', gap: 12, padding: '8px 10px', alignItems: 'center', fontSize: 12 }}>
            <input type="checkbox" defaultChecked={tipo === 'auto' || a.sel} style={{ accentColor: 'var(--lime)' }} onClick={e => e.stopPropagation()} />
            <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11.5, color: 'var(--fg-1)' }}>{a.n}</span>
            <span className="badge" style={{ fontSize: 9.5 }}>{a.cat}</span>
            <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)', textAlign: 'right' }}>{a.tam}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="mono" style={{ fontSize: 11.5, color: 'var(--fg-2)' }}>{totalSel} arquivos · ≈ 5.4 MB</span>
        <button className="btn btn-primary" style={{ marginLeft: 'auto' }}><Icon name="archive" size={12} /> Gerar ZIP_{edital.id.replace('/', '_')}.zip</button>
      </div>
      {edital.ocrData.zip && (
        <div className="alert-banner alert-lime" style={{ marginTop: 12 }}>
          <Icon name="check" size={13} />
          ZIP já gerado · pronto para upload na plataforma {edital.plataforma}.
        </div>
      )}
    </div>
  );
}

/* ── PDF + EXTRACT FIELD (reused) ──────────────────────────── */
function PdfMock({ edital }) {
  const id = edital?.id || 'PE-187/2026';
  const orgao = edital?.orgao || 'PREFEITURA MUNICIPAL DE NITERÓI';
  const cidade = edital?.cidade || 'Niterói';
  const plataforma = edital?.plataforma || 'LICITANET';
  const abertura = edital ? new Date(edital.abertura).toLocaleDateString('pt-BR', { day: 'numeric', month: 'long', year: 'numeric' }) : '14 de maio de 2026';
  return (
    <div style={{ background: '#f5f4f0', color: '#0a0a0b', padding: '40px 50px', maxWidth: 540, margin: '0 auto', fontFamily: "'IBM Plex Serif', serif", fontSize: 11, lineHeight: 1.6, minHeight: 720, boxShadow: '0 8px 32px rgba(0,0,0,0.4)' }}>
      <div style={{ textAlign: 'center', marginBottom: 20 }}>
        <div style={{ fontWeight: 700, fontSize: 13 }}>{orgao.toUpperCase()}</div>
        <div style={{ fontSize: 10 }}>Secretaria Municipal de Administração</div>
        <div style={{ fontWeight: 700, marginTop: 14 }}>PREGÃO ELETRÔNICO Nº {id.replace('PE-', '')}</div>
        <div style={{ fontSize: 10, marginTop: 4 }}>Processo Administrativo nº 23.045.{id.split('/')[0].replace('PE-', '')}/2026</div>
      </div>
      <h2 style={{ fontSize: 12, fontWeight: 700, marginTop: 16, marginBottom: 6 }}>1. DO OBJETO</h2>
      <p style={{ marginBottom: 10 }}>
        Aquisição de <span style={{ background: 'rgba(212,247,82,0.45)', padding: '0 3px' }}>material de escritório, papelaria e suprimentos escolares</span> para as Secretarias Municipais, conforme especificações constantes no Anexo I — Termo de Referência.
      </p>
      <h2 style={{ fontSize: 12, fontWeight: 700, marginTop: 16, marginBottom: 6 }}>2. DA ABERTURA</h2>
      <p style={{ marginBottom: 4 }}>Data: <span style={{ background: 'rgba(245,181,68,0.4)', padding: '0 3px' }}>{abertura}</span></p>
      <p style={{ marginBottom: 4 }}>Horário: <span style={{ background: 'rgba(245,181,68,0.4)', padding: '0 3px' }}>10h00 (horário de Brasília)</span></p>
      <p style={{ marginBottom: 10 }}>Plataforma: <span style={{ background: 'rgba(106,215,229,0.4)', padding: '0 3px' }}>{plataforma.toLowerCase()}.com.br</span></p>
      <h2 style={{ fontSize: 12, fontWeight: 700, marginTop: 16, marginBottom: 6 }}>3. DA ENTREGA</h2>
      <p style={{ marginBottom: 4 }}>Local: <span style={{ background: 'rgba(106,215,229,0.4)', padding: '0 3px' }}>Almoxarifado Central — {cidade}/{edital?.uf || 'RJ'}</span></p>
      <p style={{ marginBottom: 4 }}>Prazo de entrega: <span style={{ background: 'rgba(245,181,68,0.4)', padding: '0 3px' }}>30 (trinta) dias úteis</span> contados do recebimento da nota de empenho.</p>
      <p style={{ marginBottom: 10 }}>Vigência da ARP: <span style={{ background: 'rgba(245,181,68,0.4)', padding: '0 3px' }}>12 (doze) meses</span>, prorrogáveis nos termos da Lei 14.133/2021.</p>
      <h2 style={{ fontSize: 12, fontWeight: 700, marginTop: 16, marginBottom: 6 }}>4. DAS CONDIÇÕES DE HABILITAÇÃO</h2>
      <p style={{ marginBottom: 4 }}>4.1. <span style={{ background: 'rgba(255,93,93,0.35)', padding: '0 3px' }}>Certidão Negativa de Débitos Federais</span> (vigência mínima na data da sessão);</p>
      <p style={{ marginBottom: 4 }}>4.2. <span style={{ background: 'rgba(255,93,93,0.35)', padding: '0 3px' }}>Certidão Estadual SEFAZ e PGE</span>;</p>
      <p style={{ marginBottom: 4 }}>4.3. <span style={{ background: 'rgba(255,93,93,0.35)', padding: '0 3px' }}>Certidão Municipal</span> da sede da licitante;</p>
      <p style={{ marginBottom: 4 }}>4.4. <span style={{ background: 'rgba(255,93,93,0.35)', padding: '0 3px' }}>CRF do FGTS</span>;</p>
      <p style={{ marginBottom: 4 }}>4.5. <span style={{ background: 'rgba(255,93,93,0.35)', padding: '0 3px' }}>CNDT — Trabalhista</span>;</p>
      <p style={{ marginBottom: 10 }}>4.6. <span style={{ background: 'rgba(255,93,93,0.35)', padding: '0 3px' }}>Certidão de Falência e Concordata</span>, expedida pelo distribuidor da sede.</p>
      <h2 style={{ fontSize: 12, fontWeight: 700, marginTop: 16, marginBottom: 6 }}>5. DO INTERVALO DE LANCES</h2>
      <p style={{ marginBottom: 10 }}>Intervalo mínimo entre lances: <span style={{ background: 'rgba(245,181,68,0.4)', padding: '0 3px' }}>R$ 0,01 (um centavo)</span>.</p>
      <h2 style={{ fontSize: 12, fontWeight: 700, marginTop: 16, marginBottom: 6 }}>6. DO PAGAMENTO</h2>
      <p>O pagamento será efetuado em <span style={{ background: 'rgba(245,181,68,0.4)', padding: '0 3px' }}>30 (trinta) dias</span> contados do atesto da Nota Fiscal pelo gestor do contrato.</p>
    </div>
  );
}

function ExtractField({ label, value, conf }) {
  return (
    <div style={{ padding: '8px 10px', background: 'var(--bg-2)', borderRadius: 5, border: '1px solid var(--line-1)' }}>
      <div className="flex items-center justify-between" style={{ marginBottom: 2 }}>
        <span className="field-label" style={{ margin: 0 }}>{label}</span>
        <span className="mono" style={{ fontSize: 9.5, color: conf >= 0.95 ? 'var(--lime)' : 'var(--amber)' }}>{(conf * 100).toFixed(0)}%</span>
      </div>
      <div style={{ fontSize: 11.5, fontWeight: 500 }}>{value}</div>
    </div>
  );
}

/* ── MODAL: ANALISAR COM IA ────────────────────────────────── */
function AnaliseModal({ edital, onClose, onDone }) {
  const [modo, setModo] = React.useState('colar'); // 'colar' | 'pdf'
  const [texto, setTexto] = React.useState('');
  const [fileObj, setFileObj] = React.useState(null);
  const [fileName, setFileName] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [fase, setFase] = React.useState('');
  const [erro, setErro] = React.useState(null);

  const handleAnalisar = async () => {
    setErro(null);
    setBusy(true);
    try {
      let conteudo = texto;
      if (modo === 'pdf') {
        if (!fileObj) { setErro('Selecione um arquivo PDF.'); setBusy(false); return; }
        setFase('Extraindo texto do PDF…');
        conteudo = await window.extrairTextoPdf(fileObj);
        if (!conteudo || conteudo.trim().length < 50) {
          setErro('Não foi possível extrair texto deste PDF (provavelmente escaneado/imagem). Cole o texto manualmente.');
          setBusy(false); return;
        }
      }
      setFase('Analisando com a IA…');
      const r = await window.analisarEdital(conteudo);
      if (!r.ok) { setErro(r.error); setBusy(false); return; }
      setFase('Salvando…');
      await window.dataApi.updateEditalAnalise(edital.realId, r.analise);
      onDone(r.analise);
    } catch (e) {
      setErro((e && e.message) || 'Erro inesperado na análise.');
    } finally {
      setBusy(false);
      setFase('');
    }
  };

  const podeAnalisar = modo === 'colar' ? texto.trim().length >= 50 : !!fileObj;

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 500, backdropFilter: 'blur(2px)' }} onClick={busy ? undefined : onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 560, maxHeight: '88vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="cpu" />
          <div className="t">Analisar edital com IA</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose} disabled={busy}><Icon name="x" /></button>
        </div>

        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ fontSize: 12, color: 'var(--fg-2)' }}>
            Edital <span className="mono" style={{ color: 'var(--fg-0)' }}>{edital.id}</span> · {edital.orgao}
          </div>

          <div className="segmented">
            <div className={`seg${modo === 'colar' ? ' active' : ''}`} onClick={() => !busy && setModo('colar')}>COLAR TEXTO</div>
            <div className={`seg${modo === 'pdf' ? ' active' : ''}`} onClick={() => !busy && setModo('pdf')}>SUBIR PDF</div>
          </div>

          {modo === 'colar' ? (
            <div>
              <div className="field-label">TEXTO DO EDITAL <span style={{ color: 'var(--red)' }}>*</span></div>
              <textarea
                className="input mono"
                value={texto}
                onChange={e => setTexto(e.target.value)}
                disabled={busy}
                style={{ resize: 'vertical', minHeight: 180, fontSize: 11.5 }}
                placeholder="Cole aqui o texto do edital (objeto, datas, habilitação, prazos...)."
              />
              <div style={{ fontSize: 10.5, color: 'var(--fg-3)', marginTop: 4, fontFamily: 'IBM Plex Mono' }}>{texto.trim().length} caracteres</div>
            </div>
          ) : (
            <div>
              <div className="field-label">PDF DO EDITAL (com texto) <span style={{ color: 'var(--red)' }}>*</span></div>
              <div style={{ padding: 22, border: '2px dashed var(--line-2)', borderRadius: 6, textAlign: 'center', background: 'var(--bg-2)', cursor: busy ? 'default' : 'pointer' }} onClick={() => !busy && document.getElementById('analise-file-input').click()}>
                <Icon name="upload" size={26} style={{ color: 'var(--fg-3)' }} />
                <div style={{ fontSize: 12.5, marginTop: 8, color: 'var(--fg-1)' }}>{fileName || 'Clique para escolher um PDF'}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4, fontFamily: 'IBM Plex Mono' }}>o texto é extraído no seu navegador · PDF escaneado (imagem) não funciona</div>
                <input
                  id="analise-file-input"
                  type="file"
                  accept=".pdf,application/pdf"
                  style={{ display: 'none' }}
                  onChange={e => { const f = e.target.files[0]; if (f) { setFileObj(f); setFileName(f.name); } }}
                />
              </div>
            </div>
          )}

          <div className="alert-banner alert-amber">
            <Icon name="info" size={13} />
            <div style={{ fontSize: 11.5, color: 'var(--fg-2)' }}>
              A análise envia o texto para a OpenAI e <strong>consome tokens</strong> (custo de alguns centavos por edital).
            </div>
          </div>

          {erro && (
            <div className="alert-banner alert-red">
              <Icon name="warn" size={13} />
              <div style={{ fontSize: 11.5 }}>{erro}</div>
            </div>
          )}
        </div>

        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8, alignItems: 'center' }}>
          {busy && <span className="mono" style={{ fontSize: 11, color: 'var(--cyan)', marginRight: 'auto' }}>{fase}</span>}
          <button className="btn" onClick={onClose} disabled={busy}>Cancelar</button>
          <button className="btn btn-primary" onClick={handleAnalisar} disabled={busy || !podeAnalisar}>
            {busy ? <><span className="spinner"></span> Processando...</> : <><Icon name="cpu" /> Analisar com IA</>}
          </button>
        </div>
      </div>
    </div>
  );
}

window.MOcr = MOcr;