// Gerador de relatórios — integrado com API real

const Reports = () => {
  const D = window.PAC_DATA;
  const [tmpl, setTmpl] = React.useState('detalhado');
  const [clientId, setClientId] = React.useState('');
  const [caseId, setCaseId] = React.useState('');
  const [period, setPeriod] = React.useState('mes');
  const [customStart, setCustomStart] = React.useState('');
  const [customEnd, setCustomEnd] = React.useState('');
  const [sections, setSections] = React.useState({
    resumo: true,
    desenvolvimentos: true,
    prazos: true,
    documentos: true,
    horas: false,
    riscos: true,
    proximos: true,
    financeiro: false,
  });
  const [clients, setClients] = React.useState(D?.clients || []);
  const [cases, setCases] = React.useState(D?.cases || []);
  const [history, setHistory] = React.useState([]);
  const [generating, setGenerating] = React.useState(false);
  const [result, setResult] = React.useState(null); // { content_md, pdf_url }
  const [error, setError] = React.useState('');

  const toggle = (k) => setSections(s => ({ ...s, [k]: !s[k] }));

  // Carregar clientes e histórico reais
  React.useEffect(() => {
    window.PACApi?.clients?.list().then(setClients).catch(() => {});
    window.PACApi?.cases?.list().then(list => setCases(list)).catch(() => {});
    window.PACApi?.reports?.list().then(setHistory).catch(() => {});
  }, []);

  // Selecionar primeiro cliente por padrão
  React.useEffect(() => {
    if (clients.length && !clientId) setClientId(clients[0].id);
  }, [clients]);

  const filteredCases = cases.filter(c => !clientId || c.client_id === clientId);

  // Calcular período
  function getPeriod() {
    const now = new Date();
    const fmt = d => d.toISOString().slice(0, 10);
    if (period === 'sem') {
      const start = new Date(now); start.setDate(now.getDate() - 7);
      return [fmt(start), fmt(now)];
    }
    if (period === 'mes') {
      const start = new Date(now.getFullYear(), now.getMonth(), 1);
      return [fmt(start), fmt(now)];
    }
    if (period === 'tri') {
      const start = new Date(now); start.setMonth(now.getMonth() - 3);
      return [fmt(start), fmt(now)];
    }
    // custom
    return [customStart || fmt(new Date(now.getFullYear(), now.getMonth(), 1)), customEnd || fmt(now)];
  }

  const onGenerate = async () => {
    if (!clientId) { setError('Selecione um cliente.'); return; }
    setGenerating(true);
    setError('');
    setResult(null);
    const [start, end] = getPeriod();
    try {
      const res = await window.PACApi.reports.generate({
        client_id: clientId,
        case_id: caseId || undefined,
        template: tmpl,
        period_start: start,
        period_end: end,
        sections,
      });
      setResult(res);
      // Atualizar histórico
      window.PACApi?.reports?.list().then(setHistory).catch(() => {});
    } catch (err) {
      setError(err.message || 'Erro ao gerar relatório.');
    } finally {
      setGenerating(false);
    }
  };

  const onDownload = async (id) => {
    try {
      const url = await window.PACApi.reports.getDownloadUrl(id);
      window.open(url, '_blank');
    } catch {
      alert('Erro ao baixar PDF.');
    }
  };

  const templates = [
    { k: 'detalhado', nm: 'Relatório detalhado', ds: 'Análise completa com timeline, riscos e ações.' },
    { k: 'executivo', nm: 'Resumo executivo', ds: 'Uma página · principais avanços e decisões.' },
    { k: 'timeline', nm: 'Linha do tempo', ds: 'Cronologia visual de eventos e decisões.' },
    { k: 'tempo', nm: 'Tempo investido', ds: 'Horas registradas por advogado e por tarefa.' },
  ];

  const selectedClient = clients.find(c => c.id === clientId);

  return (
    <div className="rep">
      {/* Coluna de configuração */}
      <div className="rep-cfg">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
          <h2>Gerador de relatórios</h2>
          <Icon name="sparkles" size={16} style={{ color: 'var(--pac-navy)' }} />
        </div>
        <div className="sub">Compile relatórios consolidados em segundos.</div>

        {error && (
          <div style={{ margin: '10px 0', padding: '8px 12px', background: 'rgba(194,37,62,.08)', border: '1px solid rgba(194,37,62,.2)', borderRadius: 6, color: '#C2253E', fontSize: 12 }}>
            {error}
          </div>
        )}

        <div className="group">
          <div className="lbl">Template</div>
          {templates.map(t => (
            <div key={t.k} className={`rep-template ${tmpl === t.k ? 'sel' : ''}`} onClick={() => setTmpl(t.k)}>
              <div className="nm">{t.nm}</div>
              <div className="ds">{t.ds}</div>
            </div>
          ))}
        </div>

        <div className="group">
          <div className="lbl">Cliente / matéria</div>
          <div className="field-w">
            <select value={clientId} onChange={e => { setClientId(e.target.value); setCaseId(''); }}>
              <option value="">— Selecione —</option>
              {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>
          <div className="field-w" style={{ marginTop: 8 }}>
            <select value={caseId} onChange={e => setCaseId(e.target.value)}>
              <option value="">Todos os casos ativos · {filteredCases.length}</option>
              {filteredCases.map(k => (
                <option key={k.id} value={k.id}>{k.number} · {k.title}</option>
              ))}
            </select>
          </div>
        </div>

        <div className="group">
          <div className="lbl">Período</div>
          <div className="cal-seg" style={{ display: 'flex', width: 'fit-content' }}>
            {[['sem', 'Semana'], ['mes', 'Mês'], ['tri', 'Trimestre'], ['cust', 'Custom']].map(([k, l]) => (
              <button key={k} className={period === k ? 'active' : ''} onClick={() => setPeriod(k)}>{l}</button>
            ))}
          </div>
          {period === 'cust' && (
            <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
              <input type="date" value={customStart} onChange={e => setCustomStart(e.target.value)}
                style={{ flex: 1, padding: '6px 8px', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }} />
              <input type="date" value={customEnd} onChange={e => setCustomEnd(e.target.value)}
                style={{ flex: 1, padding: '6px 8px', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }} />
            </div>
          )}
        </div>

        <div className="group">
          <div className="lbl">Seções a incluir</div>
          {[
            ['resumo', 'Resumo executivo'],
            ['desenvolvimentos', 'Desenvolvimentos recentes'],
            ['prazos', 'Prazos e marcos'],
            ['documentos', 'Documentos gerados'],
            ['horas', 'Tempo registrado por advogado'],
            ['riscos', 'Riscos e contingências'],
            ['proximos', 'Próximas ações'],
            ['financeiro', 'Resumo do mandato'],
          ].map(([k, l]) => (
            <div key={k} className="rep-toggle">
              <span className="label">{l}</span>
              <span className={`sw ${sections[k] ? 'on' : ''}`} onClick={() => toggle(k)} />
            </div>
          ))}
        </div>

        <div className="group">
          <div className="lbl">Exportação</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <button className="btn" onClick={onGenerate} disabled={generating || !clientId}>
              {generating
                ? <><span className="spinner" style={{ width: 12, height: 12, borderWidth: 2, marginRight: 6 }} />Gerando com IA…</>
                : <><Icon name="sparkles" size={13} /> Gerar com IA</>
              }
            </button>
            {result && (
              <button className="btn ghost" onClick={() => window.open(result.pdf_url, '_blank')}>
                <Icon name="download" size={13} /> Baixar PDF
              </button>
            )}
          </div>
        </div>

        {/* Histórico */}
        {history.length > 0 && (
          <div className="group">
            <div className="lbl">Gerados recentemente</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {history.slice(0, 5).map(r => (
                <div key={r.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 6, fontSize: 11 }}>
                  <div>
                    <div style={{ fontWeight: 600, color: 'var(--pac-navy)' }}>{r.clients?.name || '—'}</div>
                    <div style={{ color: 'var(--fg-muted)' }}>{r.template} · {r.period_start} a {r.period_end}</div>
                  </div>
                  <button className="btn ghost sm" onClick={() => onDownload(r.id)} style={{ padding: '3px 8px', fontSize: 10 }}>
                    <Icon name="download" size={11} />
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Preview do relatório */}
      <div className="rep-preview">
        <div className="rep-page">
          <img src="assets/logo_navy.png" alt="" className="rep-logo" />

          {!result && !generating && (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, padding: '60px 20px', color: 'var(--fg-muted)', textAlign: 'center' }}>
              <Icon name="fileText" size={40} style={{ opacity: .3 }} />
              <div style={{ fontSize: 13 }}>Configure as opções ao lado e clique em <b>Gerar com IA</b> para criar o relatório.</div>
            </div>
          )}

          {generating && (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, padding: '60px 0' }}>
              <div className="spinner" style={{ width: 32, height: 32, borderWidth: 3 }} />
              <div style={{ fontSize: 13, color: 'var(--pac-navy)', fontWeight: 600 }}>Compilando dados e redigindo com IA…</div>
              <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>Isso pode levar alguns segundos.</div>
            </div>
          )}

          {result && !generating && (
            <>
              <div style={{ fontSize: 10, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '.14em', fontWeight: 700, marginBottom: 8 }}>
                Confidencial · {templates.find(t => t.k === tmpl)?.nm}
              </div>
              <h1>{selectedClient?.name || '—'}</h1>
              <div className="meta">{selectedClient?.cnpj ? `${selectedClient.cnpj} · ` : ''}{selectedClient?.sector} · Período: {getPeriod()[0]} — {getPeriod()[1]}</div>

              {/* Renderizar markdown como texto simples no preview */}
              <div style={{ marginTop: 20, fontSize: 11, lineHeight: 1.7, color: '#222', whiteSpace: 'pre-wrap', fontFamily: 'Georgia, serif' }}>
                {result.content_md
                  .replace(/^#+\s*/gm, '')
                  .replace(/\*\*(.+?)\*\*/g, '$1')
                  .replace(/\*(.+?)\*/g, '$1')
                }
              </div>

              <div className="rep-foot">
                <span>PAC Advogados · Peracini, Alves & Cottas</span>
                <span>Gerado em {new Date().toLocaleDateString('pt-BR')}</span>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

window.Reports = Reports;