'use client';

import { useRouter } from 'next/navigation';
import { DriversTemplate } from '@/templates/DriversTemplate';
import { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';

// Shared state components
import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
import { StateContainer } from '@/components/shared/state/StateContainer';
import { useServices } from '@/lib/services/ServiceProvider';
import { Users } from 'lucide-react';

export function DriversInteractive() {
  const router = useRouter();
  const { driverService } = useServices();
  
  const { data: viewModel, isLoading: loading, error, retry } = useDataFetching({
    queryKey: ['driverLeaderboard'],
    queryFn: () => driverService.getDriverLeaderboard(),
  });
  
  const drivers = viewModel?.drivers || [];
  const totalRaces = viewModel?.totalRaces || 0;
  const totalWins = viewModel?.totalWins || 0;
  const activeCount = viewModel?.activeCount || 0;

  // Transform data for template
  const driverViewModels = drivers.map((driver, index) =>
    new DriverLeaderboardItemViewModel(driver, index + 1)
  );

  return (
    <StateContainer
      data={viewModel}
      isLoading={loading}
      error={error}
      retry={retry}
      config={{
        loading: { variant: 'skeleton', message: 'Loading driver leaderboard...' },
        error: { variant: 'inline' },
        empty: {
          icon: Users,
          title: 'No drivers found',
          description: 'There are no drivers in the system yet',
        }
      }}
    >
      {(leaderboardData) => (
        <DriversTemplate
          drivers={driverViewModels}
          totalRaces={totalRaces}
          totalWins={totalWins}
          activeCount={activeCount}
          isLoading={false}
        />
      )}
    </StateContainer>
  );
 }