/* FINANCEIRO · PRIMAVERA — POC integração
   Snapshot top 10 clientes 2026 + status da ligação + botão de teste. */

const FinancePrimaveraScreen = () => {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [testing, setTesting] = React.useState(false);
  const [pingResult, setPingResult] = React.useState(null);
  const [agentStatus, setAgentStatus] = React.useState(null);

  const load = React.useCallback(async () => {
    setLoading(true);
    try {
      const r = await fetch('/api/primavera/snapshot/top10_clientes_2026');
      if (!r.ok) throw new Error('HTTP ' + r.status);
      const json = await r.json();
      setData(json);
    } catch (e) {
      setData({ error: e.message });
    } finally {
      setLoading(false);
    }
  }, []);

  const loadAgentStatus = React.useCallback(async () => {
    try {
      const r = await fetch('/api/primavera/agent-status');
      if (!r.ok) throw new Error('HTTP ' + r.status);
      setAgentStatus(await r.json());
    } catch (e) {
      setAgentStatus({ alive: false, error: e.message });
    }
  }, []);

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

  const handlePing = async () => {
    setTesting(true);
    setPingResult(null);
    try {
      const r = await fetch('/api/primavera/snapshot/top10_clientes_2026');
      if (!r.ok) throw new Error('HTTP ' + r.status);
      const json = await r.json();
      const mins = json.snapshot_at ? Math.round((Date.now() - new Date(json.snapshot_at)) / 60000) : null;
      setPingResult({ ok: true, mins });
    } catch (e) {
      setPingResult({ ok: false, msg: e.message });
    } finally {
      setTesting(false);
    }
  };

const snapshotAt = data?.snapshot_at ? new Date(data.snapshot_at) : null;
  const ageMs = snapshotAt ? Date.now() - snapshotAt.getTime() : null;
  const ageHours = ageMs ? ageMs / 3600000 : null;
  const statusColor = !snapshotAt ? 'var(--text-dim)'
    : ageHours < 26 ? 'var(--success)'
    : ageHours < 50 ? 'var(--warning)'
    : 'var(--danger)';
  const statusLabel = !snapshotAt ? 'Sem dados'
    : ageHours < 1 ? 'há menos de 1h'
    : ageHours < 24 ? `há ${Math.round(ageHours)}h`
    : `há ${Math.round(ageHours / 24)} dia(s)`;

  return (
    <div className="scrollbar" style={{ padding: '24px 28px 80px', height: '100%', overflowY: 'auto' }}>

      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, marginBottom: 20 }}>
        <div>
          <div className="font-mono" style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.08em' }}>
            FINANCEIRO · PRIMAVERA · POC
          </div>
          <h2 className="font-display" style={{ margin: '6px 0 0', fontSize: 28, fontWeight: 500, letterSpacing: '-0.01em' }}>
            Integração Primavera
          </h2>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-sm" onClick={handlePing} disabled={testing}>
            <Icon name="refresh" size={13} />
            {testing ? 'A testar…' : 'Testar ligação'}
          </button>
          <button className="btn btn-sm" onClick={load} disabled={loading}>
            <Icon name="refresh" size={13} />Recarregar
          </button>
        </div>
      </div>

      {/* Status + ping result + agent */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, marginBottom: 20 }}>
        <div className="card" style={{ padding: 16 }}>
          <div className="font-display" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.07em', color: 'var(--text-dim)', marginBottom: 10 }}>ESTADO DA SINCRONIZAÇÃO</div>
          <div style={{ display: 'flex', align: 'center', gap: 10 }}>
            <div style={{ width: 10, height: 10, borderRadius: '50%', background: statusColor, marginTop: 4, flexShrink: 0 }} />
            <div>
              <div style={{ fontWeight: 500, fontSize: 14 }}>
                {!snapshotAt ? 'Sem dados no PG' : `Último snapshot ${statusLabel}`}
              </div>
              {snapshotAt && (
                <div className="font-mono" style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 3 }}>
                  {snapshotAt.toLocaleString('pt-PT')}
                </div>
              )}
              <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 6 }}>
                Próxima actualização: <strong>todos os dias às 03:00</strong>
              </div>
            </div>
          </div>
        </div>

        <div className="card" style={{ padding: 16 }}>
          <div className="font-display" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.07em', color: 'var(--text-dim)', marginBottom: 10 }}>TESTE DE LIGAÇÃO</div>
          {!pingResult && !testing && (
            <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>
              Clica em <strong>Testar ligação</strong> para verificar se o pipeline Primavera → PG está operacional.
            </div>
          )}
          {testing && (
            <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>A verificar…</div>
          )}
          {pingResult && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 10, height: 10, borderRadius: '50%', background: pingResult.ok ? 'var(--success)' : 'var(--danger)', flexShrink: 0 }} />
              <div>
                {pingResult.ok ? (
                  <>
                    <div style={{ fontWeight: 500, fontSize: 14, color: 'var(--success)' }}>Pipeline OK</div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 3 }}>
                      Dados em PG actualizados {pingResult.mins != null ? `há ${pingResult.mins} min` : ''}
                    </div>
                  </>
                ) : (
                  <>
                    <div style={{ fontWeight: 500, fontSize: 14, color: 'var(--danger)' }}>Erro na ligação</div>
                    <div className="font-mono" style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 3 }}>{pingResult.msg}</div>
                  </>
                )}
              </div>
            </div>
          )}
        </div>

        {/* 3ª card — Agente Mac */}
        <div className="card" style={{ padding: 16 }}>
          <div className="font-display" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.07em', color: 'var(--text-dim)', marginBottom: 10 }}>AGENTE MAC</div>
          {(() => {
            const alive = agentStatus?.alive;
            const mins = agentStatus?.last_seen_mins;
            const noData = !agentStatus || agentStatus.last_seen === null;
            const dot = noData ? 'var(--text-dim)' : alive ? 'var(--success)' : mins < 30 ? 'var(--warning)' : 'var(--danger)';
            const label = noData ? 'Sem dados de heartbeat'
              : alive ? `Activo · visto há ${mins} min`
              : mins < 30 ? `Possivelmente adormecido · ${mins} min`
              : `Offline · última actividade há ${mins} min`;
            const sublabel = noData ? 'O agente ainda não escreveu heartbeat (aguarda próximo ciclo)'
              : alive ? 'MacBook a funcionar e a enviar dados'
              : 'Docker pode estar parado. Verifica o MacBook de Marketing.';
            return (
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: dot, marginTop: 4, flexShrink: 0 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500, fontSize: 14 }}>{label}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 3 }}>{sublabel}</div>
                  <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
                    <button className="btn btn-sm" onClick={loadAgentStatus} style={{ fontSize: 11 }}>
                      <Icon name="refresh" size={11} /> Verificar
                    </button>
                  </div>
                  {!alive && !noData && (
                    <div style={{ marginTop: 10, padding: '8px 10px', background: 'var(--surface-muted)', borderRadius: 6, fontSize: 11 }}>
                      <div style={{ fontWeight: 600, marginBottom: 4, color: 'var(--text-muted)' }}>Para reiniciar manualmente:</div>
                      <code style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-dim)', display: 'block', lineHeight: 1.6 }}>
                        ssh marketing@100.74.212.97<br />
                        open -a Docker &amp;&amp; sleep 15<br />
                        cd digidelta-ai/primavera-sync<br />
                        docker compose up -d
                      </code>
                    </div>
                  )}
                </div>
              </div>
            );
          })()}
        </div>
      </div>

      {/* Table */}
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div className="font-display" style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '0.06em', color: 'var(--text-muted)' }}>
              TOP 10 CLIENTES · FATURAÇÃO 2026
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>
              Todos os tipos de documento · dados Primavera via snapshot diário
            </div>
          </div>
          {data?.count && (
            <span className="font-mono" style={{ fontSize: 11, color: 'var(--text-dim)' }}>{data.count} registos</span>
          )}
        </div>

        {loading && (
          <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-dim)', fontSize: 13 }}>A carregar…</div>
        )}

        {!loading && data?.error && (
          <div style={{ padding: 24, color: 'var(--danger)', fontSize: 13 }}>
            Erro ao carregar dados: {data.error}
          </div>
        )}

        {!loading && data?.rows && (
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: 'var(--surface-muted)' }}>
                {['#', 'Código', 'Cliente', 'Faturação 2026', 'Nº Documentos'].map(h => (
                  <th key={h} style={{ padding: '10px 18px', fontSize: 10, fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)', borderBottom: '1px solid var(--border)', textAlign: h === 'Faturação 2026' || h === 'Nº Documentos' ? 'right' : 'left' }}>
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {data.rows.map((r, i) => (
                <tr key={r.cliente_codigo} style={{ borderBottom: '1px solid var(--border)' }}>
                  <td style={{ padding: '12px 18px', color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', fontSize: 11 }}>{i + 1}</td>
                  <td style={{ padding: '12px 18px', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-dim)' }}>{r.cliente_codigo}</td>
                  <td style={{ padding: '12px 18px', fontWeight: 500 }}>{r.cliente_nome}</td>
                  <td style={{ padding: '12px 18px', textAlign: 'right', fontFamily: 'var(--font-display)', fontWeight: 600 }}>
                    € {Number(r.total_faturado).toLocaleString('pt-PT', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                  </td>
                  <td style={{ padding: '12px 18px', textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' }}>
                    {r.num_documentos.toLocaleString('pt-PT')}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

        <div style={{ padding: '10px 18px', fontSize: 11, color: 'var(--text-dim)', borderTop: data?.rows ? '1px solid var(--border)' : 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--text-dim)', display: 'inline-block' }} />
          Fonte: <span className="font-mono">primavera.snapshot_top10_clientes_2026</span> · MacBook de Marketing → PostgreSQL VPS
        </div>
      </div>
    </div>
  );
};

window.FinancePrimaveraScreen = FinancePrimaveraScreen;