// -----------------------------------------------------------------------------
// House-Ka — Homes-for-sale aggregator (Canada outside Québec, Ontario first)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Agencies.tsx : brokerage registry — banner → brokerage (office)
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Franchise, fetchAgencies } from "../api";

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

  useEffect(() => {
    document.title = "Covered brokerages | House-Ka";
    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">Registry — brokerages & offices</span>
      <h1>Sources by brokerage</h1>
      <p className="sub">
        Every covered brokerage or team publishes its board's full inventory
        through the CREA DDF feed. Each listing is synced by a dedicated
        connector and deduplicated by DDF number — the same property published
        on several sites is only counted once. Click a source to see its homes.
      </p>

      {error && <div className="notice"> {error}</div>}
      {!data && !error && <div className="notice">Loading…</div>}

      {data && (
        <>
          <p className="stats-foot" style={{ marginTop: 0 }}>
            <b>{totalProps.toLocaleString("en-CA")}</b> homes ·{" "}
            <b>{data.length}</b> banners ·{" "}
            <b>{totalSub.toLocaleString("en-CA")}</b> offices
          </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} office{f.sub_agencies > 1 ? "s" : ""}
                    </span>
                    <span className="fh-count">{f.total.toLocaleString("en-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("en-CA")}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              );
            })}
          </div>

          <p className="stats-foot">
            Sites sharing the same CREA DDF pool also serve as backup sources,
            deduplicated by DDF number — no double counting.
          </p>
        </>
      )}
    </div>
  );
}