// Mounts either a category hub or topic hub depending on window vars.
// window.LANE must be set.
// window.CATEGORY must be set.
// window.TOPIC is optional — if present, renders the topic hub; otherwise
// renders the category hub.

function CategoryHubApp() {
  const laneSlug = window.LANE;
  const catSlug = window.CATEGORY;
  const topicSlug = window.TOPIC || null;
  const tax = window.FINANCE_TAXONOMY;
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  if (!tax || !laneSlug || !catSlug) {
    return <div style={{padding: 40, fontFamily: "var(--ff-mono)"}}>Missing lane/category config.</div>;
  }
  const laneData = tax[laneSlug];
  if (!laneData) return <div style={{padding: 40}}>Unknown lane: {laneSlug}</div>;
  const cat = laneData.categories.find((c) => c.slug === catSlug);
  if (!cat) return <div style={{padding: 40}}>Unknown category: {laneSlug}/{catSlug}</div>;
  const topic = topicSlug ? cat.topics.find((t) => t.slug === topicSlug) : null;
  if (topicSlug && !topic) return <div style={{padding: 40}}>Unknown topic: {topicSlug}</div>;

  const lane = { ...laneData, slug: laneSlug };

  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  React.useEffect(() => {
    const tick = () => {
      const now = new Date();
      const hh = String(now.getHours()).padStart(2, "0");
      const mm = String(now.getMinutes()).padStart(2, "0");
      const ss = String(now.getSeconds()).padStart(2, "0");
      const clock = document.getElementById("tickerClock");
      if (clock) clock.textContent = `NYC · ${hh}:${mm}:${ss}`;
      const fsess = document.getElementById("fsess");
      if (fsess) fsess.textContent = `${hh}${mm}.${ss}`;
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="site" data-lane={laneSlug}>
      <Ticker />
      <Nav lane={laneSlug} setLane={() => {}} />
      <CatBreadcrumbs lane={lane} cat={cat} topic={topic} />
      <CatHero lane={lane} cat={cat} topic={topic} />
      {topic
        ? <TopicBody lane={lane} cat={cat} topic={topic} />
        : <CategoryBody lane={lane} cat={cat} />}
      <RelatedRail lane={lane} cat={cat} topic={topic} />
      <WriterBio lane={laneSlug} />
      <NetworkBand />
      <Footer />

      <div className={`tweaks ${tweaksOpen ? "is-open" : ""}`}>
        <div className="tweaks__head">
          <span>TWEAKS · {cat.name.toUpperCase()}{topic ? ` · ${topic.name.toUpperCase()}` : ""}</span>
          <button onClick={() => setTweaksOpen(false)} style={{color: "var(--pistachio)"}}>✕</button>
        </div>
        <div className="tweaks__body">
          <div className="tweaks__foot" style={{padding: 16}}>
            FINANCE · {laneSlug.toUpperCase()} · {cat.slug.toUpperCase()}
            {topic ? ` · ${topic.slug.toUpperCase()}` : ""}
          </div>
        </div>
      </div>
    </div>
  );
}

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