'use client';

import { InfoBanner } from '@/ui/InfoBanner';
import { Modal } from '@/components/shared/Modal';
import { ModalIcon } from '@/ui/ModalIcon';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { TestTube } from 'lucide-react';

interface EndRaceModalProps {
  raceId: string;
  raceName: string;
  onConfirm: () => void;
  onCancel: () => void;
  isOpen: boolean;
}

export function EndRaceModal({ raceId, raceName, onConfirm, onCancel, isOpen }: EndRaceModalProps) {
  return (
    <Modal
      isOpen={isOpen}
      onOpenChange={(open) => !open && onCancel()}
      title="Development Test Function"
      description="End Race & Process Results"
      icon={
        <ModalIcon 
          icon={TestTube} 
          color="text-warning-amber" 
          bgColor="bg-warning-amber/10" 
          borderColor="border-warning-amber/20" 
        />
      }
      primaryActionLabel="Run Test"
      onPrimaryAction={onConfirm}
      secondaryActionLabel="Cancel"
      onSecondaryAction={onCancel}
      footer={
        <Text size="xs" color="text-gray-500" align="center" block>
          This action cannot be undone. Use only for testing purposes.
        </Text>
      }
    >
      <Stack gap={4}>
        <InfoBanner type="warning" title="Development Only Feature">
          This is a development/testing function to simulate ending a race and processing results.
          It will generate realistic race results, update driver ratings, and calculate final standings.
        </InfoBanner>

        <InfoBanner type="success" title="What This Does">
          <Stack as="ul" gap={1}>
            <Text as="li" size="sm" color="text-gray-300">• Marks the race as completed</Text>
            <Text as="li" size="sm" color="text-gray-300">• Generates realistic finishing positions</Text>
            <Text as="li" size="sm" color="text-gray-300">• Updates driver ratings based on performance</Text>
            <Text as="li" size="sm" color="text-gray-300">• Calculates championship points</Text>
            <Text as="li" size="sm" color="text-gray-300">• Updates league standings</Text>
          </Stack>
        </InfoBanner>

        <Stack textAlign="center">
          <Text size="sm" color="text-gray-400">
            Race: <Text color="text-white" weight="medium">{raceName}</Text>
          </Text>
          <Text size="xs" color="text-gray-500" block mt={1}>
            ID: {raceId}
          </Text>
        </Stack>
      </Stack>
    </Modal>
  );
}