// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Ville.tsx : pages programmatiques SEO — /villes, /ville/:ville[/:type]
// Le serveur rend le même contenu en HTML (louka/seo.py) ; ici, la version
// interactive avec les cartes d'annonces de l'app.
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { Listing } from "../api";
import ListingCard from "../components/ListingCard";

interface VilleRow {
  city: string;
  slug: string;
  n: number;
  avg_price: number | null;
}

interface VilleData {
  city: string;
  slug: string;
  unit_type: string | null;
  n: number;
  avg: number | null;
  med: number | null;
  types: { unit_type: string; slug: string; n: number }[];
  listings: Listing[];
  neighbors: VilleRow[];
}

const fmt = (p: number | null) =>
  p == null ? "—" : `${Math.round(p).toLocaleString("fr-CA")} $`;

async function get<T>(path: string): Promise<T> {
  const res = await fetch(path);
  if (!res.ok) throw new Error(`${res.status}`);
  return res.json();
}

export function VillesPage() {
  const [villes, setVilles] = useState<VilleRow[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    get<{ villes: VilleRow[] }>("/api/seo/villes")
      .then((r) => setVilles(r.villes))
      .catch((e) => setError(String(e)));
  }, []);

  return (
    <div className="container">
      <span className="kicker">Répertoire — logements par ville</span>
      <h1>Logements à louer par ville</h1>
      <p className="sub">
        Toutes les villes du Québec où Lou-Ka recense des logements à louer,
        avec le nombre d'annonces actives et le loyer moyen.
      </p>
      {error && <div className="notice">⚠️ {error}</div>}
      {!villes && !error && <div className="notice">Chargement…</div>}
      {villes && (
        <ul className="ville-list" style={{ marginTop: 24, lineHeight: 2 }}>
          {villes.map((v) => (
            <li key={v.slug}>
              <Link to={`/ville/${v.slug}`}>{v.city}</Link>
              {" — "}
              {v.n} annonce{v.n > 1 ? "s" : ""}
              {v.avg_price != null && <> · loyer moyen {fmt(v.avg_price)}</>}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default function VillePage() {
  const { ville = "", type } = useParams();
  const [data, setData] = useState<VilleData | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setData(null);
    setError(null);
    const qs = type ? `?type=${encodeURIComponent(type)}` : "";
    get<VilleData>(`/api/seo/ville/${encodeURIComponent(ville)}${qs}`)
      .then(setData)
      .catch((e) =>
        setError(e.message === "404" ? "Ville ou type inconnu." : String(e)));
    window.scrollTo(0, 0);
  }, [ville, type]);

  if (error)
    return (
      <div className="container">
        <h1>Page introuvable</h1>
        <div className="notice">
          ⚠️ {error} <Link to="/villes">Voir toutes les villes</Link>
        </div>
      </div>
    );
  if (!data)
    return (
      <div className="container">
        <div className="notice">Chargement…</div>
      </div>
    );

  const what = data.unit_type ? `${data.unit_type} à louer` : "Logements à louer";
  return (
    <div className="container">
      <span className="kicker">
        <Link to="/villes">Villes</Link> — {data.city}
      </span>
      <h1>
        {what} à {data.city}
      </h1>
      <p className="sub">
        {data.n} annonce{data.n > 1 ? "s" : ""} active{data.n > 1 ? "s" : ""}
        {data.avg != null && <> · loyer moyen {fmt(data.avg)}</>}
        {data.med != null && <> · médian {fmt(data.med)}</>}
      </p>

      {!data.unit_type && data.types.length > 1 && (
        <p style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {data.types.map((t) => (
            <Link key={t.slug} className="pill" to={`/ville/${data.slug}/${t.slug}`}>
              {t.unit_type} ({t.n})
            </Link>
          ))}
        </p>
      )}
      {data.unit_type && (
        <p>
          <Link to={`/ville/${data.slug}`}>
            ← Tous les logements à {data.city}
          </Link>
        </p>
      )}

      <div className="grid" style={{ marginTop: 24 }}>
        {data.listings.map((l) => (
          <ListingCard key={l.uid} l={l} />
        ))}
      </div>

      {data.neighbors.length > 0 && (
        <>
          <h2 style={{ marginTop: 40 }}>Autres villes</h2>
          <p style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {data.neighbors.map((v) => (
              <Link key={v.slug} className="pill" to={`/ville/${v.slug}`}>
                {v.city} ({v.n})
              </Link>
            ))}
          </p>
        </>
      )}
    </div>
  );
}