// -----------------------------------------------------------------------------
// Food-Ka — Agrégateur de produits d'épicerie (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Sources.tsx : registre des bannières d'épicerie agrégées
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Source, fetchSources } from "../api";
import SourceLogo from "../components/SourceLogo";

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 — bannières d'épicerie</span>
      <h1>Sources agrégées</h1>
      <p className="sub">
        Bannières d'épicerie du Québec recensées par Food·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>Bannière</th>
              <th>Région</th>
              <th>Statut</th>
              <th style={{ textAlign: "right" }}>Produits actifs</th>
              <th>Dernière synchro</th>
            </tr>
          </thead>
          <tbody>
            {sources.map((s) => (
              <tr key={s.id}>
                <td>
                  <div className="src-cell">
                    <SourceLogo source={s.id} size={32} fallback="hide" />
                    <div>
                      <a href={s.url} target="_blank" rel="noopener noreferrer">{s.name}</a>
                      {s.notes && (
                        <div style={{ color: "var(--ink-3)", fontSize: 12, marginTop: 2 }}>{s.notes}</div>
                      )}
                    </div>
                  </div>
                </td>
                <td style={{ color: "var(--ink-2)", maxWidth: 380 }}>{s.region}</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_products || "—"}</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>
  );
}