import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { AuthProvider } from './contexts/AuthContext';
import { ThemeProvider } from './contexts/ThemeContext';
import { ToastProvider } from './contexts/ToastContext';
import { ErrorBoundary } from './components/common/ErrorBoundary';
import { LoadingSpinner } from './components/ui/LoadingSpinner';
import { queryClient } from './lib/queryClient';
import { useAuth } from './contexts/AuthContext';
import { Login } from './pages/Login';
import { Dashboard } from './pages/Dashboard';
import { Users } from './pages/Users';
import Products from './pages/Products';
import { Orders } from './pages/Orders';
import { Reports } from './pages/Reports';
import { Notifications } from './pages/Notifications';
import { Layout } from './components/layout/Layout';

// Roles Pages
import RolesListPage from './pages/roles/roles-list/RolesListPage';
import RoleFormPage from './pages/roles/role-form/RoleFormPage';
import RoleDetailPage from './pages/roles/role-detail/RoleDetailPage';
import RolePermissionsPage from './pages/roles/role-permissions/RolePermissionsPage';

// Admin Users Pages
import AdminUsersListPage from './pages/admin-users/admin-users-list/AdminUsersListPage';
import AdminUserFormPage from './pages/admin-users/admin-user-form/AdminUserFormPage';

// Permissions Pages
import PermissionsListPage from './pages/permissions/permissions-list/PermissionsListPage';
import PermissionFormPage from './pages/permissions/permission-form/PermissionFormPage';

const ProtectedRoute = ({ children }: { children: any }) => {
    const { user, isLoading } = useAuth();

    if (isLoading) {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <LoadingSpinner />
            </div>
        );
    }

    return user ? children : <Navigate to="/login" replace />;
};

const AppRoutes = () => {
    return (
        <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/" element={
                <ProtectedRoute>
                    <Layout />
                </ProtectedRoute>
            }>
                <Route index element={<Dashboard />} />
                <Route path="users" element={<Users />} />
                <Route path="products" element={<Products />} />
                <Route path="orders" element={<Orders />} />
                <Route path="reports" element={<Reports />} />
                <Route path="notifications" element={<Notifications />} />

                {/* Roles Routes */}
                <Route path="roles" element={<RolesListPage />} />
                <Route path="roles/create" element={<RoleFormPage />} />
                <Route path="roles/:id" element={<RoleDetailPage />} />
                <Route path="roles/:id/edit" element={<RoleFormPage />} />
                <Route path="roles/:id/permissions" element={<RolePermissionsPage />} />

                {/* Admin Users Routes */}
                <Route path="admin-users" element={<AdminUsersListPage />} />
                <Route path="admin-users/create" element={<AdminUserFormPage />} />
                <Route path="admin-users/:id/edit" element={<AdminUserFormPage />} />

                {/* Permissions Routes */}
                <Route path="permissions" element={<PermissionsListPage />} />
                <Route path="permissions/create" element={<PermissionFormPage />} />
                <Route path="permissions/:id/edit" element={<PermissionFormPage />} />
            </Route>
        </Routes>
    );
};

const App = () => {
    return (
        <ErrorBoundary>
            <QueryClientProvider client={queryClient}>
                <ThemeProvider>
                    <ToastProvider>
                        <AuthProvider>
                            <Router>
                                <AppRoutes />
                            </Router>
                        </AuthProvider>
                    </ToastProvider>
                </ThemeProvider>
                <ReactQueryDevtools initialIsOpen={false} />
            </QueryClientProvider>
        </ErrorBoundary>
    );
};

export default App;