
/**
 * Lazy-loaded component wrappers for better performance
 */

'use client';

import dynamic from 'next/dynamic';
import { Loader2 } from 'lucide-react';

// Loading fallback component
const LoadingFallback = ({ message = 'Loading...' }: { message?: string }) => (
  <div className="flex items-center justify-center p-8">
    <div className="text-center">
      <Loader2 className="h-8 w-8 animate-spin text-emerald-600 mx-auto mb-2" />
      <p className="text-sm text-gray-600">{message}</p>
    </div>
  </div>
);

// Lazy load heavy components
export const LazyAnalyticsDashboard = dynamic(
  () => import('@/components/analytics/advanced-analytics-dashboard').then(mod => mod.AdvancedAnalyticsDashboard),
  {
    loading: () => <LoadingFallback message="Loading analytics..." />,
    ssr: false,
  }
);

export const LazyContractorPerformance = dynamic(
  () => import('@/components/contractors/performance-dashboard'),
  {
    loading: () => <LoadingFallback message="Loading performance data..." />,
    ssr: false,
  }
);

export const LazyVehicleTracking = dynamic(
  () => import('@/components/tracking/vehicle-tracking-map').then(mod => mod.VehicleTrackingMap),
  {
    loading: () => <LoadingFallback message="Loading map..." />,
    ssr: false,
  }
);

export const LazyCalendarView = dynamic(
  () => import('@/components/calendar/calendar-view').then(mod => mod.CalendarView),
  {
    loading: () => <LoadingFallback message="Loading calendar..." />,
    ssr: false,
  }
);

export const LazyPdfEditor = dynamic(
  () => import('@/components/contracts/pdf-editor').then(mod => mod.PDFEditor),
  {
    loading: () => <LoadingFallback message="Loading PDF editor..." />,
    ssr: false,
  }
);

export const LazyQuoteWizard = dynamic(
  () => import('@/components/quotes/guided-quote-wizard').then(mod => mod.GuidedQuoteWizard),
  {
    loading: () => <LoadingFallback message="Loading quote wizard..." />,
  }
);

export const LazyCockpitDashboard = dynamic(
  () => import('@/components/cockpit/enhanced-cockpit-dashboard').then(mod => mod.EnhancedCockpitDashboard),
  {
    loading: () => <LoadingFallback message="Loading cockpit..." />,
    ssr: false,
  }
);

export const LazyAdminFilterDashboard = dynamic(
  () => import('@/components/admin/admin-filter-dashboard').then(mod => mod.AdminFilterDashboard),
  {
    loading: () => <LoadingFallback message="Loading admin dashboard..." />,
    ssr: false,
  }
);

// Chatbot widget - already has lazy behavior but wrapped for consistency
export const LazyChatbotWidget = dynamic(
  () => import('@/components/chatbot/chatbot-widget').then(mod => mod.ChatbotWidget),
  {
    loading: () => null, // Don't show loading for chatbot
    ssr: false,
  }
);
