import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { AuthProvider, ProtectedRoute } from "./hooks/useAuth";
import { SubscriptionProvider } from "./hooks/useSubscription";
import { SecurityProvider } from "./components/SecurityProvider";
import { ErrorBoundary } from "./components/ErrorBoundary";
import { ModuleAccessGuard } from "./components/ModuleAccessGuard";
import CateringSupplierPortal from "./pages/portal/CateringSupplierPortal";
import StaffAcceptInvite from "./pages/StaffAcceptInvite";
import { AppSidebar } from "./components/AppSidebar";
import { AIAssistantProvider } from "./components/AIAssistantProvider";
import { AIAssistantButtons, AIAssistantSidebars } from "./components/AIAssistantToggle";
import { DevModeProvider, useDevMode } from "./hooks/useDevMode";
import { KnowledgeBaseButton } from "./components/KnowledgeBase";
import { PageWidthControl, PageWidthProvider, usePageWidth } from "./components/PageWidthControl";
import { Switch } from "@/components/ui/switch";
import { Code2 } from "lucide-react";
import { toast } from "sonner";

import Index from "./pages/Index";
import { Toaster } from "@/components/ui/toaster";
import NotFound from "./pages/NotFound";
import AIQAAgents from "./pages/admin/AIQAAgents";
import PortalAccessDenied from "./pages/PortalAccessDenied";
import PortalSignIn from "./pages/portal/PortalSignIn";
import PortalAcceptInvite from "./pages/portal/PortalAcceptInvite";
import PortalResetPassword from "./pages/portal/PortalResetPassword";
import Setup from "./pages/Setup";
import Install from "./pages/Install";
import Orders from "./pages/Orders";
import Customers from "./pages/Customers";
import Products from "./pages/Products";
import InventoryManagement from "./pages/InventoryManagement";
import Stores from "./pages/Stores";
import Inbox from "./pages/Inbox";
import Sorting from "./pages/Sorting";
import Kitchen from "./pages/Kitchen";
import Packing from "./pages/Packing";
import Delivery from "./pages/Delivery";
import StaffManagement from "./pages/StaffManagement";
import StaffProfile from "./pages/StaffProfile";
import ScheduleRoster from "./pages/ScheduleRoster";
import StockRelease from "./pages/StockRelease";
import Reporting from "./pages/Reporting";
import Settings from "./pages/Settings";
import Auth from "./pages/Auth";
import AuthCallback from "./pages/AuthCallback";
import CalendarCallback from "./pages/CalendarCallback";
import VenueSupplierPortal from "./pages/VenueSupplierPortal";
import { VenueSupplierAuthProvider, VenueSupplierProtectedRoute } from "./hooks/useVenueSupplierAuth";
import AppLanding from "./pages/AppLanding";
import BakerdockLanding from "./pages/BakerdockLanding";
import Pricing from "./pages/Pricing";
import Solutions from "./pages/Solutions";
import Company from "./pages/Company";
import Resources from "./pages/Resources";
import StaffApp from "./pages/StaffApp";
import StaffInstall from "./pages/StaffInstall";
import CRM from "./pages/CRM";
import CMS from "./pages/CMS";
import Signup from "./pages/Signup";
import OrderManagementSolution from "./pages/solutions/OrderManagement";
import InventorySolution from "./pages/solutions/Inventory";
import StaffSolution from "./pages/solutions/Staff";
import AnalyticsSolution from "./pages/solutions/Analytics";
import SecuritySolution from "./pages/solutions/Security";
import MobileSolution from "./pages/solutions/Mobile";
import Admin from "./pages/Admin";

import SupplierManagement from "./pages/SupplierManagement";
import IngredientsManagement from "./pages/IngredientsManagement";
import RecipeManagement from "./pages/RecipeManagement";
import Payroll from "./pages/Payroll";
import Subscription from "./pages/Subscription";
import SubscriptionSuccess from "./pages/SubscriptionSuccess";
import { RoleProtectedRoute } from "./components/RoleProtectedRoute";
import { SecurityDashboard } from "./components/security/SecurityDashboard";
import SupplierPO from "./pages/SupplierPO";
import SupplierPortal from "./pages/SupplierPortal";

import CateringProducts from "./pages/catering/CateringProducts";
import CateringPackages from "./pages/catering/CateringPackages";
import CateringThemes from "./pages/catering/CateringThemes";
import CateringVenues from "./pages/catering/CateringVenues";
import CateringCustomers from "./pages/catering/CateringCustomers";
import CateringSuppliers from "./pages/catering/CateringSuppliers";
import CateringContacts from "./pages/catering/CateringContacts";

