import { useState } from 'react';
import { MobileShell, type MobileTab } from './components/mobile-shell';
import { LoginScreen } from './features/auth/login-screen';
import { ChatsScreen } from './features/chat/chats-screen';
import { SecurityScreen } from './features/security/security-screen';
import { TotpScreen } from './features/totp/totp-screen';
import { MobileAuthProvider, useMobileAuth } from './lib/auth';

function AppContent() {
  const { isAuthenticated } = useMobileAuth();
  const [activeTab, setActiveTab] = useState<MobileTab>('security');

  if (!isAuthenticated) {
    return <LoginScreen />;
  }

  return (
    <MobileShell activeTab={activeTab} onTabChange={setActiveTab}>
      {activeTab === 'chats' ? <ChatsScreen /> : null}
      {activeTab === 'totp' ? <TotpScreen /> : null}
      {activeTab === 'security' ? <SecurityScreen /> : null}
    </MobileShell>
  );
}

export function App() {
  return (
    <MobileAuthProvider>
      <AppContent />
    </MobileAuthProvider>
  );
}