import { Layout } from '@/components/Layout/Layout';
import {
  AuthenticationPage,
  ForgetPasswordPage,
} from '@/features/authorization';
import {
  Calendar,
  Devices,
  LocationTick,
  Mobile,
  PasswordCheck,
  Personalcard,
  ProfileCircle,
  Setting,
  Shield,
  Sms,
  type Icon,
} from 'iconsax-react';
import { type ReactNode } from 'react';
import { Navigate } from 'react-router-dom';

export interface RouteConfig {
  path: string;
  element?: ReactNode;
  navConfig?: {
    title: string; // Translation key
    icon?: Icon;
  };
  children?: RouteConfig[];
}

// can lazy load component if needed (ex. lazy(() => import('@/features/home/routes/HomePage'));)
export const appRoutes: RouteConfig[] = [
  {
    path: '/',
    element: <Navigate to="/setting/profile" replace />,
  },
  {
    path: '/login',
    element: <AuthenticationPage />,
  },
  {
    path: '/forget-password',
    element: <ForgetPasswordPage />,
  },
  {
    path: '/',
    element: <Navigate to="/setting/profile" replace />,
  },
  {
    path: '/setting',
    element: <Layout />,
    children: [
      // TODO: add route component to each route
      {
        path: '/setting/profile',
        navConfig: {
          // Profile component
          title: 'side.account',
          icon: ProfileCircle,
        },
        children: [
          {
            path: '/setting/profile#info',
            navConfig: {
              title: 'side.personalInfo',
              icon: Personalcard,
            },
          },
          {
            path: '/setting/profile#contact-info',
            navConfig: {
              title: 'side.contactInfo',
              icon: Mobile,
            },
          },
          {
            path: '/setting/profile#email',
            navConfig: {
              title: 'side.email',
              icon: Sms,
            },
          },
        ],
      },
      {
        path: '/setting/security',
        // security component
        navConfig: {
          title: 'side.security',
          icon: Shield,
        },
        children: [
          {
            path: '/setting/security#password',
            navConfig: {
              title: 'side.password',
              icon: PasswordCheck,
            },
          },
          {
            path: '/setting/security#confirmed-ips',
            navConfig: {
              title: 'side.confirmedIps',
              icon: LocationTick,
            },
          },
          {
            path: '/setting/security#recent-sessions',
            navConfig: {
              title: 'side.recentSessions',
              icon: Devices,
            },
          },
        ],
      },
      {
        path: '/setting/active-sessions',
        // active session component
        navConfig: {
          title: 'side.activeSessions',
          icon: Calendar,
        },
      },
      {
        path: '/setting/preferences',
        // setting component
        navConfig: {
          title: 'side.setting',
          icon: Setting,
        },
      },
    ],
  },
];