/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/pages/Home.tsx
 * Rôle    : Accueil — hero éditorial avec recherche centrale et chiffres du
 *           marché en direct, filtres en rail discret (desktop) + panneau bas
 *           (mobile), puces de filtres actifs, liste d'offres paginée
 * Créé    : 2026-08-17   Modifié : 2026-08-25
 * =============================================================================
 */
import { FormEvent, useEffect, useMemo, useState } from "react";
import { useSearchParams } from "react-router-dom";
import {
  Facets, fetchFacets, fetchJobs, fetchStats, Job, LANG_FR, MODE_FR,
  SENIORITY_FR, Stats, TYPE_FR,
} from "../api";
import JobCard from "../components/JobCard";

const PAGE = 30;

/** Paramètres d'URL des filtres (hors recherche q et tri). */
const FILTER_KEYS = ["ville", "region", "categorie", "mode", "type", "seniorite", "langue", "salaire"] as const;

interface FilterValues {
  q: string;
  city: string;
  region: string;
  category: string;
  work_mode: string;
  employment_type: string;
  seniority: string;
  language: string;
  with_salary: 1 | undefined;
  sort: string;
}

/** Les 7 sélecteurs de filtres — mêmes contrôles dans le rail (desktop)
 *  et le panneau bas (mobile), seul le style CSS change selon le contexte. */
function FilterSelects({ facets, filters, setParam }: {
  facets: Facets | null;
  filters: FilterValues;
  setParam: (key: string, value: string) => void;
}) {
  return (
    <>
      <select
        className="f-select" data-on={filters.city ? "1" : "0"} aria-label="Ville"
        value={filters.city} onChange={(e) => setParam("ville", e.target.value)}
      >
        <option value="">Ville</option>
        {facets?.cities.map((c) => <option key={c} value={c}>{c}</option>)}
      </select>
      <select
        className="f-select" data-on={filters.region ? "1" : "0"} aria-label="Région"
        value={filters.region} onChange={(e) => setParam("region", e.target.value)}
      >
        <option value="">Région</option>
        {facets?.regions?.map((r) => (
          <option key={r.region} value={r.region}>{r.region} ({r.n})</option>
        ))}
      </select>
      <select
        className="f-select" data-on={filters.category ? "1" : "0"} aria-label="Catégorie"
        value={filters.category} onChange={(e) => setParam("categorie", e.target.value)}
      >
        <option value="">Catégorie</option>
        {facets?.categories.map((c) => (
          <option key={c.category} value={c.category}>{c.category} ({c.n})</option>
        ))}
      </select>
      <select
        className="f-select" data-on={filters.work_mode ? "1" : "0"} aria-label="Mode de travail"
        value={filters.work_mode} onChange={(e) => setParam("mode", e.target.value)}
      >
        <option value="">Mode</option>
        {facets?.work_modes.map((m) => <option key={m} value={m}>{MODE_FR[m] ?? m}</option>)}
      </select>
      <select
        className="f-select" data-on={filters.employment_type ? "1" : "0"} aria-label="Type d'emploi"
        value={filters.employment_type} onChange={(e) => setParam("type", e.target.value)}
      >
        <option value="">Type</option>
        {facets?.employment_types.map((t) => <option key={t} value={t}>{TYPE_FR[t] ?? t}</option>)}
      </select>
      <select
        className="f-select" data-on={filters.seniority ? "1" : "0"} aria-label="Séniorité"
        value={filters.seniority} onChange={(e) => setParam("seniorite", e.target.value)}
      >
        <option value="">Séniorité</option>
        {facets?.seniorities?.map((s) => (
          <option key={s.seniority} value={s.seniority}>
            {SENIORITY_FR[s.seniority] ?? s.seniority} ({s.n})
          </option>
        ))}
      </select>
      <select
        className="f-select" data-on={filters.language ? "1" : "0"} aria-label="Langue"
        value={filters.language} onChange={(e) => setParam("langue", e.target.value)}
      >
        <option value="">Langue</option>
        {facets?.languages?.map((l) => (
          <option key={l.language} value={l.language}>{LANG_FR[l.language] ?? l.language} ({l.n})</option>
        ))}
      </select>
    </>
  );
}

