// -----------------------------------------------------------------------------
// Groupe KA — Annuaire des déménageurs du Québec (page partagée Lou-Ka/Immo-Ka)
// pages/Demenageurs.tsx : liste complète des entreprises de déménagement de la
// province (17 régions), filtrable par région et par texte — /api/demenageurs.
// -----------------------------------------------------------------------------
import { useEffect, useMemo, useState } from "react";

type Mover = {
  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: Mover[];
};

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 DemenageursPage() {
  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/demenageurs")
      .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, Mover[]> = {};
    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 — services de déménagement</span>
      <h1>Déménageurs du Québec</h1>
      <p className="sub">
        L'annuaire le plus complet des entreprises de déménagement de la
        province : <b>{doc ? doc.total : "…"}</b> déménageurs répertoriés 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 déménageur ou une ville…"
              aria-label="Rechercher un déménageur 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 déménageur 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 d'embaucher un déménageur, vérifiez qu'il est inscrit au
            Registraire des entreprises du Québec, qu'il détient les assurances
            requises et demandez toujours une soumission écrite. Le Groupe KA
            n'a aucun lien d'affaires avec les entreprises listées.
          </p>
        </>
      )}
    </div>
  );
}