// app.jsx — main app shell: routes, state, tweaks panel.

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "device": "desktop",
  "beastId": "fire-horse",
  "gateCopy": "reward",
  "showFlowNav": true,
  "showProgress": true
}/*EDITMODE-END*/;

const SCREENS = [
  { key:"welcome",     label:"Welcome",      Comp: ScreenWelcome,     url:"stevenyu.art" },
  { key:"info",        label:"Birth info",   Comp: ScreenInfo,        url:"stevenyu.art/reading" },
  { key:"calculating", label:"Calculating",  Comp: ScreenCalculating, url:"stevenyu.art/reading" },
  { key:"preview",     label:"Preview",      Comp: ScreenPreview,     url:"stevenyu.art/reading" },
  { key:"gate",        label:"Email gate",   Comp: ScreenGate,        url:"stevenyu.art/claim" },
  { key:"check",       label:"Check email",  Comp: ScreenCheck,       url:"stevenyu.art/claim/sent" },
  { key:"inbox",       label:"Email",        Comp: ScreenInbox,       url:"mail.app/inbox" },
  { key:"landing",     label:"Painting",     Comp: ScreenLanding,     url:"stevenyu.art/painting/8f3a" },
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = useState("welcome");
  const [user, setUser] = useState({ date:"", time:"", location:"", email:"" });

  const setField = (k, v) => setUser(u => ({ ...u, [k]: v }));

  const nav = useMemo(() => ({
    go: (k) => setScreen(k),
    restart: () => { setScreen("welcome"); setUser({ date:"", time:"", location:"", email:"" }); },
  }), []);

  const ctx = { device: t.device, beastId: t.beastId, gateCopy: t.gateCopy, user };
  const current = SCREENS.find(s => s.key === screen) || SCREENS[0];
  const Comp = current.Comp;
  const currentIdx = SCREENS.findIndex(s => s.key === screen);
  const statusDark = screen === "landing";

  // Keyboard nav
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "ArrowRight" && currentIdx < SCREENS.length - 1) setScreen(SCREENS[currentIdx+1].key);
      if (e.key === "ArrowLeft"  && currentIdx > 0)                   setScreen(SCREENS[currentIdx-1].key);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [currentIdx]);

  return (
    <div style={{ width:"100%", height:"100%", position:"relative" }}>
      <DeviceShell device={t.device} url={current.url} statusDark={statusDark}>
        {/* push content below status bar on mobile */}
        <div key={screen + t.device} style={{ position:"absolute", inset:0 }} className="screen-fade-enter screen-fade-enter-active">
          <Comp ctx={ctx} nav={nav} setField={setField} />
        </div>
      </DeviceShell>

      {/* flow nav strip */}
      {t.showFlowNav && (
        <FlowNav screens={SCREENS} currentKey={screen} onGo={(k)=>setScreen(k)} />
      )}

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Device" />
        <TweakRadio label="Viewport" value={t.device}
          options={["desktop","mobile"]}
          onChange={(v)=>setTweak("device", v)} />

        <TweakSection label="Result" />
        <TweakSelect label="Spirit beast" value={t.beastId}
          options={BEASTS.map(b => ({ value:b.id, label:b.name }))}
          onChange={(v)=>setTweak("beastId", v)} />

        <TweakSection label="Email gate" />
        <TweakRadio label="Copy" value={t.gateCopy}
          options={[
            { value:"reward",  label:"Reward" },
            { value:"save",    label:"Save"   },
            { value:"utility", label:"Plain"  },
          ]}
          onChange={(v)=>setTweak("gateCopy", v)} />

        <TweakSection label="Prototype" />
        <TweakToggle label="Show flow nav" value={t.showFlowNav}
          onChange={(v)=>setTweak("showFlowNav", v)} />

        <TweakButton label="Restart flow" onClick={() => { setScreen("welcome"); }} />
      </TweaksPanel>
    </div>
  );
}

// Flow nav: thin strip pinned to bottom, lets you jump to any step.
function FlowNav({ screens, currentKey, onGo }) {
  return (
    <div style={{
      position:"fixed", bottom: 16, left:"50%", transform:"translateX(-50%)",
      display:"flex", alignItems:"center", gap:0,
      background:"rgba(20,15,10,.6)", backdropFilter:"blur(14px)",
      border:"1px solid rgba(255,255,255,.08)", borderRadius:999,
      padding: 6, zIndex: 50, color:"#fbf6ea",
      fontFamily:"var(--sans)", fontSize:11,
      boxShadow:"0 12px 40px rgba(0,0,0,.4)",
      maxWidth: "calc(100vw - 320px)", overflow:"hidden",
    }}>
      {screens.map((s, i) => {
        const active = s.key === currentKey;
        return (
          <button key={s.key}
            onClick={()=>onGo(s.key)}
            style={{
              appearance:"none", border:"none",
              padding:"6px 10px", borderRadius: 999,
              background: active ? "#fbf6ea" : "transparent",
              color: active ? "#1a1410" : "rgba(255,246,220,.7)",
              fontFamily:"var(--sans)", fontSize: 11, letterSpacing:".04em",
              cursor:"pointer", display:"flex", alignItems:"center", gap: 6,
            }}>
            <span style={{
              display:"inline-flex", alignItems:"center", justifyContent:"center",
              width: 16, height: 16, borderRadius: "50%",
              background: active ? "rgba(124,31,31,.15)" : "rgba(255,246,220,.1)",
              color: active ? "#7c1f1f" : "rgba(255,246,220,.6)",
              fontSize: 9, fontWeight: 600,
            }}>{i+1}</span>
            {s.label}
          </button>
        );
      })}
    </div>
  );
}

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