// -----------------------------------------------------------------------------
// Forma-Ka — Agrégateur de formations (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Sources.tsx : registre des établissements de formation agrégés
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Source, fetchSources } from "../api";

export default function SourcesPage() {
  const [sources, setSources] = useState<Source[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchSources()
      .then((r) => setSources(r.sources))
      .catch((e) => setError(String(e)));
  }, []);

  return (
    <div className="container sources">
      <span className="kicker">Registre — établissements de formation</span>
      <h1>Sources agrégées</h1>
      <p className="sub">
        Universités, cégeps, firmes de formation et organisateurs d'événements du
        Québec recensés par Forma-Ka. Chaque source « active » est synchronisée
        périodiquement par un connecteur dédié; les autres sont en attente de
        connecteur.
      </p>

      {error && <div className="notice">⚠️ {error}</div>}
      {!sources && !error && <div className="notice">Chargement…</div>}

      {sources && (
        <div className="src-wrap">
        <table className="src-table">
          <thead>
            <tr>
              <th>Établissement</th>
              <th>Type d'offre</th>
              <th>Statut</th>
              <th style={{ textAlign: "right" }}>Formations actives</th>
              <th>Dernière synchro</th>
            </tr>
          </thead>
          <tbody>
            {sources.map((s) => (
              <tr key={s.id}>
                <td>
                  <a href={s.url} target="_blank" rel="noopener noreferrer">{s.name}</a>
                </td>
                <td style={{ color: "var(--ink-2)", maxWidth: 380 }}>{s.type_offre}</td>
                <td>
                  {s.connector ? (
                    <span className="pill ok">connecté</span>
                  ) : (
                    <span className="pill todo">{s.status}</span>
                  )}
                </td>
                <td style={{ textAlign: "right" }}>
                  <span className="count-pill">{s.active_formations || "—"}</span>
                </td>
                <td style={{ color: "var(--ink-3)" }}>
                  {s.last_sync
                    ? new Date(s.last_sync * 1000).toLocaleString("fr-CA")
                    : "—"}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
      )}
    </div>
  );
}
