/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/App.tsx
 * Rôle    : Gabarit global (en-tête + badge Groupe KA + connexion KA ID,
 *           navigation, routes, pied de page commun Groupe KA)
 * Créé    : 2026-08-17   Modifié : 2026-08-25
 * =============================================================================
 */
import { lazy, Suspense, useEffect, useState } from "react";
import { NavLink, Route, Routes, useLocation } from "react-router-dom";
import Home from "./pages/Home";
import JobPage from "./pages/Job";
import Sources from "./pages/Sources";
import Stats from "./pages/Stats";
import Contact from "./pages/Contact";
import Employeurs from "./pages/Employeurs";
import VillePage, { VillesPage } from "./pages/Ville";
import FavorisPage from "./pages/Favoris";
import { FavProvider, jobFavItem, useFav } from "./favorites";
import { Ico, IcoHeart } from "./components/Icons";
import { useCurrentListing } from "./fiche/current";
import GroupeKaBadge from "./ka/GroupeKaBadge";
import KaFooter from "./ka/KaFooter";

// MapLibre pèse ~700 kB : chargé uniquement quand on visite /carte
const MapPage = lazy(() => import("./pages/MapPage"));

interface Me { name: string; email: string; picture: string; ka_id: string }

/** Connexion KA ID (hub groupe-ka.com) — bouton ou profil connecté. */
function KaAuth() {
  const [enabled, setEnabled] = useState(false);
  const [me, setMe] = useState<Me | null>(null);

  useEffect(() => {
    fetch("/api/auth/config")
      .then((r) => r.json())
      .then((c) => setEnabled(Boolean(c.ka)))
      .catch(() => {});
    fetch("/api/me")
      .then((r) => (r.ok ? r.json() : null))
      .then(setMe)
      .catch(() => {});
  }, []);

  const logout = () => {
    fetch("/api/auth/logout", { method: "POST" })
      .then(() => setMe(null))
      .catch(() => {});
  };

  if (!enabled) return null;
  if (me) {
    return (
      <span className="auth-user">
        {me.picture ? <img src={me.picture} alt="" referrerPolicy="no-referrer" /> : null}
        <span className="name">{me.name || me.email}</span>
        <button type="button" onClick={logout}>Déconnexion</button>
      </span>
    );
  }
  return (
    <a className="btn-ka" href="/api/auth/ka/login">
      Se connecter avec <b>KA</b>
    </a>
  );
}

/** Actions du header sur une fiche d'offre : favoris + partage (compactes).
    L'offre affichée est publiée par la page fiche (fiche/current.ts). */
function FicheHeaderActions() {
  const job = useCurrentListing();
  const { ids, toggle } = useFav();
  if (!job) return null;
  const fav = ids.has(job.uid);
  const share = async () => {
    const url = `https://www.job-ka.com/emploi/${encodeURIComponent(job.uid)}`;
    try {
      if (navigator.share) await navigator.share({ title: document.title, url });
      else await navigator.clipboard.writeText(url);
    } catch { /* annulé */ }
  };
  return (
    <div className="hdr-actions">
      <button type="button" className={`hdr-btn ${fav ? "on" : ""}`} aria-pressed={fav}
              aria-label={fav ? "Retirer des favoris" : "Ajouter aux favoris"} onClick={() => toggle(jobFavItem(job))}>
        <IcoHeart size={18} filled={fav} />
      </button>
      <button type="button" className="hdr-btn" aria-label="Partager" onClick={share}>
        <Ico name="share" size={17} />
      </button>
    </div>
  );
}

/** Liens de navigation principaux (header desktop + menu mobile). */
const NAV_LINKS: Array<{ to: string; label: string; end?: boolean }> = [
  { to: "/", label: "Offres", end: true },
  { to: "/carte", label: "Carte" },
  { to: "/favoris", label: "Favoris ♥" },
  { to: "/sources", label: "Employeurs" },
  { to: "/stats", label: "Stats" },
  { to: "/employeurs", label: "Publier" },
  { to: "/contact", label: "Contact" },
];

