// -----------------------------------------------------------------------------
// Auto-Ka — Agrégateur de voitures usagées à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// Sources.tsx : registre des concessionnaires connectés
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Source, fetchSources, fmtDate } from "../api";

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

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

  const actives = sources.filter((s) => s.active_listings > 0);
  const others = sources.filter((s) => s.active_listings === 0);

  return (
    <div className="container page">
      <span className="kicker">Registre</span>
      <h1>Les concessionnaires connectés</h1>
      <p className="lead">
        Un connecteur dédié par commerce — Auto-Ka lit chaque site à la source
        (aucune plateforme d'annonces), normalise l'inventaire et le tient à jour.
      </p>
      <div className="src-grid">
        {actives
          .sort((a, b) => b.active_listings - a.active_listings)
          .map((s) => (
            <div key={s.id} className="src-card">
              <h3>{s.name}</h3>
              <div className="meta">
                {s.city}{s.region ? ` · ${s.region}` : ""}{s.platform ? ` · ${s.platform}` : ""}
              </div>
              <div className="n">{s.active_listings.toLocaleString("fr-CA")} véhicules</div>
              <div className="meta">dernière sync : {fmtDate(s.last_sync)}</div>
              <div style={{ display: "flex", gap: 10, marginTop: 6 }}>
                <Link className="mono" style={{ fontSize: 12, textDecoration: "underline" }} to={`/?source=${s.id}`}>
                  voir l'inventaire
                </Link>
                <a className="mono" style={{ fontSize: 12, textDecoration: "underline" }} href={s.url} target="_blank" rel="noreferrer">
                  site officiel ↗
                </a>
              </div>
            </div>
          ))}
      </div>
      {others.length > 0 && (
        <>
          <h2 style={{ margin: "36px 0 14px" }}>En attente de première synchronisation</h2>
          <div className="src-grid">
            {others.map((s) => (
              <div key={s.id} className="src-card" style={{ opacity: 0.65 }}>
                <h3>{s.name}</h3>
                <div className="meta">{s.city}{s.region ? ` · ${s.region}` : ""}</div>
                <div className="meta">{s.status || "connecteur prêt"}</div>
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}