// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// pages/Inspecteurs.tsx : annuaire complet des inspecteurs en bâtiment de la
// province (17 régions), filtrable par région et par texte — /api/inspecteurs.
// -----------------------------------------------------------------------------
import { useEffect, useMemo, useState } from "react";

type Inspecteur = {
  id: string;
  name: string;
  city: string;
  region: string;
  address: string;
  phone: string;
  website: string;
  rating: number | null;
  reviews: number | null;
  category: string;
};

type Doc = {
  generated: string | null;
  total: number;
  count: number;
  regions: { region: string; n: number }[];
  movers: Inspecteur[];
};

const telHref = (p: string) => "tel:+1" + p.replace(/\D/g, "").slice(-10);

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

export default function InspecteursPage() {
  const [doc, setDoc] = useState<Doc | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [q, setQ] = useState("");
  const [region, setRegion] = useState("");

  useEffect(() => {
    fetch("/api/inspecteurs")
      .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.movers.filter(
      (m) =>
        (!region || m.region === region) &&
        (!needle || (m.name + " " + m.city).toLowerCase().includes(needle)),
    );
  }, [doc, q, region]);

  const groups = useMemo(() => {
    const order = (doc?.regions ?? []).map((r) => r.region);
    const by: Record<string, Inspecteur[]> = {};
    for (const m of filtered) (by[m.region] ??= []).push(m);
    return order
      .filter((r) => by[r]?.length)
      .map((r) => ({ region: r, movers: by[r] }));
  }, [doc, filtered]);

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

  return (
    <div className="container sources">
      <span className="kicker">Annuaire — inspection de bâtiment</span>
      <h1>Inspecteurs en bâtiment du Québec</h1>
      <p className="sub">
        L'annuaire le plus complet des inspecteurs en bâtiment de la province :{" "}
        <b>{doc ? doc.total : "…"}</b> entreprises d'inspection (préachat,
        prévente, préréception) répertoriées dans les 17 régions
        administratives du Québec, avec téléphone, site web et note Google.
        Recensement continu par le Groupe KA
        {doc?.generated ? ` — mis à jour le ${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 un inspecteur ou une ville…"
              aria-label="Rechercher un inspecteur ou une ville"
              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} résultat{filtered.length > 1 ? "s" : ""}
              </span>
            )}
          </div>

          {filtered.length === 0 && (
            <div className="notice">
              Aucun inspecteur ne correspond à cette recherche.
            </div>
          )}

          {groups.map((g) => (
            <section key={g.region}>
              <h2 style={{ marginTop: 34 }}>
                {g.region}{" "}
                <span style={{ color: "var(--ink-2)", fontWeight: 600 }}>
                  ({g.movers.length})
                </span>
              </h2>
              <div className="src-wrap" style={{ marginTop: 12 }}>
                <table className="src-table">
                  <thead>
                    <tr>
                      <th>Entreprise</th>
                      <th>Ville</th>
                      <th>Téléphone</th>
                      <th>Site web</th>
                      <th>Note Google</th>
                    </tr>
                  </thead>
                  <tbody>
                    {g.movers.map((m) => (
                      <tr key={m.id}>
                        <td>
                          <b>{m.name}</b>
                          {m.category && (
                            <div
                              style={{ fontSize: 12, color: "var(--ink-2)" }}
                            >
                              {m.category}
                            </div>
                          )}
                        </td>
                        <td>{m.city}</td>
                        <td style={{ whiteSpace: "nowrap" }}>
                          {m.phone ? (
                            <a href={telHref(m.phone)}>{m.phone}</a>
                          ) : (
                            "—"
                          )}
                        </td>
                        <td>
                          {m.website ? (
                            <a
                              href={m.website}
                              target="_blank"
                              rel="noopener noreferrer nofollow"
                            >
                              {host(m.website)}
                            </a>
                          ) : (
                            "—"
                          )}
                        </td>
                        <td style={{ whiteSpace: "nowrap" }}>
                          {m.rating
                            ? `★ ${m.rating.toFixed(1)} (${m.reviews ?? 0})`
                            : "—"}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          ))}

          <p
            className="sub"
            style={{ marginTop: 34, fontSize: 13, maxWidth: 720 }}
          >
            Annuaire informatif compilé à partir des fiches publiques Google.
            Avant de mandater un inspecteur en bâtiment, vérifiez son
            adhésion à une association reconnue (AIBQ, InterNACHI Québec…),
            sa formation, son assurance responsabilité professionnelle
            (erreurs et omissions) et exigez une convention de service ainsi
            qu'un rapport écrit conforme à une norme de pratique. Le Groupe KA
            n'a aucun lien d'affaires avec les entreprises listées.
          </p>
        </>
      )}
    </div>
  );
}