import { RaceFilterModal } from '@/components/races/RaceFilterModal';
import { RacePageHeader } from '@/components/races/RacePageHeader';
import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
import { RacesAllLayout, RacesAllStats } from '@/components/races/RacesAllLayout';
import { RaceScheduleSection } from '@/components/races/RacesLayout';
import type { SessionStatus } from '@/components/races/SessionStatusBadge';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
import type { RacesViewData } from '@/lib/view-data/RacesViewData';
import { Box } from '@/ui/Box';
import { Pagination } from '@/ui/Pagination';
import { Text } from '@/ui/Text';

export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';

interface RacesAllTemplateProps extends TemplateProps<RacesViewData> {
  races: RacesViewData['races'];
  totalFilteredCount: number;
  isLoading: boolean;
  // Pagination
  currentPage: number;
  totalPages: number;
  itemsPerPage: number;
  onPageChange: (page: number) => void;
  // Filters
  statusFilter: StatusFilter;
  setStatusFilter: (filter: StatusFilter) => void;
  leagueFilter: string;
  setLeagueFilter: (filter: string) => void;
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  // UI State
  showFilters: boolean;
  setShowFilters: (show: boolean) => void;
  showFilterModal: boolean;
  setShowFilterModal: (show: boolean) => void;
  // Actions
  onRaceClick: (raceId: string) => void;
  onLeagueClick: (leagueId: string) => void;
}

export function RacesAllTemplate({
  viewData,
  races,
  totalFilteredCount,
  currentPage,
  totalPages,
  onPageChange,
  statusFilter,
  setStatusFilter,
  leagueFilter,
  setLeagueFilter,
  searchQuery,
  setSearchQuery,
  showFilterModal,
  setShowFilterModal,
  onRaceClick,
}: RacesAllTemplateProps) {
  // Note: Loading state is handled by StatefulPageWrapper in the client wrapper
  
  return (
    <RacesAllLayout
      header={
        <RacePageHeader 
          totalCount={viewData.totalCount}
          scheduledCount={viewData.scheduledCount}
          runningCount={viewData.runningCount}
          completedCount={viewData.completedCount}
        />
      }
      stats={
        <RacesAllStats 
          count={totalFilteredCount} 
          onFilterClick={() => setShowFilterModal(true)} 
        />
      }
      pagination={
        <Pagination
          currentPage={currentPage}
          totalPages={totalPages}
          onPageChange={onPageChange}
        />
      }
    >
      <RaceScheduleSection title="Race Schedule">
        {races.length === 0 ? (
          <Box p={12} textAlign="center">
            <Text color="text-gray-500">No races found matching your criteria.</Text>
          </Box>
        ) : (
          <RaceScheduleTable 
            races={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}
          />
        )}
      </RaceScheduleSection>

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