import CateringProposals from "./pages/catering/CateringProposals";
import CateringEquipment from "./pages/catering/CateringEquipment";
import CateringOverview from "./pages/catering/CateringOverview";
import ProposalBuilder from "./pages/catering/ProposalBuilder";
import ProposalView from "./pages/public/ProposalView";
import WeddingPlannerApp from "./pages/public/WeddingPlannerApp";
import ProductionOverview from "./pages/production/ProductionOverview";
import DeliveryStatus from "./pages/production/DeliveryStatus";
import DeliveryReport from "./pages/production/DeliveryReport";

const queryClient = new QueryClient();

const AppHeader = () => {
  const { isDevMode, toggleDevMode, canAccessDevMode } = useDevMode();

  const handleToggle = () => {
    toggleDevMode();
    toast.success(isDevMode ? 'Developer mode disabled' : 'Developer mode enabled');
  };

  return (
    <header className="h-12 flex items-center justify-between border-b bg-background px-4">
      <SidebarTrigger />
      <div className="flex items-center gap-4">
        <KnowledgeBaseButton />
        {canAccessDevMode && (
          <div className="flex items-center gap-2 border-l pl-4">
            <Code2 className="h-4 w-4 text-muted-foreground" />
            <span className="text-xs text-muted-foreground hidden sm:inline">Dev</span>
            <Switch 
              checked={isDevMode} 
              onCheckedChange={handleToggle}
              className="data-[state=checked]:bg-amber-500"
            />
            {isDevMode && (
              <span className="text-xs font-medium text-amber-600 hidden sm:inline">ON</span>
            )}
          </div>
        )}
        <PageWidthControl />
        <AIAssistantButtons />
      </div>
    </header>
  );
};

const ProtectedLayout = ({ children }: { children: React.ReactNode }) => {
  const { isExpanded } = usePageWidth();
  return (
  <ProtectedRoute>
    <AppSidebar />
    <div className="min-w-0 flex-1 flex flex-col">
      <AppHeader />
      <main className="app-main min-w-0 flex-1" data-page-width={isExpanded ? "full" : "standard"}>
        <ModuleAccessGuard>{children}</ModuleAccessGuard>
      </main>
    </div>
    <AIAssistantSidebars />
  </ProtectedRoute>
  );
};

// Dev mode route wrapper
const DevModeRoute = ({ children }: { children: React.ReactNode }) => {
  const { isDevMode, canAccessDevMode } = useDevMode();
  
  if (!canAccessDevMode || !isDevMode) {
    return <Navigate to="/" replace />;
  }
  
  return <>{children}</>;
};

