// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Sources.tsx : registre des agences — éclaté par bannière → sous-agence
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Franchise, fetchAgencies } from "../api";

export default function SourcesPage() {
  const [data, setData] = useState<Franchise[] | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [open, setOpen] = useState<Record<string, boolean>>({});

  useEffect(() => {
    fetchAgencies().then((r) => setData(r.franchises)).catch((e) => setError(String(e)));
  }, []);

  const totalProps = (data ?? []).reduce((s, f) => s + f.total, 0);
  const totalSub = (data ?? []).reduce((s, f) => s + f.sub_agencies, 0);

  return (
    <div className="container sources">
      <span className="kicker">Registre — agences & sous-agences</span>
      <h1>Sources par sous-agence</h1>
      <p className="sub">
        Chaque bannière immobilière du Québec est éclatée par sous-agence (bureau).
        Chaque annonce est synchronisée par un connecteur dédié et dédoublonnée par
        numéro Centris. Cliquez un compte pour voir les propriétés.
      </p>

      {error && <div className="notice">⚠️ {error}</div>}
      {!data && !error && <div className="notice">Chargement…</div>}

      {data && (
        <>
          <p className="stats-foot" style={{ marginTop: 0 }}>
            <b>{totalProps.toLocaleString("fr-CA")}</b> propriétés ·{" "}
            <b>{data.length}</b> bannières ·{" "}
            <b>{totalSub.toLocaleString("fr-CA")}</b> sous-agences
          </p>

          <div className="franchise-list">
            {data.map((f) => {
              const isOpen = open[f.franchise] ?? false;
              return (
                <div className="franchise" key={f.franchise}>
                  <button
                    className="franchise-head"
                    onClick={() => setOpen({ ...open, [f.franchise]: !isOpen })}
                    aria-expanded={isOpen}
                  >
                    <span className="fh-caret">{isOpen ? "▾" : "▸"}</span>
                    <span className="fh-name">{f.franchise}</span>
                    <span className="fh-sub">
                      {f.sub_agencies} sous-agence{f.sub_agencies > 1 ? "s" : ""}
                    </span>
                    <span className="fh-count">{f.total.toLocaleString("fr-CA")}</span>
                  </button>

                  {isOpen && (
                    <ul className="subagency-list">
                      {f.agencies.map((a) => (
                        <li key={a.name}>
                          <span className="sa-name">{a.name}</span>
                          <Link
                            className="count-pill"
                            to={`/?source=${encodeURIComponent(a.sources[0])}`}
                          >
                            {a.count.toLocaleString("fr-CA")}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              );
            })}
          </div>

          <p className="stats-foot">
            Les sous-agences des grandes bannières (RE/MAX, Via Capitale, Century 21…)
            servent aussi de source de secours, dédoublonnées par n° Centris — aucun
            double-comptage.
          </p>
        </>
      )}
    </div>
  );
}