tabungin/apps/web/src/App.tsx

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { useState, useEffect } from 'react'
import { AuthProvider, useAuth } from './contexts/AuthContext'
import { LanguageProvider } from './contexts/LanguageContext'
import { ThemeProvider } from './components/ThemeProvider'
import { Toaster } from './components/ui/sonner'
import { Dashboard } from './components/Dashboard'
import { Login } from './components/pages/Login'
import { Register } from './components/pages/Register'
import { OtpVerification } from './components/pages/OtpVerification'
import { AuthCallback } from './components/pages/AuthCallback'
import { MaintenancePage } from './components/pages/MaintenancePage'
import { AdminLayout } from './components/admin/AdminLayout'
import { AdminDashboard } from './components/admin/pages/AdminDashboard'
import { AdminPlans } from './components/admin/pages/AdminPlans'
import { AdminPayments } from './components/admin/pages/AdminPayments'
import { AdminUsers } from './components/admin/pages/AdminUsers'
import { AdminSettings } from './components/admin/pages/AdminSettingsNew'
import { Profile } from './components/pages/Profile'
import { Loader2 } from 'lucide-react'
import { setupAxiosInterceptors } from './utils/axiosSetup'

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth()

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
        <div className="text-center">
          <Loader2 className="h-12 w-12 animate-spin text-blue-600 mx-auto" />
          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading...</p>
        </div>
      </div>
    )
  }

  if (!user) {
    return <Navigate to="/auth/login" replace />
  }

  return <>{children}</>
}

function PublicRoute({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth()

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
      </div>
    )
  }

  if (user) {
    // Redirect based on role
    const redirectTo = user.role === 'admin' ? '/admin' : '/'
    return <Navigate to={redirectTo} replace />
  }

  return <>{children}</>
}

export default function App() {
  const [maintenanceMode, setMaintenanceMode] = useState(false)
  const [maintenanceMessage, setMaintenanceMessage] = useState('')

  useEffect(() => {
    // Setup axios interceptor for maintenance mode
    setupAxiosInterceptors((message) => {
      setMaintenanceMessage(message)
      setMaintenanceMode(true)
    })
  }, [])

  // Show maintenance page if maintenance mode is active
  if (maintenanceMode) {
    return (
      <ThemeProvider defaultTheme="light" storageKey="tabungin-ui-theme">
        <MaintenancePage message={maintenanceMessage} />
      </ThemeProvider>
    )
  }

  return (
    <BrowserRouter>
      <ThemeProvider defaultTheme="light" storageKey="tabungin-ui-theme">
        <LanguageProvider>
          <AuthProvider>
            <Toaster />
            <Routes>
            {/* Public Routes */}
            <Route path="/auth/login" element={<PublicRoute><Login /></PublicRoute>} />
            <Route path="/auth/register" element={<PublicRoute><Register /></PublicRoute>} />
            <Route path="/auth/otp" element={<OtpVerification />} />
            <Route path="/auth/callback" element={<AuthCallback />} />

            {/* Admin Routes */}
            <Route path="/admin" element={<ProtectedRoute><AdminLayout /></ProtectedRoute>}>
              <Route index element={<AdminDashboard />} />
              <Route path="plans" element={<AdminPlans />} />
              <Route path="payments" element={<AdminPayments />} />
              <Route path="users" element={<AdminUsers />} />
              <Route path="profile" element={<Profile />} />
              <Route path="settings" element={<AdminSettings />} />
            </Route>

            {/* Protected Routes */}
            <Route path="/*" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
          </Routes>
          </AuthProvider>
        </LanguageProvider>
      </ThemeProvider>
    </BrowserRouter>
  )
}