// App root — navigation + role state + toast system + tours + help modal
function App() {
  const [route, setRoute] = useState('landing');
  const [role, setRole] = useState('learner');
  const [toasts, setToasts] = useState([]);
  const [helpOpen, setHelpOpen] = useState(false);
  const [mobileNavOpen, setMobileNavOpen] = useState(false);

  // Figure out which role's tour applies to the current route
  const tourRole = useMemo(() => {
    if (route === 'dashboard') return 'learner';
    if (route === 'manager') return 'manager';
    if (route === 'admin') return 'admin';
    return null;
  }, [route]);

  // First-run + replay controller
  const { open: tourOpen, start: startTour, close: closeTour } = useTour(tourRole);

  // Persist
  useEffect(() => {
    const r = localStorage.getItem('ms-route');
    const ro = localStorage.getItem('ms-role');
    if (r && r !== 'login') setRoute(r);
    if (ro) setRole(ro);
  }, []);
  useEffect(() => { localStorage.setItem('ms-route', route); }, [route]);
  useEffect(() => { localStorage.setItem('ms-role', role); }, [role]);

  const toast = useCallback((message, kind) => {
    const id = Math.random().toString(36).slice(2);
    setToasts(t => [...t, { id, message, kind }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3200);
  }, []);

  const navigate = useCallback((r) => {
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);

  const switchRole = (r) => {
    setRole(r);
    if (r === 'manager') setRoute('manager');
    else if (r === 'admin') setRoute('admin');
    else setRoute('dashboard');
    toast(`Viewing as ${r.charAt(0).toUpperCase() + r.slice(1)}`, 'success');
  };

  const signOut = useCallback(() => {
    try {
      localStorage.removeItem('ms-route');
      localStorage.removeItem('ms-role');
    } catch (e) {}
    setRole('learner');
    setRoute('landing');
    toast('Signed out', 'success');
  }, [toast]);

  const replayTour = useCallback(() => {
    if (!tourRole) {
      toast('Tours are available on dashboards.', 'success');
      return;
    }
    startTour();
  }, [tourRole, startTour, toast]);

  if (route === 'landing') {
    return (
      <>
        <LandingPage onEnter={() => { setRoute('login'); }}/>
        <ToastContainer toasts={toasts}/>
      </>
    );
  }

  if (route === 'login') {
    return (
      <>
        <LoginPage
          onLogin={() => { setRoute(role === 'manager' ? 'manager' : role === 'admin' ? 'admin' : 'dashboard'); toast('Signed in securely', 'success'); }}
          onBack={() => setRoute('landing')}
        />
        <ToastContainer toasts={toasts}/>
      </>
    );
  }

  const pageProps = { onNavigate: navigate, toast, onStartTour: replayTour };
  const page = (() => {
    switch (route) {
      case 'dashboard': return <DashboardPage {...pageProps}/>;
      case 'lesson': return <LessonPage {...pageProps}/>;
      case 'quiz': return <QuizPage {...pageProps}/>;
      case 'phishing': return <PhishingPage {...pageProps}/>;
      case 'incident': return <IncidentPage {...pageProps}/>;
      case 'manager': return <ManagerPage {...pageProps}/>;
      case 'admin': return <AdminPage {...pageProps}/>;
      case 'audit': return <AuditPage {...pageProps}/>;
      case 'triage': return <TriagePage {...pageProps}/>;
      default: return <DashboardPage {...pageProps}/>;
    }
  })();

  return (
    <div className="app">
      <Header onNavigate={navigate} currentPage={route} role={role} setRole={switchRole} unread={3} onHelp={() => setHelpOpen(true)} onMenuToggle={() => setMobileNavOpen(v => !v)}/>
      <div className="shell">
        <Sidebar current={route} onNavigate={navigate} role={role} onHelp={() => setHelpOpen(true)} onSignOut={signOut} mobileOpen={mobileNavOpen} onMobileClose={() => setMobileNavOpen(false)}/>
        <main className="main" key={route}>
          {page}
        </main>
      </div>
      <PageFooter/>
      <ToastContainer toasts={toasts}/>
      {tourRole && <Tour key={tourRole} role={tourRole} open={tourOpen} onClose={closeTour}/>}
      <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} onReplayTour={replayTour} toast={toast}/>
    </div>
  );
}

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