// Lumen — Main app: routing, role switcher, Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "role": "instructor",
  "theme": "bold",
  "density": "comfortable",
  "typeset": "modern",
  "accent": "#DA0011"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState("marketing");
  const [authMode, setAuthMode] = React.useState("signup");
  const [openCourseId, setOpenCourseId] = React.useState("c1");

  React.useEffect(() => {
    const r = document.documentElement;
    r.dataset.theme = tweaks.theme;
    r.dataset.density = tweaks.density;
    r.dataset.typeset = tweaks.typeset;
    if (tweaks.theme === "bold" || tweaks.theme === "bold-light") {
      // Bold themes own the accent — clear the inline override so the CSS variable wins
      r.style.removeProperty("--accent");
    } else {
      r.style.setProperty("--accent", tweaks.accent);
    }
  }, [tweaks]);

  React.useEffect(() => {
    if (screen === "marketing" || screen === "signin" || screen === "signup") return;
    if (tweaks.role === "instructor" && !["instructor","instructor-students","instructor-revenue","builder","courses","catalog","player","quiz"].includes(screen)) {
      setScreen("instructor");
    } else if (tweaks.role === "student" && !["student","catalog","player","quiz","courses"].includes(screen)) {
      setScreen("student");
    } else if (tweaks.role === "admin" && !["admin","admin-cohorts","admin-billing","courses","catalog"].includes(screen)) {
      setScreen("admin");
    }
  }, [tweaks.role]);

  if (screen === "marketing") {
    return <>
      <MarketingPage onCTA={() => { setAuthMode("signup"); setScreen("signup"); }}
                     onSignIn={() => { setAuthMode("signin"); setScreen("signin"); }}/>
      <LumenTweaks tweaks={tweaks} setTweak={setTweak} setScreen={setScreen}/>
    </>;
  }
  if (screen === "signin" || screen === "signup") {
    return <>
      <AuthPage mode={authMode}
                onSwitch={() => setAuthMode(authMode === "signup" ? "signin" : "signup")}
                onBackToMarketing={() => setScreen("marketing")}
                onComplete={(role) => { setTweak("role", role); setScreen(role === "instructor" ? "instructor" : role === "admin" ? "admin" : "student"); }}/>
      <LumenTweaks tweaks={tweaks} setTweak={setTweak} setScreen={setScreen}/>
    </>;
  }

  const role = tweaks.role;
  const fullBleed = ["player", "quiz", "builder"].includes(screen);

  let content;
  if (screen === "student") {
    content = <StudentDashboard onOpenCourse={(id) => { setOpenCourseId(id); setScreen("player"); }}
                                onOpenQuiz={() => setScreen("quiz")}
                                onOpenCatalog={() => setScreen("catalog")}/>;
  } else if (screen === "catalog" || screen === "courses") {
    content = <CourseCatalog onOpenCourse={(id) => { setOpenCourseId(id); setScreen("player"); }}/>;
  } else if (screen === "player") {
    content = <CoursePlayer courseId={openCourseId}
                            onBack={() => setScreen(role === "instructor" ? "instructor" : "student")}
                            onOpenQuiz={() => setScreen("quiz")}/>;
  } else if (screen === "quiz") {
    content = <QuizScreen onBack={() => setScreen("player")} onComplete={() => setScreen("player")}/>;
  } else if (screen.startsWith("instructor")) {
    const sub = screen === "instructor" ? "overview" : screen === "instructor-students" ? "students" : "revenue";
    content = <InstructorDashboard tab={sub} onNavigate={setScreen} onOpenBuilder={() => setScreen("builder")}/>;
  } else if (screen === "builder") {
    content = <CourseBuilder onBack={() => setScreen("instructor")}/>;
  } else if (screen.startsWith("admin")) {
    content = <AdminAnalytics/>;
  } else {
    content = <div style={{ padding: 40 }}>Coming soon: {screen}</div>;
  }

  return (
    <div className={`app ${fullBleed ? "app--noside" : ""}`}>
      {!fullBleed && <Sidebar role={role} screen={screen} onNavigate={setScreen}/>}
      {content}
      <LumenTweaks tweaks={tweaks} setTweak={setTweak} setScreen={setScreen}/>
    </div>
  );
}

function LumenTweaks({ tweaks, setTweak, setScreen }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Role"/>
      <TweakRadio label="Active as" options={["instructor", "student", "admin"]}
        value={tweaks.role} onChange={(v) => setTweak("role", v)}/>

      <TweakSection label="Quick jump"/>
      <div style={{ padding: "0 10px 10px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
          {[
            ["marketing","Landing"],["signup","Sign up"],
            ["student","Student"],["catalog","Catalog"],
            ["player","Player"],["quiz","Quiz"],
            ["instructor","Instructor"],["builder","Builder"],
            ["instructor-students","Students"],["admin","Admin"],
          ].map(([k,l]) => (
            <button key={k} onClick={() => setScreen(k)}
              style={{ padding: "5px 8px", fontSize: 11, background: "rgba(0,0,0,.06)", border: "none", borderRadius: 4, cursor: "pointer", color: "#29261b" }}>{l}</button>
          ))}
        </div>
      </div>

      <TweakSection label="Theme"/>
      <TweakRadio label="Mode" options={["light", "dark", "bold", "bold-light"]}
        value={tweaks.theme} onChange={(v) => setTweak("theme", v)}/>

      <TweakSection label="Density"/>
      <TweakRadio label="Density" options={["comfortable", "compact"]}
        value={tweaks.density} onChange={(v) => setTweak("density", v)}/>

      <TweakSection label="Typography"/>
      <TweakSelect label="Pairing" options={["modern", "editorial", "techy", "grotesk"]}
        value={tweaks.typeset} onChange={(v) => setTweak("typeset", v)}/>

      <TweakSection label="Brand"/>
      <TweakColor label="Accent" value={tweaks.accent}
        onChange={(v) => setTweak("accent", v)}/>
    </TweaksPanel>
  );
}

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