// App root

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 295,
  "chat": "visual-novel",
  "hue": "default",
  "assigned": true
}/*EDITMODE-END*/;

function App(){
  const [role, setRole] = React.useState(() => localStorage.getItem("rpg-role") || "user");
  const [route, setRoute] = React.useState(() => localStorage.getItem("rpg-route") || "rpg-library");
  const [activeScenario, setActiveScenario] = React.useState(SCENARIO);
  const [activeSeries, setActiveSeries] = React.useState("trudne-rozmowy");
  const [activeProgram, setActiveProgram] = React.useState("p-lider-ai-q2");
  const [activeSessionUser, setActiveSessionUser] = React.useState(null);
  const [endType, setEndType] = React.useState("goal-achieved");
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [state, setState] = React.useState({
    role, chat: TWEAK_DEFAULTS.chat, hue: TWEAK_DEFAULTS.hue,
    assigned: TWEAK_DEFAULTS.assigned, accentHue: TWEAK_DEFAULTS.accentHue,
  });

  React.useEffect(()=>{ localStorage.setItem("rpg-role", role); },[role]);
  React.useEffect(()=>{ localStorage.setItem("rpg-route", route); window.scrollTo(0,0); },[route]);
  React.useEffect(()=>{ setState(s=>({...s,role})); },[role]);

  // apply accent hue
  React.useEffect(()=>{
    const h = state.accentHue;
    document.documentElement.style.setProperty("--accent", `oklch(0.72 0.18 ${h})`);
    document.documentElement.style.setProperty("--accent-2", `oklch(0.62 0.22 ${h})`);
    document.documentElement.style.setProperty("--accent-3", `oklch(0.82 0.12 ${h})`);
    document.documentElement.style.setProperty("--accent-soft", `oklch(0.35 0.10 ${h} / .22)`);
    document.documentElement.style.setProperty("--accent-glow", `oklch(0.72 0.18 ${h} / .35)`);
  },[state.accentHue]);

  // Sync role via tweaks too
  React.useEffect(()=>{
    if (state.role !== role){
      setRole(state.role);
      setRoute(state.role==="user" ? "home" : "hr-programs");
    }
  },[state.role]);

  // Edit-mode protocol
  React.useEffect(()=>{
    const onMsg = (e)=>{
      if (e.data?.type==="__activate_edit_mode") setTweaksOpen(true);
      if (e.data?.type==="__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({type:"__edit_mode_available"},"*");
    return ()=>window.removeEventListener("message", onMsg);
  },[]);

  // Screen-label for comment context
  const screenLabel = {
    "home":"01 Home", "rpg-library":"02 Library", "briefing":"03 Briefing",
    "session":"04 Session", "results":"05 Results", "my-skills":"06 MySkills",
    "my-tasks":"07 MyTasks",
    "hr-programs":"10 HR Programs",
    "hr-dashboard":"11 HR Program Detail",
    "hr-program-new":"12 HR Program Creator",
    "hr-catalog":"13 HR Catalog",
    "hr-context":"14 HR Context",
    "hr-user-sessions":"15 HR User Sessions",
  }[route] || route;

  const isSession = route==="session";

  return (
    <div className="app" data-screen-label={screenLabel}>
      <TopNav route={route} setRoute={setRoute} role={role} setRole={setRole}/>

      {role==="user" && (route==="home" || !["rpg-library","briefing","session","results","my-skills","my-tasks","series","series-detail"].includes(route)) && <Library setRoute={setRoute} setActiveScenario={setActiveScenario}/>}
      {role==="user" && route==="rpg-library" && <Library setRoute={setRoute} setActiveScenario={setActiveScenario}/>}
      {role==="user" && route==="briefing" && <Briefing setRoute={setRoute} scenario={activeScenario}/>}
      {role==="user" && route==="session" && <Session setRoute={setRoute} scenario={activeScenario} setEndType={setEndType}/>}
      {role==="user" && route==="results" && <Results setRoute={setRoute} scenario={activeScenario} endType={endType}/>}
      {role==="user" && route==="my-skills" && <MySkills setRoute={setRoute} setActiveScenario={setActiveScenario}/>}
      {role==="user" && route==="my-tasks" && <MyTasks setRoute={setRoute} setActiveScenario={setActiveScenario}/>}
      {role==="user" && route==="series" && <SeriesList setRoute={setRoute} setActiveSeries={setActiveSeries} setActiveScenario={setActiveScenario}/>}
      {role==="user" && route==="series-detail" && <SeriesDetail setRoute={setRoute} seriesId={activeSeries} setActiveScenario={setActiveScenario} setActiveSeries={setActiveSeries}/>}

      {role==="hr" && route==="hr-programs" && <HrProgramsList setRoute={setRoute} setActiveProgram={setActiveProgram}/>}
      {role==="hr" && route==="hr-dashboard" && <HrDashboard setRoute={setRoute} programId={activeProgram} setActiveSessionUser={setActiveSessionUser}/>}
      {role==="hr" && route==="hr-program-new" && <HrProgramNew setRoute={setRoute}/>}
      {role==="hr" && route==="hr-catalog" && <HrCatalog setRoute={setRoute}/>}
      {role==="hr" && route==="hr-context" && <HrContext setRoute={setRoute}/>}
      {role==="hr" && route==="hr-user-sessions" && <HrUserSessions setRoute={setRoute} user={activeSessionUser}/>}

      <Tweaks state={state} setState={setState} open={tweaksOpen} setOpen={setTweaksOpen}/>
    </div>
  );
}

const ComingSoon = ({setRoute, name}) => (
  <div className="screen narrow slide-up" style={{paddingTop:80,textAlign:"center"}}>
    <div className="eyebrow">{name}</div>
    <h1 className="display" style={{margin:"20px 0"}}>Poza <em>scope'em</em> prototypu.</h1>
    <div className="subtitle" style={{margin:"0 auto 28px"}}>Ten ekran nie jest częścią demo. Wrzucimy go jak rozszerzymy prototyp.</div>
    <button className="btn primary" onClick={()=>setRoute("home")}>← Wróć do głównej</button>
  </div>
);

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