import { Navigate, Route, Routes } from "react-router-dom";
import { AppShellLayout } from "../layouts/AppShellLayout";
import { AuthLayout } from "../layouts/AuthLayout";
import { AuditLogsPage } from "../pages/AuditLogsPage";
import { ChangePasswordPage } from "../pages/ChangePasswordPage";
import { DashboardPage } from "../pages/DashboardPage";
import { DelegationsPage } from "../pages/DelegationsPage";
import { ForbiddenPage } from "../pages/ForbiddenPage";
import { InvoicePoolPage } from "../pages/InvoicePoolPage";
import { LoginPage } from "../pages/LoginPage";
import { NotificationsPage } from "../pages/NotificationsPage";
import { NotFoundPage } from "../pages/NotFoundPage";
import { ProfilePage } from "../pages/ProfilePage";
import { ReimbursementDetailPage } from "../pages/ReimbursementDetailPage";
import { ReimbursementsPage } from "../pages/ReimbursementsPage";
import { UserManagementPage } from "../pages/UserManagementPage";
import { WorkflowTaskDetailPage } from "../pages/WorkflowTaskDetailPage";
import { WorkflowTasksPage } from "../pages/WorkflowTasksPage";
import { GuestOnly, RequireAuth, RequirePermission } from "./guards";

export function AppRouter() {
  return (
    <Routes>
      <Route
        path="/login"
        element={
          <GuestOnly>
            <AuthLayout />
          </GuestOnly>
        }
      >
        <Route index element={<LoginPage />} />
      </Route>

      <Route
        path="/change-password"
        element={
          <RequireAuth>
            <AuthLayout />
          </RequireAuth>
        }
      >
        <Route index element={<ChangePasswordPage />} />
      </Route>

      <Route
        path="/"
        element={
          <RequireAuth>
            <AppShellLayout />
          </RequireAuth>
        }
      >
        <Route index element={<Navigate to="/dashboard" replace />} />
        <Route path="dashboard" element={<DashboardPage />} />

        <Route
          path="reimbursements"
          element={
            <RequirePermission anyOf={["expense.view_own", "expense.view_all"]}>
              <ReimbursementsPage />
            </RequirePermission>
          }
        />

        <Route
          path="reimbursements/:reimbursementId"
          element={
            <RequirePermission anyOf={["expense.view_own", "expense.view_all"]}>
              <ReimbursementDetailPage />
            </RequirePermission>
          }
        />

        <Route
          path="workflow/tasks"
          element={
            <RequirePermission anyOf={["expense.approve"]}>
              <WorkflowTasksPage />
            </RequirePermission>
          }
        />

        <Route
          path="workflow/tasks/:taskId"
          element={
            <RequirePermission anyOf={["expense.approve"]}>
              <WorkflowTaskDetailPage />
            </RequirePermission>
          }
        />

        <Route
          path="invoice-pool"
          element={
            <RequirePermission anyOf={["invoice.upload", "invoice.view_own", "invoice.manage"]}>
              <InvoicePoolPage />
            </RequirePermission>
          }
        />

        <Route path="notifications" element={<NotificationsPage />} />

        <Route
          path="audit-logs"
          element={
            <RequirePermission anyOf={["system.audit.view"]}>
              <AuditLogsPage />
            </RequirePermission>
          }
        />

        <Route
          path="delegations"
          element={
            <RequirePermission anyOf={["expense.proxy_manage"]}>
              <DelegationsPage />
            </RequirePermission>
          }
        />

        <Route
          path="system/users"
          element={
            <RequirePermission anyOf={["system.users"]}>
              <UserManagementPage />
            </RequirePermission>
          }
        />

        <Route path="settings/profile" element={<ProfilePage />} />
      </Route>

      <Route path="/403" element={<ForbiddenPage />} />
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}