// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// App.tsx: global layout (header + live ticker + ink footer) and routing
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { NavLink, Route, Routes, useLocation } from "react-router-dom";
import {
  fetchAuthConfig, fetchFacets, fetchSources, fetchStats,
  logout, registerSourceNames, sourceName, PROVINCE_NAMES,
} from "./api";
import { AccountProvider, useAccount } from "./account";
import CookieConsent from "./components/CookieConsent";
import {
  IcoChart, IcoCompass, IcoDoc, IcoFolder, IcoHeart, IcoHouse, IcoLock,
  IcoMap, IcoSearch, IcoUser,
} from "./components/Icons";
import { LogoIcon } from "./components/Logo";
import GroupeKaBadge from "./ka/GroupeKaBadge";
import KaFooter from "./ka/KaFooter";
import ContactPage from "./pages/Contact";
import Home from "./pages/Home";
import ListingPage from "./pages/Listing";
import BotPage from "./pages/Bot";
import JusteValeurPage from "./pages/JusteValeur";
import KaScoresPage from "./pages/KaScores";
import PasserellePage from "./pages/Passerelle";
import PrivacyPage from "./pages/Privacy";
import ProfilePage from "./pages/Profile";
import PublicProfilePage from "./pages/PublicProfile";
import BienvenuePage from "./pages/Bienvenue";
import FavorisPage from "./pages/Favoris";
import GestionPage from "./pages/Gestion";
import GestionPublicPage from "./pages/GestionPublic";
import TermsPage from "./pages/Terms";
import SourcesPage from "./pages/Sources";
import StatsPage from "./pages/Stats";
import VillePage, { VillesPage } from "./pages/Ville";

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} active rentals`];
        const provs = stats.provinces || {};
        for (const [code, n] of Object.entries(provs)) {
          if ((n as number) > 0) parts.push(`${PROVINCE_NAMES[code] || code} ${n}`);
        }
        if (stats.avg_price != null)
          parts.push(`Average rent $${Math.round(stats.avg_price).toLocaleString("en-CA")}`);
        for (const s of facets.sources.slice(0, 10))
          parts.push(`${sourceName(s.source)} · ${s.n}`);
        parts.push("Updated automatically");
        setItems(parts);
      })
      .catch(() => setItems(["Rent-Ka — rentals across Canada"]));
  }, []);

  if (items.length === 0) return null;
  // content doubled for a continuous scroll loop
  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: "Rentals", icon: <IcoHouse size={17} />, end: true },
  { to: "/?view=map", label: "Map", icon: <IcoMap size={17} />, end: false, force: true },
  { to: "/cities", label: "Cities", icon: <IcoCompass 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: <IcoUser size={17} />, end: false },
  { to: "/terms", label: "Terms", icon: <IcoDoc size={17} />, end: false },
  { to: "/privacy", label: "Privacy", icon: <IcoLock size={17} />, end: false },
];

/** "Sign in" button or avatar + account menu (Google sign-in) */
function AccountMenu() {
  const [enabled, setEnabled] = useState(false);
  const { me, refresh } = useAccount();
  const [menuOpen, setMenuOpen] = useState(false);

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

  // menu open: close on Escape (outside tap goes through the 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
          aria-hidden="true"
          style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            width: 18,
            height: 16,
            borderRadius: 5,
            background: "var(--accent, #2456e6)",
            color: "#ffffff",
            font: "700 9px/1 'Inter', system-ui, sans-serif",
            letterSpacing: "-0.02em",
          }}
        >
          KA
        </span>
        Sign in
      </a>
    );
  }
  return (
    <div className="account">
      <button
        className="account-btn"
        onClick={() => setMenuOpen(!menuOpen)}
        aria-expanded={menuOpen}
        aria-label={`Account: ${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>
      {menuOpen && (
        <>
          {/* Backdrop rendered at the root (createPortal): the header's
              backdrop-filter re-parented position:fixed → veil clipped to header. */}
          {createPortal(
            <div className="account-backdrop" onClick={() => setMenuOpen(false)} aria-hidden="true" />,
            document.body,
          )}
          <div className="account-menu" role="menu">
            <div className="account-id">
              <b>{me.name || "My account"}</b>
              <span>{me.email}</span>
              {me.ka_id && <span className="account-kaid">{me.ka_id}</span>}
            </div>
            <NavLink
              to="/profile"
              role="menuitem"
              className="account-link"
              onClick={() => setMenuOpen(false)}
            >
              My profile
            </NavLink>
            {me.role === "locataire" && (
              <NavLink
                to="/favorites"
                role="menuitem"
                className="account-link"
                onClick={() => setMenuOpen(false)}
              >
                My saved rentals
              </NavLink>
            )}
            {me.role === "gestionnaire" && (
              <NavLink
                to="/manage"
                role="menuitem"
                className="account-link"
                onClick={() => setMenuOpen(false)}
              >
                My manager page
              </NavLink>
            )}
            {!me.role && (
              <NavLink
                to="/welcome"
                role="menuitem"
                className="account-link"
                onClick={() => setMenuOpen(false)}
              >
                Choose my profile
              </NavLink>
            )}
            <button
              role="menuitem"
              onClick={async () => { await logout(); refresh(); setMenuOpen(false); }}
            >
              Sign out
            </button>
          </div>
        </>
      )}
    </div>
  );
}

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

  // close the menu on every navigation + lock scrolling underneath
  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="Rent-Ka — home">
            <LogoIcon size={30} />
            Rent<span className="ka">·Ka</span>
            <span className="brand-tag">Apartments and homes for rent across Canada.</span>
          </NavLink>
          <GroupeKaBadge />
          <nav className="nav" aria-label="Main navigation">
            <NavLink to="/" end className={({ isActive }) => (isActive ? "active" : "")}>
              Rentals
            </NavLink>
            <NavLink to="/cities" className={({ isActive }) => (isActive ? "active" : "")}>
              Cities
            </NavLink>
            <NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>
              Stats
            </NavLink>
            <NavLink to="/sources" className={({ isActive }) => (isActive ? "active" : "")}>
              Sources
            </NavLink>
          </nav>
          <AccountMenu />
          <button
            className={`menu-btn ${open ? "open" : ""}`}
            aria-expanded={open}
            aria-label={open ? "Close menu" : "Open menu"}
            onClick={() => setOpen(!open)}
          >
            <span /><span /><span />
          </button>
        </div>

        {/* mobile drawer menu */}
        <div className={`mobile-menu ${open ? "open" : ""}`} role="navigation" aria-label="Mobile menu">
          {/* fixed ✕ of the panel: visible regardless of scroll; the header burger is hidden while open */}
          <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">{l.icon}</span>
              {l.label}
              <span className="mm-arrow" aria-hidden="true">→</span>
            </NavLink>
          ))}
          <div className="mm-badge">
            <GroupeKaBadge />
          </div>
          <div className="mm-foot">
            Independent aggregator — updated automatically; every listing links
            back to the original ad.
          </div>
        </div>
      </header>
      {open && <div className="mm-backdrop" onClick={() => setOpen(false)} aria-hidden="true" />}
      <Ticker />
    </>
  );
}

