// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// pages/Bannieres.tsx : annuaire des bannières (agences) immobilières du Québec
// issu du registre OACIQ — ~690 bannières, 17 357 courtiers. Filtrable par
// région et par texte ; chaque ligne se déplie pour lister les courtiers de la
// bannière (/api/bannieres puis /api/bannieres/{id} à la demande).
// -----------------------------------------------------------------------------
import { Fragment, useEffect, useMemo, useState } from "react";

type Banniere = {
  id: string;
  oaciq_id: string | null;
  name: string;
  regions: string[];
  brokers_n: number;
  covered_by: string | null;
  site: string | null;
};

type Broker = { name: string; city: string; region: string };

type Doc = {
  generated: string | null;
  total: number;
  brokers_total: number;
  count: number;
  regions: { region: string; n: number }[];
  bannieres: Banniere[];
};

const host = (u: string) => {
  try {
    return new URL(u).hostname.replace(/^www\./, "");
  } catch {
    return u;
  }
};

export default function BannieresPage() {
  const [doc, setDoc] = useState<Doc | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [q, setQ] = useState("");
  const [region, setRegion] = useState("");
  const [open, setOpen] = useState<string | null>(null);
  const [brokers, setBrokers] = useState<Record<string, Broker[]>>({});

  useEffect(() => {
    fetch("/api/bannieres")
      .then((r) => {
        if (!r.ok) throw new Error("HTTP " + r.status);
        return r.json();
      })
      .then(setDoc)
      .catch((e) => setError(String(e)));
  }, []);

  const filtered = useMemo(() => {
    if (!doc) return [];
    const needle = q.trim().toLowerCase();
    return doc.bannieres.filter(
      (b) =>
        (!region || b.regions.includes(region)) &&
        (!needle || b.name.toLowerCase().includes(needle)),
    );
  }, [doc, q, region]);

  const toggle = (id: string) => {
    if (open === id) {
      setOpen(null);
      return;
    }
    setOpen(id);
    if (!brokers[id]) {
      fetch(`/api/bannieres/${id}`)
        .then((r) => {
          if (!r.ok) throw new Error("HTTP " + r.status);
          return r.json();
        })
        .then((b) => setBrokers((prev) => ({ ...prev, [id]: b.brokers ?? [] })))
        .catch(() => setBrokers((prev) => ({ ...prev, [id]: [] })));
    }
  };

  const filtering = q.trim() !== "" || region !== "";

  return (
    <div className="container sources">
      <span className="kicker">Annuaire — courtage immobilier</span>
      <h1>Bannières &amp; courtiers du Québec</h1>
      <p className="sub">
        Toutes les bannières de courtage immobilier de la province selon le
        registre public de l'OACIQ : <b>{doc ? doc.total : "…"}</b> bannières
        et <b>{doc ? doc.brokers_total.toLocaleString("fr-CA") : "…"}</b>{" "}
        courtiers titulaires d'un permis, dans les 17 régions administratives.
        Cliquez sur une bannière pour voir la liste de ses courtiers
        {doc?.generated ? ` — recensement du ${doc.generated}` : ""}.
      </p>

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

      {doc && (
        <>
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: 10,
              alignItems: "center",
              margin: "6px 0 10px",
            }}
          >
            <input
              type="search"
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Rechercher une bannière…"
              aria-label="Rechercher une bannière"
              style={{
                flex: "1 1 240px",
                maxWidth: 380,
                padding: "10px 14px",
                border: "1.5px solid var(--line)",
                borderRadius: 10,
                font: "inherit",
                background: "var(--surface)",
                color: "inherit",
              }}
            />
            <select
              value={region}
              onChange={(e) => setRegion(e.target.value)}
              aria-label="Filtrer par région administrative"
              style={{
                padding: "10px 12px",
                border: "1.5px solid var(--line)",
                borderRadius: 10,
                font: "inherit",
                background: "var(--surface)",
                color: "inherit",
                maxWidth: "100%",
              }}
            >
              <option value="">Toutes les régions ({doc.total})</option>
              {doc.regions.map((r) => (
                <option key={r.region} value={r.region}>
                  {r.region} ({r.n})
                </option>
              ))}
            </select>
            {filtering && (
              <span style={{ color: "var(--ink-2)", fontSize: 14 }}>
                {filtered.length} bannière{filtered.length > 1 ? "s" : ""}
              </span>
            )}
          </div>

          {filtered.length === 0 && (
            <div className="notice">
              Aucune bannière ne correspond à cette recherche.
            </div>
          )}

          <div className="src-wrap" style={{ marginTop: 12 }}>
            <table className="src-table">
              <thead>
                <tr>
                  <th></th>
                  <th>Bannière</th>
                  <th>Courtiers</th>
                  <th>Régions</th>
                  <th>Site web</th>
                  <th>Suivi Immo-Ka</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((b) => (
                  <Fragment key={b.id}>
                    <tr
                      onClick={() => toggle(b.id)}
                      style={{ cursor: "pointer" }}
                    >
                      <td style={{ width: 24, color: "var(--ink-2)" }}>
                        {open === b.id ? "▾" : "▸"}
                      </td>
                      <td>
                        <b>{b.name}</b>
                      </td>
                      <td style={{ whiteSpace: "nowrap" }}>{b.brokers_n}</td>
                      <td style={{ fontSize: 13 }}>
                        {b.regions.length > 3
                          ? `${b.regions.slice(0, 3).join(", ")} +${b.regions.length - 3}`
                          : b.regions.join(", ")}
                      </td>
                      <td>
                        {b.site ? (
                          <a
                            href={b.site}
                            target="_blank"
                            rel="noopener noreferrer nofollow"
                            onClick={(e) => e.stopPropagation()}
                          >
                            {host(b.site)}
                          </a>
                        ) : (
                          "—"
                        )}
                      </td>
                      <td style={{ whiteSpace: "nowrap" }}>
                        {b.covered_by ? (
                          <span title={`Connecteur : ${b.covered_by}`}>
                            ✓ annonces suivies
                          </span>
                        ) : (
                          "—"
                        )}
                      </td>
                    </tr>
                    {open === b.id && (
                      <tr>
                        <td
                          colSpan={6}
                          style={{ background: "var(--surface-2)" }}
                        >
                          {!brokers[b.id] ? (
                            <span style={{ color: "var(--ink-2)" }}>
                              Chargement des courtiers…
                            </span>
                          ) : brokers[b.id].length === 0 ? (
                            <span style={{ color: "var(--ink-2)" }}>
                              Aucun courtier trouvé.
                            </span>
                          ) : (
                            <div
                              style={{
                                display: "grid",
                                gridTemplateColumns:
                                  "repeat(auto-fill, minmax(230px, 1fr))",
                                gap: "6px 18px",
                                padding: "6px 0",
                              }}
                            >
                              {brokers[b.id].map((c, i) => (
                                <div key={i} style={{ fontSize: 13 }}>
                                  <b>{c.name}</b>
                                  <span style={{ color: "var(--ink-2)" }}>
                                    {" "}
                                    — {c.city}
                                  </span>
                                </div>
                              ))}
                            </div>
                          )}
                        </td>
                      </tr>
                    )}
                  </Fragment>
                ))}
              </tbody>
            </table>
          </div>

          <p
            className="sub"
            style={{ marginTop: 34, fontSize: 13, maxWidth: 720 }}
          >
            Annuaire informatif compilé à partir du registre public des
            titulaires de permis de l'OACIQ (Organisme d'autoréglementation du
            courtage immobilier du Québec). Pour vérifier le dossier
            professionnel d'un courtier (permis, mesures disciplinaires),
            consultez directement le registre officiel sur oaciq.com. « Annonces
            suivies » indique que les inscriptions de la bannière sont agrégées
            sur Immo-Ka. Le Groupe KA n'a aucun lien d'affaires avec les
            bannières listées.
          </p>
        </>
      )}
    </div>
  );
}