/* global window, React, ReactDOM */
const { useState, useEffect } = React;

/* Tweakable defaults — host can rewrite the JSON between markers on disk */
const TWEAKS = /*EDITMODE-BEGIN*/{
  "embers": 36,
  "bgIntensity": 0.35,
  "accent": "crimson",
  "showHud": true
}/*EDITMODE-END*/;

function App() {
  const [stage, setStage] = useState("title"); // title | barber | cut | confirm | booked
  const [barberId, setBarberId] = useState("eliott");
  const [cutId, setCutId] = useState("the-honour");
  const [dayIdx, setDayIdx] = useState(1);
  const [time, setTime] = useState("11:15");
  const [name, setName] = useState("");

  const t = window.useTweaks ? window.useTweaks(TWEAKS) : [TWEAKS, () => {}];
  const tweaks = t[0];
  const setTweak = t[1];

  // Apply accent palette
  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.accent === "amber") {
      root.style.setProperty("--blood", "oklch(0.62 0.18 55)");
      root.style.setProperty("--blood-deep", "oklch(0.42 0.16 55)");
      root.style.setProperty("--blood-bright", "oklch(0.75 0.18 60)");
    } else if (tweaks.accent === "moss") {
      root.style.setProperty("--blood", "oklch(0.5 0.13 145)");
      root.style.setProperty("--blood-deep", "oklch(0.32 0.11 145)");
      root.style.setProperty("--blood-bright", "oklch(0.65 0.16 145)");
    } else if (tweaks.accent === "void") {
      root.style.setProperty("--blood", "oklch(0.45 0.18 290)");
      root.style.setProperty("--blood-deep", "oklch(0.28 0.15 290)");
      root.style.setProperty("--blood-bright", "oklch(0.62 0.21 290)");
    } else {
      root.style.setProperty("--blood", "oklch(0.45 0.19 25)");
      root.style.setProperty("--blood-deep", "oklch(0.30 0.16 25)");
      root.style.setProperty("--blood-bright", "oklch(0.62 0.22 27)");
    }
  }, [tweaks.accent]);

  const reset = () => {
    setStage("title");
    setName("");
  };

  return (
    <>
      <Embers count={tweaks.embers} />
      {tweaks.showHud && (
        <HudTop stage={stage} onHome={reset} />
      )}

      {stage === "title" && (
        <TitleScreen onEnter={() => setStage("barber")} bgIntensity={tweaks.bgIntensity} />
      )}

      {stage === "barber" && (
        <BarberSelect
          selectedId={barberId}
          onSelect={setBarberId}
          onContinue={() => setStage("cut")}
          onBack={() => setStage("title")}
        />
      )}

      {stage === "cut" && (
        <CutSelect
          barberId={barberId}
          selectedCutId={cutId}
          onSelect={setCutId}
          onContinue={() => setStage("confirm")}
          onBack={() => setStage("barber")}
        />
      )}

      {stage === "confirm" && (
        <ConfirmScreen
          barberId={barberId}
          cutId={cutId}
          dayIdx={dayIdx}
          time={time}
          name={name}
          onSetDay={setDayIdx}
          onSetTime={setTime}
          onSetName={setName}
          onConfirm={() => setStage("booked")}
          onBack={() => setStage("cut")}
        />
      )}

      {stage === "booked" && (
        <BookedScreen
          barberId={barberId}
          cutId={cutId}
          day={DAYS[dayIdx]}
          time={time}
          name={name}
          onReset={reset}
        />
      )}

      {/* Tweaks panel — drops in via the standard host protocol */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Atmosphere">
            <window.TweakSlider
              label="Embers"
              value={tweaks.embers}
              min={0} max={120} step={1}
              onChange={(v) => setTweak("embers", v)}
            />
            <window.TweakSlider
              label="Backdrop intensity"
              value={tweaks.bgIntensity}
              min={0} max={1} step={0.05}
              onChange={(v) => setTweak("bgIntensity", v)}
            />
            <window.TweakToggle
              label="Show HUD chrome"
              value={tweaks.showHud}
              onChange={(v) => setTweak("showHud", v)}
            />
          </window.TweakSection>
          <window.TweakSection title="Palette">
            <window.TweakRadio
              label="Accent"
              value={tweaks.accent}
              options={["crimson", "amber", "moss", "void"]}
              onChange={(v) => setTweak("accent", v)}
            />
          </window.TweakSection>
          <window.TweakSection title="Jump To">
            <window.TweakButton onClick={() => setStage("title")}>▸ Title</window.TweakButton>
            <window.TweakButton onClick={() => setStage("barber")}>▸ Choose Barber</window.TweakButton>
            <window.TweakButton onClick={() => setStage("cut")}>▸ Choose Cut</window.TweakButton>
            <window.TweakButton onClick={() => setStage("confirm")}>▸ Confirm</window.TweakButton>
            <window.TweakButton onClick={() => { setName(name || "Wayfarer"); setStage("booked"); }}>▸ Booked</window.TweakButton>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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