/* global React, ReactDOM, TokenProvider, useTokens, Nav, Footer,
   Landing, Symptoms, Testimonials, Quiz, Tools, Counseling, Crisis,
   useTweaks, TweaksPanel, TweakSection, TweakRadio */
const { useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "Sage",
  "headline": "Newsreader",
  "anxiety": "Realistic"
}/*EDITMODE-END*/;

const THEMES = {
  Sage:     ["0.58 0.045 155", "0.44 0.045 155", "0.93 0.020 155", "0.965 0.013 155"],
  Ocean:    ["0.57 0.055 235", "0.44 0.055 235", "0.93 0.024 235", "0.965 0.015 235"],
  Clay:     ["0.60 0.065 45",  "0.47 0.065 45",  "0.93 0.026 55",  "0.965 0.016 55"],
  Lavender: ["0.57 0.055 305", "0.45 0.055 305", "0.93 0.024 305", "0.965 0.015 305"],
};
const DRAIN = { Calm: 6000, Realistic: 2600, Anxious: 850 };

function Router() {
  const { screen } = useTokens();
  switch (screen) {
    case "symptoms":     return <Symptoms />;
    case "quiz":         return <Quiz />;
    case "tools":        return <Tools />;
    case "testimonials": return <Testimonials />;
    case "counseling":   return <Counseling />;
    case "crisis":       return <Crisis />;
    default:             return <Landing />;
  }
}

function Shell() {
  const { screen } = useTokens();
  const isCrisis = screen === "crisis";
  return (
    <>
      <Nav />
      <main><Router /></main>
      {!isCrisis && <Footer />}
    </>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectA(() => {
    const r = document.documentElement;
    const [s, sd, ss, st] = THEMES[t.theme] || THEMES.Sage;
    r.style.setProperty("--sage", `oklch(${s})`);
    r.style.setProperty("--sage-deep", `oklch(${sd})`);
    r.style.setProperty("--sage-soft", `oklch(${ss})`);
    r.style.setProperty("--sage-tint", `oklch(${st})`);
    r.style.setProperty("--serif", `"${t.headline}", Georgia, serif`);
  }, [t.theme, t.headline]);

  return (
    <TokenProvider drainMs={DRAIN[t.anxiety] || 2600}>
      <Shell />
      <TweaksPanel>
        <TweakSection label="Clinic theme" />
        <TweakRadio label="Accent palette" value={t.theme}
          options={["Sage", "Ocean", "Clay", "Lavender"]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakRadio label="Headline font" value={t.headline}
          options={["Newsreader", "Spectral"]}
          onChange={(v) => setTweak("headline", v)} />
        <TweakSection label="Realism" />
        <TweakRadio label="Anxiety level" value={t.anxiety}
          options={["Calm", "Realistic", "Anxious"]}
          onChange={(v) => setTweak("anxiety", v)} />
      </TweaksPanel>
    </TokenProvider>
  );
}

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