// ── App entry point ───────────────────────────────────────────
// Reads window.ITEMS (data.js) and window.* components (components.jsx).
// TWEAK_DEFAULTS block is rewritten by the FleetView host on save.
// ─────────────────────────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "viewMode": "web",
  "maxWidth": 720
}/*EDITMODE-END*/;

function useViewportWidth() {
  const [w, setW] = React.useState(() => (typeof window !== "undefined" ? window.innerWidth : 1024));
  React.useEffect(() => {
    const onResize = () => setW(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return w;
}

function App() {
  const [t, setTweak] = (window.useTweaks || (() => [TWEAK_DEFAULTS, () => {}]))(TWEAK_DEFAULTS);
  const vw = useViewportWidth();
  const [openId, setOpenId] = React.useState(window.ITEMS[0]?.id ?? null);

  const resolvedMode =
    t.viewMode === "mobile" ? "mobile" :
    t.viewMode === "web"    ? "web"    :
    (vw < 768 ? "mobile" : "web");

  const { TweaksPanel, TweakSection, TweakRadio, TweakSlider } = window;

  const tweaks = TweaksPanel ? (
    <TweaksPanel>
      <TweakSection label="View" />
      <TweakRadio label="模式" value={t.viewMode}
        options={["auto", "mobile", "web"]}
        onChange={(v) => setTweak("viewMode", v)} />
      {resolvedMode === "web" && (
        <TweakSlider label="最大寬度" value={t.maxWidth} min={640} max={1100} step={20} unit="px"
          onChange={(v) => setTweak("maxWidth", v)} />
      )}
    </TweaksPanel>
  ) : null;

  React.useEffect(() => {
    const stage = document.getElementById("stage");
    if (stage) stage.dataset.mode = resolvedMode;
  }, [resolvedMode]);

  const { PhoneFrame, WebShell, PageBody } = window;
  const items = window.ITEMS;

  if (resolvedMode === "mobile") {
    return (
      <React.Fragment>
        <PhoneFrame width={402} height={874}>
          <div style={{
            paddingTop: 56, paddingBottom: 56,
            background: "var(--paper)", minHeight: "100%",
            fontFamily: "var(--font-tc)",
          }}>
            <PageBody items={items} openId={openId} setOpenId={setOpenId} isWeb={false} />
          </div>
        </PhoneFrame>
        {tweaks}
      </React.Fragment>
    );
  }

  return (
    <React.Fragment>
      <WebShell maxWidth={t.maxWidth}>
        <PageBody items={items} openId={openId} setOpenId={setOpenId} isWeb={true} />
      </WebShell>
      {tweaks}
    </React.Fragment>
  );
}

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