"use client";

import { Box, Flex, Text, Badge, Image, ScrollArea } from "@chakra-ui/react";
import { useTranslations } from "next-intl";
import { useColorModeValue } from "@/components/ui/color-mode";
import type { ActiveLeagueDto } from "@/lib/api/matches/types";

interface LeagueFilterBarProps {
  leagues: ActiveLeagueDto[];
  selectedLeagueId: string | null;
  onSelect: (leagueId: string | null) => void;
  isLoading?: boolean;
}

/**
 * LeagueFilterBar — Horizontal scrollable league filter chips for mobile.
 * Shows country flag, league name, country name, and live/match count badges.
 */
export default function LeagueFilterBar({
  leagues,
  selectedLeagueId,
  onSelect,
  isLoading,
}: LeagueFilterBarProps) {
  const t = useTranslations("matches");

  const chipBg = useColorModeValue("white", "gray.800");
  const chipBorder = useColorModeValue("gray.200", "gray.600");
  const activeBg = useColorModeValue("primary.50", "primary.900");
  const activeBorder = useColorModeValue("primary.400", "primary.500");
  const countryText = useColorModeValue("gray.500", "gray.400");

  if (isLoading) {
    return (
      <Flex gap={2} overflow="hidden" pb={2}>
        {Array.from({ length: 5 }).map((_, i) => (
          <Box
            key={i}
            h="42px"
            w="120px"
            bg="bg.muted"
            borderRadius="full"
            flexShrink={0}
            animation="pulse 1.5s ease-in-out infinite"
          />
        ))}
      </Flex>
    );
  }

  return (
    <ScrollArea.Root width="full" size="xs">
      <ScrollArea.Viewport>
        <ScrollArea.Content py="1">
          <Flex gap={2} flexWrap="nowrap" pb={1}>
            {/* "All Leagues" chip */}
            <Box
              as="button"
              onClick={() => onSelect(null)}
              px={3.5}
              py={2}
              borderRadius="full"
              borderWidth="1.5px"
              borderColor={
                selectedLeagueId === null ? activeBorder : chipBorder
              }
              bg={selectedLeagueId === null ? activeBg : chipBg}
              cursor="pointer"
              flexShrink={0}
              transition="all 0.15s"
              _hover={{ borderColor: activeBorder }}
              whiteSpace="nowrap"
            >
              <Text
                fontSize="xs"
                fontWeight={selectedLeagueId === null ? "bold" : "medium"}
                color={selectedLeagueId === null ? "primary.fg" : "fg"}
              >
                {t("all-leagues")}
              </Text>
            </Box>

            {/* League chips */}
            {leagues.map((league) => {
              const isActive = selectedLeagueId === league.id;
              return (
                <Box
                  as="button"
                  key={league.id}
                  onClick={() => onSelect(league.id)}
                  px={3}
                  py={1.5}
                  borderRadius="full"
                  borderWidth="1.5px"
                  borderColor={isActive ? activeBorder : chipBorder}
                  bg={isActive ? activeBg : chipBg}
                  cursor="pointer"
                  flexShrink={0}
                  transition="all 0.15s"
                  _hover={{ borderColor: activeBorder }}
                  whiteSpace="nowrap"
                >
                  <Flex align="center" gap={1.5}>
                    {/* Flag or fallback */}
                    {league.countryFlag ? (
                      <Image
                        src={league.countryFlag}
                        alt={league.countryName || ""}
                        boxSize="14px"
                        objectFit="contain"
                        borderRadius="xs"
                        flexShrink={0}
                      />
                    ) : league.countryName ? (
                      <Flex
                        boxSize="14px"
                        bg="gray.200"
                        borderRadius="xs"
                        align="center"
                        justify="center"
                        flexShrink={0}
                        fontSize="6px"
                        fontWeight="bold"
                        color="gray.600"
                      >
                        {league.countryName.slice(0, 2).toUpperCase()}
                      </Flex>
                    ) : null}

                    {/* League name + country */}
                    <Flex
                      direction="column"
                      align="flex-start"
                      gap={0}
                      lineHeight="1"
                    >
                      <Text
                        fontSize="xs"
                        fontWeight={isActive ? "bold" : "medium"}
                        color={isActive ? "primary.fg" : "fg"}
                      >
                        {league.name}
                      </Text>
                      {league.countryName && (
                        <Text fontSize="2xs" color={countryText} lineHeight="1">
                          {league.countryName}
                        </Text>
                      )}
                    </Flex>

                    {/* Live badge */}
                    {league.liveCount > 0 && (
                      <Badge
                        colorPalette="red"
                        variant="solid"
                        borderRadius="full"
                        fontSize="2xs"
                        px={1}
                        ml={0.5}
                      >
                        {league.liveCount}
                      </Badge>
                    )}
                  </Flex>
                </Box>
              );
            })}
          </Flex>
        </ScrollArea.Content>
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar orientation="horizontal" />
      <ScrollArea.Corner />
    </ScrollArea.Root>
  );
}
