// ==============================================================================
// Author: Simon-Pierre Boucher <contact@spboucher.ai>
// File:   pages/Home.tsx
// Desc:   Accueil — héros + bascule RESTOS / PLATS (recherche par plat dans
//         tous les menus), chips cuisines, barre de filtres (région, ville,
//         type, diète, prix), grilles de résultats + pagination numérotée.
//         Filtres synchronisés à l'URL, feuille mobile, skeletons (patron
//         Lou·Ka, design éditorial sharp Groupe KA).
// ==============================================================================
import { useEffect, useMemo, useState } from "react";
import { Link, useSearchParams } from "react-router-dom";
import {
  CONTEXT_SHORT, Dish, Facets, Restaurant, cuisineLabel, dietLabel,
  fetchDishes, fetchFacets, fetchRecentRestaurants, fetchRestaurants,
  fetchStats, fmtPrice, getRecentUids, typeLabel,
} from "../api";
import { IcoBag, IcoLeaf, IcoPin, IcoPlate, IcoSearch, IcoTag } from "../components/Icons";
import Pager from "../components/Pager";
import RestoCard from "../components/RestoCard";

const PAGE_SIZE = 24;
const DISH_PAGE_SIZE = 20;

const FILTER_KEYS = ["q", "region", "city", "cuisine", "establishment_type",
                     "diet", "price_range", "sort", "mode", "has_menu"] as const;
type FilterKey = typeof FILTER_KEYS[number];

function DishRow({ d }: { d: Dish }) {
  return (
    <Link to={`/resto/${encodeURIComponent(d.uid)}`} className="dish-row">
      {d.image ? (
        <img className="dish-img" src={d.image} alt={d.item} loading="lazy" />
      ) : (
        <span className="dish-img dish-noimg"><IcoPlate size={22} strokeWidth={1.8} /></span>
      )}
      <div className="dish-main">
        <div className="dish-line">
          <span className="dish-name">{d.item}</span>
          <span className="mi-dots" aria-hidden="true" />
          <span className="dish-price">{fmtPrice(d.price)}</span>
        </div>
        {d.description && <p className="dish-desc">{d.description}</p>}
        <div className="dish-meta">
          <b>{d.brand}</b>
          <span className="sep" />
          <span>{d.section}</span>
          <span className="sep" />
          {d.locations > 1
            ? <span>{d.locations} emplacements</span>
            : <span>{d.city}{d.region ? ` · ${d.region}` : ""}</span>}
          <span className={`ctx-pill ctx-${d.price_context}`}>
            {CONTEXT_SHORT[d.price_context] ?? d.price_context}
          </span>
        </div>
      </div>
    </Link>
  );
}

