// Main App - orchestrates screens and state
const { useState, useEffect } = React;

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "skin": "stone"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULT_TWEAKS);
  const [screen, setScreen] = useState("splash");
  const [prefs, setPrefs] = useState({ skin: "stone", sound: true, haptic: true, fx: true, notify: true, notifyTime: "07:00", lang: "en" });

  useEffect(() => { setPrefs(p => ({ ...p, skin: tweaks.skin })); }, [tweaks.skin]);

  const skin = prefs.skin;

  const [mode, setMode] = useState(null);
  const [question, setQuestion] = useState("");
  const [drawn, setDrawn] = useState([]);

  const [activeRune, setActiveRune] = useState(null);
  const [activeEntry, setActiveEntry] = useState(null);

  const [dailyRune] = useState(() => window.RUNES[Math.floor((Date.now() / (1000 * 60 * 60 * 24)) % 24)]);

  const nav = (target, payload) => {
    if (target === "rune-detail") setActiveRune(payload);
    if (target === "library" && payload) { setActiveRune(payload); setScreen("rune-detail"); return; }
    if (target === "journal-detail") setActiveEntry(payload);
    if (target === "question-for-mode") { setMode(payload); setScreen("question"); return; }
    setScreen(target);
  };

  const onPickRuneInLibrary = (r) => { setActiveRune(r); setScreen("rune-detail"); };
  const onPickEntry = (e) => { setActiveEntry(e); setScreen("journal-detail"); };

  let body;
  switch (screen) {
    case "splash":
      body = <Splash onDone={() => setScreen("home")}/>;
      break;
    case "home":
      body = <Home onNav={(t, p) => { if (t === "rune-detail") { setActiveRune(p); setScreen("rune-detail"); } else nav(t, p); }} dailyRune={dailyRune}/>;
      break;
    case "reading-mode":
      body = <ReadingModeSelect onNav={nav} onPick={(m) => { setMode(m); setScreen("question"); }}/>;
      break;
    case "question":
      body = <QuestionInput mode={mode} onNav={nav} onSubmit={(q) => { setQuestion(q); setScreen("bag"); }}/>;
      break;
    case "bag":
      body = <RuneBag mode={mode} question={question} skin={skin} onComplete={(picks) => { setDrawn(picks); setScreen("reading-result"); }}/>;
      break;
    case "reading-result":
      body = <ReadingResult mode={mode} question={question} drawn={drawn} skin={skin} onNav={nav} onAI={() => setScreen("ai-oracle")} onSave={() => setScreen("journal")}/>;
      break;
    case "ai-oracle":
      body = <AIOracle drawn={drawn} mode={mode} question={question} skin={skin} onNav={nav}/>;
      break;
    case "library":
      body = <Library skin={skin} onNav={nav} onPickRune={onPickRuneInLibrary}/>;
      break;
    case "rune-detail":
      body = <RuneDetail rune={activeRune} skin={skin} onNav={nav}/>;
      break;
    case "journal":
      body = <Journal skin={skin} onNav={nav} onPickEntry={onPickEntry}/>;
      break;
    case "journal-detail":
      body = <JournalDetail entry={activeEntry} skin={skin} onNav={nav}/>;
      break;
    case "game":
      body = <Game skin={skin} onNav={nav}/>;
      break;
    case "settings":
      body = <Settings onNav={nav} prefs={prefs} setPrefs={(p) => { setPrefs(p); if (p.skin !== prefs.skin) setTweak("skin", p.skin); }}/>;
      break;
    default:
      body = <Home onNav={nav} dailyRune={dailyRune}/>;
  }

  return (
    <>
      <IOSDevice width={430} height={932} dark={true}>
        <div style={{ width: "100%", height: "100%", position: "absolute", inset: 0 }}>
          {body}
        </div>
      </IOSDevice>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Rune Skin">
          <TweakRadio
            options={[
              { value: "stone", label: "Stone" },
              { value: "wood", label: "Wood" },
              { value: "gold", label: "Gold" },
              { value: "ice", label: "Ice" },
              { value: "fire", label: "Fire" }
            ]}
            value={tweaks.skin}
            onChange={(v) => setTweak("skin", v)}
          />
          <div style={{ display: "flex", gap: 8, marginTop: 12, justifyContent: "center" }}>
            {["stone","wood","gold","ice","fire"].map(s => (
              <div key={s} onClick={() => setTweak("skin", s)} className={`rune-${s}`} style={{ width: 32, height: 42, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 3, cursor: "pointer", outline: tweaks.skin === s ? "1.5px solid #C9A84C" : "none", outlineOffset: 3 }}>
                <span className="rune-glyph" style={{ fontSize: 18 }}>ᚠ</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 14, fontSize: 11, color: "rgba(255,255,255,0.5)", fontStyle: "italic", lineHeight: 1.5, textAlign: "center" }}>
            Change the rune material across the app: carved stone, Yggdrasil wood, Asgard gold, Niflheim ice, or Muspelheim fire.
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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