import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ROUTES } from '@/shared/constants/routes';
import { AppRoute } from '@/features/auth/components/AppRoute';
import { ProtectedRoute } from '@/features/auth/components/ProtectedRoute';
import { PERMISSIONS } from '@/features/auth/constants/permissions';

// Lazy-loaded pages
const DashboardPage = React.lazy(() => import('@/features/dashboard/pages/DashboardPage'));
const LoginPage = React.lazy(() => import('@/features/auth/pages/LoginPage'));
const MagicLinkPage = React.lazy(() => import('@/features/auth/pages/MagicLinkPage'));
const AcceptInvitePage = React.lazy(() => import('@/features/auth/pages/AcceptInvitePage'));
const TicketsPage = React.lazy(() => import('@/features/tickets/pages/TicketsPage'));
const TicketDetailPage = React.lazy(() => import('@/features/tickets/pages/TicketDetailPage'));
const CreateTicketPage = React.lazy(() => import('@/features/tickets/pages/CreateTicketPage'));
const SettingsPage = React.lazy(() => import('@/features/settings/pages/SettingsPage'));
const SearchPage = React.lazy(() => import('@/features/search/pages/SearchPage'));
const AdminAssigneePerformancePage = React.lazy(
  () => import('@/features/admin/pages/AdminAssigneePerformancePage'),
);
const AdminUsersPage = React.lazy(() => import('@/features/admin/pages/AdminUsersPage'));
const ProfileSessionsPage = React.lazy(() => import('@/features/profile/pages/ProfileSessionsPage'));
const AdminInvitesPage = React.lazy(() => import('@/features/admin/pages/AdminInvitesPage'));
const AdminDepartmentsPage = React.lazy(() => import('@/features/admin/pages/AdminDepartmentsPage'));
const AdminAuditLogsPage = React.lazy(() => import('@/features/admin/pages/AdminAuditLogsPage'));
const AdminCategoriesPage = React.lazy(() => import('@/features/admin/pages/AdminCategoriesPage'));
const AdminSlaPoliciesPage = React.lazy(() => import('@/features/admin/pages/AdminSlaPoliciesPage'));
const AdminCompaniesPage = React.lazy(() => import('@/features/admin/pages/AdminCompaniesPage'));
const AdminRolesPage = React.lazy(() => import('@/features/admin/pages/AdminRolesPage'));
const AdminTicketMetaPage = React.lazy(() => import('@/features/admin/pages/AdminTicketMetaPage'));
const AdminNotificationTemplatesPage = React.lazy(
  () => import('@/features/admin/pages/AdminNotificationTemplatesPage'),
);
const NotificationsPage = React.lazy(() => import('@/features/notifications/pages/NotificationsPage'));
const NotificationPreferencesPage = React.lazy(
  () => import('@/features/notifications/pages/NotificationPreferencesPage'),
);
const ProfilePage = React.lazy(() => import('@/features/profile/pages/ProfilePage'));
const DepartmentPortalPage = React.lazy(
  () => import('@/features/departmentPortal/pages/DepartmentPortalPage'),
);
const DepartmentPortalCreateTicketPage = React.lazy(
  () => import('@/features/departmentPortal/pages/DepartmentPortalCreateTicketPage'),
);
const DepartmentPortalMyTicketsPage = React.lazy(
  () => import('@/features/departmentPortal/pages/DepartmentPortalMyTicketsPage'),
);
const ProfileMyTicketsPage = React.lazy(
  () => import('@/features/departmentPortal/pages/ProfileMyTicketsPage'),
);
const ProjectsPage = React.lazy(() => import('@/features/projects/pages/ProjectsPage'));
const ProjectDetailPage = React.lazy(() => import('@/features/projects/pages/ProjectDetailPage'));
const ProjectBacklogPage = React.lazy(() => import('@/features/projects/pages/ProjectBacklogPage'));
const ProjectSprintsPage = React.lazy(() => import('@/features/projects/pages/ProjectSprintsPage'));
const SprintPlanningPage = React.lazy(() => import('@/features/projects/pages/SprintPlanningPage'));
const WorkItemDetailPage = React.lazy(() => import('@/features/projects/pages/WorkItemDetailPage'));
const ProjectSprintPage = React.lazy(() => import('@/features/projects/pages/ProjectSprintPage'));
const ProjectGanttPage = React.lazy(() => import('@/features/projects/pages/ProjectGanttPage'));
const ProjectSettingsPage = React.lazy(
  () => import('@/features/projects/pages/ProjectSettingsPage'),
);
const ProjectTeamPage = React.lazy(
  () => import('@/features/projects/pages/ProjectTeamPage'),
);
const ProjectKanbanPage = React.lazy(() => import('@/features/projects/pages/ProjectKanbanPage'));
const ProjectBurndownPage = React.lazy(() => import('@/features/projects/pages/ProjectBurndownPage'));
const SprintBurndownPage = React.lazy(() => import('@/features/projects/pages/SprintBurndownPage'));
const ProjectVelocityPage = React.lazy(() => import('@/features/projects/pages/ProjectVelocityPage'));
const ProjectWorkloadPage = React.lazy(() => import('@/features/projects/pages/ProjectWorkloadPage'));
const ProjectRisksPage = React.lazy(() => import('@/features/projects/pages/ProjectRisksPage'));
const PortfolioDashboardPage = React.lazy(
  () => import('@/features/projects/pages/PortfolioDashboardPage'),
);
const PortfolioTimelinePage = React.lazy(
  () => import('@/features/projects/pages/PortfolioTimelinePage'),
);
const CrossProjectDependenciesPage = React.lazy(
  () => import('@/features/projects/pages/CrossProjectDependenciesPage'),
);
const ProjectDependenciesPage = React.lazy(
  () => import('@/features/projects/pages/ProjectDependenciesPage'),
);
const ProjectReportsPage = React.lazy(
  () => import('@/features/projects/pages/ProjectReportsPage'),
);
const ProjectExecutivePage = React.lazy(
  () => import('@/features/projects/pages/ProjectExecutivePage'),
);
const ProjectEnterpriseReportPage = React.lazy(
  () => import('@/features/projects/pages/reports/ProjectEnterpriseReportPage'),
);
const ProjectBoardPage = React.lazy(() => import('@/features/projects/pages/ProjectBoardPage'));
const ProjectCapacityPage = React.lazy(() => import('@/features/projects/pages/ProjectCapacityPage'));
const ProjectMilestonesPage = React.lazy(
  () => import('@/features/projects/pages/ProjectMilestonesPage'),
);
const MyWorkPage = React.lazy(() => import('@/features/tickets/pages/MyWorkPage'));

