/* ============================================================
   The Carnation — app shell + hash router
   ============================================================ */
function parseRoute() {
  let raw = location.hash.replace(/^#/, "") || "/";
  // strip query (?q=…) for path matching
  const path = raw.split("?")[0];
  let p = path;
  if (!p.startsWith("/")) p = "/" + p;
  const parts = p.split("/").filter(Boolean);
  return { raw, parts };
}

const DEPT_KEYS = ["business", "spaces", "culture", "public-life", "stories"];

// derive a browser-tab title for the current route
function titleFor(parts) {
  const D = window.CARN;
  const [a, b] = parts;
  const SITE = "The Carnation Post";
  const cap = (s) => (s || "").replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
  let t = "";
  switch (a) {
    case undefined: return "The Carnation Post — Alliance, Ohio · The Carnation City";
    case "article": { const x = D && D.bySlug(b); t = x ? x.title : "Story"; break; }
    case "spotlight": { const x = D && D.bySpot(b); t = x ? x.name + " — Spotlight" : "Spotlight"; break; }
    case "place": { const x = D && D.byDir(b); t = x ? x.name + " — Directory" : "Directory"; break; }
    case "event": { const x = D && D.byEvent(b); t = x ? x.title + " — Events" : "Events"; break; }
    case "question": { const x = D && D.byQ(b); t = x ? "Open Question — " + x.q : "Open Questions"; break; }
    case "author": { const x = D && D.authorOf(b); t = x ? x.name : "Masthead"; break; }
    case "tag": t = cap(b) + " — Stories"; break;
    case "ideas": t = "Ideas & Open Questions"; break;
    case "directory": t = "The Local Index"; break;
    case "list-space": t = "List a Space"; break;
    case "add-business": t = "Add a Business to the Local Index"; break;
    case "local-index": t = "The Local Index"; break;
    case "profiles": t = "The Local Index"; break;
    case "events": t = "Events"; break;
    case "spotlight": t = "Spotlight"; break;
    case "advertise": case "sponsor": t = "Partner With The Carnation"; break;
    case "media-kit": t = "Request the Media Kit"; break;
    case "press": t = "Media & Partner Kit"; break;
    case "submit": t = "Submit to The Carnation"; break;
    case "search": t = "Search"; break;
    case "membership": t = "Membership"; break;
    case "saved": t = "Saved Stories"; break;
    case "about": t = "About"; break;
    case "join": t = "Get Involved"; break;
    case "contribute": t = "Contribute"; break;
    case "staff": t = "Masthead & Staff"; break;
    case "ethics": t = "Ethics & Standards"; break;
    case "corrections": t = "Corrections"; break;
    case "funding": t = "How We're Funded"; break;
    case "contact": t = "Contact"; break;
    case "privacy": t = "Privacy Policy"; break;
    case "terms": t = "Terms of Use"; break;
    case "admin": t = "Newsroom Admin"; break;
    default: t = DEPT_KEYS.includes(a) ? cap(a) : "Page Not Found";
  }
  return t + " · " + SITE;
}

function App() {
  const [route, setRoute] = useState(parseRoute());
  useEffect(() => {
    if ("scrollRestoration" in history) history.scrollRestoration = "manual";
    const h = () => { setRoute(parseRoute()); };
    window.addEventListener("hashchange", h);
    return () => window.removeEventListener("hashchange", h);
  }, []);
  // scroll to top AFTER the new page mounts (covers links clicked from page bottom)
  useEffect(() => { window.scrollTo(0, 0); }, [route]);

  // keep the browser-tab title in sync with the route
  useEffect(() => { document.title = titleFor(route.parts); }, [route]);

  // "/" focuses search (unless typing in a field)
  useEffect(() => {
    const onKey = (e) => {
      if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) return;
      const t = e.target, tag = t && t.tagName;
      if (tag === "INPUT" || tag === "TEXTAREA" || (t && t.isContentEditable)) return;
      e.preventDefault();
      if (!location.hash.startsWith("#/search")) location.hash = "#/search";
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const [a, b] = route.parts;
  let page, active = a || "home";

  switch (a) {
    case undefined: page = <HomePage />; active = "home"; break;
    case "stories": page = <SectionPage deptKey="stories" />; break;
    case "ideas": page = <IdeasPage />; break;
    case "question": page = <QuestionPage id={b} />; active = "ideas"; break;
    case "directory": page = <DirectoryPage />; active = "directory"; break;
    case "list-space": page = <ListSpacePage />; active = "directory"; break;
    case "add-business": page = <AddBusinessPage />; active = "directory"; break;
    case "local-index": page = <DirectoryPage />; active = "directory"; break;
    case "profiles": page = <DirectoryPage />; active = "directory"; break;
    case "place": page = <PlacePage slug={b} />; active = "directory"; break;
    case "events": page = <EventsPage />; active = "events"; break;
    case "event": page = <EventPage slug={b} />; active = "events"; break;
    case "spotlight": page = <SpotlightPage slug={b} />; break;
    case "advertise": page = <AdvertisePage />; break;
    case "media-kit": page = <MediaKitPage />; active = "advertise"; break;
    case "press": page = <PressKitPage />; active = "advertise"; break;
    case "sponsor": page = <AdvertisePage />; active = "advertise"; break;
    case "article": page = <ArticlePage slug={b} />; active = ""; break;
    case "submit": page = <SubmitPage />; active = ""; break;
    case "search": page = <SearchPage />; active = ""; break;
    case "tag": page = <TagPage tag={b} />; active = ""; break;
    case "membership": page = <MembershipPage />; active = ""; break;
    case "saved": page = <SavedPage />; active = ""; break;
    case "about": page = <AboutPage />; active = "about"; break;
    case "join": page = <JoinPage />; active = "join"; break;
    case "contribute": page = <ContributePage type={b} />; active = "join"; break;
    case "staff": page = <StaffPage />; active = "staff"; break;
    case "author": page = <AuthorPage authorKey={b} />; active = "staff"; break;
    case "ethics": page = <EthicsPage />; active = "ethics"; break;
    case "corrections": page = <CorrectionsPage />; active = "corrections"; break;
    case "funding": page = <FundingPage />; active = "funding"; break;
    case "contact": page = <ContactPage />; active = "contact"; break;
    case "privacy": page = <PrivacyPage />; active = ""; break;
    case "terms": page = <TermsPage />; active = ""; break;
    case "admin": page = <AdminPage />; active = ""; break;
    default:
      if (DEPT_KEYS.includes(a)) page = <SectionPage deptKey={a} />;
      else { page = <NotFoundPage />; active = ""; }
  }

  const isAdmin = a === "admin";

  return (
    <>
      <a className="skiplink" href="#main">Skip to content</a>
      <IssueBar />
      <Masthead />
      <CNav active={active} />
      {!isAdmin && <Ticker />}
      <div id="main">{page}</div>
      <CFooter />
    </>
  );
}

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