'use client';

import { useRegisterForRace } from "@/hooks/race/useRegisterForRace";
import { useWithdrawFromRace } from "@/hooks/race/useWithdrawFromRace";
import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
import type { LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueScheduleViewModel';
import { useState } from 'react';

// Shared state components
import { StateContainer } from '@/components/shared/state/StateContainer';
import { useLeagueSchedule } from "@/hooks/league/useLeagueSchedule";
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Calendar } from 'lucide-react';

interface LeagueScheduleProps {
  leagueId: string;
  onRaceClick?: (raceId: string) => void;
}

export function LeagueSchedule({ leagueId, onRaceClick }: LeagueScheduleProps) {
  const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('upcoming');

  const currentDriverId = useEffectiveDriverId();

  const { data: schedule, isLoading, error, retry } = useLeagueSchedule(leagueId);

  const registerMutation = useRegisterForRace();
  const withdrawMutation = useWithdrawFromRace();

  const handleRegister = async (race: LeagueScheduleRaceViewModel, e: React.MouseEvent) => {
    e.stopPropagation();

    const confirmed = window.confirm(`Register for ${race.track ?? race.name}?`);

    if (!confirmed) return;
    if (!currentDriverId) return;

    try {
      await registerMutation.mutateAsync({ raceId: race.id, leagueId, driverId: currentDriverId });
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to register');
    }
  };

  const handleWithdraw = async (race: LeagueScheduleRaceViewModel, e: React.MouseEvent) => {
    e.stopPropagation();

    const confirmed = window.confirm('Withdraw from this race?');

    if (!confirmed) return;
    if (!currentDriverId) return;

    try {
      await withdrawMutation.mutateAsync({ raceId: race.id, driverId: currentDriverId });
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to withdraw');
    }
  };

  return (
    <StateContainer
      data={schedule}
      isLoading={isLoading}
      error={error}
      retry={retry}
      config={{
        loading: { variant: 'skeleton', message: 'Loading schedule...' },
        error: { variant: 'inline' },
        empty: {
          icon: Calendar,
          title: 'No races scheduled',
          description: 'This league has no races yet',
        }
      }}
    >
      {(scheduleData) => {
        const races = scheduleData?.races ?? [];
        const upcomingRaces = races.filter((race) => race.isUpcoming);
        const pastRaces = races.filter((race) => race.isPast);
        
        const getDisplayRaces = () => {
          switch (filter) {
            case 'upcoming':
              return upcomingRaces;
            case 'past':
              // eslint-disable-next-line gridpilot-rules/component-no-data-manipulation
              return [...pastRaces].reverse();
            case 'all':
              // eslint-disable-next-line gridpilot-rules/component-no-data-manipulation
              return [...upcomingRaces, ...[...pastRaces].reverse()];
            default:
              return races;
          }
        };

        const displayRaces = getDisplayRaces();

        return (
          <Stack gap={4}>
            {/* Filter Controls */}
            <Stack display="flex" alignItems="center" justifyContent="between">
              <Text size="sm" color="text-gray-400">
                {displayRaces.length} {displayRaces.length === 1 ? 'race' : 'races'}
              </Text>
              <Stack display="flex" gap={2}>
                <Button
                  variant={filter === 'upcoming' ? 'primary' : 'secondary'}
                  size="sm"
                  onClick={() => setFilter('upcoming')}
                >
                  Upcoming ({upcomingRaces.length})
                </Button>
                <Button
                  variant={filter === 'past' ? 'primary' : 'secondary'}
                  size="sm"
                  onClick={() => setFilter('past')}
                >
                  Past ({pastRaces.length})
                </Button>
                <Button
                  variant={filter === 'all' ? 'primary' : 'secondary'}
                  size="sm"
                  onClick={() => setFilter('all')}
                >
                  All ({races.length})
                </Button>
              </Stack>
            </Stack>

            {/* Race List */}
            {displayRaces.length === 0 ? (
              <Stack textAlign="center" py={8}>
                <Text color="text-gray-400" block mb={2}>No {filter} races</Text>
                {filter === 'upcoming' && (
                  <Text size="sm" color="text-gray-500" block>Schedule your first race to get started</Text>
                )}
              </Stack>
            ) : (
              <Stack gap={3}>
                {displayRaces.map((race) => {
                  const isPast = race.isPast;
                  const isUpcoming = race.isUpcoming;
                  const isRegistered = Boolean(race.isRegistered);
                  const trackLabel = race.track ?? race.name;
                  const carLabel = race.car ?? '—';
                  const sessionTypeLabel = (race.sessionType ?? 'race').toLowerCase();
                  const isProcessing =
                    registerMutation.isPending || withdrawMutation.isPending;

                  return (
                    <Stack
                      key={race.id}
                      p={4}
                      rounded="lg"
                      border
                      transition
                      cursor="pointer"
                      hoverScale
                      bg={isPast ? 'bg-iron-gray/50' : 'bg-deep-graphite'}
                      borderColor={isPast ? 'border-charcoal-outline/50' : 'border-charcoal-outline'}
                      hoverBorderColor={!isPast ? 'border-primary-blue' : undefined}
                      opacity={isPast ? 0.75 : 1}
                      onClick={() => onRaceClick?.(race.id)}
                    >
                      <Stack display="flex" alignItems="center" justifyContent="between" gap={4}>
                        <Stack flexGrow={1}>
                          <Stack display="flex" alignItems="center" gap={2} mb={1} flexWrap="wrap">
                            <Heading level={3} fontSize="base" weight="medium" color="text-white">{trackLabel}</Heading>
                            {isUpcoming && !isRegistered && (
                              <Stack as="span" px={2} py={0.5} bg="bg-primary-blue/10" border borderColor="border-primary-blue/30" rounded="sm">
                                <Text size="xs" weight="medium" color="text-primary-blue">Upcoming</Text>
                              </Stack>
                            )}
                            {isUpcoming && isRegistered && (
                              <Stack as="span" px={2} py={0.5} bg="bg-green-500/10" border borderColor="border-green-500/30" rounded="sm">
                                <Text size="xs" weight="medium" color="text-green-400">✓ Registered</Text>
                              </Stack>
                            )}
                            {isPast && (
                              <Stack as="span" px={2} py={0.5} bg="bg-gray-700/50" border borderColor="border-gray-600/50" rounded="sm">
                                <Text size="xs" weight="medium" color="text-gray-400">Completed</Text>
                              </Stack>
                            )}
                          </Stack>
                          <Text size="sm" color="text-gray-400" block>{carLabel}</Text>
                          <Stack mt={2}>
                            <Text size="xs" color="text-gray-500" transform="uppercase">{sessionTypeLabel}</Text>
                          </Stack>
                        </Stack>
                        
                        <Stack display="flex" alignItems="center" gap={3}>
                          <Stack textAlign="right">
                            <Text color="text-white" weight="medium" block>
                              {race.formattedDate}
                            </Text>
                            <Text size="sm" color="text-gray-400" block>
                              {race.formattedTime}
                            </Text>
                            {isPast && race.status === 'completed' && (
                              <Text size="xs" color="text-primary-blue" mt={1} block>View Results →</Text>
                            )}
                          </Stack>

                          {/* Registration Actions */}
                          {isUpcoming && (
                            <Stack onClick={(e: React.MouseEvent) => e.stopPropagation()}>
                              {!isRegistered ? (
                                <Button
                                  variant="primary"
                                  size="sm"
                                  onClick={(e) => handleRegister(race, e)}
                                  disabled={isProcessing}
                                  // eslint-disable-next-line gridpilot-rules/component-classification
                                  className="whitespace-nowrap"
                                >
                                  {registerMutation.isPending ? 'Registering...' : 'Register'}
                                </Button>
                              ) : (
                                <Button
                                  variant="secondary"
                                  size="sm"
                                  onClick={(e) => handleWithdraw(race, e)}
                                  disabled={isProcessing}
                                  color="text-gray-300"
                                  // eslint-disable-next-line gridpilot-rules/component-classification
                                  className="whitespace-nowrap"
                                >
                                  {withdrawMutation.isPending ? 'Withdrawing...' : 'Withdraw'}
                                </Button>
                              )}
                            </Stack>
                          )}
                        </Stack>
                      </Stack>
                    </Stack>
                  );
                })}
              </Stack>
            )}
          </Stack>
        );
      }}
    </StateContainer>
  );
}