// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Sources.tsx : registre des gestionnaires immobiliers 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 — gestionnaires immobiliers</span>
      <h1>Sources agrégées</h1>
      <p className="sub">
        Gestionnaires immobiliers de Québec, Lévis et du Grand Montréal recensés par Lou-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>Gestionnaire</th>
              <th>Secteurs</th>
              <th>Statut</th>
              <th style={{ textAlign: "right" }}>Annonces 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.sectors}</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_listings || "—"}</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>
  );
}