/* ========================================================================
   app.jsx — root: provider, router and shell
   ====================================================================== */

function App() {
  const store = useAppStore();
  const { route, navOpen, generating, toast } = store;

  // close mobile drawer on resize back to desktop
  React.useEffect(() => {
    const onR = () => { if (window.innerWidth > 900) store.setNavOpen(false); };
    window.addEventListener("resize", onR);
    return () => window.removeEventListener("resize", onR);
  }, []);

  // Page resolver
  const Page = (() => {
    switch (route) {
      case "home":           return LandingMarketingPage;
      case "pricing":        return PricingPage;
      case "features":       return FeaturesPage;
      case "demo":           return DemoPage;
      case "login":          return LoginPage;
      case "signup":         return SignupPage;
      case "forgot":         return ForgotPasswordPage;
      case "terms":          return TermsPage;
      case "privacy":        return PrivacyPage;
      case "dashboard":      return DashboardPage;
      case "projects":       return DashboardPage; // alias — projects list lives on dashboard
      case "wizard":         return WizardPage;
      case "overview":       return ProjectOverviewPage;
      case "brand":          return BrandPackPage;
      case "assets":         return AssetsPage;
      case "analysis":       return AnalysisPage;
      case "generate":       return GeneratePage;
      case "instagram-scheduler": return InstagramSchedulerPage;
      case "outputs":        return OutputViewerPage;
      case "social":         return SocialContentPage;
      case "video":          return VideoScriptPage;
      case "appstore":       return AppStorePage;
      case "ads":            return AdsPage;
      case "landing":        return LandingPage;
      case "seo":            return SEOPage;
      case "claude-prompts": return ClaudePromptsPage;
      case "codex-prompts":  return CodexPromptsPage;
      case "exports":        return ExportsPage;
      case "settings":       return SettingsPage;
      case "account":        return AccountSettingsPage;
      case "billing":        return BillingSettingsPage;
      case "usage":          return UsagePage;
      case "health":         return SystemHealthPage;
      default:               return DashboardPage;
    }
  })();

  return (
    <AppCtx.Provider value={store}>
      {route === "home" ? (
        <LandingMarketingPage />
      ) : (
        <div className={"app" + (navOpen ? " nav-open" : "")} onClick={() => navOpen && store.setNavOpen(false)}>
          <Sidebar />
          <main className="main" onClick={e => e.stopPropagation()}>
            <Topbar />
            <div key={route} style={{ animation: "fade .2s ease forwards" }}>
              <Page />
            </div>
          </main>
        </div>
      )}

      {generating && <GenerationOverlay pack={generating.pack} progress={generating.progress} />}
      {toast && (
        <div className="toast">
          <Icon name="check_circle" size={15} stroke={2.2} className="ico-y" color="var(--yellow)" />
          <span>{toast}</span>
        </div>
      )}
    </AppCtx.Provider>
  );
}

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