import { RacesTemplate } from '@/templates/RacesTemplate';
import { useServices } from '@/lib/services/ServiceProvider';
import type { RaceListItemViewModel } from '@/lib/view-models/RaceListItemViewModel';

// This is a server component that fetches data and passes it to the template
export async function RacesStatic() {
  const { raceService } = useServices();
  
  // Fetch race data server-side
  const pageData = await raceService.getRacesPageData();
  
  // Extract races from the response
  const races = pageData.races.map(race => ({
    id: race.id,
    track: race.track,
    car: race.car,
    scheduledAt: race.scheduledAt,
    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
    sessionType: 'race', // Default since RaceListItemViewModel doesn't have sessionType
    leagueId: race.leagueId,
    leagueName: race.leagueName,
    strengthOfField: race.strengthOfField,
    isUpcoming: race.isUpcoming,
    isLive: race.isLive,
    isPast: race.isPast,
  }));

  // Transform the categorized races as well
  const transformRaces = (raceList: RaceListItemViewModel[]) =>
    raceList.map(race => ({
      id: race.id,
      track: race.track,
      car: race.car,
      scheduledAt: race.scheduledAt,
      status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
      sessionType: 'race',
      leagueId: race.leagueId,
      leagueName: race.leagueName,
      strengthOfField: race.strengthOfField,
      isUpcoming: race.isUpcoming,
      isLive: race.isLive,
      isPast: race.isPast,
    }));

  // For the static wrapper, we'll use client-side data fetching
  // This component will be used as a server component that renders the client template
  return (
    <RacesTemplate
      races={races}
      totalCount={pageData.totalCount}
      scheduledRaces={transformRaces(pageData.scheduledRaces)}
      runningRaces={transformRaces(pageData.runningRaces)}
      completedRaces={transformRaces(pageData.completedRaces)}
      isLoading={false}
      // Filter state - will be managed by Interactive component
      statusFilter="all"
      setStatusFilter={() => {}}
      leagueFilter="all"
      setLeagueFilter={() => {}}
      timeFilter="upcoming"
      setTimeFilter={() => {}}
      // Actions
      onRaceClick={() => {}}
      onLeagueClick={() => {}}
      onRegister={() => {}}
      onWithdraw={() => {}}
      onCancel={() => {}}
      // UI State
      showFilterModal={false}
      setShowFilterModal={() => {}}
      // User state
      currentDriverId={undefined}
      userMemberships={undefined}
    />
  );
}