/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/pages/Sources.tsx
 * Rôle    : Registre public des employeurs connectés (traçabilité des sources)
 * Créé    : 2026-08-17   Modifié : 2026-08-17
 * =============================================================================
 */
import { useEffect, useState } from "react";
import { fetchSources, Source } from "../api";

export default function Sources() {
  const [sources, setSources] = useState<Source[]>([]);

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

  return (
    <main className="container">
      <h1 className="section-title" style={{ fontSize: 24, marginTop: 28 }}>Employeurs connectés</h1>
      <p className="muted">
        Chaque source est un connecteur automatisé vers la page carrière officielle
        de l'employeur, resynchronisé jour et nuit. Zéro saisie manuelle.
      </p>
      <table className="data" style={{ margin: "18px 0 40px" }}>
        <thead>
          <tr>
            <th>Employeur</th><th>Secteurs</th><th>Région</th><th>ATS</th>
            <th>Offres actives</th><th>Dernière synchro</th>
          </tr>
        </thead>
        <tbody>
          {sources.map((s) => (
            <tr key={s.id}>
              <td><a href={s.careers_url || s.url} target="_blank" rel="noopener noreferrer">{s.name}</a></td>
              <td>{s.sectors.join(", ")}</td>
              <td>{s.region}</td>
              <td>{s.connector}</td>
              <td>{s.active_jobs}</td>
              <td>
                {s.last_sync
                  ? new Date(s.last_sync * 1000).toLocaleString("fr-CA", { dateStyle: "medium", timeStyle: "short" })
                  : "—"}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </main>
  );
}