export default function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  const location = useLocation();
  // fiche d'offre : header compact (56 px), sans badge ; favoris + partage
  const isFiche = location.pathname.startsWith("/emploi/");

  // Hauteur réelle du header → --header-h sur <html> (la carte s'y cale :
  // le 58 px codé en dur était faux quand le header wrappe sur 2 lignes).
  useEffect(() => {
    const el = document.querySelector<HTMLElement>("header.site");
    if (!el) return;
    const set = () =>
      document.documentElement.style.setProperty("--header-h", `${el.offsetHeight}px`);
    set();
    const ro = new ResizeObserver(set);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  // Menu mobile : fermeture au changement de route.
  useEffect(() => {
    setMenuOpen(false);
  }, [location.pathname]);

  // Menu ouvert : verrou du scroll d'arrière-plan, bulle KA Agent masquée
  // (z-index maximal chez elle) + fermeture à Escape (avec cleanup).
  useEffect(() => {
    if (!menuOpen) 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") setMenuOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      document.body.classList.remove("ka-hide-agent");
      window.removeEventListener("keydown", onKey);
    };
  }, [menuOpen]);

  return (
    <FavProvider>
      <header className={`site ${menuOpen ? "menu-open" : ""} ${isFiche ? "header--fiche" : ""}`}>
        <div className="container">
          <NavLink to="/" className="logo">Job<em>·</em>Ka</NavLink>
          {!isFiche && <GroupeKaBadge dark />}
          {isFiche && <FicheHeaderActions />}
          <nav className="main">
            {NAV_LINKS.map((l) => (
              <NavLink
                key={l.to}
                to={l.to}
                end={l.end}
                className={({ isActive }) => (isActive ? "active" : "")}
              >
                {l.label}
              </NavLink>
            ))}
          </nav>
          <div className="auth-box">
            <KaAuth />
          </div>
          <button
            type="button"
            className="menu-btn"
            aria-label={menuOpen ? "Fermer le menu" : "Ouvrir le menu"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((o) => !o)}
          >
            <span />
            <span />
            <span />
          </button>
        </div>
        <div className={menuOpen ? "mobile-menu open" : "mobile-menu"}>
          {/* ✕ fixe du panneau : visible peu importe le scroll, le burger du
              header est masqué à l'ouverture */}
          <button
            type="button"
            className="mm-close"
            aria-label="Fermer le menu"
            onClick={() => setMenuOpen(false)}
            tabIndex={menuOpen ? undefined : -1}
          >
            ✕
          </button>
          {NAV_LINKS.map((l) => (
            <NavLink
              key={l.to}
              to={l.to}
              end={l.end}
              className={({ isActive }) => (isActive ? "active" : "")}
              onClick={() => setMenuOpen(false)}
              tabIndex={menuOpen ? undefined : -1}
            >
              {l.label}
            </NavLink>
          ))}
        </div>
      </header>
      {menuOpen && <div className="mm-backdrop" onClick={() => setMenuOpen(false)} />}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/carte" element={
          <Suspense fallback={<div className="container empty">Chargement de la carte…</div>}>
            <MapPage />
          </Suspense>
        } />
        <Route path="/emploi/:uid" element={<JobPage />} />
        <Route path="/favoris" element={<FavorisPage />} />
        <Route path="/villes" element={<VillesPage />} />
        <Route path="/ville/:ville" element={<VillePage />} />
        <Route path="/sources" element={<Sources />} />
        <Route path="/stats" element={<Stats />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/employeurs" element={<Employeurs />} />
        <Route path="*" element={<div className="container empty"><h2>Page introuvable</h2></div>} />
      </Routes>
      <div className="prefooter">
        <div className="container">
          <span className="baseline">
            <b>Job-Ka</b> — Tous les emplois des employeurs québécois, directement
            à la source. Chaque offre est traçable à sa source originale, zéro
            boîte noire.
          </span>
          <NavLink to="/">Offres</NavLink>
          <NavLink to="/favoris">Mes favoris</NavLink>
          <NavLink to="/villes">Villes</NavLink>
          <NavLink to="/carte">Carte</NavLink>
          <NavLink to="/sources">Employeurs</NavLink>
          <NavLink to="/stats">Stats</NavLink>
          <NavLink to="/employeurs">Publier une offre</NavLink>
          <NavLink to="/contact">Contact</NavLink>
        </div>
      </div>
      <KaFooter siteId="job-ka" localLegal={[{ label: "Documentation", href: "/doc/" }]} />
    </FavProvider>
  );
}