import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Toaster } from 'sonner';
import { Layout } from './components/Layout/Layout';
import { Dashboard } from './pages/Dashboard';
import { Login } from './pages/Login';
import { SignUp } from './pages/SignUp';
import { EmployeeDirectory } from './pages/Employees';
import { Organization } from './pages/Organization';
import { ProjectList } from './pages/Projects';
import { ProfileSettings } from './pages/ProfileSettings';
import { Tasks } from './pages/Tasks';
import { Clients } from './pages/Clients';
import { CRM } from './pages/CRM';
import { Recruitment } from './pages/Recruitment';
import { Finance } from './pages/Finance';
import { Expenses } from './pages/Expenses';
import { Documents } from './pages/Documents';
import { EngineerManagement } from './pages/Engineers';
import { Operations } from './pages/Operations';
import { Reports } from './pages/Reports';
import { Settings } from './pages/Settings';
import { UsersPage } from './pages/Users';
import BankDetails from './pages/BankDetails';

// Placeholder components for other modules
const Placeholder = ({ title }: { title: string }) => (
  <div className="flex h-[60vh] items-center justify-center rounded-xl border-2 border-dashed border-border">
    <div className="text-center">
      <h2 className="text-2xl font-bold text-muted-foreground">{title} Module</h2>
      <p className="text-muted-foreground">This module is currently under development.</p>
    </div>
  </div>
);

import { AppProvider } from './context/AppContext';
import { AuthProvider, useAuth } from './context/AuthContext';
import { AutoReload } from './components/AutoReload';

const ProtectedRoute = ({ children, permission }: { children: React.ReactNode, permission?: string }) => {
  const { user, loading, hasPermission } = useAuth();

  if (loading) {
    return (
      <div className="flex h-screen items-center justify-center bg-slate-50">
        <div className="h-12 w-12 animate-spin rounded-full border-4 border-primary/30 border-t-primary" />
      </div>
    );
  }

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

  if (permission && !hasPermission(permission)) {
    return <Navigate to="/" replace />;
  }

  return <Layout>{children}</Layout>;
};

export default function App() {
  return (
    <AuthProvider>
      <AppProvider>
        <AutoReload />
        <Router>
          <Toaster position="top-right" richColors />
          <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/signup" element={<SignUp />} />
            <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
            <Route path="/organization" element={<ProtectedRoute permission="hr.view"><Organization /></ProtectedRoute>} />
            <Route path="/employees" element={<ProtectedRoute permission="hr.view"><EmployeeDirectory /></ProtectedRoute>} />
            <Route path="/engineers" element={<ProtectedRoute permission="hr.view"><EngineerManagement /></ProtectedRoute>} />
            <Route path="/projects" element={<ProtectedRoute permission="projects.view"><ProjectList /></ProtectedRoute>} />
            <Route path="/profile" element={<ProtectedRoute><ProfileSettings /></ProtectedRoute>} />
            <Route path="/tasks" element={<ProtectedRoute permission="tasks.view"><Tasks /></ProtectedRoute>} />
            <Route path="/clients" element={<ProtectedRoute permission="crm.view"><Clients /></ProtectedRoute>} />
            <Route path="/crm" element={<ProtectedRoute permission="crm.view"><CRM /></ProtectedRoute>} />
            <Route path="/operations" element={<ProtectedRoute permission="operations.view"><Operations /></ProtectedRoute>} />
            <Route path="/recruitment" element={<ProtectedRoute permission="hr.view"><Recruitment /></ProtectedRoute>} />
            <Route path="/finance" element={<ProtectedRoute permission="finance.view"><Finance /></ProtectedRoute>} />
            <Route path="/expenses" element={<ProtectedRoute permission="finance.view"><Expenses /></ProtectedRoute>} />
            <Route path="/bank-details" element={<ProtectedRoute permission="finance.view"><BankDetails /></ProtectedRoute>} />
            <Route path="/documents" element={<ProtectedRoute permission="documents.view"><Documents /></ProtectedRoute>} />
            <Route path="/reports" element={<ProtectedRoute permission="finance.view"><Reports /></ProtectedRoute>} />
            <Route path="/users" element={<ProtectedRoute permission="settings.view"><UsersPage /></ProtectedRoute>} />
            <Route path="/settings" element={<ProtectedRoute permission="settings.view"><Settings /></ProtectedRoute>} />
          </Routes>
        </Router>
      </AppProvider>
    </AuthProvider>
  );
}