// -----------------------------------------------------------------------------
// Food-Ka — Agrégateur de produits d'épicerie (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// App.tsx : layout global (header + ticker en direct + footer encre) et routage
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { NavLink, Route, Routes, useLocation } from "react-router-dom";
import { fetchFacets, fetchSources, fetchStats, fmtPrice, registerSourceNames, sourceName } from "./api";
import CookieConsent from "./components/CookieConsent";
import Home from "./pages/Home";
import ProductPage from "./pages/Product";
import PrivacyPage from "./pages/Privacy";
import SourcesPage from "./pages/Sources";
import StatsPage from "./pages/Stats";

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

  useEffect(() => {
    Promise.all([fetchStats(), fetchFacets(), fetchSources()])
      .then(([stats, facets, src]) => {
        registerSourceNames(src.sources);
        const parts: string[] = [
          `${stats.total} produits suivis`,
          `${stats.sources} bannières`,
          `${stats.on_sale} soldes actifs`,
        ];
        if (stats.avg_price != null)
          parts.push(`Prix moyen ${fmtPrice(stats.avg_price)}`);
        for (const s of facets.sources.slice(0, 10))
          parts.push(`${sourceName(s.source)} · ${s.n}`);
        parts.push("Mise à jour automatique");
        setItems(parts);
      })
      .catch(() => setItems(["Food·Ka — tous les prix d'épicerie du Québec"]));
  }, []);

  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: "Produits", icon: "🛒", end: true },
  { to: "/aubaines", label: "Aubaines", icon: "🔥", end: false },
  { to: "/sources", label: "Sources", icon: "🗂", end: false },
  { to: "/stats", label: "Stats", icon: "📊", end: false },
  { to: "/confidentialite", label: "Confidentialité", icon: "🔒", 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.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <>
      <header className="header">
        <div className="container header-inner">
          <NavLink to="/" className="brand" aria-label="Food·Ka — accueil">
            <span className="brand-mark" aria-hidden="true">
              {/* panier d'épicerie */}
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 9l2.5-5M19 9l-2.5-5" />
                <path d="M2.5 9h19l-1.8 9.2a2 2 0 0 1-2 1.8H6.3a2 2 0 0 1-2-1.8Z" />
                <path d="M9 13v3M12 13v3M15 13v3" />
              </svg>
            </span>
            Food<span className="ka">Ka</span>
            <span className="brand-tag">Épicerie — tout le Québec, toujours à jour</span>
          </NavLink>
          <nav className="nav" aria-label="Navigation principale">
            <NavLink to="/" end className={({ isActive }) => (isActive ? "active" : "")}>
              Produits
            </NavLink>
            <NavLink to="/aubaines" className={({ isActive }) => (isActive ? "active" : "")}>
              Aubaines
            </NavLink>
            <NavLink to="/sources" className={({ isActive }) => (isActive ? "active" : "")}>
              Sources
            </NavLink>
            <NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>
              Stats
            </NavLink>
          </nav>
          <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">
          {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-foot">
            Agrégateur indépendant — mis à jour automatiquement, chaque fiche
            renvoie à la page produit originale.
          </div>
        </div>
      </header>
      {open && <div className="mm-backdrop" onClick={() => setOpen(false)} aria-hidden="true" />}
      <Ticker />
    </>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="fbrand">
          Food<span className="ka">Ka</span>
        </div>
        <div className="frow">
          <div>
            <b>Agrégateur indépendant</b> de produits d'épicerie de la province de Québec.
            Les prix proviennent des sites publics des bannières et sont rafraîchis
            automatiquement — chaque fiche renvoie vers la page produit originale.
          </div>
        </div>
        <div className="fmono">
          © {new Date().getFullYear()} Simon-Pierre Boucher — contact@spboucher.ai
          {" · "}
          www.food-ka.com
          {" · "}
          <NavLink to="/confidentialite">Confidentialité</NavLink>
          {" · "}
          <button
            className="flink"
            onClick={() => window.dispatchEvent(new Event("foodka:openConsent"))}
          >
            Gérer mes témoins
          </button>
        </div>
      </div>
    </footer>
  );
}

export default function App() {
  return (
    <>
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/aubaines" element={<Home aubaines />} />
          <Route path="/produit/:uid" element={<ProductPage />} />
          <Route path="/stats" element={<StatsPage />} />
          <Route path="/sources" element={<SourcesPage />} />
          <Route path="/confidentialite" element={<PrivacyPage />} />
          <Route
            path="*"
            element={
              <div className="notice container">
                <div className="big">🧭</div>
                <h2>Page introuvable</h2>
                <p>Le lien demandé n'existe pas.</p>
              </div>
            }
          />
        </Routes>
      </main>
      <Footer />
      <CookieConsent />
    </>
  );
}