/* global React, ReactDOM, Header, Footer, TourModal, HomePage, ProgramsPage, AboutPage, SafetyPage, ContactPage, PhotoStudio */
const { useState: useAS, useEffect: useAE } = React;

const ROUTES = ["home", "programs", "about", "safety", "contact"];

/* Title and description per page, so each URL can be indexed on its own terms. */
const PAGE_META = {
  home: {
    title: "Agape Learning Academy — Faith-based childcare in Lubbock, TX",
    description: "Lubbock's trusted faith-based daycare. Safe, structured, nurturing care for infants through Pre-K. Schedule a tour of Agape Learning Academy today."
  },
  programs: {
    title: "Programs — Agape Learning Academy",
    description: "Infant care, toddler, preschool and Pre-K readiness programs in Lubbock, TX. Age-specific classrooms with a daily rhythm built around what each stage needs."
  },
  about: {
    title: "About — Agape Learning Academy",
    description: "A family-owned, faith-based childcare center in Lubbock, TX, run by a husband, wife and their daughter. Texas Rising Star Four-Star certified."
  },
  safety: {
    title: "Safety & Health — Agape Learning Academy",
    description: "Secure keypad entry, cameras in every classroom, background-checked staff and strict cleanliness protocols at Agape Learning Academy in Lubbock, TX."
  },
  contact: {
    title: "Contact & Tours — Agape Learning Academy",
    description: "Visit Agape Learning Academy at 1215 Slide Rd, Lubbock, TX. Call (806) 701-7946 or schedule a 30-minute tour of our classrooms."
  }
};

function pathToRoute(pathname) {
  const seg = String(pathname || "/").replace(/^\/+|\/+$/g, "").toLowerCase();
  if (!seg) return "home";
  return ROUTES.includes(seg) ? seg : "home";
}

function routeToPath(route) {
  return route === "home" ? "/" : `/${route}`;
}

function hashAnchor() {
  return window.location.hash ? window.location.hash.slice(1) : null;
}

function App() {
  const [route, setRouteRaw] = useAS(() => pathToRoute(window.location.pathname));
  const anchorRef = React.useRef(hashAnchor());
  const [tourOpen, setTourOpen] = useAS(false);
  const [tweaks, setTweaks] = useAS(window.__TWEAKS__);

  const setRoute = (r, anchor) => {
    anchorRef.current = anchor || null;
    const url = routeToPath(r) + (anchor ? `#${anchor}` : "");
    if (url !== window.location.pathname + window.location.hash) {
      window.history.pushState({ route: r }, "", url);
    }
    setRouteRaw(r);
  };

  /* Back and forward move between pages rather than leaving the site. */
  useAE(() => {
    const onPop = () => {
      anchorRef.current = hashAnchor();
      setRouteRaw(pathToRoute(window.location.pathname));
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  useAE(() => {
    const a = anchorRef.current;
    anchorRef.current = null;
    if (a) {
      window.scrollTo({ top: 0 });
      const t = setTimeout(() => {
        const el = document.getElementById(a);
        if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: "smooth" });
      }, 80);
      return () => clearTimeout(t);
    }
    window.scrollTo({ top: 0 });
  }, [route]);

  useAE(() => {
    const meta = PAGE_META[route] || PAGE_META.home;
    document.title = meta.title;
    const tag = document.querySelector('meta[name="description"]');
    if (tag) tag.setAttribute("content", meta.description);
  }, [route]);

  useAE(() => {
    document.body.setAttribute("data-palette", tweaks.palette);
    document.body.setAttribute("data-fontpair", tweaks.fontPair);
    document.body.setAttribute("data-faith", tweaks.faithLevel);
  }, [tweaks]);

  const onTour = () => setTourOpen(true);

  let page;
  if (route === "programs") page = <ProgramsPage onTour={onTour} />;
  else if (route === "about") page = <AboutPage onTour={onTour} />;
  else if (route === "safety") page = <SafetyPage onTour={onTour} />;
  else if (route === "contact") page = <ContactPage onTour={onTour} />;
  else page = <HomePage setRoute={setRoute} onTour={onTour} tweaks={tweaks} />;

  return (
    <div data-screen-label={`Page / ${route}`}>
      <Header route={route} setRoute={setRoute} onTour={onTour} />
      <main>{page}</main>
      <Footer setRoute={setRoute} onTour={onTour} />
      <TourModal open={tourOpen} onClose={() => setTourOpen(false)} />
    </div>
  );
}

Object.assign(window, { routeToPath });

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);