import { Routes, Route, Navigate } from 'react-router-dom'
import { useAuthStore } from '@/stores/authStore'
import { useFeatureFlags } from '@/hooks/useFeatureFlags'
import LoginPage from '@/pages/LoginPage'
import DashboardPage from '@/pages/DashboardPage'
import PacksPage from '@/pages/PacksPage'
import UsersPage from '@/pages/UsersPage'
import ThemesPage from '@/pages/ThemesPage'
import RoomsPage from '@/pages/RoomsPage'
import FeatureFlagsPage from '@/pages/FeatureFlagsPage'
import Layout from '@/components/layout/Layout'
import { TokenRefreshProvider } from '@/components/TokenRefreshProvider'

function App() {
  const { isAuthenticated } = useAuthStore()
  const { isThemesEnabled } = useFeatureFlags()

  return (
    <TokenRefreshProvider>
      <div className="min-h-screen bg-background">
        <Routes>
          <Route
            path="/login"
            element={isAuthenticated ? <Navigate to="/" replace /> : <LoginPage />}
          />
          <Route
            path="/*"
            element={
              isAuthenticated ? (
                <Layout>
                  <Routes>
                    <Route path="/" element={<DashboardPage />} />
                    <Route path="/packs" element={<PacksPage />} />
                    <Route path="/users" element={<UsersPage />} />
                    {isThemesEnabled() && <Route path="/themes" element={<ThemesPage />} />}
                    <Route path="/rooms" element={<RoomsPage />} />
                    <Route path="/settings" element={<FeatureFlagsPage />} />
                  </Routes>
                </Layout>
              ) : (
                <Navigate to="/login" replace />
              )
            }
          />
        </Routes>
      </div>
    </TokenRefreshProvider>
  )
}

export default App