// App for subcategory pages. Requires window.LANE & window.SUBCAT set.
// leafUrl() comes from Subcat.jsx (exposed on window).
const leafUrl = window.leafUrl || (() => null);

function SubcatApp() {
  const key = window.SUBCAT || "foundations";
  const data = SUBCAT_META[key];
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [gridCols, setGridCols] = React.useState(2);

  React.useEffect(() => {
    if (window.__TWEAK_DEFAULTS?.gridCols) setGridCols(window.__TWEAK_DEFAULTS.gridCols);
  }, []);

  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);
  }, []);

  React.useEffect(() => {
    document.body.style.setProperty("--gcard-cols", gridCols);
  }, [gridCols]);

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

  const gridStyle = { gridTemplateColumns: `repeat(${gridCols}, 1fr)` };

  return (
    <div className="site" data-lane={data.lane}>
      <Ticker />
      <Nav lane={data.lane} setLane={() => {}} />
      <SubcatBreadcrumbs data={data} />
      <SubcatHero data={data} />
      <FeaturedGuide data={data} />

      <section className="sbody">
        <div className="sbody__grid">
          <div className="sbody__main">
            <div className="sbody__head">
              <div className="section-head__kicker">
                <span className="bar"/> ALL GUIDES · {data.label} · {data.count - 1} MORE
              </div>
              <h2 className="sbody__h2">Everything else in {data.name.toLowerCase()}.</h2>
              <div className="sbody__sort">
                <span>SORTED BY</span>
                <button className="is-on">POPULAR</button>
                <button>NEWEST</button>
                <button>SHORTEST</button>
                <button>A–Z</button>
              </div>
            </div>
            <div className="sbody__cards" style={gridStyle}>
              {data.guides.map((g, i) => (
                <GuideCard
                  key={g.t}
                  g={g} i={i}
                  author="IRIS"
                  lane={data.lane}
                  hover={i === 0}
                />
              ))}
            </div>
            <div className="sbody__loadmore">
              <button className="btn btn--primary">
                LOAD {data.count - data.guides.length - 1} MORE GUIDES →
              </button>
              <span className="sbody__loadmore-meta">
                Showing {data.guides.length + 1} of {data.count} · {data.label}
              </span>
            </div>
          </div>
          <aside className="sbody__side">
            <div className="side-block">
              <div className="side-block__k">POPULAR IN {data.label}</div>
              <ol className="side-block__list">
                {data.popular.map((p, i) => {
                  const url = leafUrl(p);
                  const Inner = url ? "a" : "span";
                  const innerProps = url ? { href: url } : {};
                  return (
                    <li key={p}>
                      <Inner {...innerProps}>
                        <span className="side-block__idx">{String(i + 1).padStart(2, "0")}</span>
                        <span className="side-block__title">{p}</span>
                      </Inner>
                    </li>
                  );
                })}
              </ol>
            </div>

            <div className="side-block">
              <div className="side-block__k">RELATED SUBCATEGORIES</div>
              <ul className="side-block__related">
                {data.related.map(r => (
                  <li key={r.name}>
                    <a>
                      <span className="side-block__rname">{r.name}</span>
                      <span className="side-block__rcount">{r.count}</span>
                      <span className="side-block__rarr">→</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            <div className="side-block side-block--dark">
              <div className="side-block__k" style={{color: "var(--mint)", borderBottomColor: "rgba(178,211,194,0.3)"}}>
                BENCHMARKS · {data.label}
              </div>
              <div className="side-block__bench">
                <div><span className="k">AVG READ</span><span className="v">7.2 MIN</span></div>
                <div><span className="k">UPDATED</span><span className="v">04.18.26</span></div>
                <div><span className="k">TOTAL</span><span className="v">{data.count}</span></div>
                <div><span className="k">AUTHOR</span><span className="v">IRIS</span></div>
              </div>
            </div>

            <div className="side-block">
              <div className="side-block__k">NOT FINDING IT?</div>
              <p className="side-block__p">
                Ask Iris directly. Every question gets read. Enough of you ask the same thing, Iris writes the guide.
              </p>
              <button className="btn btn--primary" style={{width: "100%", justifyContent: "center"}}>
                SUBMIT A QUESTION →
              </button>
            </div>
          </aside>
        </div>
      </section>

      <WriterBio lane={data.lane} />
      <Footer />

      <div className={`tweaks ${tweaksOpen ? "is-open" : ""}`}>
        <div className="tweaks__head">
          <span>TWEAKS · {data.label}</span>
          <button onClick={() => setTweaksOpen(false)} style={{color: "var(--pistachio)"}}>✕</button>
        </div>
        <div className="tweaks__body">
          <div>
            <span className="tweaks__k">GUIDE GRID</span>
            <div className="tweaks__options">
              {[[1, "01 COL (LIST)"], [2, "02 COL"], [3, "03 COL"]].map(([k, label]) => (
                <button
                  key={k}
                  className={`tweaks__opt ${gridCols === k ? "is-on" : ""}`}
                  onClick={() => setAndPersist("gridCols", k, setGridCols)}
                >{label}</button>
              ))}
            </div>
          </div>
        </div>
        <div className="tweaks__foot">FINANCE · {data.label}</div>
      </div>
    </div>
  );
}

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