import { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import { ProgressSpinner } from 'primereact/progressspinner';
import AppLayout from '@/core/components/AppLayout';
import AuthGuard from '@/core/components/AuthGuard';
import NotFoundView from '@/core/components/NotFoundView';

// Lazy-loaded views
const LoginView = lazy(() => import('@/modules/auth/views/LoginView'));
const ForgotPasswordView = lazy(() => import('@/modules/auth/views/ForgotPasswordView'));
const ChangePasswordView = lazy(() => import('@/modules/auth/views/ChangePasswordView'));
const DashboardView = lazy(() => import('@/modules/dashboard/views/DashboardView'));
const TimesheetWeekView = lazy(() => import('@/modules/timesheet/views/TimesheetWeekView'));
const TimesheetHistoryView = lazy(() => import('@/modules/timesheet/views/TimesheetHistoryView'));
const TimesheetUploadView = lazy(() => import('@/modules/timesheet/views/TimesheetUploadView'));
const ApprovalPendingView = lazy(() => import('@/modules/approval/views/ApprovalPendingView'));
const ApprovalHistoryView = lazy(() => import('@/modules/approval/views/ApprovalHistoryView'));
const ProjectListView = lazy(() => import('@/modules/project/views/ProjectListView'));
const ProjectDetailView = lazy(() => import('@/modules/project/views/ProjectDetailView'));
const WbsTreeView = lazy(() => import('@/modules/wbs/views/WbsTreeView'));
const TealListView = lazy(() => import('@/modules/teal/views/TealListView'));
const ReportView = lazy(() => import('@/modules/report/views/ReportView'));
const UserListView = lazy(() => import('@/modules/user/views/UserListView'));
const UserDetailView = lazy(() => import('@/modules/user/views/UserDetailView'));
const SettingsView = lazy(() => import('@/modules/settings/views/SettingsView'));

function SuspenseWrapper({ children }: { children: React.ReactNode }) {
  return (
    <Suspense fallback={<div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}><ProgressSpinner /></div>}>
      {children}
    </Suspense>
  );
}

export const router = createBrowserRouter([
  // Auth routes (no layout)
  { path: '/login', element: <SuspenseWrapper><LoginView /></SuspenseWrapper> },
  { path: '/forgot-password', element: <SuspenseWrapper><ForgotPasswordView /></SuspenseWrapper> },

  // Protected routes (with layout)
  {
    path: '/',
    element: (
      <AuthGuard>
        <AppLayout />
      </AuthGuard>
    ),
    children: [
      { index: true, element: <Navigate to="/dashboard" replace /> },
      { path: 'dashboard', element: <SuspenseWrapper><DashboardView /></SuspenseWrapper> },
      { path: 'change-password', element: <SuspenseWrapper><ChangePasswordView /></SuspenseWrapper> },
      { path: 'timesheets', element: <SuspenseWrapper><TimesheetWeekView /></SuspenseWrapper> },
      { path: 'timesheets/history', element: <SuspenseWrapper><TimesheetHistoryView /></SuspenseWrapper> },
      { path: 'timesheets/upload', element: <SuspenseWrapper><TimesheetUploadView /></SuspenseWrapper> },
      { path: 'approvals', element: <SuspenseWrapper><ApprovalPendingView /></SuspenseWrapper> },
      { path: 'approvals/history', element: <SuspenseWrapper><ApprovalHistoryView /></SuspenseWrapper> },
      { path: 'projects', element: <SuspenseWrapper><ProjectListView /></SuspenseWrapper> },
      { path: 'projects/:id', element: <SuspenseWrapper><ProjectDetailView /></SuspenseWrapper> },
      { path: 'wbs', element: <SuspenseWrapper><WbsTreeView /></SuspenseWrapper> },
      { path: 'teal', element: <SuspenseWrapper><TealListView /></SuspenseWrapper> },
      { path: 'reports', element: <SuspenseWrapper><ReportView /></SuspenseWrapper> },
      { path: 'users', element: <SuspenseWrapper><UserListView /></SuspenseWrapper> },
      { path: 'users/:id', element: <SuspenseWrapper><UserDetailView /></SuspenseWrapper> },
      { path: 'settings', element: <SuspenseWrapper><SettingsView /></SuspenseWrapper> },
      { path: '*', element: <NotFoundView /> },
    ],
  },
]);
