// ==============================================================================
// Author: Simon-Pierre Boucher <contact@spboucher.ai>
// File:   App.tsx
// Desc:   Layout global (header + ticker en direct + footer encre) et routage —
//         même patron que le App.tsx de Lou·Ka.
// ==============================================================================
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { NavLink, Route, Routes, useLocation, useNavigate } from "react-router-dom";
import { AccountProvider, useAccount } from "./account";
import {
  fetchAuthConfig, fetchFacets, fetchSources, fetchStats, logout,
  registerSourceNames, sourceName,
} from "./api";
import {
  IcoChart, IcoCompass, IcoFolder, IcoHeart, IcoPlate, IcoSearch,
} from "./components/Icons";
import { FavProvider } from "./favorites";
import { LogoIcon } from "./components/Logo";
import GroupeKaBadge from "./ka/GroupeKaBadge";
import KaFooter from "./ka/KaFooter";
import KaTabbar from "./ka/KaTabbar";
import ContactPage from "./pages/Contact";
import FavorisPage from "./pages/Favoris";
import Home from "./pages/Home";
import RestoPage from "./pages/Resto";
import SourcesPage from "./pages/Sources";
import StatsPage from "./pages/Stats";
import VillePage, { VillesPage } from "./pages/Ville";

/** Bouton « Se connecter avec KA » ou avatar + menu compte (hub Groupe KA). */
function AccountMenu() {
  const [enabled, setEnabled] = useState(false);
  const { me, refresh } = useAccount();
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    fetchAuthConfig().then((c) => setEnabled(c.ka)).catch(() => {});
  }, []);

  // menu ouvert : fermeture à Escape (le tap extérieur passe par le backdrop)
  useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setMenuOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [menuOpen]);

  if (!enabled) return null;
  if (!me) {
    return (
      <a className="login-btn" href="/api/auth/ka/login">
        <span className="ka-badge" aria-hidden="true">KA</span>
        Connexion
      </a>
    );
  }
  return (
    <div className="account">
      <button
        className="account-btn"
        onClick={() => setMenuOpen(!menuOpen)}
        aria-expanded={menuOpen}
        aria-label={`Compte : ${me.name || me.email}`}
      >
        {me.picture
          ? <img src={me.picture} alt="" referrerPolicy="no-referrer" />
          : <span className="account-initial">{(me.name || me.email).charAt(0).toUpperCase()}</span>}
      </button>
      {/* Backdrop + menu rendus à la racine via createPortal : le
          backdrop-filter du header re-parentait le position:fixed (voile de
          66 px) et le stacking context du header (z-50) plaquait le menu SOUS
          la tabbar (85) et le fab (80). Le menu devient fixed, ancré sous le
          header (voir .account-menu dans styles.css). */}
      {menuOpen && createPortal(
        <>
          <div className="account-backdrop" onClick={() => setMenuOpen(false)} aria-hidden="true" />
          <div className="account-menu" role="menu">
            <div className="account-id">
              <b>{me.name || "Mon compte"}</b>
              <span>{me.email}</span>
              {me.ka_id && <span className="account-kaid">{me.ka_id}</span>}
            </div>
            <NavLink to="/favoris" role="menuitem" className="account-link"
              onClick={() => setMenuOpen(false)}>
              Mes favoris
            </NavLink>
            <a href="https://www.groupe-ka.com/compte" target="_blank"
              rel="noopener noreferrer" role="menuitem" className="account-link">
              Mon profil Groupe KA ↗
            </a>
            <button
              role="menuitem"
              onClick={async () => { await logout(); refresh(); setMenuOpen(false); }}
            >
              Se déconnecter
            </button>
          </div>
        </>,
        document.body,
      )}
    </div>
  );
}

function Ticker() {
  const [items, setItems] = useState<string[]>([]);

  useEffect(() => {
    Promise.all([fetchStats(), fetchFacets(), fetchSources()])
      .then(([stats, facets, src]) => {
        registerSourceNames(src.sources);
        const parts: string[] = [
          `${stats.restaurants} restaurants`,
          `${stats.items} plats avec prix`,
          `${stats.regions} région${stats.regions > 1 ? "s" : ""} couvertes`,
        ];
        for (const r of stats.by_region.slice(0, 6))
          parts.push(`${r.region} · ${r.n}`);
        for (const s of facets.sources.slice(0, 6))
          parts.push(`${sourceName(s.source)} · ${s.n}`);
        parts.push("Prix réels étiquetés par contexte");
        parts.push("Mise à jour automatique");
        setItems(parts);
      })
      .catch(() => setItems(["Resto-Ka — les restaurants du Québec, menus et prix"]));
  }, []);

  if (items.length === 0) return null;
  // contenu doublé pour une boucle de défilement continue
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {[...items, ...items].map((t, i) => (
          <span key={i}>{t}</span>
        ))}
      </div>
    </div>
  );
}

const NAV_LINKS = [
  { to: "/", label: "Restos", icon: <IcoPlate size={17} />, end: true },
  { to: "/favoris", label: "Favoris", icon: <IcoHeart size={17} />, end: false },
  { to: "/stats", label: "Stats", icon: <IcoChart size={17} />, end: false },
  { to: "/sources", label: "Sources", icon: <IcoFolder size={17} />, end: false },
  { to: "/contact", label: "Contact", icon: <IcoCompass size={17} />, end: false },
];

