// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Category.tsx : pages programmatiques /a-vendre/{ville}[/{type}] et
//   /type/{type} — mêmes URL que le rendu SEO serveur (immoka/seo.py), le SPA
//   prend le relais au montage. Résolution slug → valeurs via /api/seo/resolve.
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link, useParams, useSearchParams } from "react-router-dom";
import {
  Listing, fetchListings, fetchSources, fmtPrice, registerSourceNames,
  resolveSeo, setDocTitle,
} from "../api";
import ListingCard from "../components/ListingCard";
import { Ico } from "../components/Icons";

const PAGE_SIZE = 48;   // aligné sur immoka/seo.py

export default function CategoryPage() {
  const { ville, type } = useParams<{ ville?: string; type?: string }>();
  const [params, setParams] = useSearchParams();
  const page = Math.max(1, Number(params.get("page")) || 1);

  const [labels, setLabels] = useState<{ city?: string; property_type?: string } | null>(null);
  const [listings, setListings] = useState<Listing[] | null>(null);
  const [total, setTotal] = useState(0);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchSources().then((r) => registerSourceNames(r.sources)).catch(() => {});
  }, []);

  useEffect(() => {
    setLabels(null); setListings(null); setError(null);
    resolveSeo(ville, type)
      .then(setLabels)
      .catch(() => setError("Page introuvable."));
  }, [ville, type]);

  useEffect(() => {
    if (!labels) return;
    setListings(null);
    fetchListings(
      { city: labels.city, property_type: labels.property_type, sort: "price_asc" },
      PAGE_SIZE, (page - 1) * PAGE_SIZE)
      .then((r) => { setListings(r.listings); setTotal(r.total); })
      .catch((e) => setError(String(e)));
    window.scrollTo(0, 0);
  }, [labels, page]);

  const h1 = labels
    ? labels.city && labels.property_type
      ? `${labels.property_type} à vendre à ${labels.city}`
      : labels.city
        ? `Propriétés à vendre à ${labels.city}`
        : `${labels.property_type} à vendre au Québec`
    : "";
  useEffect(() => { if (h1) setDocTitle(h1); }, [h1]);

  if (error)
    return (
      <div className="notice container">
        <div className="big"><Ico name="alert" size={44} /></div>
        <h2>Page introuvable</h2>
        <p>{error}</p>
        <Link className="btn btn-primary" to="/">Toutes les propriétés</Link>
      </div>
    );

  const pages = Math.max(1, Math.ceil(total / PAGE_SIZE));
  const refine = new URLSearchParams();
  if (labels?.city) refine.set("city", labels.city);
  if (labels?.property_type) refine.set("property_type", labels.property_type);

  return (
    <div className="container">
      <nav className="crumbs" aria-label="Fil d'Ariane" style={{ margin: "14px 0 4px" }}>
        <Link to="/">Accueil</Link>
        {labels?.city && ville && <> › <Link to={`/a-vendre/${ville}`}>À vendre à {labels.city}</Link></>}
        {labels?.property_type && <> › <span>{labels.property_type}</span></>}
      </nav>
      <h1>{h1 || "Chargement…"}</h1>
      {listings && (
        <p style={{ opacity: 0.75, margin: "6px 0 14px" }}>
          <b>{total.toLocaleString("fr-CA")}</b> annonces
          {listings.length > 0 && listings[0].price != null && (
            <> · à partir de <b>{fmtPrice(listings[0].price)}</b></>
          )}
          {" · "}
          <Link to={`/?${refine}`}>Affiner la recherche (carte, filtres)</Link>
        </p>
      )}
      {!listings && !error && (
        <div className="grid" aria-busy="true">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="card skel"><div className="sk-img" /><div className="sk-line" /></div>
          ))}
        </div>
      )}
      {listings && (
        <div className="grid">
          {listings.map((l) => <ListingCard key={l.uid} l={l} />)}
        </div>
      )}
      {pages > 1 && (
        <nav className="pager" aria-label="Pagination" style={{ margin: "18px 0" }}>
          {page > 1 && (
            <button className="btn" onClick={() => setParams(page === 2 ? {} : { page: String(page - 1) })}>
              ← Précédente
            </button>
          )}
          <span style={{ margin: "0 10px" }}>Page {page} de {pages}</span>
          {page < pages && (
            <button className="btn" onClick={() => setParams({ page: String(page + 1) })}>
              Suivante →
            </button>
          )}
        </nav>
      )}
    </div>
  );
}