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

const CLASS_META = {
  EMPENHO: { label: 'EMPENHO', cls: 'badge-lime' },
  CONVOCACAO: { label: 'CONVOCAÇÃO', cls: 'badge-cyan' },
  CERTIDAO: { label: 'CERTIDÃO', cls: 'badge-cyan' },
  FINANCEIRO: { label: 'FINANCEIRO', cls: 'badge-amber' },
  EXTRATO: { label: 'EXTRATO', cls: 'badge-amber' },
  COTACAO: { label: 'COTAÇÃO', cls: 'badge-cyan' },
  LOGISTICA: { label: 'LOGÍSTICA', cls: 'badge-violet' },
  SPAM: { label: 'SPAM', cls: '' },
  OUTRO: { label: 'OUTRO', cls: '' },
};
const CLASS_ORDER = ['EMPENHO', 'CONVOCACAO', 'CERTIDAO', 'FINANCEIRO', 'EXTRATO', 'COTACAO', 'LOGISTICA', 'SPAM', 'OUTRO'];

function metaOf(c) {
  return CLASS_META[c] || { label: c || 'OUTRO', cls: '' };
}
function fmtData(iso) {
  if (!iso) return '—';
  try { return new Date(iso).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }); }
  catch { return '—'; }
}

function MIa({ onNav }) {
  const [emails, setEmails] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [syncing, setSyncing] = React.useState(false);
  const [filtro, setFiltro] = React.useState('todos');
  const [sel, setSel] = React.useState(null);
  const [toast, setToast] = React.useState(null);
  const [pend, setPend] = React.useState(null);

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

  const load = async () => {
    try {
      const rows = await window.dataApi.listEmails();
      setEmails(rows);
    } catch (e) {
      showToast('Erro ao carregar e-mails: ' + (e?.message || e));
    } finally {
      setLoading(false);
    }
  };
  React.useEffect(() => { load(); }, []);

  const handleSync = async () => {
    if (syncing) return;
    setSyncing(true);
    try {
      const r = await window.syncEmails();
      if (!r.ok) {
        showToast('Falha na sincronização: ' + r.error, 8000);
      } else {
        if (typeof r.pendentes_corpo === 'number') setPend(r.pendentes_corpo);
        showToast(`Sincronização: ${r.novos ?? 0} novo(s) · ${r.aprofundados ?? 0} com corpo analisado · ${r.pendentes_corpo ?? 0} aguardando corpo`, 7000);
        await load();
      }
    } catch (e) {
      showToast('Erro: ' + (e?.message || e), 8000);
    } finally {
      setSyncing(false);
    }
  };

  const counts = React.useMemo(() => {
    const c = {};
    emails.forEach(e => { const k = e.classificacao || 'OUTRO'; c[k] = (c[k] || 0) + 1; });
    return c;
  }, [emails]);
  const filtrados = filtro === 'todos' ? emails : emails.filter(e => (e.classificacao || 'OUTRO') === filtro);
  const classesPresentes = CLASS_ORDER.filter(c => counts[c]);
  const semCorpo = emails.filter(e => !e.corpo).length;

  return (
    <>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow">
              <span>IA · Gerente Geral</span>
              <span className="chip">M08</span>
              <span className="badge badge-lime">IA + IMAP ATIVOS</span>
            </div>
            <h1 className="page-title">Caixa de e-mails inteligente</h1>
            <p className="page-sub">A IA lê a caixa, classifica (empenhos, convocações, certidões, financeiro...) e resume cada e-mail. Clique em um e-mail para ver a análise e a sugestão de ação.</p>
          </div>
          <div className="flex items-center gap-3">
            <button className="btn btn-primary" onClick={handleSync} disabled={syncing}>
              {syncing ? <><span className="spinner"></span> Sincronizando...</> : <><Icon name="refresh" /> Sincronizar agora</>}
            </button>
          </div>
        </div>

        {/* Filtros por classificação */}
        <div className="subbar">
          <div className={`filter-chip${filtro === 'todos' ? ' active' : ''}`} onClick={() => setFiltro('todos')}>
            Todos <span className="count">{emails.length}</span>
          </div>
          {classesPresentes.map(c => (
            <div key={c} className={`filter-chip${filtro === c ? ' active' : ''}`} onClick={() => setFiltro(filtro === c ? 'todos' : c)}>
              {metaOf(c).label} <span className="count">{counts[c]}</span>
            </div>
          ))}
        </div>

        <div className="card">
          <div className="card-head">
            <div className="t">{filtrados.length} e-mail(s){filtro !== 'todos' && <span style={{ color: 'var(--fg-3)', fontSize: 11, marginLeft: 4 }}>(de {emails.length})</span>}</div>
            <div className="s">
              caixa monitorada via IMAP · análise por IA
              {semCorpo > 0 && <span style={{ color: 'var(--amber)', marginLeft: 6 }}>· {semCorpo} aguardando análise do corpo (automático)</span>}
            </div>
          </div>

          {loading ? (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--fg-3)' }}><span className="spinner"></span> Carregando...</div>
          ) : emails.length === 0 ? (
            <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="mail" size={28} style={{ color: 'var(--fg-3)' }} />
              </div>
              <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>Nenhum e-mail sincronizado ainda</div>
              <p style={{ fontSize: 12.5, color: 'var(--fg-2)', maxWidth: 420, margin: '0 auto 18px' }}>
                Clique em <strong>Sincronizar agora</strong> para a IA capturar e classificar os e-mails mais recentes da caixa.
              </p>
              <button className="btn btn-primary" onClick={handleSync} disabled={syncing}>
                {syncing ? <><span className="spinner"></span> Sincronizando...</> : <><Icon name="refresh" /> Sincronizar agora</>}
              </button>
            </div>
          ) : (
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: 130 }}>Classificação</th>
                  <th>Assunto / Remetente</th>
                  <th>Resumo da IA</th>
                  <th style={{ width: 110 }}>Recebido</th>
                  <th style={{ width: 32 }}></th>
                </tr>
              </thead>
              <tbody>
                {filtrados.map(e => {
                  const m = metaOf(e.classificacao);
                  return (
                    <tr key={e.id} onClick={() => setSel(e)} style={{ cursor: 'pointer' }}>
                      <td><span className={`badge ${m.cls}`}>{m.label}</span></td>
                      <td>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, maxWidth: 320 }}>
                          <span style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--fg-0)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.assunto || '(sem assunto)'}</span>
                          {e.corpo ? <Icon name="file" size={11} style={{ color: 'var(--lime)', flexShrink: 0 }} title="Corpo analisado" /> : null}
                        </div>
                        <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>{e.de_nome || e.de}</div>
                      </td>
                      <td>
                        <div style={{ fontSize: 11.5, color: 'var(--fg-2)', maxWidth: 360, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.resumo || '—'}</div>
                      </td>
                      <td className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>{fmtData(e.recebido_em)}</td>
                      <td><Icon name="chevR" size={12} style={{ color: 'var(--fg-3)' }} /></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
      </div>

      {sel && <EmailDrawer email={sel} onClose={() => setSel(null)} />}

      {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)' }}>
          <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 EmailDrawer({ email, onClose }) {
  const m = metaOf(email.classificacao);
  const analise = email.analise_ia || {};
  const campos = analise.campos && typeof analise.campos === 'object' ? analise.campos : {};
  const camposList = Object.entries(campos).filter(([, v]) => v !== null && v !== '' && typeof v !== 'object');

  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>E-mail · M08</span><span className={`badge ${m.cls}`}>{m.label}</span></>}
      title={email.assunto || '(sem assunto)'}
      subtitle={`${email.de_nome || ''} ${email.de ? '<' + email.de + '>' : ''} · ${fmtData(email.recebido_em)}`}
    >
      <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 16 }}>
        {analise.resumo && (
          <div>
            <div className="field-label" style={{ marginBottom: 6 }}>RESUMO DA IA</div>
            <div style={{ fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.6 }}>{analise.resumo}</div>
          </div>
        )}

        {analise.sugestao && (
          <div className="alert-banner alert-cyan">
            <Icon name="bolt" size={14} />
            <div>
              <strong>Sugestão da IA</strong>
              <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>{analise.sugestao}</div>
            </div>
          </div>
        )}

        {camposList.length > 0 && (
          <div>
            <div className="field-label" style={{ marginBottom: 8 }}>CAMPOS EXTRAÍDOS</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {camposList.map(([k, v]) => (
                <div key={k} style={{ padding: '8px 10px', background: 'var(--bg-2)', borderRadius: 5, border: '1px solid var(--line-1)' }}>
                  <div className="field-label" style={{ margin: 0 }}>{k.replace(/_/g, ' ').toUpperCase()}</div>
                  <div style={{ fontSize: 12, fontWeight: 500 }}>{String(v)}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {email.corpo ? (
          <div>
            <div className="field-label" style={{ marginBottom: 6 }}>CORPO DO E-MAIL</div>
            <div style={{ fontSize: 12, color: 'var(--fg-1)', lineHeight: 1.6, whiteSpace: 'pre-wrap', background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, padding: 14, maxHeight: 360, overflow: 'auto' }}>
              {email.corpo}
            </div>
          </div>
        ) : (
          <div className="alert-banner alert-cyan">
            <Icon name="info" size={13} />
            <div style={{ fontSize: 11.5, color: 'var(--fg-2)' }}>
              Classificação baseada em <strong>assunto e remetente</strong>. A leitura do corpo completo do e-mail entra na próxima fase.
            </div>
          </div>
        )}
      </div>
    </Drawer>
  );
}

window.MIa = MIa;