'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Container } from '@/ui/Container';
import { RaceFilterModal } from '@/ui/RaceFilterModal';
import type { RacesViewData } from '@/lib/view-data/RacesViewData';
import { RacePageHeader } from '@/ui/RacePageHeader';
import { LiveRacesBanner } from '@/ui/LiveRacesBanner';
import { RaceFilterBar } from '@/ui/RaceFilterBar';
import { RaceList } from '@/ui/RaceList';
import { RaceSidebar } from '@/ui/RaceSidebar';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';

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">
      <Container size="lg" py={8}>
        <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)}
                />

                <RaceList 
                  racesByDate={viewData.racesByDate}
                  totalCount={viewData.totalCount}
                  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}
            setStatusFilter={setStatusFilter}
            leagueFilter={leagueFilter}
            setLeagueFilter={setLeagueFilter}
            timeFilter={timeFilter}
            setTimeFilter={setTimeFilter}
            searchQuery=""
            setSearchQuery={() => {}}
            leagues={viewData.leagues}
            showSearch={false}
            showTimeFilter={false}
          />
        </Stack>
      </Container>
    </Box>
  );
}