import { AppLayout } from '@/components/AppLayout'
import { AuthProvider } from '@/components/AuthProvider'
import { ProtectedRoute } from '@/components/ProtectedRoute'
import { MusicPlayerProvider } from '@/contexts/MusicPlayerContext'
import { SocketProvider } from '@/contexts/SocketContext'
import { AccountPage } from '@/pages/AccountPage'
import { AdminSoundsPage } from '@/pages/AdminSoundsPage'
import { DashboardPage } from '@/pages/DashboardPage'
import { LoginPage } from '@/pages/LoginPage'
import { RegisterPage } from '@/pages/RegisterPage'
import { SoundboardPage } from '@/pages/SoundboardPage'
import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router'
import { Toaster } from 'sonner'
import { ThemeProvider } from './components/ThemeProvider'

function App() {
  return (
    <ThemeProvider defaultTheme="dark" storageKey="theme">
      <Toaster />
      <AuthProvider>
        <SocketProvider>
          <MusicPlayerProvider>
            <Router>
              <Routes>
                <Route path="/login" element={<LoginPage />} />
                <Route path="/register" element={<RegisterPage />} />

                {/* Protected routes with layout */}
                <Route
                  path="/dashboard"
                  element={
                    <ProtectedRoute>
                      <AppLayout
                        title="Dashboard"
                        description="Welcome to your dashboard"
                      >
                        <DashboardPage />
                      </AppLayout>
                    </ProtectedRoute>
                  }
                />
                <Route
                  path="/account"
                  element={
                    <ProtectedRoute>
                      <AppLayout
                        title="Account"
                        description="Manage your account settings and preferences"
                      >
                        <AccountPage />
                      </AppLayout>
                    </ProtectedRoute>
                  }
                />
                <Route
                  path="/soundboard"
                  element={
                    <ProtectedRoute>
                      <AppLayout
                        title="Soundboard"
                        description="Play and manage sound effects"
                      >
                        <SoundboardPage />
                      </AppLayout>
                    </ProtectedRoute>
                  }
                />
                <Route
                  path="/admin/sounds"
                  element={
                    <ProtectedRoute requireAdmin>
                      <AppLayout
                        title="Sound Management"
                        description="Scan and normalize sound files"
                      >
                        <AdminSoundsPage />
                      </AppLayout>
                    </ProtectedRoute>
                  }
                />

                <Route
                  path="/"
                  element={<Navigate to="/dashboard" replace />}
                />
                <Route
                  path="*"
                  element={<Navigate to="/dashboard" replace />}
                />
              </Routes>
            </Router>
          </MusicPlayerProvider>
        </SocketProvider>
      </AuthProvider>
    </ThemeProvider>
  )
}

export default App