function Header() {
  const [open, setOpen] = useState(false);
  const location = useLocation();

  // fermer le menu à chaque navigation + verrouiller le défilement en dessous
  useEffect(() => { setOpen(false); }, [location]);
  useEffect(() => {
    document.documentElement.classList.toggle("ka-scroll-lock", open);
    return () => { document.documentElement.classList.remove("ka-scroll-lock"); };
  }, [open]);

  return (
    <>
      <header className="header">
        <div className="container header-inner">
          <NavLink to="/" className="brand" aria-label="Resto-Ka — accueil">
            <LogoIcon size={30} />
            Resto-<span className="ka">Ka</span>
            <span className="brand-tag">Chaque resto, chaque plat, chaque prix.</span>
          </NavLink>
          <span className="hdr-badge"><GroupeKaBadge /></span>
          <nav className="nav" aria-label="Navigation principale">
            {NAV_LINKS.map((l) => (
              <NavLink key={l.to} to={l.to} end={l.end}
                className={({ isActive }) => (isActive ? "active" : "")}>
                {l.label}
              </NavLink>
            ))}
          </nav>
          <AccountMenu />
          <button
            className={`menu-btn ${open ? "open" : ""}`}
            aria-expanded={open}
            aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
            onClick={() => setOpen(!open)}
          >
            <span /><span /><span />
          </button>
        </div>

        {/* menu déroulant mobile */}
        <div className={`mobile-menu ${open ? "open" : ""}`} role="navigation" aria-label="Menu mobile">
          {/* ✕ 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={() => setOpen(false)}>✕</button>
          {NAV_LINKS.map((l, i) => (
            <NavLink
              key={l.to}
              to={l.to}
              end={l.end}
              style={{ transitionDelay: open ? `${60 + i * 45}ms` : "0ms" }}
              className={({ isActive }) => `mm-link ${isActive ? "active" : ""}`}
              onClick={() => setOpen(false)}
            >
              <span className="mm-ico" aria-hidden="true">{l.icon}</span>
              {l.label}
              <span className="mm-arrow" aria-hidden="true">→</span>
            </NavLink>
          ))}
          <div className="mm-badge"><GroupeKaBadge /></div>
          <div className="mm-foot">
            Agrégateur indépendant — menus et prix captés aux sources, chaque
            fiche renvoie au resto original et affiche le contexte du prix.
          </div>
        </div>
      </header>
      {open && <div className="mm-backdrop" onClick={() => setOpen(false)} aria-hidden="true" />}
      <Ticker />
    </>
  );
}

/** Rangée de nav locale + footer commun Groupe KA (ka-ui/KaFooter). */
function Footer() {
  return (
    <>
      <div className="prefoot">
        <div className="container prefoot-inner">
          <nav className="prefoot-nav" aria-label="Navigation du pied de page">
            {NAV_LINKS.map((l) => (
              <NavLink key={l.to} to={l.to} end={l.end}>{l.label}</NavLink>
            ))}
            <NavLink to="/villes">Villes</NavLink>
          </nav>
          <div className="prefoot-osm">
            Données de découverte ©{" "}
            <a href="https://www.openstreetmap.org/copyright" target="_blank"
              rel="noopener noreferrer">contributeurs OpenStreetMap</a> (ODbL)
          </div>
        </div>
      </div>
      <KaFooter siteId="resto-ka" localLegal={[{ label: "Documentation", href: "/doc/" }]} />
    </>
  );
}

/** Barre de navigation mobile commune Groupe KA (ka-ui/nav — KA Tabbar v1) :
    Découvrir · Recherche · Villes · Favoris, accent orange signature. */
function MobileTabBar() {
  const location = useLocation();
  const navigate = useNavigate();
  const p = location.pathname;
  const focusSearch = () => {
    const go = !document.getElementById("f-q");
    if (go) navigate("/");
    window.setTimeout(() => {
      const el = document.getElementById("f-q") as HTMLInputElement | null;
      if (el) {
        el.scrollIntoView({ block: "center", behavior: "smooth" });
        el.focus({ preventScroll: true });
      }
    }, go ? 140 : 0);
  };
  return (
    <KaTabbar
      tabs={[
        { label: "Découvrir", icon: "compass", to: "/", active: p === "/" || p.startsWith("/resto") },
        { label: "Recherche", icon: "search", onPress: focusSearch },
        { label: "Villes", icon: "pin", to: "/villes", active: p.startsWith("/ville") },
        { label: "Favoris", icon: "heart", to: "/favoris", active: p.startsWith("/favoris") },
      ]}
    />
  );
}

export default function App() {
  return (
    <AccountProvider>
      <FavProvider>
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/resto/:uid" element={<RestoPage />} />
          <Route path="/villes" element={<VillesPage />} />
          <Route path="/ville/:ville" element={<VillePage />} />
          <Route path="/favoris" element={<FavorisPage />} />
          <Route path="/stats" element={<StatsPage />} />
          <Route path="/sources" element={<SourcesPage />} />
          <Route path="/contact" element={<ContactPage />} />
          <Route
            path="*"
            element={
              <div className="notice container">
                <div className="big"><IcoCompass size={40} /></div>
                <h2>Page introuvable</h2>
                <p>Le lien demandé n'existe pas.</p>
              </div>
            }
          />
        </Routes>
      </main>
      <Footer />
      <MobileTabBar />
      </FavProvider>
    </AccountProvider>
  );
}