'use client';

import React from 'react';
import { Container } from '@/ui/Container';
import { Section } from '@/ui/Section';
import { RacesLiveRail } from '@/components/races/RacesLiveRail';
import { RacesCommandBar } from '@/components/races/RacesCommandBar';
import { NextUpRacePanel } from '@/components/races/NextUpRacePanel';
import { RacesDayGroup } from '@/components/races/RacesDayGroup';
import { RacesEmptyState } from '@/components/races/RacesEmptyState';
import { RaceFilterModal } from '@/components/races/RaceFilterModal';
import { PageHeader } from '@/components/shared/PageHeader';
import type { RacesViewData, RaceViewData } from '@/lib/view-data/RacesViewData';

export interface RacesIndexTemplateProps {
  viewData: RacesViewData & {
    nextUpRace?: RaceViewData;
  };
  // Filters
  statusFilter: string;
  setStatusFilter: (filter: string) => void;
  leagueFilter: string;
  setLeagueFilter: (filter: string) => void;
  timeFilter: string;
  setTimeFilter: (filter: string) => void;
  // Actions
  onRaceClick: (raceId: string) => void;
  // UI State
  showFilterModal: boolean;
  setShowFilterModal: (show: boolean) => void;
}

export function RacesIndexTemplate({
  viewData,
  statusFilter,
  setStatusFilter,
  leagueFilter,
  setLeagueFilter,
  timeFilter,
  setTimeFilter,
  onRaceClick,
  showFilterModal,
  setShowFilterModal,
}: RacesIndexTemplateProps) {
  const hasRaces = viewData.racesByDate.length > 0;

  return (
    <Section variant="default" padding="lg">
      <PageHeader 
        title="Races" 
        subtitle="Live Sessions & Upcoming Events" 
      />

      {/* 1. Status Rail: Live sessions first */}
      <Container size="full" padding="none" py={8}>
        <RacesLiveRail 
          liveRaces={viewData.liveRaces} 
          onRaceClick={onRaceClick} 
        />
      </Container>

      {/* 2. Command Bar: Fast filters */}
      <Container size="full" padding="none" py={4}>
        <RacesCommandBar 
          timeFilter={timeFilter}
          setTimeFilter={setTimeFilter}
          leagueFilter={leagueFilter}
          setLeagueFilter={setLeagueFilter}
          leagues={viewData.leagues}
          onShowMoreFilters={() => setShowFilterModal(true)}
        />
      </Container>

      {/* 3. Next Up: High signal panel */}
      {timeFilter === 'upcoming' && viewData.nextUpRace && (
        <Container size="full" padding="none" py={8}>
          <NextUpRacePanel 
            race={viewData.nextUpRace} 
            onRaceClick={onRaceClick} 
          />
        </Container>
      )}

      {/* 4. Browse by Day: Grouped schedule */}
      {hasRaces ? (
        <Container size="full" padding="none" py={8}>
          {viewData.racesByDate.map((group) => (
            <Container key={group.dateKey} size="full" padding="none" py={4}>
              <RacesDayGroup 
                dateLabel={group.dateLabel}
                races={group.races}
                onRaceClick={onRaceClick}
              />
            </Container>
          ))}
        </Container>
      ) : (
        <RacesEmptyState />
      )}

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