/* 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 [selectedDb,     setSelectedDb]     = React.useState(null);
  const [layoutsData,    setLayoutsData]    = React.useState(null);
  const [layoutsLoading, setLayoutsLoading] = React.useState(false);
  const [layoutsError,   setLayoutsError]   = React.useState(null);

  const fetchMonitor = React.useCallback(async (force = false) => {
    const url = force ? '/api/gestor/monitor?force=1' : '/api/gestor/monitor';
    const r = await fetch(url);
    if (!r.ok) throw new Error(await r.text());
    return r.json();
  }, []);

  const load = React.useCallback(async () => {
    setLoading(true); setError(null);
    try {
      const d = await fetchMonitor(false);
      setData(d);
      if (!selectedDb) {
        const first = (d.tenants || []).find(t => t.ok);
        if (first) loadLayouts(first.db);
      }
    } catch (e) { setError(e.message); }
    finally { setLoading(false); }
  }, []);

  const refresh = React.useCallback(async () => {
    if (loading) return;
    try {
      const d = await fetchMonitor(true);
      setData(d);
    } catch (e) { setError(e.message); }
  }, [loading]);

  const loadLayouts = React.useCallback(async (db) => {
    setSelectedDb(db);
    setLayoutsLoading(true);
    setLayoutsError(null);
    setLayoutsData(null);
    setExpLayout(null);
    try {
      const r = await fetch(`/api/gestor/layouts?db=${encodeURIComponent(db)}`);
      if (!r.ok) throw new Error(await r.text());
      setLayoutsData(await r.json());
    } catch (e) { setLayoutsError(e.message); }
    finally { setLayoutsLoading(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 }}>

          {/* Tenants FileMaker — grelha 4 cards */}
          <div>
            <div style={{ fontSize: 9, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>
              Tenants FileMaker · {data.host}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 10 }}>
              {(data.tenants || [{ key: 'DEV', label: 'Developer', db: data.db, ok: data.connection.ok, latencyMs: data.connection.latencyMs, error: data.connection.error, note: 'em uso' }]).map(t => {
                const isSel = selectedDb === t.db;
                return (
                  <div key={t.key} onClick={() => t.ok && loadLayouts(t.db)}
                    className="card"
                    style={{ padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6,
                      cursor: t.ok ? 'pointer' : 'default',
                      outline: isSel ? '2px solid var(--accent, #6366f1)' : t.note ? '1px solid var(--border)' : 'none',
                      background: isSel ? 'color-mix(in oklch, var(--accent, #6366f1) 6%, var(--bg-card))' : undefined,
                    }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 9, height: 9, borderRadius: '50%', background: t.ok ? '#22c55e' : '#ef4444', flexShrink: 0 }} />
                      <span style={{ fontSize: 13, fontWeight: 700, flex: 1 }}>{t.label}</span>
                      {t.note && !isSel && <span style={{ fontSize: 9, fontFamily: 'var(--font-mono)', color: 'var(--accent, #6366f1)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{t.note}</span>}
                      {isSel && <span style={{ fontSize: 9, fontFamily: 'var(--font-mono)', color: 'var(--accent, #6366f1)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em' }}>selected</span>}
                      <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>{t.ok ? 'Online' : 'Offline'}</span>
                    </div>
                    <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>{t.db}</div>
                    {t.ok && t.latencyMs != null && (
                      <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-muted)' }}>
                        Auth: <strong style={{ color: 'var(--text)' }}>{fmtMs(t.latencyMs)}</strong>
                        {t.recordCount != null && (
                          <span style={{ marginLeft: 10, color: t.recordCount > 0 ? 'var(--text)' : '#f59e0b' }}>
                            · {t.recordCount.toLocaleString('pt-PT')} OPs
                          </span>
                        )}
                        {t.recordCount === 0 && (
                          <span style={{ marginLeft: 6, fontSize: 10, color: '#f59e0b' }}>sem dados</span>
                        )}
                      </div>
                    )}
                    {!t.ok && t.error && (
                      <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: '#ef4444', wordBreak: 'break-all' }}>{t.error}</div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>

          {/* Stats de chamadas FM */}
          <div className="card" style={{ padding: '12px 16px', display: 'flex', gap: 28, flexWrap: 'wrap', alignItems: 'flex-start' }}>
            {[
              ['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>

          {/* Layouts do tenant seleccionado */}
          {selectedDb && (
            <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_* · {selectedDb}
                </span>
                {layoutsData?.fromCache === false && <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>carregado agora</span>}
                {layoutsData?.fromCache === true  && <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>cache 24h</span>}
                {layoutsData?.allLayoutCount != null && (
                  <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', marginLeft: 'auto' }}>
                    {layoutsData.layouts?.length ?? 0} FMRS_API de {layoutsData.allLayoutCount} layouts totais
                  </span>
                )}
                {layoutsLoading && <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', marginLeft: 'auto' }}>A carregar…</span>}
              </div>
              {layoutsError ? (
                <div style={{ padding: '14px 16px', fontSize: 12, color: '#dc2626', fontFamily: 'var(--font-mono)' }}>Erro: {layoutsError}</div>
              ) : layoutsLoading ? (
                <div style={{ padding: '14px 16px', fontSize: 12, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>A carregar layouts…</div>
              ) : !layoutsData?.layouts?.length ? (
                <div style={{ padding: '14px 16px', fontSize: 12, color: 'var(--text-dim)' }}>Nenhum layout FMRS_API_* encontrado.</div>
              ) : (
                <div>
                  {layoutsData.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 */}
          {layoutsData?.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 · {selectedDb}</span>
                <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', marginLeft: 'auto' }}>{layoutsData.otherLayouts.length} layouts</span>
              </div>
              <div style={{ padding: '10px 14px', display: 'flex', flexWrap: 'wrap', gap: '4px 8px' }}>
                {layoutsData.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={refresh} disabled={loading} style={{ fontSize: 11 }}>
              ↻ Actualizar
            </button>
          </div>

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

window.SistemaGestor = SistemaGestor;