MyClub/frontend/src/components/home/ClubModal.tsx

import React from 'react';
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  Box,
  Text,
  VStack,
  HStack,
  Badge,
  Flex,
  useColorModeValue,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { TeamLogo } from '../common/TeamLogo';

interface ClubModalProps {
  isOpen: boolean;
  onClose: () => void;
  club: {
    team: string;
    team_id?: string;
    team_logo_url?: string;
    rank?: string | number;
    played?: string | number;
    wins?: string | number;
    draws?: string | number;
    losses?: string | number;
    score?: string;
    points?: string | number;
    // Additional fields from FACR
    goals_scored?: string | number;
    goals_conceded?: string | number;
    goal_difference?: string | number;
    form?: string; // Last 5 matches form (e.g., "WWDWL")
    position_change?: number; // +/- change in position
  } | null;
  clubType?: 'football' | 'futsal';
}

const ClubModal: React.FC<ClubModalProps> = ({ isOpen, onClose, club, clubType = 'football' }) => {
  const { t } = useTranslation();
  if (!club) return null;

  // Theme-aware colors
  const cardBg = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.300');
  const fallbackBg = useColorModeValue('gray.100', 'gray.700');
  const fallbackText = useColorModeValue('gray.600', 'gray.300');

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
      <ModalOverlay bg="blackAlpha.600" backdropFilter="blur(4px)" />
      <ModalContent>
        <ModalHeader>
          <Flex align="center" gap={3}>
            <TeamLogo
              teamId={club.team_id}
              teamName={club.team}
              facrLogo={club.team_logo_url}
              size="large"
              alt={club.team}
              borderRadius="full"
              bg={cardBg}
              borderWidth="1px"
              borderColor={borderColor}
              fallbackIcon={
                <Box
                  w="48px"
                  h="48px"
                  bg={fallbackBg}
                  borderRadius="full"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  color={fallbackText}
                  fontSize="lg"
                  fontWeight="bold"
                  borderWidth="1px"
                  borderColor={borderColor}
                >
                  {club.team.substring(0, 2).toUpperCase()}
                </Box>
              }
            />
            <Box>
              <Text fontSize="xl" fontWeight="bold">
                {club.team}
              </Text>
              {club.rank && (
                <Badge colorScheme="blue" fontSize="sm">
                  {t('table.position_place', { position: club.rank })}
                </Badge>
              )}
            </Box>
          </Flex>
        </ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <VStack spacing={4} align="stretch">
            {/* Statistics */}
            <Box 
              borderWidth="1px" 
              borderRadius="lg" 
              p={4} 
              bg={useColorModeValue('gray.50', 'gray.700')}
              borderColor={borderColor}
            >
              <Text fontSize="md" fontWeight="semibold" mb={3} color={useColorModeValue('gray.700', 'gray.200')}>
                {t('club_modal.statistics')}
              </Text>
              <VStack spacing={2} align="stretch">
                <HStack justify="space-between">
                  <Text color={useColorModeValue('gray.600', 'gray.300')}>{t('club_modal.matches_played')}:</Text>
                  <Text fontWeight="bold" color={useColorModeValue('gray.800', 'gray.100')}>{club.played || 0}</Text>
                </HStack>
                <HStack justify="space-between">
                  <Text color={useColorModeValue('gray.600', 'gray.300')}>{t('club_modal.wins')}:</Text>
                  <Text fontWeight="bold" color="green.600">
                    {club.wins || 0}
                  </Text>
                </HStack>
                <HStack justify="space-between">
                  <Text color={useColorModeValue('gray.600', 'gray.300')}>{t('club_modal.draws')}:</Text>
                  <Text fontWeight="bold" color={useColorModeValue('gray.600', 'gray.400')}>
                    {club.draws || 0}
                  </Text>
                </HStack>
                <HStack justify="space-between">
                  <Text color={useColorModeValue('gray.600', 'gray.300')}>{t('club_modal.losses')}:</Text>
                  <Text fontWeight="bold" color="red.600">
                    {club.losses || 0}
                  </Text>
                </HStack>
                <HStack justify="space-between">
                  <Text color={useColorModeValue('gray.600', 'gray.300')}>{t('club_modal.score')}:</Text>
                  <Text fontWeight="bold" color={useColorModeValue('gray.800', 'gray.100')}>{club.score || '0:0'}</Text>
                </HStack>
                {(club.goals_scored !== undefined || club.goals_conceded !== undefined) && (
                  <>
                    <HStack justify="space-between">
                      <Text color={useColorModeValue('gray.600', 'gray.300')}>{t('club_modal.goals_scored')}:</Text>
                      <Text fontWeight="bold" color="green.500">{club.goals_scored || 0}</Text>
                    </HStack>
                    <HStack justify="space-between">
                      <Text color={useColorModeValue('gray.600', 'gray.300')}>{t('club_modal.goals_conceded')}:</Text>
                      <Text fontWeight="bold" color="red.500">{club.goals_conceded || 0}</Text>
                    </HStack>
                  </>
                )}
                {club.goal_difference !== undefined && (
                  <HStack justify="space-between">
                    <Text color={useColorModeValue('gray.600', 'gray.300')}>{t('club_modal.goal_difference')}:</Text>
                    <Text fontWeight="bold" color={Number(club.goal_difference) >= 0 ? 'green.600' : 'red.600'}>
                      {Number(club.goal_difference) > 0 ? '+' : ''}{club.goal_difference}
                    </Text>
                  </HStack>
                )}
                <HStack justify="space-between" pt={2} borderTopWidth="1px" borderColor={borderColor}>
                  <Text color={useColorModeValue('gray.700', 'gray.200')} fontWeight="semibold">{t('club_modal.points')}:</Text>
                  <Badge colorScheme="blue" fontSize="lg" px={3} py={1}>
                    {club.points || 0}
                  </Badge>
                </HStack>
              </VStack>
            </Box>

            {/* Form (Last 5 matches) */}
            {club.form && (
              <Box 
                borderWidth="1px" 
                borderRadius="lg" 
                p={4} 
                bg={useColorModeValue('gray.50', 'gray.700')}
                borderColor={borderColor}
              >
                <Text fontSize="md" fontWeight="semibold" mb={3} color={useColorModeValue('gray.700', 'gray.200')}>
                  {t('club_modal.form_last_5')}
                </Text>
                <HStack spacing={2} justify="center">
                  {club.form.split('').map((result, idx) => (
                    <Badge 
                      key={idx}
                      colorScheme={result === 'W' ? 'green' : result === 'D' ? 'yellow' : 'red'}
                      fontSize="md"
                      px={3}
                      py={1}
                      borderRadius="md"
                    >
                      {result === 'W' ? 'V' : result === 'D' ? 'R' : 'P'}
                    </Badge>
                  ))}
                </HStack>
              </Box>
            )}
          </VStack>
        </ModalBody>
        <ModalFooter>
          <Button colorScheme="gray" onClick={onClose}>
            {t('club_modal.close')}
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default ClubModal;