'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { RacesAllTemplate, StatusFilter } from '@/templates/RacesAllTemplate';
import { useAllRacesPageData } from '@/hooks/useRaceService';

const ITEMS_PER_PAGE = 10;

export function RacesAllInteractive() {
  const router = useRouter();
  
  // Fetch data
  const { data: pageData, isLoading } = useAllRacesPageData();
  
  // Pagination
  const [currentPage, setCurrentPage] = useState(1);
  
  // Filters
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
  const [leagueFilter, setLeagueFilter] = useState<string>('all');
  const [searchQuery, setSearchQuery] = useState('');
  const [showFilters, setShowFilters] = useState(false);
  const [showFilterModal, setShowFilterModal] = useState(false);

  // Transform data for template
  const races = pageData?.races.map(race => ({
    id: race.id,
    track: race.track,
    car: race.car,
    scheduledAt: race.scheduledAt,
    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
    sessionType: 'race',
    leagueId: race.leagueId,
    leagueName: race.leagueName,
    strengthOfField: race.strengthOfField ?? undefined,
  })) ?? [];

  // Calculate total pages
  const filteredRaces = races.filter(race => {
    if (statusFilter !== 'all' && race.status !== statusFilter) {
      return false;
    }

    if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
      return false;
    }

    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      const matchesTrack = race.track.toLowerCase().includes(query);
      const matchesCar = race.car.toLowerCase().includes(query);
      const matchesLeague = race.leagueName?.toLowerCase().includes(query);
      if (!matchesTrack && !matchesCar && !matchesLeague) {
        return false;
      }
    }

    return true;
  });

  const totalPages = Math.ceil(filteredRaces.length / ITEMS_PER_PAGE);

  // Actions
  const handleRaceClick = (raceId: string) => {
    router.push(`/races/${raceId}`);
  };

  const handleLeagueClick = (leagueId: string) => {
    router.push(`/leagues/${leagueId}`);
  };

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  return (
    <RacesAllTemplate
      races={races}
      isLoading={isLoading}
      currentPage={currentPage}
      totalPages={totalPages}
      itemsPerPage={ITEMS_PER_PAGE}
      onPageChange={handlePageChange}
      statusFilter={statusFilter}
      setStatusFilter={setStatusFilter}
      leagueFilter={leagueFilter}
      setLeagueFilter={setLeagueFilter}
      searchQuery={searchQuery}
      setSearchQuery={setSearchQuery}
      showFilters={showFilters}
      setShowFilters={setShowFilters}
      showFilterModal={showFilterModal}
      setShowFilterModal={setShowFilterModal}
      onRaceClick={handleRaceClick}
      onLeagueClick={handleLeagueClick}
    />
  );
}