/* SISTEMA · Gestor CRM — Monitor de ligação FileMaker */

const SistemaGestor = () => {
  const [data,    setData]    = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error,   setError]   = React.useState(null);
  const [expLayout, setExpLayout] = React.useState(null);

  const load = React.useCallback(async () => {
    setLoading(true); setError(null);
    try {
      const r = await fetch('/api/gestor/monitor');
      if (!r.ok) throw new Error(await r.text());
      setData(await r.json());
    } catch (e) { setError(e.message); }
    finally { setLoading(false); }
  }, []);

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

  const fmtDt = dt => dt ? new Date(dt).toLocaleString('pt-PT', { day:'2-digit', month:'2-digit', hour:'2-digit', minute:'2-digit' }) : '—';
  const fmtMs = ms => ms == null ? '—' : ms < 1000 ? ms + ' ms' : (ms/1000).toFixed(2) + ' s';
  const fmtTtl = ms => {
    if (!ms) return '—';
    const m = Math.floor(ms / 60000), s = Math.floor((ms % 60000) / 1000);
    return m > 0 ? `${m}m ${s}s` : `${s}s`;
  };

  const thSt = { padding: '6px 12px', fontSize: 10, fontWeight: 700, color: 'var(--text-dim)', borderBottom: '1px solid var(--border)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em', background: 'var(--bg-sunken)', textAlign: 'left', whiteSpace: 'nowrap' };
  const tdSt = { padding: '6px 12px', fontSize: 11, borderBottom: '1px solid var(--border)', fontFamily: 'var(--font-mono)', verticalAlign: 'top' };

  return (
    <div className="scrollbar" style={{ height: '100%', overflowY: 'auto', padding: '24px 28px 60px' }}>
      {/* Header */}
      <div style={{ marginBottom: 20 }}>
        <div className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>SISTEMA · GESTOR CRM</div>
        <h2 className="font-display" style={{ margin: '4px 0 0', fontSize: 20, fontWeight: 500 }}>Monitor FileMaker</h2>
      </div>

      {loading && <div style={{ color: 'var(--text-dim)', fontSize: 13 }}>A carregar…</div>}
      {error   && <div style={{ color: '#dc2626', fontSize: 13 }}>Erro: {error}</div>}

      {data && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 860 }}>

          {/* Ligação */}
          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '10px 14px', background: 'var(--bg-sunken)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-dim)' }}>Ligação FileMaker</span>
            </div>
            <div style={{ padding: '14px 16px', display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: data.connection.ok ? '#22c55e' : '#ef4444', flexShrink: 0 }} />
                <span style={{ fontSize: 13, fontWeight: 600 }}>{data.connection.ok ? 'Online' : 'Offline'}</span>
              </div>
              {data.connection.ok && (
                <div style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
                  Latência auth: <strong>{fmtMs(data.connection.latencyMs)}</strong>
                </div>
              )}
              {data.connection.error && (
                <div style={{ fontSize: 11, color: '#dc2626', fontFamily: 'var(--font-mono)' }}>{data.connection.error}</div>
              )}
              <div style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
                BD: <strong style={{ color: 'var(--text)' }}>{data.db}</strong>
              </div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
                Host: <strong style={{ color: 'var(--text)' }}>{data.host}</strong>
              </div>
            </div>
            {/* Stats de chamadas */}
            <div style={{ padding: '10px 16px 14px', borderTop: '1px solid var(--border)', display: 'flex', gap: 24, flexWrap: 'wrap' }}>
              {[
                ['Total chamadas FM', data.track.totalCalls ?? 0],
                ['Última bem-sucedida', fmtDt(data.track.lastSuccessAt)],
                ['Último erro', fmtDt(data.track.lastErrorAt)],
              ].map(([label, val]) => (
                <div key={label}>
                  <div style={{ fontSize: 9, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{label}</div>
                  <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', fontWeight: 600, marginTop: 2 }}>{val}</div>
                </div>
              ))}
              {data.track.lastErrorMsg && (
                <div>
                  <div style={{ fontSize: 9, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Mensagem de erro</div>
                  <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: '#dc2626', marginTop: 2 }}>{data.track.lastErrorMsg}</div>
                </div>
              )}
            </div>
          </div>

          {/* Layouts FMRS_API_* com campos */}
          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '10px 14px', background: 'var(--bg-sunken)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-dim)' }}>Layouts FMRS_API_*</span>
              {data.meta?.fromCache === false && <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>carregado agora</span>}
              {data.meta?.fromCache === true  && <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>cache 24h</span>}
              {data.meta?.allLayoutCount != null && (
                <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', marginLeft: 'auto' }}>
                  {data.meta.layouts?.length ?? 0} FMRS_API de {data.meta.allLayoutCount} layouts totais
                </span>
              )}
            </div>
            {data.meta?.error ? (
              <div style={{ padding: '14px 16px', fontSize: 12, color: '#dc2626', fontFamily: 'var(--font-mono)' }}>Erro: {data.meta.error}</div>
            ) : !data.meta?.layouts?.length ? (
              <div style={{ padding: '14px 16px', fontSize: 12, color: 'var(--text-dim)' }}>Nenhum layout FMRS_API_* encontrado.</div>
            ) : (
              <div>
                {data.meta.layouts.map((layout) => {
                  const isExp = expLayout === layout.name;
                  return (
                    <div key={layout.name} style={{ borderBottom: '1px solid var(--border)' }}>
                      <div onClick={() => setExpLayout(isExp ? null : layout.name)}
                        style={{ padding: '9px 14px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', background: isExp ? 'var(--bg-sunken)' : 'transparent' }}>
                        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, flex: 1 }}>{layout.name}</span>
                        {layout.error
                          ? <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: '#dc2626' }}>erro</span>
                          : <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>{layout.fields?.length ?? 0} campos</span>}
                        <span style={{ fontSize: 10, color: 'var(--text-dim)' }}>{isExp ? '▲' : '▼'}</span>
                      </div>
                      {isExp && layout.fields && (
                        <div style={{ padding: '8px 14px 12px 28px', background: 'color-mix(in oklch, var(--bg-sunken) 50%, transparent)' }}>
                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 8px' }}>
                            {layout.fields.map(f => (
                              <span key={f} style={{ fontSize: 10.5, fontFamily: 'var(--font-mono)', padding: '2px 7px', borderRadius: 4, background: 'var(--bg)', border: '1px solid var(--border)', color: 'var(--text-muted)' }}>{f}</span>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            )}
          </div>

          {/* Outros layouts */}
          {data.meta?.otherLayouts?.length > 0 && (
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ padding: '10px 14px', background: 'var(--bg-sunken)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-dim)' }}>Outros layouts disponíveis</span>
                <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', marginLeft: 'auto' }}>{data.meta.otherLayouts.length} layouts</span>
              </div>
              <div style={{ padding: '10px 14px', display: 'flex', flexWrap: 'wrap', gap: '4px 8px' }}>
                {data.meta.otherLayouts.map(name => (
                  <span key={name} style={{ fontSize: 10.5, fontFamily: 'var(--font-mono)', padding: '2px 7px', borderRadius: 4, background: 'var(--bg)', border: '1px solid var(--border)', color: 'var(--text-dim)' }}>{name}</span>
                ))}
              </div>
            </div>
          )}

          {/* Pipeline cache */}
          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '10px 14px', background: 'var(--bg-sunken)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-dim)' }}>Cache Pipeline</span>
              <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>TTL 10 min por vendedor</span>
              <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', marginLeft: 'auto' }}>{data.pipelineCache.length} entrada{data.pipelineCache.length !== 1 ? 's' : ''}</span>
            </div>
            {data.pipelineCache.length === 0 ? (
              <div style={{ padding: '14px 16px', fontSize: 12, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>Cache vazio — nenhum pipeline carregado desde o último restart.</div>
            ) : (
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr>
                    <th style={thSt}>Vendedor</th>
                    <th style={thSt}>Carregado</th>
                    <th style={thSt}>Expira</th>
                    <th style={thSt}>TTL restante</th>
                    <th style={{ ...thSt, textAlign: 'right' }}>Registos</th>
                  </tr>
                </thead>
                <tbody>
                  {data.pipelineCache.map(e => (
                    <tr key={e.vendedorId}>
                      <td style={{ ...tdSt, fontWeight: 700 }}>{e.vendedorId}</td>
                      <td style={tdSt}>{fmtDt(e.cachedAt)}</td>
                      <td style={tdSt}>{fmtDt(e.expiresAt)}</td>
                      <td style={{ ...tdSt, color: e.ttlRemainingMs < 120000 ? '#f59e0b' : 'var(--text)' }}>{fmtTtl(e.ttlRemainingMs)}</td>
                      <td style={{ ...tdSt, textAlign: 'right' }}>{e.records}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>

          {/* Log de chamadas FM */}
          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '10px 14px', background: 'var(--bg-sunken)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-dim)' }}>Log de Chamadas FileMaker</span>
              <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', marginLeft: 'auto' }}>{data.callLog?.length ?? 0} entradas</span>
            </div>
            {!data.callLog?.length ? (
              <div style={{ padding: '14px 16px', fontSize: 12, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>Nenhuma chamada registada desde o último restart.</div>
            ) : (
              <div style={{ overflowX: 'auto', maxHeight: 320, overflowY: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 560 }}>
                  <thead>
                    <tr>
                      <th style={thSt}>Hora</th>
                      <th style={thSt}>Método</th>
                      <th style={{ ...thSt, flex: 1 }}>Path</th>
                      <th style={{ ...thSt, textAlign: 'right' }}>Status</th>
                      <th style={{ ...thSt, textAlign: 'right' }}>Latência</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.callLog.map((e, i) => (
                      <tr key={i}>
                        <td style={{ ...tdSt, whiteSpace: 'nowrap', color: 'var(--text-dim)' }}>{fmtDt(e.ts)}</td>
                        <td style={{ ...tdSt, fontWeight: 700, color: e.method === 'DELETE' ? 'var(--text-dim)' : 'var(--text)' }}>{e.method}</td>
                        <td style={{ ...tdSt, wordBreak: 'break-all', maxWidth: 380 }}>{e.path}</td>
                        <td style={{ ...tdSt, textAlign: 'right', fontWeight: 700, color: e.ok ? '#22c55e' : '#ef4444' }}>
                          {e.status ?? (e.error ? 'ERR' : '—')}
                        </td>
                        <td style={{ ...tdSt, textAlign: 'right' }}>{fmtMs(e.latencyMs)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>

          {/* Botão refresh */}
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <button className="btn btn-sm btn-ghost" onClick={load} disabled={loading} style={{ fontSize: 11 }}>
              {loading ? 'A carregar…' : '↻ Actualizar'}
            </button>
          </div>

        </div>
      )}
    </div>
  );
};

window.SistemaGestor = SistemaGestor;