import React, { useEffect } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useAuth } from './hooks/useAuth';
import Layout from './components/Layout';
import Login from './pages/Login';
import AdminDashboard from './pages/AdminDashboard';
import ManagerDashboard from './pages/ManagerDashboard';
import EmployeeDashboard from './pages/EmployeeDashboard';
import Tasks from './pages/Tasks';
import Documents from './pages/Documents';
import Analytics from './pages/Analytics';
import Reports from './pages/Reports';
import Settings from './pages/Settings';
import Landing from './pages/Landing';
import LoadingSpinner from './components/LoadingSpinner';

function App() {
  const { user, loading } = useAuth();

  if (loading) {
    return <LoadingSpinner />;
  }

  return (
    <Routes>
      <Route path="/" element={<Landing />} />
      <Route 
        path="/login" 
        element={!user ? <Login /> : <Navigate to={`/${user.role}`} replace />} 
      />
      <Route path="/" element={user ? <Layout /> : <Navigate to="/login" replace />}>
        <Route path="admin" element={user?.role === 'admin' ? <AdminDashboard /> : <Navigate to="/login" replace />} />
        <Route path="manager" element={user?.role === 'manager' ? <ManagerDashboard /> : <Navigate to="/login" replace />} />
        <Route path="employee" element={user?.role === 'employee' ? <EmployeeDashboard /> : <Navigate to="/login" replace />} />
        <Route path="tasks" element={user ? <Tasks /> : <Navigate to="/login" replace />} />
        <Route path="documents" element={user ? <Documents /> : <Navigate to="/login" replace />} />
        <Route path="analytics" element={user?.role !== 'employee' ? <Analytics /> : <Navigate to="/login" replace />} />
        <Route path="reports" element={user?.role !== 'employee' ? <Reports /> : <Navigate to="/login" replace />} />
        <Route path="settings" element={user ? <Settings /> : <Navigate to="/login" replace />} />
      </Route>
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
}

export default App;