// Five Nodes Hospital — Root + auth gate + section router
const { useState: useStateA, useEffect: useEffectA } = React;

// Sections available in Easy mode. 'leads' renders the Patients board. Advanced unlocks everything.
const EASY_SECTIONS = ['overview', 'inbox', 'leads'];
const onbKey = (uid, m) => 'fnhsp-onboarded-' + m + '-' + (uid || 'anon');
const seenOnb = (uid, m) => { try { return !!localStorage.getItem(onbKey(uid, m)); } catch (e) { return true; } };

const App = () => {
  const [section, setSection]     = useStateA('overview');
  const [theme, setTheme]         = useStateA('light');
  // Mode always starts on Easy each session (not persisted by design).
  const [mode, setMode]           = useStateA('easy');
  const [authReady, setAuthReady] = useStateA(false);
  const [user, setUser]           = useStateA(null);
  const [lang, setLang] = useStateA(() => {
    try { return localStorage.getItem('fnhsp-lang') || 'en'; } catch (e) { return 'en'; }
  });
  // Which tutorial is showing: 'easy', 'advanced', or null.
  const [onbMode, setOnbMode] = useStateA(null);
  const [mobileNavOpen, setMobileNavOpen] = useStateA(false);

  const handleNav = (key) => { setSection(key); setMobileNavOpen(false); };

  // Switch Easy ⇆ Advanced; trigger that mode's tutorial the first time it opens,
  // and bounce out of any section the new mode can't show.
  const changeMode = (next) => {
    if (next === mode) return;
    setMode(next);
    setMobileNavOpen(false);
    if (next === 'easy' && !EASY_SECTIONS.includes(section)) setSection('overview');
    if (user && !seenOnb(user.id, next)) setOnbMode(next);
  };

  // Tutorial popup nav bridge
  useEffectA(() => {
    const onNav = (e) => { if (typeof e.detail === 'string') setSection(e.detail); };
    window.addEventListener('nav-to-section', onNav);
    return () => window.removeEventListener('nav-to-section', onNav);
  }, []);

  useEffectA(() => { document.documentElement.dataset.theme = theme; }, [theme]);

  useEffectA(() => {
    document.documentElement.setAttribute('lang', lang);
    document.documentElement.setAttribute('dir', lang === 'ar' ? 'rtl' : 'ltr');
    window.__lang = lang;
    try { localStorage.setItem('fnhsp-lang', lang); } catch (e) {}
  }, [lang]);

  useEffectA(() => {
    if (!window.__api) return;
    let mounted = true;
    window.__api.getUser().then(u => {
      if (!mounted) return;
      setUser(u); setAuthReady(true);
      if (u) {
        // First-ever visit lands in Easy mode → play the Easy tour if unseen.
        if (!seenOnb(u.id, 'easy')) setOnbMode('easy');
      }
    });
    const { data: sub } = window.__api.onAuthChange((session) => {
      if (!mounted) return;
      setUser(session?.user || null); setAuthReady(true);
    });
    return () => { mounted = false; sub?.subscription?.unsubscribe?.(); };
  }, []);

  const finishOnboarding = () => {
    try { if (user && onbMode) localStorage.setItem(onbKey(user.id, onbMode), '1'); } catch (e) {}
    setOnbMode(null);
  };

  if (!authReady) {
    return (
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
        <div className="spinner lg" />
      </div>
    );
  }

  if (!user) return <Login />;

  const renderSection = () => {
    // In Easy mode, Advanced-only sections fall back to Overview.
    if (mode === 'easy' && !EASY_SECTIONS.includes(section)) return <Overview />;
    switch (section) {
      case 'overview':     return <Overview />;
      case 'inbox':        return <Inbox />;
      case 'leads':        return <Patients />;
      case 'appointments': return <Appointments />;
      case 'schedule':     return <DoctorSchedule />;
      case 'today':        return <TodayPatients />;
      case 'analytics':    return <Analytics />;
      case 'swot':         return <Swot />;
      case 'settings':     return <Settings />;
      default:             return <Overview />;
    }
  };

  return (
    <div className="app" data-screen-label={section}>
      <Sidebar current={section} onNav={handleNav} user={user} lang={lang} mode={mode} mobileOpen={mobileNavOpen} onCloseMobile={() => setMobileNavOpen(false)} />
      <main className="main">
        <TopBar section={section} theme={theme} setTheme={setTheme} user={user} lang={lang} setLang={setLang} onToggleMobile={() => setMobileNavOpen(o => !o)} mode={mode} setMode={changeMode} />
        {renderSection()}
      </main>
      {onbMode && <OnboardingOverlay key={onbMode} mode={onbMode} section={section} setSection={setSection} onDone={finishOnboarding} lang={lang} />}
      <LeadTutorialPopup />
    </div>
  );
};

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