import { Box, Flex, Heading, Image, HStack, Button, Text } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import { facrApi } from '../../services/facr/facrApi';
import { FACR_CLUB_ID, FACR_CLUB_TYPE } from '../../config/facr';
import { usePublicSettings } from '../../hooks/usePublicSettings';

const ClubHeader: React.FC = () => {
  const { data: settings } = usePublicSettings();
  const clubId = settings?.club_id || FACR_CLUB_ID;
  const clubType = settings?.club_type || FACR_CLUB_TYPE;

  const { data, isLoading, isError } = useQuery({
    queryKey: ['facr-club', clubId, clubType],
    queryFn: () => facrApi.getClub(clubId, clubType),
    enabled: Boolean(clubId),
  });

  return (
    <Flex align="center" justify="space-between" bg="white" borderWidth="1px" borderRadius="lg" p={4}>
      <HStack spacing={4}>
        <Image src={data?.logo_url || '/logo192.png'} alt={data?.name || 'Club'} boxSize="64px" objectFit="contain" />
        <Box>
          <Heading size="lg">{data?.name || 'Club Name'}</Heading>
          <Text color="gray.600" fontSize="sm">
            {data?.address || (!clubId ? 'Nastavte klub v Nastavení (Admin) nebo REACT_APP_FACR_CLUB_ID' : '')}
          </Text>
        </Box>
      </HStack>
      <HStack spacing={2}>
        <Button as="a" href="https://facebook.com" target="_blank" size="sm" variant="ghost">FB</Button>
        <Button as="a" href="https://instagram.com" target="_blank" size="sm" variant="ghost">IG</Button>
        <Button as="a" href="https://youtube.com" target="_blank" size="sm" variant="ghost">YT</Button>
        {data?.url && (
          <Button as="a" href={data.url} target="_blank" size="sm" colorScheme="blue">FAČR profil</Button>
        )}
      </HStack>
    </Flex>
  );
};

export default ClubHeader;
