import { LiveRacesBanner } from '@/components/races/LiveRacesBanner';
import { RaceFilterBar } from '@/components/races/RaceFilterBar';
import { RaceFilterModal } from '@/components/races/RaceFilterModal';
import { RacePageHeader } from '@/components/races/RacePageHeader';
import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
import { RaceSidebar } from '@/components/races/RaceSidebar';
import type { SessionStatus } from '@/components/races/SessionStatusBadge';
import type { RacesViewData } from '@/lib/view-data/RacesViewData';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';
import { Stack } from '@/ui/Stack';

export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
export type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';

export interface RacesTemplateProps {
  viewData: RacesViewData;
  // Filters
  statusFilter: RaceStatusFilter;
  setStatusFilter: (filter: RaceStatusFilter) => void;
  leagueFilter: string;
  setLeagueFilter: (filter: string) => void;
  timeFilter: TimeFilter;
  setTimeFilter: (filter: TimeFilter) => void;
  // Actions
  onRaceClick: (raceId: string) => void;
  onLeagueClick: (leagueId: string) => void;
  onWithdraw: (raceId: string) => void;
  onCancel: (raceId: string) => void;
  // UI State
  showFilterModal: boolean;
  setShowFilterModal: (show: boolean) => void;
}

export function RacesTemplate({
  viewData,
  statusFilter,
  setStatusFilter,
  leagueFilter,
  setLeagueFilter,
  timeFilter,
  setTimeFilter,
  onRaceClick,
  showFilterModal,
  setShowFilterModal,
}: RacesTemplateProps) {
  return (
    <Container size="lg">
      <Stack gap={8} paddingY={12}>
        <RacePageHeader 
          totalCount={viewData.totalCount}
          scheduledCount={viewData.scheduledCount}
          runningCount={viewData.runningCount}
          completedCount={viewData.completedCount}
        />

        <LiveRacesBanner 
          liveRaces={viewData.liveRaces}
          onRaceClick={onRaceClick}
        />

        <Grid cols={12} gap={6}>
          <GridItem colSpan={12} lgSpan={8}>
            <Stack gap={6}>
              <RaceFilterBar 
                timeFilter={timeFilter}
                setTimeFilter={setTimeFilter}
                leagueFilter={leagueFilter}
                setLeagueFilter={setLeagueFilter}
                leagues={viewData.leagues}
                onShowMoreFilters={() => setShowFilterModal(true)}
              />

              <RaceScheduleTable 
                races={viewData.races.map(race => ({
                  id: race.id,
                  track: race.track,
                  car: race.car,
                  leagueName: race.leagueName,
                  time: race.timeLabel,
                  status: race.status as SessionStatus
                }))}
                onRaceClick={onRaceClick}
              />
            </Stack>
          </GridItem>

          <GridItem colSpan={12} lgSpan={4}>
            <RaceSidebar 
              upcomingRaces={viewData.upcomingRaces}
              recentResults={viewData.recentResults}
              onRaceClick={onRaceClick}
            />
          </GridItem>
        </Grid>

        <RaceFilterModal
          isOpen={showFilterModal}
          onClose={() => setShowFilterModal(false)}
          statusFilter={statusFilter as any}
          setStatusFilter={setStatusFilter as any}
          leagueFilter={leagueFilter}
          setLeagueFilter={setLeagueFilter}
          timeFilter={timeFilter as any}
          setTimeFilter={setTimeFilter as any}
          searchQuery=""
          setSearchQuery={() => {}}
          leagues={viewData.leagues}
          showSearch={false}
          showTimeFilter={false}
        />
      </Stack>
    </Container>
  );
}