// App for a lane hub page. Expects LANE global set on window before this loads.
function LaneApp() {
  const lane = window.LANE || "personal";
  const [cols, setCols] = React.useState(3);
  const [density, setDensity] = React.useState("default");
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  // Load tweak defaults
  React.useEffect(() => {
    if (window.__TWEAK_DEFAULTS) {
      if (window.__TWEAK_DEFAULTS.cols) setCols(window.__TWEAK_DEFAULTS.cols);
      if (window.__TWEAK_DEFAULTS.density) setDensity(window.__TWEAK_DEFAULTS.density);
    }
  }, []);

  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}`;
      const viewMode = document.getElementById("viewMode");
      if (viewMode) viewMode.textContent = `GRID-${String(cols).padStart(2, "0")}`;
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, [cols]);

  const noop = () => {};

  const setAndPersist = (key, val, setter) => {
    setter(val);
    window.parent.postMessage({
      type: "__edit_mode_set_keys",
      edits: { [key]: val },
    }, "*");
  };

  return (
    <div className="site" data-lane={lane}>
      <Ticker />
      <Nav lane={lane} setLane={noop} />
      <Breadcrumbs lane={lane} />
      <LaneHero lane={lane} />
      <SubcatGrid lane={lane} cols={cols} density={density} />
      <FeaturedPick lane={lane} />
      <GuidesList lane={lane} />
      <WriterBio lane={lane} />
      <Footer />

      <div className={`tweaks ${tweaksOpen ? "is-open" : ""}`}>
        <div className="tweaks__head">
          <span>TWEAKS · {lane.toUpperCase()} HUB</span>
          <button onClick={() => setTweaksOpen(false)} style={{color: "var(--pistachio)"}}>✕</button>
        </div>
        <div className="tweaks__body">
          <div>
            <span className="tweaks__k">SUBCAT GRID</span>
            <div className="tweaks__options">
              {[[2, "02 COL"], [3, "03 COL"]].map(([k, label]) => (
                <button
                  key={k}
                  className={`tweaks__opt ${cols === k ? "is-on" : ""}`}
                  onClick={() => setAndPersist("cols", k, setCols)}
                >{label}</button>
              ))}
            </div>
          </div>
          <div>
            <span className="tweaks__k">DENSITY</span>
            <div className="tweaks__options" style={{gridTemplateColumns: "1fr 1fr 1fr"}}>
              {[["compact","COMPACT"],["default","DEFAULT"],["roomy","ROOMY"]].map(([k, label]) => (
                <button
                  key={k}
                  className={`tweaks__opt ${density === k ? "is-on" : ""}`}
                  onClick={() => setAndPersist("density", k, setDensity)}
                >{label}</button>
              ))}
            </div>
          </div>
        </div>
        <div className="tweaks__foot">FINANCE · {lane.toUpperCase()} HUB</div>
      </div>
    </div>
  );
}

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