import { useState } from 'react'
import { AuthProvider, useAuth } from './context/AuthContext'
import AuthScreen from './components/auth/AuthScreen'
import BottomNav from './BottomNav'
import Feed   from './pages/Feed'
import Game   from './pages/Game'
import Pro    from './pages/Pro'
import Profil from './pages/Profil'

const PAGES = { feed: Feed, game: Game, pro: Pro, profil: Profil }

function AppContent() {
  const { user, loading } = useAuth()
  const [page, setPage] = useState('feed')

  if (loading) {
    return (
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F5F0E8' }}>
        <div style={{ width: '32px', height: '32px', border: '2px solid #E2DAD0', borderTopColor: '#5C7A5E', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />
        <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
      </div>
    )
  }

  if (!user || !user.username || !user.language_native || !user.language_target) {
    return <AuthScreen />
  }

  const PageComponent = PAGES[page] || Feed

  return (
    <div style={{ minHeight: '100vh', background: '#F5F0E8', paddingBottom: '72px' }}>
      <PageComponent />
      <BottomNav active={page} onNavigate={setPage} />
    </div>
  )
}

export default function App() {
  return (
    <AuthProvider>
      <AppContent />
    </AuthProvider>
  )
}
