function useBoot() {
  const [bundle, setBundle] = React.useState(null);
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => {
    (async () => {
      try {
        const b = await api.me();
        setBundle(b);
      } catch (e) {
        setBundle(null);
      }
      setLoaded(true);
    })();
  }, []);
  return { bundle, loaded, setBundle };
}

function getResetTokenFromUrl() {
  const params = new URLSearchParams(window.location.search);
  const t = params.get('reset');
  return t && /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(t) ? t : null;
}

const App = () => {
  const { bundle: initial, loaded } = useBoot();
  const [screen, setScreen] = React.useState(null);
  const [resetToken, setResetToken] = React.useState(() => getResetTokenFromUrl());
  const [tab, setTab] = React.useState(() => localStorage.getItem('kb.tab') || 'home');

  React.useEffect(()=>{ localStorage.setItem('kb.tab', tab); }, [tab]);

  React.useEffect(() => {
    if (!loaded) return;
    if (resetToken) setScreen('reset');
    else setScreen(initial ? 'app' : 'login');
  }, [loaded, resetToken, initial]);

  if (!loaded || screen === null) {
    return <div className="boot-splash">Загрузка…</div>;
  }

  if (screen === 'reset' && resetToken) {
    return <ResetPasswordScreen
      token={resetToken}
      onDone={()=> {
        window.history.replaceState(null, '', '/');
        setResetToken(null);
        setScreen('login');
      }}
    />;
  }

  return (
    <SessionProvider initialBundle={initial}>
      <AppInner screen={screen} setScreen={setScreen} tab={tab} setTab={setTab}/>
    </SessionProvider>
  );
};

const AppInner = ({ screen, setScreen, tab, setTab }) => {
  const { bundle, setBundle, clear, user, selectedChildId } = useSession();

  const onLoggedIn = (b) => {
    setBundle(b);
    setScreen('app');
    setTab('home');
  };

  const onLogout = async () => {
    try { await api.logout(); } catch {}
    clear();
    setScreen('login');
    setTab('home');
  };

  if (screen === 'login') {
    return <LoginScreen
      onLoggedIn={onLoggedIn}
      onGoRegister={()=> setScreen('register')}
      onGoFaceLogin={()=> setScreen('faceLogin')}
      onGoForgot={()=> setScreen('forgot')}
      onGoPatternLogin={()=> setScreen('patternLogin')}
      onGoEmojiPinLogin={()=> setScreen('emojiPinLogin')}
    />;
  }
  if (screen === 'register') {
    return <RegisterScreen onRegistered={onLoggedIn} onGoLogin={()=> setScreen('login')}/>;
  }
  if (screen === 'faceLogin') {
    return <FaceLoginScreen onLoggedIn={onLoggedIn} onCancel={()=> setScreen('login')}/>;
  }
  if (screen === 'forgot') {
    return <ForgotPasswordScreen onBack={()=> setScreen('login')}/>;
  }
  if (screen === 'patternLogin') {
    return <PatternLoginScreen onLoggedIn={onLoggedIn} onCancel={()=> setScreen('login')}/>;
  }
  if (screen === 'emojiPinLogin') {
    return <EmojiPinLoginScreen onLoggedIn={onLoggedIn} onCancel={()=> setScreen('login')}/>;
  }

  const isParent = user?.role === 'parent';
  const childIdForRatings = isParent ? selectedChildId : user?.id;

  return (
    <RatingsProvider childId={childIdForRatings}>
      <AppShell tab={tab} onTab={setTab} onLogout={onLogout}>
        <TabContent tab={tab} isParent={isParent}/>
      </AppShell>
    </RatingsProvider>
  );
};

const TabContent = ({ tab, isParent }) => {
  if (isParent) {
    if (tab === 'home') return <ParentHome/>;
    if (tab === 'calendar') return <ParentCalendar/>;
    if (tab === 'analytics') return <ParentAnalytics/>;
    if (tab === 'settings') return <FamilySettings/>;
    return <TabStub icon={<IconHome size={28}/>} title="Раздел" subtitle="Не найдено."/>;
  }
  if (tab === 'home') return <ChildHome/>;
  if (tab === 'calendar') return <ParentCalendar readOnly/>;
  if (tab === 'analytics') return <ParentAnalytics readOnly/>;
  if (tab === 'comments') return <ChildComments/>;
  return <TabStub icon={<IconHome size={28}/>} title="Раздел" subtitle="Не найдено."/>;
};

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

if ('serviceWorker' in navigator && location.protocol !== 'file:') {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js').catch(() => {});
  });
}