// -----------------------------------------------------------------------------
// Home-Ka — US real-estate aggregator (Groupe KA)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// App.tsx : global layout (header + live ticker + Groupe KA footer) + routing.
// -----------------------------------------------------------------------------
import { Ico } from "./components/Icons";
import { useEffect, useState } from "react";
import { NavLink, Route, Routes, useLocation } from "react-router-dom";
import { fetchFacets, fetchSources, fetchStats, registerSourceNames, sourceName } from "./api";
import GroupeKaBadge from "./ka/GroupeKaBadge";
import KaFooter from "./ka/KaFooter";
import ContactPage from "./pages/Contact";
import Home from "./pages/Home";
import { PrivacyPage, TermsPage } from "./pages/Legal";
import ListingPage from "./pages/Listing";
import SourcesPage from "./pages/Sources";
import StatsPage from "./pages/Stats";
import AdminPage from "./pages/Admin";

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("en-US")} homes for sale`];
        if (stats.states) parts.push(`${stats.states} states`);
        if (stats.cities) parts.push(`${stats.cities.toLocaleString("en-US")} cities`);
        if (stats.avg_price != null)
          parts.push(`Average price $${Math.round(stats.avg_price).toLocaleString("en-US")}`);
        for (const s of facets.sources.slice(0, 12))
          parts.push(`${sourceName(s.source)} · ${s.n}`);
        parts.push("Updated automatically");
        setItems(parts);
      })
      .catch(() => setItems(["Home-Ka — every home for sale in America"]));
  }, []);

  if (items.length === 0) return null;
  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: "Homes", icon: "home", end: true },
  { to: "/?view=map", label: "Map", icon: "map", end: false, force: true },
  { to: "/stats", label: "Stats", icon: "chart", end: false },
  { to: "/sources", label: "Sources", icon: "building", end: false },
  { to: "/contact", label: "Contact", icon: "arrow", end: false },
];

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

  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="Home-Ka — home">
            Home<span className="ka">Ka</span>
          </NavLink>
          <GroupeKaBadge />
          <nav className="nav" aria-label="Main navigation">
            <NavLink to="/" end className={({ isActive }) => (isActive ? "active" : "")}>
              Homes
            </NavLink>
            <NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>
              Stats
            </NavLink>
            <NavLink to="/sources" className={({ isActive }) => (isActive ? "active" : "")}>
              Sources
            </NavLink>
            <NavLink to="/contact" className={({ isActive }) => (isActive ? "active" : "")}>
              Contact
            </NavLink>
          </nav>
          <button
            className={`menu-btn ${open ? "open" : ""}`}
            aria-expanded={open}
            aria-label={open ? "Close menu" : "Open menu"}
            onClick={() => setOpen(!open)}
          >
            <span /><span /><span />
          </button>
        </div>

        <div className={`mobile-menu ${open ? "open" : ""}`} role="navigation" aria-label="Mobile menu">
          <button type="button" className="mm-close" aria-label="Close 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 && !l.force ? "active" : ""}`}
              onClick={() => setOpen(false)}
            >
              <span className="mm-ico" aria-hidden="true"><Ico name={l.icon} size={19} /></span>
              {l.label}
              <span className="mm-arrow" aria-hidden="true"><Ico name="arrow" size={15} /></span>
            </NavLink>
          ))}
          <div className="mm-foot">
            <GroupeKaBadge />
            <p>
              Independent aggregator — updated automatically; every listing
              links back to the original announcement at the source.
            </p>
          </div>
        </div>
      </header>
      {open && <div className="mm-backdrop" onClick={() => setOpen(false)} aria-hidden="true" />}
      <Ticker />
    </>
  );
}

const LOCAL_LEGAL = [
  { label: "Terms of Use (Home-Ka)", href: "/terms" },
  { label: "Privacy Policy (Home-Ka)", href: "/privacy" },
  { label: "Contact", href: "/contact" },
];

/** Bottom navigation bar (mobile) — floating pill, same language as Lou-Ka v2. */
function MobileTabBar() {
  const location = useLocation();
  const isMap = new URLSearchParams(location.search).get("view") === "map";
  const tabs = [
    { to: "/", label: "Discover", icon: <Ico name="search" size={20} stroke={1.6} />, on: location.pathname === "/" && !isMap },
    { to: "/?view=map", label: "Map", icon: <Ico name="map" size={20} stroke={1.6} />, on: location.pathname === "/" && isMap },
    { to: "/stats", label: "Stats", icon: <Ico name="chart" size={20} stroke={1.6} />, on: location.pathname.startsWith("/stats") },
    { to: "/sources", label: "Sources", icon: <Ico name="building" size={20} stroke={1.6} />, on: location.pathname.startsWith("/sources") },
  ];
  return (
    <nav className="tabbar" aria-label="Mobile navigation">
      {tabs.map((t) => (
        <NavLink key={t.label} to={t.to} className={() => (t.on ? "active" : "")}>
          {t.icon}
          {t.label}
        </NavLink>
      ))}
    </nav>
  );
}

export default function App() {
  return (
    <>
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/property/:uid" element={<ListingPage />} />
          {/* SEO canonical URL: /property/{uid}/{slug} — without this route any
              shared/direct link would land on the 404 page */}
          <Route path="/property/:uid/:slug" element={<ListingPage />} />
          <Route path="/stats" element={<StatsPage />} />
          <Route path="/sources" element={<SourcesPage />} />
          <Route path="/contact" element={<ContactPage />} />
          <Route path="/terms" element={<TermsPage />} />
          <Route path="/privacy" element={<PrivacyPage />} />
          {/* Admin — reachable by URL only, not linked in the nav */}
          <Route path="/admin" element={<AdminPage tab="sources" />} />
          <Route path="/admin/sources" element={<AdminPage tab="sources" />} />
          <Route path="/admin/connectors" element={<AdminPage tab="connectors" />} />
          <Route path="/admin/brokerages" element={<AdminPage tab="brokerages" />} />
          <Route
            path="*"
            element={
              <div className="notice container">
                <div className="big">🧭</div>
                <h2>Page not found</h2>
                <p>The requested link does not exist.</p>
              </div>
            }
          />
        </Routes>
      </main>
      <MobileTabBar />
      <KaFooter siteId="home-ka" localLegal={LOCAL_LEGAL} />
    </>
  );
}