/* Veridyne Learning Portal — app root: store, routing, access gating, tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D07E3F",
  "glassBlur": 18,
  "fontScale": 1
}/*EDITMODE-END*/;

function App() {
  const store = useStoreProvider();
  const route = useHashRoute();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--ember-bright", t.accent);
    root.style.setProperty("--ember", `color-mix(in oklab, ${t.accent} 80%, #1f150c)`);
    root.style.setProperty("--ember-soft", `color-mix(in oklab, ${t.accent} 16%, transparent)`);
    root.style.setProperty("--glass-blur", t.glassBlur + "px");
    root.style.setProperty("--font-scale", t.fontScale);
  }, [t.accent, t.glassBlur, t.fontScale]);

  const tweaksPanel = (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent}
        options={["#D07E3F", "#7E9CC9", "#8FAE7C", "#C9837E"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakSection label="Surface" />
      <TweakSlider label="Glass blur" value={t.glassBlur} min={0} max={32} step={1} unit="px"
        onChange={(v) => setTweak("glassBlur", v)} />
      <TweakSlider label="Text size" value={t.fontScale} min={0.9} max={1.15} step={0.05}
        onChange={(v) => setTweak("fontScale", v)} />
    </TweaksPanel>
  );

  if (!store.session) {
    return (
      <StoreContext.Provider value={store}>
        <div data-screen-label="Access gate">
          <AccessGate />
        </div>
        {tweaksPanel}
      </StoreContext.Provider>
    );
  }

  const { page, sub } = route;
  let content;
  if (page === "okta" || page === "auth0") content = <LearningTrack track={page} key={page} />;
  else if (page === "module" && sub) content = <ModuleDetail moduleId={sub} key={sub} />;
  else if (page === "protocols") content = <ProtocolsLab sub={sub} key={sub || "saml"} />;
  else if (page === "diagrams") content = <DiagramsPage />;
  else if (page === "quizzes" && (sub === "okta" || sub === "auth0")) content = <QuizEngine quizId={sub} key={sub} />;
  else if (page === "quizzes") content = <QuizLanding />;
  else if (page === "library") content = <DocumentationLibrary />;
  else if (page === "progress") content = <ProgressPage />;
  else if (page === "glossary") content = <Glossary />;
  else content = <Dashboard />;

  const labelMap = {
    dashboard: "Dashboard", okta: "Okta Learning", auth0: "Auth0 Learning", module: "Module: " + (sub || ""),
    protocols: "Protocols Lab", diagrams: "Interactive Diagrams", quizzes: "Knowledge Checks",
    library: "Documentation Library", progress: "Progress & Scores", glossary: "Glossary",
  };

  return (
    <StoreContext.Provider value={store}>
      <div data-screen-label={labelMap[page] || "Dashboard"}>
        <Layout page={page === "module" ? moduleTrack(sub) : page}>{content}</Layout>
      </div>
      <XpFeedback />
      {tweaksPanel}
    </StoreContext.Provider>
  );
}

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