import React from 'react';
import { useParams, Link as RouterLink } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { getPlayer } from '../services/public';
import { assetUrl } from '../utils/url';
import { Box, Badge, Button, Container, Divider, Heading, HStack, Image, SimpleGrid, Skeleton, Stack, Text, VStack } from '@chakra-ui/react';
import MainLayout from '../components/layout/MainLayout';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';
import { translateNationality } from '../utils/nationality';

const PlayerDetailPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const { data, isLoading, isError } = useQuery({ queryKey: ['player', id], queryFn: () => getPlayer(String(id)) });

  if (isLoading) {
    return (
      <MainLayout>
        <Container maxW="7xl" py={8}>
          <Skeleton height="320px" />
        </Container>
      </MainLayout>
    );
  }

  if (isError || !data) {
    return (
      <MainLayout>
        <Container maxW="7xl" py={8}>
          <Text color="red.500">Hráče se nepodařilo načíst.</Text>
        </Container>
      </MainLayout>
    );
  }

  const fullName = [data.first_name, data.last_name].filter(Boolean).join(' ');

  return (
    <MainLayout>
      <Box>
        <Container maxW="7xl" py={{ base: 6, md: 10 }}>
          <VStack align="stretch" spacing={6}>
            <HStack justify="space-between">
              <HStack spacing={3}>
                <Heading as="h1" size={{ base: 'xl', md: '2xl' }}>{fullName}</Heading>
                {!data.is_active && (
                  <Badge colorScheme="gray" fontSize="md" px={3} py={1}>Neaktivní</Badge>
                )}
              </HStack>
              <Button as={RouterLink} to="/hraci" variant="outline">Zpět na přehled</Button>
            </HStack>

            <SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
              <Box>
                <Image
                  src={assetUrl(data.image_url) || '/logo512.png'}
                  alt={fullName}
                  borderRadius="lg"
                  objectFit="cover"
                  w="100%"
                  h={{ base: '300px', md: '400px' }}
                />
              </Box>
              <Stack spacing={3} bg="white" borderWidth="1px" borderRadius="lg" p={6} shadow="sm">
                <Heading size="md" mb={2}>Informace o hráči</Heading>
                {data.position && (
                  <Text><b>Pozice:</b> {data.position}</Text>
                )}
                {typeof data.jersey_number === 'number' && (
                  <Text><b>Číslo dresu:</b> <Text as="span" color="brand.primary" fontWeight="700">#{data.jersey_number}</Text></Text>
                )}
                {data.nationality && (
                  <Text><b>Národnost:</b> {translateNationality(data.nationality)}</Text>
                )}
                {data.date_of_birth && (
                  <Text><b>Datum narození:</b> {new Date(data.date_of_birth).toLocaleDateString('cs-CZ')}</Text>
                )}
                {(data.height || data.weight) && (
                  <Text>
                    <b>Výška/Váha:</b> {data.height ? `${data.height} cm` : '-'} / {data.weight ? `${data.weight} kg` : '-'}
                  </Text>
                )}
                {data.email && (
                  <Text><b>Email:</b> {data.email}</Text>
                )}
                {data.phone && (
                  <Text><b>Telefon:</b> {data.phone}</Text>
                )}
                {typeof data.team_id === 'number' && data.team_id > 0 && (
                  <Text><b>Tým ID:</b> {data.team_id}</Text>
                )}
              </Stack>
            </SimpleGrid>

          </VStack>
        </Container>
        
        {/* Newsletter CTA */}
        <NewsletterCTA />
        
        {/* Sponsors Section */}
        <SponsorsSection />
      </Box>
    </MainLayout>
  );
};

export default PlayerDetailPage;
