/* SISTEMA · M365 Sync — Monitor de sincronização Microsoft 365 */

const SistemaM365 = () => {
  const [status,  setStatus]  = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [syncing, setSyncing] = React.useState(false);
  const [error,   setError]   = React.useState(null);

  const loadStatus = React.useCallback(async () => {
    try {
      const r = await fetch('/api/admin/sync-m365/status');
      if (!r.ok) throw new Error(await r.text());
      setStatus(await r.json());
    } catch (e) { setError(e.message); }
    finally { setLoading(false); }
  }, []);

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

  const runSync = async () => {
    setSyncing(true); setError(null);
    try {
      const r = await fetch('/api/admin/sync-m365', { method: 'POST' });
      const data = await r.json();
      if (!r.ok) throw new Error(data.error || r.statusText);
      setStatus(data);
    } catch (e) { setError(e.message); }
    finally { setSyncing(false); }
  };

  const fmtDt = dt => dt
    ? new Date(dt).toLocaleString('pt-PT', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
    : '—';

  const cardSt   = { background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 8, padding: 0, overflow: 'hidden' };
  const hdrSt    = { padding: '10px 14px', background: 'var(--bg-sunken)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' };
  const hdrLblSt = { fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-dim)' };
  const bodySt   = { padding: '16px 18px' };

  const [showUpdated, setShowUpdated] = React.useState(false);

  const DetailList = ({ label, items }) => (
    <div style={cardSt}>
      <div style={{ ...hdrSt, cursor: 'pointer' }} onClick={() => setShowUpdated(v => !v)}>
        <span style={hdrLblSt}>{label}</span>
        <span style={{ fontSize: 11, color: 'var(--text-dim)' }}>{showUpdated ? '▲ ocultar' : '▼ mostrar'}</span>
      </div>
      {showUpdated && (
        <div style={{ maxHeight: 320, overflowY: 'auto' }}>
          {items.map((u, i) => (
            <div key={i} style={{ padding: '7px 16px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 16, fontSize: 12 }}>
              <code style={{ minWidth: 220, color: 'var(--text-muted)' }}>{u.email}</code>
              <span style={{ color: 'var(--text)' }}>{u.nome}</span>
              <span style={{ marginLeft: 'auto', color: 'var(--text-dim)', fontSize: 11 }}>{u.empresa}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );

  const Kpi = ({ label, value, color }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 100 }}>
      <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 700, color: color || 'var(--text)' }}>{value ?? '—'}</div>
    </div>
  );

  const hasRun = status && status.at;

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

      {/* Header */}
      <div style={{ marginBottom: 20, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>SISTEMA · MICROSOFT 365</div>
          <h2 className="font-display" style={{ margin: '4px 0 0', fontSize: 20, fontWeight: 500 }}>Sync Utilizadores M365</h2>
        </div>
        <button
          className="btn btn-primary btn-sm"
          onClick={runSync}
          disabled={syncing}
          style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 130 }}
        >
          {syncing
            ? <><span style={{ display: 'inline-block', width: 12, height: 12, border: '2px solid rgba(255,255,255,0.3)', borderTopColor: '#fff', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} /> A sincronizar…</>
            : <><span>⟳</span> Sincronizar agora</>
          }
        </button>
      </div>

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

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 820 }}>

        {/* Estado da ligação */}
        <div style={cardSt}>
          <div style={hdrSt}>
            <span style={hdrLblSt}>Ligação Microsoft Graph</span>
          </div>
          <div style={{ ...bodySt, 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: '#22c55e', flexShrink: 0 }} />
              <span style={{ fontSize: 13, fontWeight: 600 }}>Permissão activa</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
              Scope: <strong>User.Read.All</strong> · App: <strong>Digi AI Calendar Agent</strong>
            </div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
              Tenant: <strong>digidelta.onmicrosoft.com</strong>
            </div>
          </div>
        </div>

        {/* Cron */}
        <div style={cardSt}>
          <div style={hdrSt}>
            <span style={hdrLblSt}>Agendamento automático</span>
          </div>
          <div style={{ ...bodySt, fontSize: 13, color: 'var(--text-muted)', display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            <div>Frequência: <strong style={{ color: 'var(--text)' }}>Diário às 02:00 UTC</strong></div>
            <div>Último sync automático: <strong style={{ color: 'var(--text)' }}>{hasRun ? fmtDt(status.at) : '—'}</strong></div>
          </div>
        </div>

        {/* KPIs do último sync */}
        {hasRun && (
          <div style={cardSt}>
            <div style={hdrSt}>
              <span style={hdrLblSt}>Último Sync — {fmtDt(status.at)}</span>
              <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{status.total} utilizadores M365</span>
            </div>
            <div style={{ ...bodySt, display: 'flex', gap: 32, flexWrap: 'wrap' }}>
              <Kpi label="Actualizados"   value={status.updated}         />
              <Kpi label="Inseridos"      value={status.inserted}        color={status.inserted > 0 ? '#3b82f6' : undefined} />
              <Kpi label="Desactivados"   value={status.deactivated}     color={status.deactivated > 0 ? '#f59e0b' : undefined} />
              <Kpi label="Sessões term."  value={status.sessionsCleared} color={status.sessionsCleared > 0 ? '#f59e0b' : undefined} />
              <Kpi label="Ignorados"      value={status.skipped}         color='var(--text-dim)' />
              <Kpi label="Erros"          value={status.errors?.length}  color={status.errors?.length > 0 ? '#ef4444' : undefined} />
            </div>
          </div>
        )}

        {/* Inseridos */}
        {hasRun && status.insertedList?.length > 0 && (
          <div style={cardSt}>
            <div style={hdrSt}>
              <span style={{ ...hdrLblSt, color: '#3b82f6' }}>Novos registos inseridos ({status.insertedList.length})</span>
            </div>
            <div style={{ maxHeight: 260, overflowY: 'auto' }}>
              {status.insertedList.map((u, i) => (
                <div key={i} style={{ padding: '8px 16px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 16, alignItems: 'center', fontSize: 12 }}>
                  <code style={{ minWidth: 220, color: 'var(--text-muted)' }}>{u.email}</code>
                  <span style={{ minWidth: 160, color: 'var(--text)' }}>{u.nome}</span>
                  <span style={{ color: 'var(--text-dim)' }}>{u.cargo}</span>
                  <span style={{ marginLeft: 'auto', color: 'var(--text-dim)', fontSize: 11 }}>{u.empresa}</span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Desactivados */}
        {hasRun && status.deactivatedList?.length > 0 && (
          <div style={cardSt}>
            <div style={hdrSt}>
              <span style={{ ...hdrLblSt, color: '#f59e0b' }}>Desactivados ({status.deactivatedList.length})</span>
            </div>
            <div>
              {status.deactivatedList.map((u, i) => (
                <div key={i} style={{ padding: '8px 16px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 16, fontSize: 12 }}>
                  <code style={{ minWidth: 220, color: 'var(--text-muted)' }}>{u.email}</code>
                  <span style={{ color: 'var(--text)' }}>{u.nome}</span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Actualizados */}
        {hasRun && status.updatedList?.length > 0 && (
          <DetailList label={`Actualizados (${status.updatedList.length})`} items={status.updatedList} />
        )}

        {/* Erros detalhados */}
        {hasRun && status.errors?.length > 0 && (
          <div style={cardSt}>
            <div style={hdrSt}>
              <span style={{ ...hdrLblSt, color: '#ef4444' }}>Erros ({status.errors.length})</span>
            </div>
            <div style={{ padding: 0 }}>
              {status.errors.map((e, i) => (
                <div key={i} style={{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                  <code style={{ fontSize: 12, color: 'var(--text-muted)', minWidth: 200 }}>{e.email}</code>
                  <code style={{ fontSize: 12, color: '#ef4444' }}>{e.error}</code>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Sem dados ainda */}
        {!loading && !hasRun && (
          <div style={{ ...cardSt, padding: 32, textAlign: 'center' }}>
            <div style={{ fontSize: 32, marginBottom: 8 }}>☁️</div>
            <div style={{ fontSize: 14, color: 'var(--text-muted)' }}>Sync ainda não correu nesta sessão do servidor.</div>
            <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>Clica "Sincronizar agora" para correr manualmente ou aguarda o cron das 02:00 UTC.</div>
          </div>
        )}

        {/* Legenda campos sincronizados */}
        <div style={cardSt}>
          <div style={hdrSt}>
            <span style={hdrLblSt}>Campos sincronizados do M365</span>
          </div>
          <div style={{ ...bodySt }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
              <thead>
                <tr>
                  <th style={{ textAlign: 'left', padding: '4px 12px 8px 0', color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Campo Graph</th>
                  <th style={{ textAlign: 'left', padding: '4px 12px 8px 0', color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Campo colaboradores</th>
                  <th style={{ textAlign: 'left', padding: '4px 0 8px 0', color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Comportamento</th>
                </tr>
              </thead>
              <tbody>
                {[
                  ['displayName',       'nome_completo',         'Actualiza se vazio'],
                  ['givenName',         'nome_proprio',          'Actualiza se vazio'],
                  ['surname',           'apelido',               'Actualiza se vazio'],
                  ['jobTitle',          'perfil_cargo',          'Actualiza se vazio'],
                  ['companyName',       'empresa',               'Actualiza se vazio'],
                  ['department',        'departamento',          'Actualiza se vazio'],
                  ['officeLocation',    'office',                'Actualiza se vazio'],
                  ['mobilePhone',       'telemovel',             'Actualiza se vazio'],
                  ['businessPhones[0]', 'telefone_escritorio',   'Actualiza se vazio'],
                  ['accountEnabled=❌', 'portal_activo → false', 'Desactiva + elimina sessão'],
                ].map(([g, c, b]) => (
                  <tr key={g}>
                    <td style={{ padding: '5px 12px 5px 0', fontFamily: 'var(--font-mono)', color: 'var(--text-muted)' }}>{g}</td>
                    <td style={{ padding: '5px 12px 5px 0', fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>{c}</td>
                    <td style={{ padding: '5px 0', color: 'var(--text-dim)' }}>{b}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div style={{ marginTop: 12, fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>
              ⚠️ Nunca sobrescreve: tipo_utilizador · permissoes · portal_subs · modos_acesso · gestor_vendedor_id
            </div>
          </div>
        </div>

      </div>

      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
};

window.SistemaM365 = SistemaM365;