const App = () => (
  <ErrorBoundary>
    <QueryClientProvider client={queryClient}>
      <SecurityProvider>
        <AuthProvider>
          <SubscriptionProvider>
            <DevModeProvider>
            <AIAssistantProvider>
              <TooltipProvider>
                <Toaster />
                <Sonner />
                <BrowserRouter>
              <PageWidthProvider>
              <SidebarProvider>
                <div className="min-h-screen flex w-full">
                    <Routes>
                      {/* Public routes */}
                      <Route path="/auth" element={<Auth />} />
                      <Route path="/portal-access-denied" element={<PortalAccessDenied />} />
                     <Route path="/auth/callback" element={<AuthCallback />} />
                     <Route path="/calendar-callback" element={<CalendarCallback />} />
                     
                     {/* Venue Supplier Portal routes */}
                     <Route path="/venue-portal/auth" element={<Navigate to="/portal/sign-in" replace />} />
                     <Route path="/portal" element={<Navigate to="/portal/sign-in" replace />} />
                     <Route path="/portal/sign-in" element={<PortalSignIn />} />
                     <Route path="/portal/accept-invite" element={<PortalAcceptInvite />} />
                     <Route path="/portal/reset-password" element={<PortalResetPassword />} />
                     <Route path="/portal/supplier/:supplierId" element={<SupplierPortal />} />
                     <Route path="/venue-portal/:venueId" element={
                       <VenueSupplierAuthProvider>
                         <VenueSupplierProtectedRoute>
                           <VenueSupplierPortal />
                         </VenueSupplierProtectedRoute>
                       </VenueSupplierAuthProvider>
                     } />
                     
                     <Route path="/signup" element={<Signup />} />
                     <Route path="/accept-invite" element={<StaffAcceptInvite />} />
                     <Route path="/portal/catering/:eventSupplierId" element={<CateringSupplierPortal />} />
                    <Route path="/app-landing" element={<AppLanding />} />
                    <Route path="/landing" element={<BakerdockLanding />} />
                    <Route path="/pricing" element={<Pricing />} />
                    <Route path="/solutions" element={<Solutions />} />
                    <Route path="/solutions/order-management" element={<OrderManagementSolution />} />
                    <Route path="/solutions/inventory" element={<InventorySolution />} />
                    <Route path="/solutions/staff" element={<StaffSolution />} />
                    <Route path="/solutions/analytics" element={<AnalyticsSolution />} />
                    <Route path="/solutions/security" element={<SecuritySolution />} />
                    <Route path="/solutions/mobile" element={<MobileSolution />} />
                    <Route path="/company" element={<Company />} />
                    <Route path="/resources" element={<Resources />} />
                    <Route path="/staff-app" element={<StaffApp />} />
                    <Route path="/staff-install" element={<StaffInstall />} />
                    <Route path="/crm" element={<CRM />} />
                    <Route path="/cms" element={<CMS />} />
                    <Route path="/admin" element={<Admin />} />
                    <Route path="/supplier/po/:token" element={<SupplierPO />} />
                    <Route path="/supplier/portal/:token" element={<Navigate to="/portal/sign-in?legacy=1" replace />} />
                    
                    {/* Public wedding planner routes */}
                    <Route path="/wedding-planner" element={<WeddingPlannerApp />} />
                    
                    {/* Public proposal view */}
          <Route path="/proposal/:proposalUrl" element={<ProposalView />} />
          <Route path="/proposals/:proposalUrl" element={<ProposalView />} />
                    
                    <Route path="/subscription" element={
                      <ProtectedLayout>
                        <Subscription />
                      </ProtectedLayout>
                    } />
                    <Route path="/subscription-success" element={
                      <ProtectedLayout>
                        <SubscriptionSuccess />
                      </ProtectedLayout>
                    } />
                    
                    {/* Protected routes */}
                    <Route path="/" element={
                      <ProtectedLayout>
                        <Index />
                      </ProtectedLayout>
                    } />
                    <Route path="/setup" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <Setup />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/install" element={
                      <ProtectedLayout>
                        <Install />
                      </ProtectedLayout>
                    } />
                    <Route path="/orders" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff', 'delivery_person']}>
                          <Orders />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/customers" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <Customers />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/products" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <Products />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/inbox" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff', 'delivery_person']}>
                          <Inbox />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    {/* Production routes */}
                    <Route path="/production/overview" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff', 'delivery_person']}>
                          <ProductionOverview />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/production/orders-planning" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <Sorting />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/sorting" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <Sorting />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/production/kitchen" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <Kitchen />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/kitchen" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <Kitchen />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/inventory" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <InventoryManagement />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/stores" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <Stores />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/production/inventory-release" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <StockRelease />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/stock-release" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <StockRelease />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/production/packing" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <Packing />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/packing" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <Packing />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/production/delivery" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'delivery_person']}>
                          <Delivery />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/delivery" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'delivery_person']}>
                          <Delivery />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/production/delivery-status" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'delivery_person']}>
                          <DeliveryStatus />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/production/delivery-report" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'delivery_person']}>
                          <DeliveryReport />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/staff" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <StaffManagement />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/staff/:staffId" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <StaffProfile />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/staff/schedule-roster" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <ScheduleRoster />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/reporting" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <Reporting />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/settings" element={
                      <ProtectedLayout>
                        <Settings />
                      </ProtectedLayout>
                    } />
                    <Route path="/security" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <SecurityDashboard />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/supplier-management" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'store_manager']}>
                          <SupplierManagement />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/ingredients" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'store_manager']}>
                          <IngredientsManagement />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/recipe-management" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin', 'kitchen_staff']}>
                          <RecipeManagement />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/payroll" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <Payroll />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    
                    {/* Catering routes */}
                    <Route path="/catering/overview" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <CateringOverview />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/catering/products" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <CateringProducts />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/catering/packages" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <CateringPackages />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/catering/themes" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <CateringThemes />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/catering/venues" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <CateringVenues />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/catering/customers" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <CateringCustomers />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/catering/suppliers" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <CateringSuppliers />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    <Route path="/catering/contacts" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <CateringContacts />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />

                    <Route path="/catering/equipment" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <CateringEquipment />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />

                    <Route path="/catering/proposals" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <CateringProposals />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />

                    <Route path="/catering/proposal-builder" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <ProposalBuilder />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    
                    <Route path="/catering/proposal-builder/:proposalId" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <ProposalBuilder />
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    
                    {/* Dev Mode Routes */}
                    <Route path="/qa-agents" element={
                      <ProtectedLayout>
                        <RoleProtectedRoute allowedRoles={['admin']}>
                          <DevModeRoute>
                            <AIQAAgents />
                          </DevModeRoute>
                        </RoleProtectedRoute>
                      </ProtectedLayout>
                    } />
                    
                      {/* 404 route */}
                      <Route path="*" element={<NotFound />} />
                    </Routes>
                </div>
              </SidebarProvider>
              </PageWidthProvider>
              </BrowserRouter>
          </TooltipProvider>
        </AIAssistantProvider>
        </DevModeProvider>
      </SubscriptionProvider>
      </AuthProvider>
    </SecurityProvider>
  </QueryClientProvider>
  </ErrorBoundary>
);

export default App;