import { Suspense, lazy, type ComponentType } from 'react';
import { LoadingSpinner } from './loading-spinner';

interface LazyComponentProps {
  fallback?: React.ReactNode;
}

export function createLazyComponent<T extends ComponentType<any>>(
  importFunc: () => Promise<{ default: T }>,
  fallback?: React.ReactNode
) {
  const LazyComponent = lazy(importFunc);

  return function WrappedLazyComponent(
    props: React.ComponentProps<T> & LazyComponentProps
  ) {
    return (
      <Suspense fallback={fallback || <LoadingSpinner />}>
        <LazyComponent {...props} />
      </Suspense>
    );
  };
}

// Composants lazy communs
export const LazyDashboard = createLazyComponent(
  () => import('@/pages/DashboardPage').then(m => ({ default: m.DashboardPage }))
);
export const LazyChat = createLazyComponent(
  () => import('@/features/chat/pages/ChatPage')
);
export const LazyLibrary = createLazyComponent(
  () => import('@/features/library/pages/LibraryPage')
);
export const LazyProfile = createLazyComponent(
  () => import('@/pages/ProfilePage').then(m => ({ default: m.ProfilePage }))
);
export const LazySettings = createLazyComponent(
  () => import('@/features/settings/pages/SettingsPage')
);
export const LazyLogin = createLazyComponent(
  () => import('@/pages/LoginPage').then(m => ({ default: m.LoginPage }))
);
export const LazyRegister = createLazyComponent(
  () => import('@/pages/RegisterPage').then(m => ({ default: m.RegisterPage }))
);
export const LazyForgotPassword = createLazyComponent(
  () => import('@/features/auth/pages/ForgotPasswordPage')
);
export const LazyVerifyEmail = createLazyComponent(
  () => import('@/features/auth/pages/VerifyEmailPage')
);
export const LazyResetPassword = createLazyComponent(
  () => import('@/features/auth/pages/ResetPasswordPage')
);
export const LazySessions = createLazyComponent(
  () => import('@/features/auth/pages/SessionsPage')
);
export const LazyNotFound = createLazyComponent(
  () => import('@/features/error/pages/NotFoundPage')
);
export const LazyServerError = createLazyComponent(
  () => import('@/features/error/pages/ServerErrorPage')
);
export const LazyUserProfile = createLazyComponent(
  () => import('@/features/profile/pages/UserProfilePage').then(m => ({ default: m.UserProfilePage }))
);
export const LazyRoles = createLazyComponent(
  () => import('@/features/roles/pages/RolesPage').then(m => ({ default: m.RolesPage }))
);
export const LazyTrackDetail = createLazyComponent(
  () => import('@/features/tracks/pages/TrackDetailPage').then(m => ({ default: m.TrackDetailPage }))
);
export const LazyPlaylistRoutes = createLazyComponent(
  () => import('@/features/playlists/routes').then(m => ({ default: m.PlaylistRoutes }))
);
export const LazyMarketplace = createLazyComponent(
  () => import('@/pages/marketplace/MarketplaceHome')
);