import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
import { permissions } from "@mrp/shared";

import { AppShell } from "./components/AppShell";
import { ProtectedRoute } from "./components/ProtectedRoute";
import { AuthProvider } from "./auth/AuthProvider";
import { DashboardPage } from "./modules/dashboard/DashboardPage";
import { LoginPage } from "./modules/login/LoginPage";
import { CompanySettingsPage } from "./modules/settings/CompanySettingsPage";
import { CrmDetailPage } from "./modules/crm/CrmDetailPage";
import { CrmFormPage } from "./modules/crm/CrmFormPage";
import { CustomersPage } from "./modules/crm/CustomersPage";
import { VendorsPage } from "./modules/crm/VendorsPage";
import { GanttPage } from "./modules/gantt/GanttPage";
import { InventoryDetailPage } from "./modules/inventory/InventoryDetailPage";
import { InventoryFormPage } from "./modules/inventory/InventoryFormPage";
import { InventoryItemsPage } from "./modules/inventory/InventoryItemsPage";
import { ThemeProvider } from "./theme/ThemeProvider";
import "./index.css";

const queryClient = new QueryClient();

const router = createBrowserRouter([
  { path: "/login", element: <LoginPage /> },
  {
    element: <ProtectedRoute />,
    children: [
      {
        element: <AppShell />,
        children: [
          { path: "/", element: <DashboardPage /> },
          {
            element: <ProtectedRoute requiredPermissions={[permissions.companyRead]} />,
            children: [{ path: "/settings/company", element: <CompanySettingsPage /> }],
          },
          {
            element: <ProtectedRoute requiredPermissions={[permissions.crmRead]} />,
            children: [
              { path: "/crm/customers", element: <CustomersPage /> },
              { path: "/crm/customers/:customerId", element: <CrmDetailPage entity="customer" /> },
              { path: "/crm/vendors", element: <VendorsPage /> },
              { path: "/crm/vendors/:vendorId", element: <CrmDetailPage entity="vendor" /> },
            ],
          },
          {
            element: <ProtectedRoute requiredPermissions={[permissions.inventoryRead]} />,
            children: [
              { path: "/inventory/items", element: <InventoryItemsPage /> },
              { path: "/inventory/items/:itemId", element: <InventoryDetailPage /> },
            ],
          },
          {
            element: <ProtectedRoute requiredPermissions={[permissions.crmWrite]} />,
            children: [
              { path: "/crm/customers/new", element: <CrmFormPage entity="customer" mode="create" /> },
              { path: "/crm/customers/:customerId/edit", element: <CrmFormPage entity="customer" mode="edit" /> },
              { path: "/crm/vendors/new", element: <CrmFormPage entity="vendor" mode="create" /> },
              { path: "/crm/vendors/:vendorId/edit", element: <CrmFormPage entity="vendor" mode="edit" /> },
            ],
          },
          {
            element: <ProtectedRoute requiredPermissions={[permissions.inventoryWrite]} />,
            children: [
              { path: "/inventory/items/new", element: <InventoryFormPage mode="create" /> },
              { path: "/inventory/items/:itemId/edit", element: <InventoryFormPage mode="edit" /> },
            ],
          },
          {
            element: <ProtectedRoute requiredPermissions={[permissions.ganttRead]} />,
            children: [{ path: "/planning/gantt", element: <GanttPage /> }],
          },
        ],
      },
    ],
  },
  { path: "*", element: <Navigate to="/" replace /> },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ThemeProvider>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <RouterProvider router={router} />
        </AuthProvider>
      </QueryClientProvider>
    </ThemeProvider>
  </React.StrictMode>
);