// ============================================
// Main App — auth flow + portal router
// ============================================

function App() {
  // Auth state machine: splash → onboarding → login → signup → setup → app
  const [stage, setStage] = useState("splash"); // splash | onboarding | login | signup | forgot | setup | app
  const [role, setRole] = useState("admin");
  const [subroute, setSubroute] = useState("home");
  const [notifOpen, setNotifOpen] = useState(false);
  const [switcherOpen, setSwitcherOpen] = useState(false);
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const [toast, setToast] = useState(null);
  const [seenOnboard, setSeenOnboard] = useState(false);

  // Persist
  useEffect(() => {
    const saved = localStorage.getItem("aquaflow_state");
    if (saved) {
      try {
        const s = JSON.parse(saved);
        if (s.stage) setStage(s.stage);
        if (s.role) setRole(s.role);
        if (s.subroute) setSubroute(s.subroute);
      } catch {}
    }
  }, []);
  useEffect(() => {
    localStorage.setItem("aquaflow_state", JSON.stringify({ stage, role, subroute }));
  }, [stage, role, subroute]);

  const showToast = (t) => {
    setToast(t);
    setTimeout(() => setToast(null), 2800);
  };

  // Auth pages
  if (stage === "splash") return <SplashScreen onDone={() => setStage(seenOnboard ? "login" : "onboarding")}/>;
  if (stage === "onboarding") return <Onboarding onDone={() => { setSeenOnboard(true); setStage("login"); }}/>;
  if (stage === "login") return <LoginScreen onLogin={() => setStage("app")} onSignUp={() => setStage("signup")} onForgot={() => setStage("forgot")}/>;
  if (stage === "signup") return <SignUpScreen onDone={() => setStage("setup")} onLogin={() => setStage("login")}/>;
  if (stage === "forgot") return <ForgotPasswordScreen onBack={() => setStage("login")}/>;
  if (stage === "setup") return <ProfileSetupWizard role={role} onDone={() => { setStage("app"); showToast({ message: "Welcome to AquaFlow!" }); }}/>;

  const onNav = (id) => { setSubroute(id); setMobileNavOpen(false); };
  const pickRole = (r) => { setRole(r); setSubroute("home"); setSwitcherOpen(false); };

  const renderPortal = () => {
    const props = { subroute, setSubroute, toast: showToast };
    switch (role) {
      case "admin": return <AdminPortal {...props}/>;
      case "club": return <ClubPortal {...props}/>;
      case "coach": return <CoachPortal {...props}/>;
      case "competitive": return <CompetitivePortal {...props}/>;
      case "openwater": return <OpenWaterPortal {...props}/>;
      case "recreation": return <RecPortal {...props}/>;
      case "student": return <StudentPortal {...props}/>;
      case "parent": return <ParentPortal {...props}/>;
      case "developer": return <DeveloperPortal {...props}/>;
      default: return null;
    }
  };

  const navItems = NAVS[role];
  const currentNav = navItems.find(n => n.id === subroute);

  return (
    <div className="app-shell">
      {/* Desktop sidebar */}
      <div className="desktop-only" style={{ display: "flex" }}>
        <Sidebar
          role={role}
          current={navItems.find(n => n.id === subroute)?.id || "home"}
          onNav={onNav}
          onSwitchRole={() => setSwitcherOpen(true)}
          onLogout={() => setStage("login")}
        />
      </div>

      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", height: "100vh", overflow: "hidden" }}>
        <TopBar
          role={role}
          onOpenNotifs={() => setNotifOpen(true)}
          notifCount={3}
          onSwitchRole={() => setSwitcherOpen(true)}
          mobileMenuOpen={mobileNavOpen}
          onMobileMenu={() => setMobileNavOpen(!mobileNavOpen)}
          title={currentNav?.label}
        />

        <main style={{ flex: 1, overflowY: "auto", background: "var(--gray-100)", padding: "24px 24px 80px" }} key={role + subroute}>
          <div style={{ maxWidth: 1400, margin: "0 auto" }} className="fade-up">
            {renderPortal()}
          </div>
        </main>

        {/* Mobile bottom tabs */}
        <div className="mobile-only">
          <BottomTabs role={role} current={subroute} onNav={onNav}/>
        </div>
      </div>

      {/* Mobile nav drawer */}
      {mobileNavOpen && (
        <div onClick={() => setMobileNavOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 700 }}>
          <div onClick={e => e.stopPropagation()} style={{ position: "absolute", top: 0, left: 0, bottom: 0, width: 280, background: "white", overflowY: "auto", animation: "fade-up 220ms ease-out" }}>
            <Sidebar
              role={role}
              current={subroute}
              onNav={onNav}
              onSwitchRole={() => { setMobileNavOpen(false); setSwitcherOpen(true); }}
              onLogout={() => setStage("login")}
            />
          </div>
        </div>
      )}

      <NotificationsPanel open={notifOpen} onClose={() => setNotifOpen(false)}/>
      <RoleSwitcher open={switcherOpen} onClose={() => setSwitcherOpen(false)} onPick={pickRole} current={role}/>
      <ToastHost toast={toast}/>
    </div>
  );
}

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