import { useState } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { useAuth } from '@/hooks/useAuth'
import { AppLayout } from '@/components/AppLayout'
import { LoginPage } from '@/pages/LoginPage'
import { RegisterPage } from '@/pages/RegisterPage'
import { DashboardPage } from '@/pages/DashboardPage'
import { CategoriesPage } from '@/pages/CategoriesPage'
import { SettingsPage } from '@/pages/SettingsPage'
import { TemplatePage } from '@/pages/TemplatePage'
import { QuickAddPage } from '@/pages/QuickAddPage'
import '@/i18n'

export default function App() {
  const auth = useAuth()
  const [showRegister, setShowRegister] = useState(false)

  if (auth.loading) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="text-muted-foreground">Loading...</div>
      </div>
    )
  }

  if (!auth.user) {
    return showRegister ? (
      <RegisterPage auth={auth} onToggle={() => setShowRegister(false)} />
    ) : (
      <LoginPage auth={auth} onToggle={() => setShowRegister(true)} />
    )
  }

  return (
    <BrowserRouter>
      <AppLayout auth={auth}>
        <Routes>
          <Route path="/" element={<DashboardPage />} />
          <Route path="/categories" element={<CategoriesPage />} />
          <Route path="/template" element={<TemplatePage />} />
          <Route path="/quick-add" element={<QuickAddPage />} />
          <Route path="/settings" element={<SettingsPage user={auth.user} onUpdate={auth.refetch} />} />
        </Routes>
      </AppLayout>
    </BrowserRouter>
  )
}