// -----------------------------------------------------------------------------
// House-Ka — Homes-for-sale aggregator (Canada outside Québec, Ontario first)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// App.tsx : global layout (header + live ticker + footer) and 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 { kaLogin, useAccount } from "./account";
import AccountPage from "./pages/Account";
import AgenciesPage from "./pages/Agencies";
import ContactPage from "./pages/Contact";
import Home from "./pages/Home";
import { PrivacyPage, TermsPage } from "./pages/Legal";
import ListingPage from "./pages/Listing";
import RatesPage from "./pages/Rates";
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("en-CA")} homes for sale`];
        if (stats.cities) parts.push(`${stats.cities.toLocaleString("en-CA")} cities & towns`);
        if (stats.avg_price != null)
          parts.push(`Average price $${Math.round(stats.avg_price).toLocaleString("en-CA")}`);
        for (const s of facets.sources.slice(0, 12))
          parts.push(`${sourceName(s.source)} · ${s.n.toLocaleString("en-CA")}`);
        parts.push("Continuously updated");
        setItems(parts);
      })
      .catch(() => setItems(["House-Ka — homes for sale across Canada"]));
  }, []);

  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>
  );
}

/** Header account zone: "Sign in with KA" or a link to the profile. */
function AccountNav() {
  const { user, enabled, loaded } = useAccount();
  if (!loaded || !enabled) return null;
  if (user) {
    return (
      <NavLink
        to="/account"
        className={({ isActive }) => `ka-acct ${isActive ? "active" : ""}`}
      >
        {user.picture ? (
          <img className="ka-acct-pic" src={user.picture} alt="" referrerPolicy="no-referrer" />
        ) : (
          <Ico name="people" size={16} />
        )}
        {user.name ? user.name.split(" ")[0] : "Account"}
      </NavLink>
    );
  }
  return (
    <div className="ka-auth">
      <button className="ka-login" onClick={() => kaLogin()}>
        Sign in with <b>KA</b>
      </button>
      <a
        className="ka-signup"
        href="https://www.groupe-ka.com/connexion"
        target="_blank"
        rel="noopener noreferrer"
      >
        Create an account
      </a>
    </div>
  );
}

/** Same account zone, mobile-menu version. */
function AccountMobile({ close }: { close: () => void }) {
  const { user, enabled, loaded } = useAccount();
  if (!loaded || !enabled) return null;
  if (user) {
    return (
      <NavLink to="/account" className="mm-link" onClick={close}>
        <span className="mm-ico" aria-hidden="true"><Ico name="people" size={19} /></span>
        My account {user.name ? `— ${user.name.split(" ")[0]}` : ""}
        <span className="mm-arrow" aria-hidden="true"><Ico name="arrow" size={15} /></span>
      </NavLink>
    );
  }
  return (
    <div className="mm-auth">
      <button className="ka-login" onClick={() => kaLogin()}>
        Sign in with <b>KA</b>
      </button>
      <a
        className="ka-signup"
        href="https://www.groupe-ka.com/connexion"
        target="_blank"
        rel="noopener noreferrer"
      >
        Create an account
      </a>
    </div>
  );
}

const NAV_LINKS = [
  { to: "/", label: "Homes", icon: "home", end: true },
  { to: "/?view=map", label: "Map", icon: "map", end: false, force: true },
  { to: "/rates", label: "Mortgage rates", icon: "trendup", end: false },
  { to: "/stats", label: "Stats", icon: "chart", end: false },
  { to: "/agencies", label: "Brokerages", 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="House-Ka — home">
            House<span className="ka">Ka</span>
          </NavLink>
          <span className="brand-tag">A Groupe KA service</span>
          <nav className="nav" aria-label="Main navigation">
            <NavLink to="/" end className={({ isActive }) => (isActive ? "active" : "")}>
              Homes
            </NavLink>
            <NavLink to="/rates" className={({ isActive }) => (isActive ? "active" : "")}>
              Rates
            </NavLink>
            <NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>
              Stats
            </NavLink>
            <NavLink to="/agencies" className={({ isActive }) => (isActive ? "active" : "")}>
              Brokerages
            </NavLink>
            <NavLink to="/contact" className={({ isActive }) => (isActive ? "active" : "")}>
              Contact
            </NavLink>
          </nav>
          <div className="header-acct">
            <AccountNav />
          </div>
          <button
            className={`menu-btn ${open ? "open" : ""}`}
            aria-expanded={open}
            aria-label={open ? "Close the menu" : "Open the menu"}
            onClick={() => setOpen(!open)}
          >
            <span /><span /><span />
          </button>
        </div>

        <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 the panel is open */}
          <button type="button" className="mm-close" aria-label="Close the 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>
          ))}
          <AccountMobile close={() => setOpen(false)} />
          <div className="mm-foot">
            <p>
              Independent aggregator — continuously updated, every listing links
              back to the brokerage's original page.
            </p>
          </div>
        </div>
      </header>
      {open && <div className="mm-backdrop" onClick={() => setOpen(false)} aria-hidden="true" />}
      <Ticker />
    </>
  );
}

/** Bottom navigation bar (mobile) — floating pill detached from the edges,
    accent underline below the active tab. */
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: "/rates", label: "Rates", icon: <Ico name="trendup" size={20} stroke={1.6} />, on: location.pathname.startsWith("/rates") },
    { to: "/account", label: "Account", icon: <Ico name="people" size={20} stroke={1.6} />, on: location.pathname.startsWith("/account") },
  ];
  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>
  );
}

/** House-Ka footer — ink panel, Groupe KA credit + sister sites. */
function Footer() {
  const year = new Date().getFullYear();
  const sisters = [
    { name: "Groupe·Ka", url: "https://www.groupe-ka.com", note: "the Groupe KA portal" },
    { name: "Immo·Ka", url: "https://www.immo-ka.com", note: "homes for sale in Québec" },
    { name: "Lou·Ka", url: "https://www.lou-ka.com", note: "rentals in Québec" },
    { name: "Vrai·Prix", url: "https://www.vrai-prix.com", note: "Québec market-value estimates" },
  ];
  return (
    <footer className="hk-footer" id="contact">
      <div className="container">
        <div className="hk-foot-brand">House<span className="ka">Ka</span></div>
        <p className="hk-foot-desc">
          House-Ka continuously aggregates homes for sale publicly listed by
          Canadian real-estate brokerages, teams and national networks — every
          province and territory except Québec, which lives on our sister site
          Immo-Ka. Every listing links back to the source's original page.
          House-Ka is a service of <b>Groupe KA</b>.
        </p>
        <p className="hk-foot-notice">
          House-Ka is an independent aggregator: it is not a brokerage, does not
          represent buyers or sellers, and is not affiliated with the sources it
          indexes. Prices and availability are those displayed by each source.
        </p>
        <ul className="hk-foot-sites">
          {sisters.map((s) => (
            <li key={s.url}>
              <a href={s.url} target="_blank" rel="noopener noreferrer">
                {s.name}
              </a>
              <span>{s.note}</span>
            </li>
          ))}
        </ul>
        <div className="hk-foot-legal">
          <a href="/terms">Terms of use</a>
          <a href="/privacy">Privacy</a>
          <a href="/contact">Contact</a>
          <span>© {year} Groupe-Ka</span>
        </div>
      </div>
    </footer>
  );
}

export default function App() {
  return (
    <>
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/property/:uid" element={<ListingPage />} />
          {/* canonical SEO URL: /property/{uid}/{slug} (server 301) — 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="/rates" element={<RatesPage />} />
          <Route path="/agencies" element={<AgenciesPage />} />
          <Route path="/contact" element={<ContactPage />} />
          <Route path="/account" element={<AccountPage />} />
          <Route path="/terms" element={<TermsPage />} />
          <Route path="/privacy" element={<PrivacyPage />} />
          <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 />
      <Footer />
    </>
  );
}