export default function Home() {
  const [params, setParams] = useSearchParams();
  const [facets, setFacets] = useState<Facets | null>(null);
  const [restos, setRestos] = useState<Restaurant[]>([]);
  const [dishes, setDishes] = useState<Dish[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [page, setPage] = useState(0);
  const [statChips, setStatChips] = useState<{ label: string; value: number }[]>([]);
  const [sheetOpen, setSheetOpen] = useState(false);
  const [recent, setRecent] = useState<Restaurant[]>([]);

  useEffect(() => {
    fetchRecentRestaurants(getRecentUids().slice(0, 8))
      .then(setRecent)
      .catch(() => {});
  }, []);

  // feuille de filtres ouverte : gel du scroll d'arrière-plan + fermeture à
  // Escape (même pattern que le menu hamburger d'App.tsx)
  useEffect(() => {
    document.body.style.overflow = sheetOpen ? "hidden" : "";
    if (!sheetOpen) return () => { document.body.style.overflow = ""; };
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setSheetOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [sheetOpen]);

  const filters = useMemo(() => {
    const f: Partial<Record<FilterKey, string>> = {};
    for (const k of FILTER_KEYS) {
      const v = params.get(k);
      if (v) f[k] = v;
    }
    return f;
  }, [params]);

  const mode = filters.mode === "plats" ? "plats" : "restos";
  const pageSize = mode === "plats" ? DISH_PAGE_SIZE : PAGE_SIZE;

  const setFilter = (key: FilterKey, value: string) => {
    const next = new URLSearchParams(params);
    if (value) next.set(key, value);
    else next.delete(key);
    setParams(next, { replace: true });
    setPage(0);
  };

  useEffect(() => {
    fetchStats()
      .then((s) => setStatChips([
        { label: "restaurants", value: s.restaurants },
        { label: "avec menu complet", value: s.with_menu },
        { label: "plats avec prix", value: s.items },
        { label: "régions couvertes", value: s.regions },
      ]))
      .catch(() => {});
  }, []);

  useEffect(() => {
    fetchFacets(filters.region).then(setFacets).catch(() => {});
  }, [filters.region]);

  useEffect(() => {
    setLoading(true);
    setError(false);
    if (mode === "plats") {
      const q = (filters.q ?? "").trim();
      if (q.length < 2) {
        setDishes([]); setTotal(0); setLoading(false);
        return;
      }
      fetchDishes({
        q, region: filters.region, city: filters.city, cuisine: filters.cuisine,
        limit: DISH_PAGE_SIZE, offset: page * DISH_PAGE_SIZE,
      })
        .then((r) => { setDishes(r.dishes); setTotal(r.total); })
        .catch(() => setError(true))
        .finally(() => setLoading(false));
    } else {
      const { mode: _m, ...rest } = filters;
      fetchRestaurants({ ...rest, limit: PAGE_SIZE, offset: page * PAGE_SIZE })
        .then((r) => { setRestos(r.restaurants); setTotal(r.total); })
        .catch(() => setError(true))
        .finally(() => setLoading(false));
    }
  }, [filters, page, mode]);

  const activePills: { key: FilterKey; label: string }[] = [];
  if (filters.region) activePills.push({ key: "region", label: filters.region });
  if (filters.city) activePills.push({ key: "city", label: filters.city });
  if (filters.cuisine) activePills.push({ key: "cuisine", label: cuisineLabel(filters.cuisine) });
  if (filters.establishment_type) activePills.push({ key: "establishment_type", label: typeLabel(filters.establishment_type) });
  if (filters.diet) activePills.push({ key: "diet", label: dietLabel(filters.diet) });
  if (filters.price_range) activePills.push({ key: "price_range", label: filters.price_range });
  if (filters.has_menu === "1") activePills.push({ key: "has_menu", label: "Avec menu complet" });
  if (filters.has_menu === "0") activePills.push({ key: "has_menu", label: "Fiche seulement" });
  if (filters.q) activePills.push({ key: "q", label: `« ${filters.q} »` });

  const clearAll = () => { setParams(new URLSearchParams(), { replace: true }); setPage(0); };

  const filterbar = (
    <div className={`filterbar ${sheetOpen ? "open" : ""}`}>
      <div className="sheet-head">
        Filtres
        <button className="sheet-close" onClick={() => setSheetOpen(false)} aria-label="Fermer">✕</button>
      </div>
      <div className="f-primary">
        <div className="mode-toggle" role="tablist" aria-label="Chercher par">
          <button className={mode === "restos" ? "on" : ""} role="tab"
            aria-selected={mode === "restos"}
            onClick={() => setFilter("mode", "")}>Restos</button>
          <button className={mode === "plats" ? "on" : ""} role="tab"
            aria-selected={mode === "plats"}
            onClick={() => setFilter("mode", "plats")}>Plats</button>
        </div>
        <label className="f-search">
          <IcoSearch size={16} />
          <input
            id="f-q"
            type="search"
            placeholder={mode === "plats"
              ? "Poutine, tartare, pad thaï, sushi…"
              : "Resto, chaîne, ville…"}
            value={filters.q ?? ""}
            onChange={(e) => setFilter("q", e.target.value)}
            aria-label="Recherche"
          />
          {filters.q && (
            <button className="f-clear" onClick={() => setFilter("q", "")} aria-label="Effacer">✕</button>
          )}
        </label>
        <label className="f-ctl">
          <span>Région</span>
          <select value={filters.region ?? ""} onChange={(e) => { setFilter("region", e.target.value); setFilter("city", ""); }}>
            <option value="">Toutes</option>
            {(facets?.regions ?? []).map((r) => (
              <option key={r.region} value={r.region}>{r.region} ({r.n})</option>
            ))}
          </select>
        </label>
        <label className="f-ctl">
          <span>Ville</span>
          <select value={filters.city ?? ""} onChange={(e) => setFilter("city", e.target.value)}>
            <option value="">Toutes</option>
            {(facets?.cities ?? []).map((c) => (
              <option key={c} value={c}>{c}</option>
            ))}
          </select>
        </label>
        {mode === "restos" && (
          <>
            <label className="f-ctl">
              <span>Type</span>
              <select value={filters.establishment_type ?? ""} onChange={(e) => setFilter("establishment_type", e.target.value)}>
                <option value="">Tous</option>
                {(facets?.establishment_types ?? []).map((t) => (
                  <option key={t.t} value={t.t}>{typeLabel(t.t)} ({t.n})</option>
                ))}
              </select>
            </label>
            <label className="f-ctl">
              <span>Diète</span>
              <select value={filters.diet ?? ""} onChange={(e) => setFilter("diet", e.target.value)}>
                <option value="">Toutes</option>
                {(facets?.diets ?? []).map((d) => (
                  <option key={d.diet} value={d.diet}>{dietLabel(d.diet)} ({d.n})</option>
                ))}
              </select>
            </label>
            <label className="f-ctl">
              <span>Prix</span>
              <select value={filters.price_range ?? ""} onChange={(e) => setFilter("price_range", e.target.value)}>
                <option value="">Tous</option>
                {["$", "$$", "$$$", "$$$$"].map((p) => (
                  <option key={p} value={p}>{p}</option>
                ))}
              </select>
            </label>
            <label className="f-ctl">
              <span>Menu</span>
              <select value={filters.has_menu ?? ""} onChange={(e) => setFilter("has_menu", e.target.value)}>
                <option value="">Tous</option>
                <option value="1">Avec menu complet</option>
                <option value="0">Fiche seulement</option>
              </select>
            </label>
            <label className="f-ctl">
              <span>Tri</span>
              <select value={filters.sort ?? "menu"} onChange={(e) => setFilter("sort", e.target.value)}>
                <option value="menu">Menus d'abord</option>
                <option value="name">Nom</option>
                <option value="price">Fourchette de prix</option>
                <option value="recent">Récents</option>
              </select>
            </label>
          </>
        )}
      </div>
      <button className="btn btn-primary sheet-apply" onClick={() => setSheetOpen(false)}>
        Voir les {total} résultats
      </button>
    </div>
  );

  return (
    <div className="container">
      <section className="hero">
        <span className="kicker">Agrégateur — 17 régions du Québec</span>
        <h1>
          Tous les restos. Tous les menus.<br />
          <span className="hl">Tous les prix.</span>
        </h1>
        <p className="lede">
          Resto-Ka rassemble les restaurants du Québec avec leurs menus complets
          et leurs prix réels — cherchez un resto <em>ou un plat</em>, comparez,
          le contexte du prix (salle, emporter, livraison) est toujours affiché.
        </p>
        {statChips.length > 0 && (
          <div className="vitals bleed band-ink" aria-label="Signes vitaux">
            <div className="vitals-in">
              <div className="vitals-live"><span className="pulse" />En direct — signes vitaux</div>
              {statChips.map((s, i) => (
                <div className="vital" key={s.label}>
                  <span className="vital-i">{String(i + 1).padStart(2, "0")}</span>
                  <b className="vital-v">{s.value.toLocaleString("fr-CA")}</b>
                  <span className="vital-k">{s.label}</span>
                </div>
              ))}
            </div>
          </div>
        )}
        <div className="benefits">
          <div className="benefit">
            <span className="benefit-ico"><IcoTag size={19} /></span>
            <span className="benefit-label">Prix réels, jamais sans contexte</span>
          </div>
          <div className="benefit">
            <span className="benefit-ico blue"><IcoPin size={19} /></span>
            <span className="benefit-label">17 régions du Québec</span>
          </div>
          <div className="benefit">
            <span className="benefit-ico"><IcoBag size={19} /></span>
            <span className="benefit-label">Recherche par plat</span>
          </div>
          <div className="benefit">
            <span className="benefit-ico blue"><IcoLeaf size={19} /></span>
            <span className="benefit-label">Filtres diète & cuisine</span>
          </div>
        </div>
      </section>

      {/* chips cuisines (défilement horizontal) */}
      <div className="chips" role="tablist" aria-label="Cuisines">
        <button className={`chip ${!filters.cuisine ? "on" : ""}`}
          onClick={() => setFilter("cuisine", "")}>Toutes les cuisines</button>
        {(facets?.cuisines ?? []).slice(0, 14).map((c) => (
          <button
            key={c.cuisine}
            className={`chip ${filters.cuisine === c.cuisine ? "on" : ""}`}
            onClick={() => setFilter("cuisine", filters.cuisine === c.cuisine ? "" : c.cuisine)}
          >
            {cuisineLabel(c.cuisine)} · {c.n}
          </button>
        ))}
      </div>

      {filterbar}
      {sheetOpen && <div className="sheet-backdrop" onClick={() => setSheetOpen(false)} aria-hidden="true" />}
      <button className="fab" onClick={() => setSheetOpen(true)}>
        <IcoSearch size={16} /> Filtres
      </button>

      {activePills.length > 0 && (
        <div className="pills">
          {activePills.map((p) => (
            <button key={p.key} className="pill" onClick={() => setFilter(p.key, "")}>
              {p.label} <span className="pill-x">✕</span>
            </button>
          ))}
          <button className="pill pill-clear" onClick={clearAll}>Tout effacer</button>
        </div>
      )}

      {page === 0 && recent.length > 0 && (
        <section aria-label="Récemment consultés">
          <div className="results-head">
            <h2>Récemment consultés</h2>
            <span>vos dernières fiches</span>
          </div>
          <div className="recent-row">
            {recent.map((r) => <RestoCard key={r.uid} r={r} />)}
          </div>
        </section>
      )}

      <div className="results-head">
        <h2>{mode === "plats" ? "Plats" : "Restaurants"}</h2>
        <span>
          {mode === "plats" && (filters.q ?? "").trim().length < 2
            ? "tapez un plat (min. 2 lettres)"
            : `${total.toLocaleString("fr-CA")} résultat${total > 1 ? "s" : ""}`}
        </span>
      </div>

      {error && (
        <div className="notice">
          <h2>Impossible de charger les résultats</h2>
          <p>Réessayez dans un instant.</p>
        </div>
      )}

      {loading ? (
        <div className="grid">
          {Array.from({ length: 8 }).map((_, i) => (
            <div className="skel" key={i}>
              <div className="sk-img" />
              <div className="sk-line" />
              <div className="sk-line short" />
            </div>
          ))}
        </div>
      ) : mode === "plats" ? (
        (filters.q ?? "").trim().length < 2 ? (
          <div className="notice">
            <h2>Cherchez n'importe quel plat</h2>
            <p>« Poutine », « tartare de saumon », « pad thaï »… tous les menus
              du Québec sont indexés, avec leurs prix réels.</p>
          </div>
        ) : dishes.length === 0 ? (
          <div className="notice">
            <h2>Aucun plat trouvé</h2>
            <p>Essayez un autre mot — la couverture grandit chaque semaine.</p>
          </div>
        ) : (
          <>
            <div className="dish-list">
              {dishes.map((d, i) => <DishRow key={`${d.uid}-${d.item}-${i}`} d={d} />)}
            </div>
            <Pager page={page} pageCount={Math.ceil(total / pageSize)} onPage={setPage} />
          </>
        )
      ) : restos.length === 0 && !error ? (
        <div className="notice">
          <h2>Aucun resto ne correspond</h2>
          <p>Élargissez les filtres — la couverture grandit chaque semaine.</p>
        </div>
      ) : (
        <>
          <div className="grid">
            {restos.map((r) => <RestoCard key={r.uid} r={r} />)}
          </div>
          <Pager page={page} pageCount={Math.ceil(total / pageSize)} onPage={setPage} />
        </>
      )}
    </div>
  );
}