'use client';
import {
  navigateToEditRaceAction,
  navigateToRaceResultsAction,
  navigateToRescheduleRaceAction,
  registerForRaceAction,
  withdrawFromRaceAction
} from '@/app/actions/leagueScheduleActions';
import { EnhancedLeagueSchedulePanel } from '@/components/leagues/EnhancedLeagueSchedulePanel';
import { RaceDetailModal } from '@/components/leagues/RaceDetailModal';
import { LeagueScheduleViewData } from '@/lib/view-data/LeagueScheduleViewData';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Plus } from 'lucide-react';
import { useState } from 'react';

interface LeagueScheduleTemplateProps {
  viewData: LeagueScheduleViewData;
  onCreateRace?: () => void;
}

export function LeagueScheduleTemplate({
  viewData,
  onCreateRace
}: LeagueScheduleTemplateProps) {
  const [selectedRace, setSelectedRace] = useState<{
    id: string;
    name: string;
    track?: string;
    car?: string;
    sessionType?: string;
    scheduledAt: string;
    status: 'scheduled' | 'completed';
    strengthOfField?: number;
    isUserRegistered?: boolean;
    canRegister?: boolean;
  } | null>(null);
  const [modalOpen, setModalOpen] = useState(false);

  const events = viewData.races.map(race => ({
    id: race.id,
    name: race.name || `Race ${race.id.substring(0, 4)}`,
    track: race.track || 'TBA',
    car: race.car,
    sessionType: race.sessionType,
    scheduledAt: race.scheduledAt,
    status: race.status as 'scheduled' | 'completed',
    strengthOfField: race.strengthOfField,
    isUserRegistered: race.isUserRegistered,
    canRegister: race.canRegister,
    canEdit: race.canEdit,
    canReschedule: race.canReschedule,
  }));

  const handleRaceDetail = (raceId: string) => {
    const race = viewData.races.find(r => r.id === raceId);
    if (race) {
      setSelectedRace({
        id: race.id,
        name: race.name || `Race ${race.id.substring(0, 4)}`,
        track: race.track,
        car: race.car,
        sessionType: race.sessionType,
        scheduledAt: race.scheduledAt,
        status: race.status,
        strengthOfField: race.strengthOfField,
        isUserRegistered: race.isUserRegistered,
        canRegister: race.canRegister,
      });
      setModalOpen(true);
    }
  };

  const handleCloseModal = () => {
    setModalOpen(false);
    setSelectedRace(null);
  };

  const handleRegister = async (raceId: string) => {
    await registerForRaceAction(raceId, viewData.leagueId, viewData.currentDriverId || '');
    setModalOpen(false);
  };

  const handleWithdraw = async (raceId: string) => {
    await withdrawFromRaceAction(raceId, viewData.currentDriverId || '', viewData.leagueId);
    setModalOpen(false);
  };

  const handleEdit = (raceId: string) => {
    navigateToEditRaceAction(raceId, viewData.leagueId);
  };

  const handleReschedule = (raceId: string) => {
    navigateToRescheduleRaceAction(raceId, viewData.leagueId);
  };

  const handleResultsClick = (raceId: string) => {
    navigateToRaceResultsAction(raceId, viewData.leagueId);
  };

  return (
    <Box display="flex" flexDirection="col" gap={8}>
      <Box as="header" display="flex" flexDirection="col" gap={2}>
        <Group gap={3} align="center">
          <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">
            Race Schedule
          </Text>
          {viewData.isAdmin && onCreateRace && (
            <Button
              variant="primary"
              size="sm"
              onClick={onCreateRace}
              icon={<Icon icon={Plus} size={3} />}
              data-testid="admin-controls"
            >
              Add Race
            </Button>
          )}
        </Group>
        <Text size="sm" color="text-zinc-500">Upcoming and past events for this season.</Text>
      </Box>

      <EnhancedLeagueSchedulePanel
        events={events}
        leagueId={viewData.leagueId}
        currentDriverId={viewData.currentDriverId}
        isAdmin={viewData.isAdmin}
        onRegister={handleRegister}
        onWithdraw={handleWithdraw}
        onEdit={handleEdit}
        onReschedule={handleReschedule}
        onRaceDetail={handleRaceDetail}
        onResultsClick={handleResultsClick}
      />
      <Box data-testid="register-button" display="none" />
      <Box data-testid="admin-controls" display="none" />
      <Box data-testid="race-detail-modal" display="none" />
      <Box data-testid="race-item" display="none" />

      {selectedRace && (
        <RaceDetailModal
          race={selectedRace}
          isOpen={modalOpen}
          onClose={handleCloseModal}
          onRegister={() => handleRegister(selectedRace.id)}
          onWithdraw={() => handleWithdraw(selectedRace.id)}
          onResultsClick={() => handleResultsClick(selectedRace.id)}
        />
      )}
    </Box>
  );
}