import { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import { ProtectedRoute } from './ProtectedRoute';
import { DashboardLayout } from '@app/layouts/DashboardLayout';
import { FullPageSpinner } from '@components/atoms/Spinner';

// Lazy load pages
const LoginPage = lazy(() => import('@pages/auth/LoginPage'));
const RegisterPage = lazy(() => import('@pages/auth/RegisterPage'));
const ForgotPasswordPage = lazy(() => import('@pages/auth/ForgotPasswordPage'));
const DashboardPage = lazy(() => import('@pages/dashboard/DashboardPage'));
const NotFoundPage = lazy(() => import('@pages/NotFoundPage'));

// Dashboards pages (Reports & Dashboards module)
const DashboardsListPage = lazy(() => import('@pages/dashboards/DashboardsListPage'));
const DashboardViewPage = lazy(() => import('@pages/dashboards/DashboardViewPage'));
const DashboardEditPage = lazy(() => import('@pages/dashboards/DashboardEditPage'));
const DashboardCreatePage = lazy(() => import('@pages/dashboards/DashboardCreatePage'));

// Reports pages (Reports & Dashboards module)
const ReportsPage = lazy(() => import('@pages/reports/ReportsPage'));
const ReportBuilderPage = lazy(() => import('@pages/reports/ReportBuilderPage'));
const ScheduledReportsPage = lazy(() => import('@pages/reports/ScheduledReportsPage'));

// Users pages
const UsersListPage = lazy(() => import('@pages/users/UsersListPage'));
const UserDetailPage = lazy(() => import('@pages/users/UserDetailPage'));
const UserCreatePage = lazy(() => import('@pages/users/UserCreatePage'));
const UserEditPage = lazy(() => import('@pages/users/UserEditPage'));

// Companies pages
const CompaniesListPage = lazy(() => import('@pages/companies/CompaniesListPage'));
const CompanyDetailPage = lazy(() => import('@pages/companies/CompanyDetailPage'));
const CompanyCreatePage = lazy(() => import('@pages/companies/CompanyCreatePage'));
const CompanyEditPage = lazy(() => import('@pages/companies/CompanyEditPage'));

// Partners pages
const PartnersListPage = lazy(() => import('@pages/partners/PartnersListPage'));
const PartnerDetailPage = lazy(() => import('@pages/partners/PartnerDetailPage'));
const PartnerCreatePage = lazy(() => import('@pages/partners/PartnerCreatePage'));
const PartnerEditPage = lazy(() => import('@pages/partners/PartnerEditPage'));

// Catalogs - Countries pages
const CountriesPage = lazy(() => import('@pages/catalogs/countries/CountriesPage'));
const CountryDetailPage = lazy(() => import('@pages/catalogs/countries/CountryDetailPage'));
const CountryFormPage = lazy(() => import('@pages/catalogs/countries/CountryFormPage'));

// Catalogs - States pages
const StatesPage = lazy(() => import('@pages/catalogs/states/StatesPage'));
const StateFormPage = lazy(() => import('@pages/catalogs/states/StateFormPage'));

// Catalogs - Currencies pages
const CurrenciesPage = lazy(() => import('@pages/catalogs/currencies/CurrenciesPage'));
const CurrencyDetailPage = lazy(() => import('@pages/catalogs/currencies/CurrencyDetailPage'));
const CurrencyFormPage = lazy(() => import('@pages/catalogs/currencies/CurrencyFormPage'));
const CurrencyRatesPage = lazy(() => import('@pages/catalogs/currencies/CurrencyRatesPage'));

// Catalogs - UoM pages
const UomPage = lazy(() => import('@pages/catalogs/uom/UomPage'));
const UomCategoriesPage = lazy(() => import('@pages/catalogs/uom/UomCategoriesPage'));
const UomFormPage = lazy(() => import('@pages/catalogs/uom/UomFormPage'));
const UomConversionPage = lazy(() => import('@pages/catalogs/uom/UomConversionPage'));

// Catalogs - Product Categories pages
const CategoriesPage = lazy(() => import('@pages/catalogs/categories/CategoriesPage'));
const CategoryDetailPage = lazy(() => import('@pages/catalogs/categories/CategoryDetailPage'));
const CategoryFormPage = lazy(() => import('@pages/catalogs/categories/CategoryFormPage'));

// Catalogs Index page
const CatalogsIndexPage = lazy(() => import('@pages/catalogs/CatalogsIndexPage'));

// Financial pages
const FinancialIndexPage = lazy(() => import('@pages/financial/FinancialIndexPage'));
const AccountsPage = lazy(() => import('@pages/financial/accounts/AccountsPage'));
const InvoicesPage = lazy(() => import('@pages/financial/invoices/InvoicesPage'));
const PaymentsPage = lazy(() => import('@pages/financial/payments/PaymentsPage'));
const JournalsPage = lazy(() => import('@pages/financial/journals/JournalsPage'));
const TaxesPage = lazy(() => import('@pages/financial/taxes/TaxesPage'));

// Settings pages
const TenantSettingsPage = lazy(() => import('@pages/settings/TenantSettingsPage'));
const FeatureFlagsPage = lazy(() => import('@pages/settings/FeatureFlagsPage'));
const UserPreferencesPage = lazy(() => import('@pages/settings/UserPreferencesPage'));

// Notifications pages
const NotificationsPage = lazy(() => import('@pages/notifications/NotificationsPage'));

// Audit pages (Admin)
const AuditLogsPage = lazy(() => import('@pages/audit/AuditLogsPage'));
const AccessLogsPage = lazy(() => import('@pages/audit/AccessLogsPage'));
const SecurityEventsPage = lazy(() => import('@pages/audit/SecurityEventsPage'));

function LazyWrapper({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={<FullPageSpinner />}>{children}</Suspense>;
}

function DashboardWrapper({ children }: { children: React.ReactNode }) {
  return (
    <ProtectedRoute>
      <DashboardLayout>
        <LazyWrapper>{children}</LazyWrapper>
      </DashboardLayout>
    </ProtectedRoute>
  );
}

export const router = createBrowserRouter([
  // Public routes
  {
    path: '/login',
    element: (
      <LazyWrapper>
        <LoginPage />
      </LazyWrapper>
    ),
  },
  {
    path: '/register',
    element: (
      <LazyWrapper>
        <RegisterPage />
      </LazyWrapper>
    ),
  },
  {
    path: '/forgot-password',
    element: (
      <LazyWrapper>
        <ForgotPasswordPage />
      </LazyWrapper>
    ),
  },

  // Protected routes
  {
    path: '/',
    element: <Navigate to="/dashboard" replace />,
  },
  {
    path: '/dashboard',
    element: (
      <DashboardWrapper>
        <DashboardPage />
      </DashboardWrapper>
    ),
  },

  // Dashboards routes (Reports & Dashboards module)
  {
    path: '/dashboards',
    element: (
      <DashboardWrapper>
        <DashboardsListPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/dashboards/new',
    element: (
      <DashboardWrapper>
        <DashboardCreatePage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/dashboards/:id',
    element: (
      <DashboardWrapper>
        <DashboardViewPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/dashboards/:id/edit',
    element: (
      <DashboardWrapper>
        <DashboardEditPage />
      </DashboardWrapper>
    ),
  },

  // Reports routes
  {
    path: '/reports',
    element: (
      <DashboardWrapper>
        <ReportsPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/reports/builder',
    element: (
      <DashboardWrapper>
        <ReportBuilderPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/reports/scheduled',
    element: (
      <DashboardWrapper>
        <ScheduledReportsPage />
      </DashboardWrapper>
    ),
  },

  // Users routes
  {
    path: '/users',
    element: (
      <DashboardWrapper>
        <UsersListPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/users/new',
    element: (
      <DashboardWrapper>
        <UserCreatePage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/users/:id',
    element: (
      <DashboardWrapper>
        <UserDetailPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/users/:id/edit',
    element: (
      <DashboardWrapper>
        <UserEditPage />
      </DashboardWrapper>
    ),
  },
  // Companies routes
  {
    path: '/companies',
    element: (
      <DashboardWrapper>
        <CompaniesListPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/companies/new',
    element: (
      <DashboardWrapper>
        <CompanyCreatePage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/companies/:id',
    element: (
      <DashboardWrapper>
        <CompanyDetailPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/companies/:id/edit',
    element: (
      <DashboardWrapper>
        <CompanyEditPage />
      </DashboardWrapper>
    ),
  },

  // Partners routes
  {
    path: '/partners',
    element: (
      <DashboardWrapper>
        <PartnersListPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/partners/new',
    element: (
      <DashboardWrapper>
        <PartnerCreatePage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/partners/:id',
    element: (
      <DashboardWrapper>
        <PartnerDetailPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/partners/:id/edit',
    element: (
      <DashboardWrapper>
        <PartnerEditPage />
      </DashboardWrapper>
    ),
  },

  // Catalogs - Countries routes
  {
    path: '/catalogs/countries',
    element: (
      <DashboardWrapper>
        <CountriesPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/countries/new',
    element: (
      <DashboardWrapper>
        <CountryFormPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/countries/:id',
    element: (
      <DashboardWrapper>
        <CountryDetailPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/countries/:id/edit',
    element: (
      <DashboardWrapper>
        <CountryFormPage />
      </DashboardWrapper>
    ),
  },

  // Catalogs - States routes
  {
    path: '/catalogs/states',
    element: (
      <DashboardWrapper>
        <StatesPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/states/new',
    element: (
      <DashboardWrapper>
        <StateFormPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/states/:id/edit',
    element: (
      <DashboardWrapper>
        <StateFormPage />
      </DashboardWrapper>
    ),
  },

  // Catalogs - Currencies routes
  {
    path: '/catalogs/currencies',
    element: (
      <DashboardWrapper>
        <CurrenciesPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/currencies/new',
    element: (
      <DashboardWrapper>
        <CurrencyFormPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/currencies/:id',
    element: (
      <DashboardWrapper>
        <CurrencyDetailPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/currencies/:id/edit',
    element: (
      <DashboardWrapper>
        <CurrencyFormPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/currencies/:id/rates',
    element: (
      <DashboardWrapper>
        <CurrencyRatesPage />
      </DashboardWrapper>
    ),
  },

  // Catalogs - UoM routes
  {
    path: '/catalogs/uom',
    element: (
      <DashboardWrapper>
        <UomPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/uom/categories',
    element: (
      <DashboardWrapper>
        <UomCategoriesPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/uom/new',
    element: (
      <DashboardWrapper>
        <UomFormPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/uom/:id/edit',
    element: (
      <DashboardWrapper>
        <UomFormPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/uom/conversion',
    element: (
      <DashboardWrapper>
        <UomConversionPage />
      </DashboardWrapper>
    ),
  },

  // Catalogs - Product Categories routes
  {
    path: '/catalogs/categories',
    element: (
      <DashboardWrapper>
        <CategoriesPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/categories/new',
    element: (
      <DashboardWrapper>
        <CategoryFormPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/categories/:id',
    element: (
      <DashboardWrapper>
        <CategoryDetailPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/catalogs/categories/:id/edit',
    element: (
      <DashboardWrapper>
        <CategoryFormPage />
      </DashboardWrapper>
    ),
  },

  // Catalogs index page
  {
    path: '/catalogs',
    element: (
      <DashboardWrapper>
        <CatalogsIndexPage />
      </DashboardWrapper>
    ),
  },

  {
    path: '/inventory/*',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Módulo de Inventario - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/sales/*',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Módulo de Ventas - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/purchases/*',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Módulo de Compras - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  // Financial routes
  {
    path: '/financial',
    element: (
      <DashboardWrapper>
        <FinancialIndexPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/accounts',
    element: (
      <DashboardWrapper>
        <AccountsPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/accounts/new',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Formulario de Cuenta - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/accounts/:id',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Detalle de Cuenta - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/accounts/:id/edit',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Editar Cuenta - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/journals',
    element: (
      <DashboardWrapper>
        <JournalsPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/entries',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Asientos Contables - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/invoices',
    element: (
      <DashboardWrapper>
        <InvoicesPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/invoices/new',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Nueva Factura - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/invoices/:id',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Detalle de Factura - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/invoices/:id/edit',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Editar Factura - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/payments',
    element: (
      <DashboardWrapper>
        <PaymentsPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/payments/new',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Nuevo Pago - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/payments/:id',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Detalle de Pago - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/payments/:id/edit',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Editar Pago - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/payments/:id/reconcile',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Conciliar Pago - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/financial/taxes',
    element: (
      <DashboardWrapper>
        <TaxesPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/projects/*',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Módulo de Proyectos - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/crm/*',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Módulo CRM - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/hr/*',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Módulo RRHH - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  // Notifications routes
  {
    path: '/notifications',
    element: (
      <DashboardWrapper>
        <NotificationsPage />
      </DashboardWrapper>
    ),
  },

  // Admin - Audit routes
  {
    path: '/admin/audit',
    element: (
      <DashboardWrapper>
        <AuditLogsPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/admin/access-logs',
    element: (
      <DashboardWrapper>
        <AccessLogsPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/admin/security',
    element: (
      <DashboardWrapper>
        <SecurityEventsPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/admin',
    element: <Navigate to="/admin/audit" replace />,
  },

  // Settings routes
  {
    path: '/settings',
    element: <Navigate to="/settings/tenant" replace />,
  },
  {
    path: '/settings/tenant',
    element: (
      <DashboardWrapper>
        <TenantSettingsPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/settings/billing',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Facturacion y planes - En desarrollo</div>
      </DashboardWrapper>
    ),
  },
  {
    path: '/settings/feature-flags',
    element: (
      <DashboardWrapper>
        <FeatureFlagsPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/settings/preferences',
    element: (
      <DashboardWrapper>
        <UserPreferencesPage />
      </DashboardWrapper>
    ),
  },
  {
    path: '/settings/*',
    element: (
      <DashboardWrapper>
        <div className="text-center text-gray-500">Configuracion - En desarrollo</div>
      </DashboardWrapper>
    ),
  },

  // Error pages
  {
    path: '/unauthorized',
    element: (
      <div className="flex min-h-screen items-center justify-center">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-gray-900">403</h1>
          <p className="mt-2 text-gray-600">No tienes permiso para acceder a esta página</p>
        </div>
      </div>
    ),
  },
  {
    path: '*',
    element: (
      <LazyWrapper>
        <NotFoundPage />
      </LazyWrapper>
    ),
  },
]);