const PageLoader: React.FC = () => {
  const { t } = useTranslation('common');
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
      }}
    >
      {t('status.loading')}
    </div>
  );
};

const NotFoundPage: React.FC = () => {
  const { t } = useTranslation('common');
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      {t('errors.notFound')}
    </div>
  );
};

export const Router: React.FC = () => {
  return (
    <React.Suspense fallback={<PageLoader />}>
      <Routes>
        {/* Public routes */}
        <Route path={ROUTES.LOGIN} element={<LoginPage />} />
        <Route path="/d/:departmentSlug" element={<DepartmentPortalPage />} />
        <Route
          path="/d/:departmentSlug/create-ticket"
          element={<DepartmentPortalCreateTicketPage />}
        />
        <Route
          path="/d/:departmentSlug/my-tickets"
          element={<DepartmentPortalMyTicketsPage />}
        />
        <Route path={ROUTES.AUTH_MAGIC} element={<MagicLinkPage />} />
        <Route path={ROUTES.AUTH_ACCEPT_INVITE} element={<AcceptInvitePage />} />

        <Route
          path={ROUTES.DASHBOARD}
          element={
            <ProtectedRoute>
              <DashboardPage />
            </ProtectedRoute>
          }
        />
        <Route path={ROUTES.MY_WORK} element={<AppRoute path={ROUTES.TICKETS}><MyWorkPage /></AppRoute>} />
        <Route path={ROUTES.TICKETS} element={<AppRoute path={ROUTES.TICKETS}><TicketsPage /></AppRoute>} />
        <Route path={ROUTES.PROJECTS} element={<AppRoute path={ROUTES.PROJECTS}><ProjectsPage /></AppRoute>} />
        <Route
          path={ROUTES.PORTFOLIO}
          element={<AppRoute path={ROUTES.PROJECTS}><PortfolioDashboardPage /></AppRoute>}
        />
        <Route
          path={ROUTES.PORTFOLIO_TIMELINE}
          element={<AppRoute path={ROUTES.PROJECTS}><PortfolioTimelinePage /></AppRoute>}
        />
        <Route
          path={ROUTES.PORTFOLIO_DEPENDENCIES}
          element={<AppRoute path={ROUTES.PROJECTS}><CrossProjectDependenciesPage /></AppRoute>}
        />
        <Route
          path={ROUTES.PROJECTS_GANTT}
          element={<Navigate to={`${ROUTES.PORTFOLIO_TIMELINE}?view=gantt`} replace />}
        />
        <Route path="/projects/:id" element={<AppRoute path={ROUTES.PROJECTS}><ProjectDetailPage /></AppRoute>} />
        <Route
          path="/projects/:id/backlog"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectBacklogPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/sprints"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectSprintsPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/sprint-planning"
          element={<AppRoute path={ROUTES.PROJECTS}><SprintPlanningPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/work-items/:ticketId"
          element={<AppRoute path={ROUTES.PROJECTS}><WorkItemDetailPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/sprints/:sprintId"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectSprintPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/team"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectTeamPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/board"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectBoardPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/capacity"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectCapacityPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/sprint-board"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectBoardPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/sprints/:sprintId/board"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectBoardPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/kanban"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectKanbanPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/milestones"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectMilestonesPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/burndown"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectBurndownPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/velocity"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectVelocityPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/workload"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectWorkloadPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/risks"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectRisksPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/gantt"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectGanttPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/dependencies"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectDependenciesPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/reports"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectReportsPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/executive"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectExecutivePage /></AppRoute>}
        />
        <Route
          path="/projects/:id/reports/:reportKey"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectEnterpriseReportPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/sprints/:sprintId/burndown"
          element={<AppRoute path={ROUTES.PROJECTS}><SprintBurndownPage /></AppRoute>}
        />
        <Route
          path="/projects/:id/settings"
          element={<AppRoute path={ROUTES.PROJECTS}><ProjectSettingsPage /></AppRoute>}
        />
        <Route path={ROUTES.TICKET_CREATE} element={<AppRoute path={ROUTES.TICKET_CREATE}><CreateTicketPage /></AppRoute>} />
        <Route
          path="/tickets/:id"
          element={
            <AppRoute permission={PERMISSIONS.DEPARTMENT_TICKETS_VIEW}>
              <TicketDetailPage />
            </AppRoute>
          }
        />
        <Route path={ROUTES.SEARCH} element={<AppRoute path={ROUTES.SEARCH}><SearchPage /></AppRoute>} />
        <Route path={ROUTES.SETTINGS} element={<AppRoute path={ROUTES.SETTINGS}><SettingsPage /></AppRoute>} />
        <Route path={ROUTES.ADMIN_ASSIGNEE_PERFORMANCE} element={<AppRoute path={ROUTES.ADMIN_ASSIGNEE_PERFORMANCE}><AdminAssigneePerformancePage /></AppRoute>} />
        <Route path={ROUTES.ADMIN_AGENT_PERFORMANCE} element={<Navigate to={ROUTES.ADMIN_ASSIGNEE_PERFORMANCE} replace />} />
        <Route path={ROUTES.ADMIN_COMPANIES} element={<AppRoute path={ROUTES.ADMIN_COMPANIES}><AdminCompaniesPage /></AppRoute>} />
        <Route path={ROUTES.ADMIN_ROLES} element={<AppRoute path={ROUTES.ADMIN_ROLES}><AdminRolesPage /></AppRoute>} />
        <Route path={ROUTES.ADMIN_TICKET_META} element={<AppRoute path={ROUTES.ADMIN_TICKET_META}><AdminTicketMetaPage /></AppRoute>} />
        <Route path={ROUTES.ADMIN_NOTIFICATION_TEMPLATES} element={<AppRoute path={ROUTES.ADMIN_NOTIFICATION_TEMPLATES}><AdminNotificationTemplatesPage /></AppRoute>} />
        <Route path={ROUTES.ADMIN_USERS} element={<AppRoute path={ROUTES.ADMIN_USERS}><AdminUsersPage /></AppRoute>} />
        <Route path={ROUTES.ADMIN_INVITES} element={<AppRoute path={ROUTES.ADMIN_INVITES}><AdminInvitesPage /></AppRoute>} />
        <Route path={ROUTES.ADMIN_DEPARTMENTS} element={<AppRoute path={ROUTES.ADMIN_DEPARTMENTS}><AdminDepartmentsPage /></AppRoute>} />
        <Route path={ROUTES.ADMIN_CATEGORIES} element={<AppRoute path={ROUTES.ADMIN_CATEGORIES}><AdminCategoriesPage /></AppRoute>} />
        <Route path={ROUTES.SETTINGS_SLA} element={<AppRoute path={ROUTES.SETTINGS_SLA}><AdminSlaPoliciesPage /></AppRoute>} />
        <Route path={ROUTES.ADMIN_AUDIT_LOGS} element={<AppRoute path={ROUTES.ADMIN_AUDIT_LOGS}><AdminAuditLogsPage /></AppRoute>} />
        <Route
          path={ROUTES.NOTIFICATIONS}
          element={
            <ProtectedRoute>
              <NotificationsPage />
            </ProtectedRoute>
          }
        />
        <Route
          path={ROUTES.NOTIFICATION_PREFERENCES}
          element={
            <ProtectedRoute>
              <NotificationPreferencesPage />
            </ProtectedRoute>
          }
        />
        <Route
          path={ROUTES.PROFILE}
          element={
            <ProtectedRoute>
              <ProfilePage />
            </ProtectedRoute>
          }
        />
        <Route
          path={ROUTES.PROFILE_MY_TICKETS}
          element={
            <ProtectedRoute>
              <ProfileMyTicketsPage />
            </ProtectedRoute>
          }
        />
        <Route
          path={ROUTES.PROFILE_SESSIONS}
          element={
            <ProtectedRoute>
              <ProfileSessionsPage />
            </ProtectedRoute>
          }
        />
        <Route
          path={ROUTES.PROFILE_SETTINGS}
          element={<Navigate to={ROUTES.NOTIFICATION_PREFERENCES} replace />}
        />

        <Route path={ROUTES.HOME} element={<Navigate to={ROUTES.DASHBOARD} replace />} />
        
        {/* 404 */}
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </React.Suspense>
  );
};