import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from './context/AuthContext';
import { AppProvider } from './context/AppContext';
import { MessagingProvider } from './context/MessagingContext';
import Layout from './components/Layout/Layout';
import ErrorBoundary from './components/ErrorBoundary';
import ProtectedRoute from './components/ProtectedRoute';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import Directory from './pages/Directory';
import Conversations from './pages/Conversations';
import IndividualMessaging from './pages/IndividualMessaging';
import Profile from './pages/Profile';
import Admin from './pages/Admin';
import FeedbackForm from './pages/FeedbackForm';
import Settings from './pages/Settings';
import RoleManagement from './pages/RoleManagement';

const AppRoutes: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/*"
          element={
            <ProtectedRoute>
              <Layout />
            </ProtectedRoute>
          }
        >
          <Route path="dashboard" element={
            <ProtectedRoute permission="dashboard.view">
              <Dashboard />
            </ProtectedRoute>
          } />
          <Route path="directory" element={
            <ProtectedRoute permission="directory.access">
              <Directory />
            </ProtectedRoute>
          } />
          <Route path="conversations" element={
            <ProtectedRoute permission="conversations.access">
              <Conversations />
            </ProtectedRoute>
          } />
          <Route path="individual-messaging" element={
            <ProtectedRoute permission="conversations.access">
              <ErrorBoundary>
                <IndividualMessaging />
              </ErrorBoundary>
            </ProtectedRoute>
          } />
          <Route path="profile" element={
            <ProtectedRoute permission="profile_page.access">
              <Profile />
            </ProtectedRoute>
          } />
          <Route path="admin" element={
            <ProtectedRoute permissions={['admin.access', 'management.access', 'system.admin']} requireAll={false}>
              <ErrorBoundary>
                <Admin />
              </ErrorBoundary>
            </ProtectedRoute>
          } />
          <Route path="feedback" element={<FeedbackForm />} />
          <Route path="settings" element={
            <ProtectedRoute permission="settings.access">
              <Settings />
            </ProtectedRoute>
          } />
          <Route path="role-management" element={
            <ProtectedRoute permissions={['role.read', 'permission.read']} requireAll={false}>
              <RoleManagement />
            </ProtectedRoute>
          } />
          <Route path="" element={<Navigate to="/dashboard" replace />} />
        </Route>
      </Routes>
    </Router>
  );
};

function App() {
  return (
    <AuthProvider>
      <AppProvider>
        <MessagingProvider>
          <AppRoutes />
        </MessagingProvider>
      </AppProvider>
    </AuthProvider>
  );
}

export default App;