// App — main router with A11y Provider (首次登入自動問卷 + 偏好記憶)

const AppInner = () => {
  const { profile } = useA11y();
  const [page, setPage] = React.useState(() => localStorage.getItem("eap_page") || "home");
  const [aiOpen, setAiOpen] = React.useState(false);
  const [onboardingOpen, setOnboardingOpen] = React.useState(false);
  const [successToast, setSuccessToast] = React.useState(false);
  const [voiceOpen, setVoiceOpen] = React.useState(false);
  const [a11yOpen, setA11yOpen] = React.useState(false);
  const [activeCourse, setActiveCourse] = React.useState(null);

  // 首次進站自動觸發 Onboarding
  React.useEffect(() => {
    if (profile.first_visit) {
      const t = setTimeout(() => setOnboardingOpen(true), 600);
      return () => clearTimeout(t);
    }
  }, []);

  // 接收 DevTestBar 的 open-onboarding 事件
  React.useEffect(() => {
    const h = () => setOnboardingOpen(true);
    window.addEventListener("eap:open-onboarding", h);
    return () => window.removeEventListener("eap:open-onboarding", h);
  }, []);

  React.useEffect(() => {
    localStorage.setItem("eap_page", page);
    document.documentElement.setAttribute("data-screen", page);
  }, [page]);

  // Keyboard shortcuts
  React.useEffect(() => {
    const onKey = (e) => {
      const tag = (e.target.tagName || "").toLowerCase();
      if (tag === "input" || tag === "textarea") return;
      if (e.altKey && e.key === "1") { e.preventDefault(); setVoiceOpen(true); }
      if (e.altKey && e.key === "0") { e.preventDefault(); setA11yOpen(true); }
      if (e.altKey && e.key === "2") { e.preventDefault(); setAiOpen(true); }
      if (e.key === " " && !voiceOpen && !aiOpen && !onboardingOpen) {
        e.preventDefault(); setVoiceOpen(true);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [voiceOpen, aiOpen, onboardingOpen]);

  const goPlay = (course) => {
    setActiveCourse(course);
    setPage("player");
    setAiOpen(false);
    setVoiceOpen(false);
  };

  const voiceCommand = (cmd) => {
    if (cmd === "catalog") setPage("catalog");
    if (cmd === "player") setPage("player");
    if (cmd === "dashboard") setPage("dashboard");
    if (cmd === "events") setPage("events");
    setVoiceOpen(false);
  };

  // textSize/highContrast proxied from profile.theme
  const textSize = profile.theme?.text_size || "md";
  const highContrast = profile.theme?.contrast === "high";
  const { setTheme } = useA11y();

  return (
    <>
      <SkipLinks onOpenVoice={() => setVoiceOpen(true)} onOpenA11y={() => setA11yOpen(true)} />
      <TopNav page={page} setPage={setPage} onOpenAI={() => setAiOpen(true)} />
      <div id="main">
        {page === "home" && (
          <HomePage
            setPage={setPage}
            onOpenAI={() => setAiOpen(true)}
            onPlayCourse={goPlay}
            onStartOnboarding={() => setOnboardingOpen(true)}
          />
        )}
        {page === "catalog" && <CatalogPage onPlayCourse={goPlay} onOpenAI={() => setAiOpen(true)} />}
        {page === "player" && <PlayerPage course={activeCourse} setPage={setPage} />}
        {page === "summary" && <SummaryPage setPage={setPage} />}
        {page === "dashboard" && <DashboardPage setPage={setPage} onPlayCourse={goPlay} />}
        {page === "events" && <EventsPage />}
      </div>

      <Footer />

      {onboardingOpen && (
        <OnboardingModal
          onClose={() => setOnboardingOpen(false)}
          onComplete={() => {
            setOnboardingOpen(false);
            setSuccessToast(true);
            setPage("home");
          }}
        />
      )}

      {successToast && (
        <OnboardingSuccessToast profile={profile} onClose={() => setSuccessToast(false)} />
      )}

      <AIChatModal open={aiOpen} onClose={() => setAiOpen(false)} onPickCourse={goPlay} />
      <VoiceAssistantOverlay open={voiceOpen} onClose={() => setVoiceOpen(false)} onCommand={voiceCommand} />
      <FirstVisitHint onOpenVoice={() => setVoiceOpen(true)} />

      <CVDSimulator />
      <DevTestBar />

      <AccessibilityBar
        textSize={textSize}
        setTextSize={(v) => setTheme({ text_size: v })}
        highContrast={highContrast}
        setHighContrast={(v) => setTheme({ contrast: v ? "high" : "normal" })}
        forceOpen={a11yOpen}
        onForceClose={() => setA11yOpen(false)}
      />
    </>
  );
};

const App = () => (
  <A11yProvider>
    <AppInner />
  </A11yProvider>
);

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