export default function Home() {
  const [params, setParams] = useSearchParams();
  const [facets, setFacets] = useState<Facets | null>(null);
  const [stats, setStats] = useState<Stats | null>(null);
  const [jobs, setJobs] = useState<Job[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [sheetOpen, setSheetOpen] = useState(false);

  const filters = useMemo<FilterValues>(() => ({
    q: params.get("q") ?? "",
    city: params.get("ville") ?? "",
    region: params.get("region") ?? "",
    category: params.get("categorie") ?? "",
    work_mode: params.get("mode") ?? "",
    employment_type: params.get("type") ?? "",
    seniority: params.get("seniorite") ?? "",
    language: params.get("langue") ?? "",
    with_salary: params.get("salaire") === "1" ? 1 : undefined,
    sort: params.get("tri") ?? "recent",
  }), [params]);
  const page = Math.max(1, parseInt(params.get("page") ?? "1", 10));

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

  useEffect(() => {
    setLoading(true);
    setError("");
    fetchJobs(filters, PAGE, (page - 1) * PAGE)
      .then((r) => { setJobs(r.jobs); setTotal(r.total); })
      .catch((e) => setError(String(e)))
      .finally(() => setLoading(false));
  }, [filters, page]);

  // Panneau de filtres ouvert : verrou du scroll, bulle KA Agent masquée
  // (z-index maximal chez elle — on la cache plutôt que de la couvrir),
  // fermeture à Escape.
  useEffect(() => {
    if (!sheetOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    document.body.classList.add("ka-hide-agent");
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setSheetOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      document.body.classList.remove("ka-hide-agent");
      window.removeEventListener("keydown", onKey);
    };
  }, [sheetOpen]);

  const setParam = (key: string, value: string) => {
    const next = new URLSearchParams(params);
    if (value) next.set(key, value); else next.delete(key);
    next.delete("page");
    setParams(next, { replace: true });
  };

  const resetFilters = () => {
    const next = new URLSearchParams(params);
    for (const k of FILTER_KEYS) next.delete(k);
    next.delete("q");
    next.delete("page");
    setParams(next, { replace: true });
  };

  const submitSearch = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const input = e.currentTarget.elements.namedItem("q") as HTMLInputElement | null;
    setParam("q", input?.value.trim() ?? "");
  };

  const activeCount = FILTER_KEYS.filter((k) => params.get(k)).length;

  // puces des filtres actifs (retrait en un geste)
  const chips: Array<{ key: string; label: string }> = [];
  if (filters.q) chips.push({ key: "q", label: `« ${filters.q} »` });
  if (filters.city) chips.push({ key: "ville", label: filters.city });
  if (filters.region) chips.push({ key: "region", label: filters.region });
  if (filters.category) chips.push({ key: "categorie", label: filters.category });
  if (filters.work_mode) chips.push({ key: "mode", label: MODE_FR[filters.work_mode] ?? filters.work_mode });
  if (filters.employment_type) chips.push({ key: "type", label: TYPE_FR[filters.employment_type] ?? filters.employment_type });
  if (filters.seniority) chips.push({ key: "seniorite", label: SENIORITY_FR[filters.seniority] ?? filters.seniority });
  if (filters.language) chips.push({ key: "langue", label: LANG_FR[filters.language] ?? filters.language });
  if (filters.with_salary === 1) chips.push({ key: "salaire", label: "Salaire affiché" });

  const pages = Math.max(1, Math.ceil(total / PAGE));
  const pctSalary = stats && stats.total > 0
    ? Math.round((stats.with_salary / stats.total) * 100) : null;

  return (
    <>
      <section className="hero">
        <div className="container">
          <span className="kicker"><i className="pulse" aria-hidden="true" />Marché de l'emploi en direct · zéro intermédiaire</span>
          <h1>L'emploi au Québec,<br /><em>à la source</em>.</h1>
          <p className="hero-lede">
            Chaque offre vient de la page carrière de l'employeur — traçable,
            datée, avec le salaire quand il est publié.
          </p>
          <form className="searchbar" onSubmit={submitSearch} role="search">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <circle cx="11" cy="11" r="7" />
              <line x1="16.5" y1="16.5" x2="21" y2="21" />
            </svg>
            <input
              key={filters.q}
              type="search"
              name="q"
              placeholder="Poste, employeur, mot-clé…"
              defaultValue={filters.q}
              autoComplete="off"
            />
            <button type="submit">Rechercher</button>
          </form>
          {stats && (
            <p className="hero-stats">
              <span><b>{stats.total.toLocaleString("fr-CA")}</b> offres en ligne</span>
              <span><b>{stats.employers.toLocaleString("fr-CA")}</b> employeurs</span>
              {pctSalary !== null && <span><b>{pctSalary} %</b> avec salaire affiché</span>}
              <span className="hs-sync">synchronisé jour et nuit</span>
            </p>
          )}
        </div>
      </section>

      <div className="filter-zone">
        <div className="container">
          {/* rail desktop : sélecteurs discrets */}
          <div className="filter-rail" aria-label="Filtres">
            <span className="fr-label">Affiner</span>
            <FilterSelects facets={facets} filters={filters} setParam={setParam} />
            <label className="f-toggle" data-on={filters.with_salary === 1 ? "1" : "0"}>
              <input
                type="checkbox"
                checked={filters.with_salary === 1}
                onChange={(e) => setParam("salaire", e.target.checked ? "1" : "")}
              />
              Salaire affiché
            </label>
          </div>

          {/* mobile : bouton panneau + bascule salaire */}
          <div className="filter-mobile">
            <button type="button" className="fm-btn" onClick={() => setSheetOpen(true)}>
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <line x1="4" y1="7" x2="20" y2="7" /><circle cx="9" cy="7" r="2.4" />
                <line x1="4" y1="16" x2="20" y2="16" /><circle cx="15" cy="16" r="2.4" />
              </svg>
              Filtres{activeCount > 0 && <b>{activeCount}</b>}
            </button>
            <label className="f-toggle" data-on={filters.with_salary === 1 ? "1" : "0"}>
              <input
                type="checkbox"
                checked={filters.with_salary === 1}
                onChange={(e) => setParam("salaire", e.target.checked ? "1" : "")}
              />
              Salaire affiché
            </label>
          </div>

          {chips.length > 0 && (
            <div className="filter-chips">
              {chips.map((c) => (
                <button
                  key={c.key}
                  type="button"
                  className="fchip"
                  onClick={() => setParam(c.key, "")}
                  title="Retirer ce filtre"
                >
                  {c.label}<span aria-hidden="true">✕</span>
                </button>
              ))}
              <button type="button" className="fchip-clear" onClick={resetFilters}>
                Tout effacer
              </button>
            </div>
          )}
        </div>
      </div>

      <main className="container">
        <div className="results-head">
          <h2 className="results-count" aria-live="polite">
            {loading
              ? "Chargement…"
              : <>{total.toLocaleString("fr-CA")} offre{total > 1 ? "s" : ""}</>}
          </h2>
          <label className="sort-quiet">
            Trier :
            <select value={filters.sort} onChange={(e) => setParam("tri", e.target.value)}>
              <option value="recent">plus récentes</option>
              <option value="salary">meilleurs salaires</option>
            </select>
          </label>
        </div>
        {error && <div className="empty">Erreur de chargement : {error}</div>}
        <div className="job-list">
          {jobs.map((j) => <JobCard key={j.uid} job={j} />)}
        </div>
        {!loading && jobs.length === 0 && !error && (
          <div className="empty">
            <p>Aucune offre ne correspond à ces filtres.</p>
            {chips.length > 0 && (
              <button type="button" className="btn" onClick={resetFilters}>Tout effacer</button>
            )}
          </div>
        )}
        {pages > 1 && (
          <div className="pager">
            <button disabled={page <= 1} onClick={() => setParam("page", String(page - 1))}>← Précédent</button>
            <span className="pg-pos">{page} / {pages}</span>
            <button disabled={page >= pages} onClick={() => setParam("page", String(page + 1))}>Suivant →</button>
          </div>
        )}
      </main>

      {/* panneau bas mobile — rendu en continu pour la transition de sortie */}
      {sheetOpen && <div className="ka-overlay" onClick={() => setSheetOpen(false)} />}
      <div
        className={sheetOpen ? "fsheet open" : "fsheet"}
        role="dialog"
        aria-modal="true"
        aria-label="Filtrer les offres"
        aria-hidden={!sheetOpen}
      >
        <div className="fs-head">
          <span className="klabel">Affiner la recherche</span>
          <button
            type="button"
            className="fs-close"
            aria-label="Fermer les filtres"
            onClick={() => setSheetOpen(false)}
            tabIndex={sheetOpen ? undefined : -1}
          >
            ✕
          </button>
        </div>
        <div className="fs-body">
          <FilterSelects facets={facets} filters={filters} setParam={setParam} />
          <label className="f-toggle" data-on={filters.with_salary === 1 ? "1" : "0"}>
            <input
              type="checkbox"
              checked={filters.with_salary === 1}
              onChange={(e) => setParam("salaire", e.target.checked ? "1" : "")}
              tabIndex={sheetOpen ? undefined : -1}
            />
            Salaire affiché seulement
          </label>
        </div>
        <div className="fs-foot">
          <button
            type="button"
            className="btn btn-ghost"
            onClick={resetFilters}
            tabIndex={sheetOpen ? undefined : -1}
          >
            Réinitialiser
          </button>
          <button
            type="button"
            className="btn btn-accent"
            onClick={() => setSheetOpen(false)}
            tabIndex={sheetOpen ? undefined : -1}
          >
            Voir {loading ? "les" : total.toLocaleString("fr-CA")} offre{total > 1 ? "s" : ""}
          </button>
        </div>
      </div>
    </>
  );
}