/** Footer: local navigation row + shared Groupe KA footer. */
function Footer() {
  return (
    <>
      <div className="prefooter">
        <div className="container">
          <span className="baseline">
            <b>Rent-Ka</b> — Apartments and homes for rent across Canada.
            Independent aggregator: every listing links back to the original ad.
          </span>
          <NavLink to="/">Rentals</NavLink>
          <NavLink to="/cities">Cities</NavLink>
          <NavLink to="/stats">Stats</NavLink>
          <NavLink to="/sources">Sources</NavLink>
          <NavLink to="/contact">Contact</NavLink>
          <button
            className="flink"
            onClick={() => window.dispatchEvent(new Event("rentka:openConsent"))}
          >
            Manage cookies
          </button>
        </div>
      </div>
      <KaFooter
        siteId="rent-ka"
        localLegal={[
          { label: "Documentation", href: "/doc/" },
          { label: "Terms of use (Rent-Ka)", href: "/terms" },
          { label: "Privacy (Rent-Ka)", href: "/privacy" },
        ]}
      />
    </>
  );
}

/** Bottom navigation bar (mobile) — active icon in accent. */
function MobileTabBar() {
  const location = useLocation();
  const isMap = new URLSearchParams(location.search).get("view") === "map";
  const tabs = [
    { to: "/", label: "Search", icon: <IcoSearch size={20} />, on: location.pathname === "/" && !isMap },
    { to: "/?view=map", label: "Map", icon: <IcoMap size={20} />, on: location.pathname === "/" && isMap },
    { to: "/favorites", label: "Saved", icon: <IcoHeart size={20} />, on: location.pathname.startsWith("/favorites") },
    { to: "/profile", label: "Profile", icon: <IcoUser size={20} />, on: location.pathname.startsWith("/profile") },
  ];
  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 (
    <AccountProvider>
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/listing/:uid" element={<ListingPage />} />
          <Route path="/cities" element={<VillesPage />} />
          <Route path="/city/:ville" element={<VillePage />} />
          <Route path="/city/:ville/:type" element={<VillePage />} />
          <Route path="/stats" element={<StatsPage />} />
          <Route path="/sources" element={<SourcesPage />} />
          <Route path="/contact" element={<ContactPage />} />
          <Route path="/privacy" element={<PrivacyPage />} />
          <Route path="/terms" element={<TermsPage />} />
          <Route path="/profile" element={<ProfilePage />} />
          <Route path="/u/:kaId" element={<PublicProfilePage />} />
          <Route path="/welcome" element={<BienvenuePage />} />
          <Route path="/favorites" element={<FavorisPage />} />
          <Route path="/manage" element={<GestionPage />} />
          <Route path="/g/:sourceId" element={<GestionPublicPage />} />
          <Route path="/gateway/:uid" element={<PasserellePage />} />
          <Route path="/bot" element={<BotPage />} />
          <Route path="/fair-value" element={<JusteValeurPage />} />
          <Route path="/ka-scores" element={<KaScoresPage />} />
          <Route
            path="*"
            element={
              <div className="notice container">
                <div className="big"><IcoCompass size={40} /></div>
                <h2>Page not found</h2>
                <p>The requested link does not exist.</p>
              </div>
            }
          />
        </Routes>
      </main>
      <Footer />
      <MobileTabBar />
      <CookieConsent />
    </AccountProvider>
  );
}