// app.jsx — Root: router, layout, tweaks

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "role": "manager",
  "persona": "jihye",
  "phase": "1",
  "density": "regular"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useStateApp("intake");
  const [aboutOpen, setAboutOpen] = useStateApp(false);

  const persona = PERSONAS[t.persona] || PERSONAS.jihye;
  const role = t.role || "manager";

  // Reset route if role doesn't include current screen
  useEffectApp(() => {
    const allowedGroup = window.NAV_GROUPS.filter(g => g.role.includes(role));
    const allowed = allowedGroup.flatMap(g => g.items.map(i => i.id));
    if (!allowed.includes(route)) setRoute(allowed[0] || "intake");
  }, [role]);

  // Esc to close modal
  useEffectApp(() => {
    if (!aboutOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setAboutOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [aboutOpen]);

  const Screen = ({}) => {
    switch (route) {
      case "intake":    return <IntakeScreen persona={persona} role={role} setRoute={setRoute} />;
      case "capture":   return <CaptureScreen persona={persona} setRoute={setRoute} />;
      case "analysis":  return <AnalysisScreen persona={persona} setRoute={setRoute} />;
      case "report":    return <ReportScreen persona={persona} setRoute={setRoute} />;
      case "recommend": return <RecommendScreen persona={persona} setRoute={setRoute} />;
      case "ba":        return <BAScreen persona={persona} setRoute={setRoute} />;
      case "chart":     return <ChartScreen persona={persona} setRoute={setRoute} />;
      case "revisit":   return <RevisitScreen setRoute={setRoute} />;
      case "devices":   return <DevicesScreen setRoute={setRoute} />;
      case "bi":        return <BIScreen />;
      default:          return <IntakeScreen persona={persona} role={role} setRoute={setRoute} />;
    }
  };

  const phaseLabel = (window.PHASES.find(p => p.v === t.phase) || {}).l || "Prototype";

  return (
    <div className="app-shell" data-phase={t.phase} data-density={t.density}>
      <Sidebar route={route} setRoute={setRoute} role={role} persona={persona}
               onAbout={() => setAboutOpen(true)} />
      <div className="workspace">
        <TopBar role={role} setRole={(v) => setTweak("role", v)}
                route={route} persona={persona} phase={t.phase} />
        {t.phase === "1" && (
          <div className="phase-fringe">
            <span className="pf-tag">Phase 1 · Clickable Prototype</span>
            <span className="pf-text">
              샘플 데이터 시연 화면입니다. 실제 AI 연산은 발생하지 않으며 환자 진단·치료 결정에 사용해서는 안 됩니다.
            </span>
            <span className="pf-meta">진척도 20% · Vibe coding</span>
            <span className="pf-link" onClick={() => setAboutOpen(true)}>자세히 →</span>
          </div>
        )}
        <Screen />
      </div>

      <AboutModal open={aboutOpen} onClose={() => setAboutOpen(false)} />

      <TweaksPanel>
        <TweakSection label="역할 (Role Switch)" />
        <TweakRadio label="현재 역할"
                    value={t.role}
                    options={[
                      { value: "patient", label: "환자" },
                      { value: "manager", label: "실장" },
                      { value: "doctor",  label: "의사" },
                    ]}
                    onChange={(v) => setTweak("role", v)} />

        <TweakSection label="환자 페르소나" />
        <TweakRadio label="샘플 환자"
                    value={t.persona}
                    options={[
                      { value: "jihye",   label: "김지혜 · 모공" },
                      { value: "minseo",  label: "박민서 · 탄력" },
                      { value: "yoonseo", label: "최윤서 · 여드름" },
                    ]}
                    onChange={(v) => setTweak("persona", v)} />

        <TweakSection label="개발 단계 (Phase Tinting)" />
        <TweakRadio label="Phase"
                    value={t.phase}
                    options={[
                      { value: "1", label: "1 · Prototype" },
                      { value: "2", label: "2 · Beta" },
                      { value: "3", label: "3 · Launch" },
                    ]}
                    onChange={(v) => setTweak("phase", v)} />

        <TweakSection label="UI Density" />
        <TweakRadio label="Density"
                    value={t.density}
                    options={["compact", "regular"]}
                    onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </div>
  );
}

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