// ==============================================================================
// Author: Simon-Pierre Boucher <contact@spboucher.ai>
// File:   pages/Sources.tsx
// Desc:   Registre public des sources connectées (même patron que la page
//         Sources de Lou·Ka) : plateforme, contexte de prix produit, volumes,
//         dernière synchronisation.
// ==============================================================================
import { useEffect, useState } from "react";
import { CONTEXT_SHORT, Source, fetchSources, fmtTs } from "../api";

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

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

  return (
    <div className="container sources">
      <span className="kicker">Transparence</span>
      <h1>Les sources de Resto-Ka</h1>
      <p className="sub">
        Chaque menu est capté à sa source et étiqueté selon son contexte de
        prix. Les plateformes de commande des restos eux-mêmes (prix réels,
        non majorés) passent toujours avant les plateformes de livraison.
      </p>
      {error && <div className="notice"><h2>Impossible de charger les sources</h2></div>}
      <div className="src-wrap">
        <table className="src-table">
          <thead>
            <tr>
              <th>Source</th>
              <th>Contexte de prix</th>
              <th>Cadence</th>
              <th>Restos actifs</th>
              <th>Plats</th>
              <th>Dernière synchro</th>
              <th>Statut</th>
            </tr>
          </thead>
          <tbody>
            {sources.map((s) => (
              <tr key={s.id}>
                <td>
                  <a href={s.url} target="_blank" rel="noopener noreferrer">{s.name}</a>
                  {s.integrations && (
                    <div className="src-integrations">
                      {s.integrations.filter((i) => i.status !== "inactif").length} intégrations :{" "}
                      {s.integrations.filter((i) => i.status !== "inactif")
                        .map((i) => i.label).join(" · ")}
                    </div>
                  )}
                </td>
                <td>
                  <span className={`pill ctx-pill ctx-${s.price_context}`}>
                    {CONTEXT_SHORT[s.price_context ?? ""] ?? s.price_context}
                  </span>
                </td>
                <td>{s.cadence ?? "—"}</td>
                <td><span className="count-pill">{s.active_restaurants}</span></td>
                <td><span className="count-pill">{s.menu_items ?? 0}</span></td>
                <td>{fmtTs(s.last_sync)}</td>
                <td>
                  <span className={`pill ${s.status === "actif" ? "ok" : "todo"}`}>
                    {s.status}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}