'use client';

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 { Box } from '@/ui/primitives/Box';
import { Grid } from '@/ui/primitives/Grid';
import { GridItem } from '@/ui/primitives/GridItem';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';

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 (
    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
      <Container size="lg">
        <Stack gap={8}>
          <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)}
                />

                <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
                  <Box p={4} borderBottom borderColor="border-outline-steel" bg="bg-base-black" bgOpacity={0.2}>
                    <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">Race Schedule</Text>
                  </Box>
                  <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}
                  />
                </Box>
              </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}
            setStatusFilter={setStatusFilter}
            leagueFilter={leagueFilter}
            setLeagueFilter={setLeagueFilter}
            timeFilter={timeFilter}
            setTimeFilter={setTimeFilter}
            searchQuery=""
            setSearchQuery={() => {}}
            leagues={viewData.leagues}
            showSearch={false}
            showTimeFilter={false}
          />
        </Stack>
      </Container>
    </Box>
  );
}