import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { Toaster } from './components/ui/sonner';
import Landing from './pages/Landing';
import Register from './pages/Register';
import Login from './pages/Login';
import VerifyEmail from './pages/VerifyEmail';
import Dashboard from './pages/Dashboard';
import Profile from './pages/Profile';
import Events from './pages/Events';
import EventDetails from './pages/EventDetails';
import Plans from './pages/Plans';
import PaymentSuccess from './pages/PaymentSuccess';
import PaymentCancel from './pages/PaymentCancel';
import AdminDashboard from './pages/admin/AdminDashboard';
import AdminUsers from './pages/admin/AdminUsers';
import AdminUserView from './pages/admin/AdminUserView';
import AdminStaff from './pages/admin/AdminStaff';
import AdminMembers from './pages/admin/AdminMembers';
import AdminEvents from './pages/admin/AdminEvents';
import AdminApprovals from './pages/admin/AdminApprovals';
import AdminPlans from './pages/admin/AdminPlans';
import AdminLayout from './layouts/AdminLayout';
import { AuthProvider, useAuth } from './context/AuthContext';

const PrivateRoute = ({ children, adminOnly = false }) => {
  const { user, loading } = useAuth();
  
  if (loading) {
    return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
  }
  
  if (!user) {
    return <Navigate to="/login" />;
  }
  
  if (adminOnly && user.role !== 'admin') {
    return <Navigate to="/dashboard" />;
  }
  
  return children;
};

function App() {
  return (
    <AuthProvider>
      <BrowserRouter basename="/membership">
        <Routes>
          <Route path="/" element={<Landing />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
          <Route path="/verify-email" element={<VerifyEmail />} />
          <Route path="/plans" element={<Plans />} />
          <Route path="/payment-success" element={<PaymentSuccess />} />
          <Route path="/payment-cancel" element={<PaymentCancel />} />

          <Route path="/dashboard" element={
            <PrivateRoute>
              <Dashboard />
            </PrivateRoute>
          } />
          <Route path="/profile" element={
            <PrivateRoute>
              <Profile />
            </PrivateRoute>
          } />
          <Route path="/events" element={
            <PrivateRoute>
              <Events />
            </PrivateRoute>
          } />
          <Route path="/events/:id" element={
            <PrivateRoute>
              <EventDetails />
            </PrivateRoute>
          } />
          
          <Route path="/admin" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminDashboard />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/staff" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminStaff />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/members" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminMembers />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/users" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminUsers />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/users/:userId" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminUserView />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/events" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminEvents />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/approvals" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminApprovals />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/plans" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminPlans />
              </AdminLayout>
            </PrivateRoute>
          } />
        </Routes>
        <Toaster position="top-right" />
      </BrowserRouter>
    </AuthProvider>
  );
}

export default App;