// -----------------------------------------------------------------------------
// Auto-Ka — Agrégateur de voitures usagées à vendre (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 } from "react-router-dom";
import { fetchFacets, fetchSources, fetchStats, registerSourceNames } from "./api";
import Home from "./pages/Home";
import VehiclePage from "./pages/Vehicle";
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.toLocaleString("fr-CA")} véhicules à vendre`,
          `${stats.sources} concessionnaires connectés`,
        ];
        if (stats.avg_price != null)
          parts.push(`Prix moyen ${Math.round(stats.avg_price).toLocaleString("fr-CA")} $`);
        for (const r of stats.by_region.slice(0, 8))
          parts.push(`${r.region} · ${r.n}`);
        for (const m of facets.makes.slice(0, 8))
          parts.push(`${m.make} · ${m.n}`);
        parts.push("Directement des sites des concessionnaires");
        setItems(parts);
      })
      .catch(() => setItems(["Auto-Ka — voitures usagées à vendre au 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>
  );
}

function Header() {
  return (
    <>
      <header className="header">
        <div className="container header-inner">
          <NavLink to="/" className="brand" aria-label="Auto-Ka — accueil">
            Auto<span className="ka">Ka</span>
            <span className="brand-tag">Voitures usagées · tout le Québec · toujours à jour</span>
          </NavLink>
          <nav className="nav" aria-label="Navigation principale">
            <NavLink to="/" end className={({ isActive }) => (isActive ? "active" : "")}>
              Véhicules
            </NavLink>
            <NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>
              Stats
            </NavLink>
            <NavLink to="/sources" className={({ isActive }) => (isActive ? "active" : "")}>
              Sources
            </NavLink>
          </nav>
        </div>
      </header>
      <Ticker />
    </>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="fbrand">
          Auto<span className="ka">Ka</span>
        </div>
        <div className="frow">
          <b>Agrégateur indépendant</b> de voitures usagées à vendre dans la
          province de Québec. Les annonces proviennent directement des sites
          publics des concessionnaires — pas des plateformes d'annonces — et
          sont rafraîchies automatiquement. Chaque fiche renvoie vers l'annonce
          originale du commerçant.
        </div>
        <div className="fmono">
          © {new Date().getFullYear()} Simon-Pierre Boucher — contact@spboucher.ai
        </div>
      </div>
    </footer>
  );
}

export default function App() {
  return (
    <>
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/vehicule/:uid" element={<VehiclePage />} />
          <Route path="/stats" element={<StatsPage />} />
          <Route path="/sources" element={<SourcesPage />} />
          <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 />
    </>
  );
}