"use client";

import {
  Box,
  Flex,
  Heading,
  Text,
  Card,
  VStack,
  HStack,
  Badge,
  Spinner,
  Input,
  Grid,
  GridItem,
  Icon,
} from "@chakra-ui/react";
import { useTranslations } from "next-intl";
import { useColorModeValue } from "@/components/ui/color-mode";
import { SlideUp } from "@/components/motion";
import {
  useCountries,
  useLeagues,
  useSearchTeams,
} from "@/lib/api/leagues/use-hooks";
import type { CountryDto, LeagueDto, TeamDto } from "@/lib/api/leagues/types";
import {
  LuSearch,
  LuGlobe,
  LuTrophy,
  LuUsers,
  LuArrowRight,
  LuMapPin,
} from "react-icons/lu";
import { useMemo, useState } from "react";
import { useDebounce } from "@/hooks/use-debounce";
import { Link } from "@/i18n/navigation";
import { InputGroup } from "@/components/ui/forms/input-group";
import { Link as ChakraLink } from "@chakra-ui/react";

export default function LeaguesContent() {
  const t = useTranslations("leagues");
  const tMatches = useTranslations("matches");

  const bgGradient = useColorModeValue(
    "linear(to-r, primary.500, primary.700)",
    "linear(to-r, primary.600, primary.900)",
  );

  const cardBg = useColorModeValue("white", "gray.900");
  const borderColor = useColorModeValue("gray.200", "gray.800");
  const hoverBg = useColorModeValue("gray.50", "whiteAlpha.50");

  const [activeTab, setActiveTab] = useState<"leagues" | "teams">("leagues");
  const [sportFilter, setSportFilter] = useState<string>("");
  const [selectedCountryId, setSelectedCountryId] = useState<string | null>(
    null,
  );

  const [teamSearchQuery, setTeamSearchQuery] = useState("");
  const debouncedTeamQuery = useDebounce(teamSearchQuery, 300);

  const [countrySearchQuery, setCountrySearchQuery] = useState("");
  const debouncedCountryQuery = useDebounce(countrySearchQuery, 300);

  const countries = useCountries();
  const leagues = useLeagues(
    sportFilter
      ? { sport: sportFilter as "football" | "basketball" }
      : undefined,
  );
  const searchTeams = useSearchTeams(
    debouncedTeamQuery.length >= 2 ? { q: debouncedTeamQuery } : { q: "" },
  );

  const filteredCountries = useMemo(() => {
    if (!countries.data?.data) return [];
    if (!debouncedCountryQuery) return countries.data.data;
    return countries.data.data.filter((c) =>
      c.name.toLowerCase().includes(debouncedCountryQuery.toLowerCase()),
    );
  }, [countries.data?.data, debouncedCountryQuery]);

  const displayedLeagues = useMemo(() => {
    let sourceLeagues: LeagueDto[] = leagues.data?.data || [];

    if (selectedCountryId) {
      sourceLeagues = sourceLeagues.filter(
        (l) => l.countryId === selectedCountryId,
      );
    }

    // Apply sport filter if selected
    if (sportFilter) {
      return sourceLeagues.filter((l) => l.sport === sportFilter);
    }
    return sourceLeagues;
  }, [selectedCountryId, leagues.data?.data, sportFilter]);

  return (
    <Box minH="calc(100vh - 80px)">
      {/* Hero Section */}
      <Box
        bgGradient={bgGradient}
        color="white"
        pt={16}
        pb={20}
        px={6}
        position="relative"
        overflow="hidden"
      >
        <Box
          position="absolute"
          top="-20%"
          right="-10%"
          opacity={0.1}
          transform="rotate(15deg)"
        >
          <LuTrophy size={400} />
        </Box>
        <Box maxW="7xl" mx="auto" position="relative" zIndex={1}>
          <SlideUp>
            <VStack
              align="center"
              gap={4}
              textAlign="center"
              maxW="3xl"
              mx="auto"
            >
              <Badge
                colorScheme="whiteAlpha"
                variant="subtle"
                size="lg"
                px={4}
                py={1}
                rounded="full"
              >
                {t("title")}
              </Badge>
              <Heading
                as="h1"
                fontSize={{ base: "3xl", md: "5xl" }}
                fontWeight="800"
                letterSpacing="tight"
              >
                {activeTab === "leagues"
                  ? t("countries-leagues")
                  : tMatches("search-teams")}
              </Heading>
              <Text fontSize="lg" color="whiteAlpha.800" maxW="xl">
                {activeTab === "leagues"
                  ? "Explore top football and basketball leagues around the world. Filter by country and analyze historical matches."
                  : "Find your favorite teams across all leagues. Get deep insights and head-to-head statistics."}
              </Text>
            </VStack>
          </SlideUp>
        </Box>
      </Box>

      {/* Main Content Area - Pulled up to overlap hero */}
      <Box
        maxW="7xl"
        mx="auto"
        px={6}
        mt={-10}
        position="relative"
        zIndex={2}
        pb={20}
      >
        <SlideUp
          transition={{ delay: 0.1, duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
        >
          <Card.Root
            bg={cardBg}
            shadow="xl"
            borderRadius="2xl"
            borderWidth="1px"
            borderColor={borderColor}
            overflow="hidden"
          >
            {/* Tab Navigation */}
            <Flex
              borderBottomWidth="1px"
              borderColor={borderColor}
              bg={useColorModeValue("gray.50", "whiteAlpha.50")}
            >
              <Flex flex={1}>
                <Box
                  flex={1}
                  py={4}
                  textAlign="center"
                  cursor="pointer"
                  borderBottomWidth="2px"
                  borderColor={
                    activeTab === "leagues" ? "primary.500" : "transparent"
                  }
                  color={activeTab === "leagues" ? "primary.500" : "fg.muted"}
                  fontWeight={activeTab === "leagues" ? "bold" : "medium"}
                  onClick={() => setActiveTab("leagues")}
                  transition="all 0.2s"
                  _hover={{ bg: hoverBg }}
                >
                  <HStack justify="center" gap={2}>
                    <LuGlobe />
                    <Text>{t("countries-leagues")}</Text>
                  </HStack>
                </Box>
                <Box
                  flex={1}
                  py={4}
                  textAlign="center"
                  cursor="pointer"
                  borderBottomWidth="2px"
                  borderColor={
                    activeTab === "teams" ? "primary.500" : "transparent"
                  }
                  color={activeTab === "teams" ? "primary.500" : "fg.muted"}
                  fontWeight={activeTab === "teams" ? "bold" : "medium"}
                  onClick={() => setActiveTab("teams")}
                  transition="all 0.2s"
                  _hover={{ bg: hoverBg }}
                >
                  <HStack justify="center" gap={2}>
                    <LuUsers />
                    <Text>{tMatches("search-teams")}</Text>
                  </HStack>
                </Box>
              </Flex>
            </Flex>

            {/* LEAGUES TAB */}
            {activeTab === "leagues" && (
              <Flex direction={{ base: "column", lg: "row" }} minH="600px">
                {/* Left Sidebar: Countries */}
                <Box
                  w={{ base: "full", lg: "320px" }}
                  borderRightWidth={{ lg: "1px" }}
                  borderColor={borderColor}
                  bg={useColorModeValue("gray.50", "whiteAlpha.50")}
                >
                  <VStack align="stretch" h="full" gap={0}>
                    <Box
                      p={4}
                      borderBottomWidth="1px"
                      borderColor={borderColor}
                      bg={cardBg}
                    >
                      <InputGroup
                        startElement={<LuSearch color="gray.400" />}
                        w="full"
                      >
                        <Input
                          placeholder={t("countries") + "..."}
                          variant="subtle"
                          borderRadius="full"
                          value={countrySearchQuery}
                          onChange={(e) =>
                            setCountrySearchQuery(e.target.value)
                          }
                        />
                      </InputGroup>
                    </Box>

                    <Box
                      flex={1}
                      overflowY="auto"
                      maxH={{ base: "300px", lg: "600px" }}
                      p={2}
                    >
                      {countries.isLoading ? (
                        <Flex justify="center" py={10}>
                          <Spinner color="primary.500" />
                        </Flex>
                      ) : (
                        <VStack gap={1} align="stretch">
                          <Box
                            px={4}
                            py={3}
                            borderRadius="lg"
                            cursor="pointer"
                            bg={
                              selectedCountryId === null
                                ? "primary.500"
                                : "transparent"
                            }
                            color={selectedCountryId === null ? "white" : "fg"}
                            _hover={{
                              bg:
                                selectedCountryId === null
                                  ? "primary.600"
                                  : hoverBg,
                            }}
                            onClick={() => setSelectedCountryId(null)}
                            transition="all 0.2s"
                          >
                            <HStack justify="space-between">
                              <HStack gap={3}>
                                <LuGlobe />
                                <Text
                                  fontWeight={
                                    selectedCountryId === null
                                      ? "bold"
                                      : "medium"
                                  }
                                >
                                  {t("all")}
                                </Text>
                              </HStack>
                              <Badge
                                size="sm"
                                bg={
                                  selectedCountryId === null
                                    ? "whiteAlpha.300"
                                    : "gray.100"
                                }
                                color={
                                  selectedCountryId === null ? "white" : "fg"
                                }
                              >
                                {leagues.data?.data?.length || 0}
                              </Badge>
                            </HStack>
                          </Box>

                          {filteredCountries.map((country: CountryDto) => {
                            const isSelected = selectedCountryId === country.id;
                            return (
                              <Box
                                key={country.id}
                                px={4}
                                py={3}
                                borderRadius="lg"
                                cursor="pointer"
                                bg={isSelected ? "primary.500" : "transparent"}
                                color={isSelected ? "white" : "fg"}
                                _hover={{
                                  bg: isSelected ? "primary.600" : hoverBg,
                                }}
                                onClick={() => setSelectedCountryId(country.id)}
                                transition="all 0.2s"
                              >
                                <HStack justify="space-between">
                                  <HStack gap={3}>
                                    {country.flag ? (
                                      <img
                                        src={country.flag}
                                        width="20"
                                        height="20"
                                        style={{
                                          borderRadius: "50%",
                                          objectFit: "cover",
                                        }}
                                        alt={country.name}
                                      />
                                    ) : (
                                      <LuMapPin />
                                    )}
                                    <Text
                                      fontWeight={
                                        isSelected ? "bold" : "medium"
                                      }
                                    >
                                      {country.name}
                                    </Text>
                                  </HStack>
                                  <Badge
                                    size="sm"
                                    bg={
                                      isSelected ? "whiteAlpha.300" : "gray.100"
                                    }
                                    color={isSelected ? "white" : "fg"}
                                  >
                                    {leagues.data?.data?.filter(
                                      (l) => l.countryId === country.id,
                                    ).length || 0}
                                  </Badge>
                                </HStack>
                              </Box>
                            );
                          })}
                        </VStack>
                      )}
                    </Box>
                  </VStack>
                </Box>

                {/* Right Area: Leagues Grid */}
                <Box flex={1} p={{ base: 4, md: 8 }} bg={cardBg}>
                  {/* Top Filters */}
                  <Flex
                    justify="space-between"
                    align="center"
                    mb={6}
                    direction={{ base: "column", sm: "row" }}
                    gap={4}
                  >
                    <Heading size="md" fontWeight="bold">
                      {selectedCountryId
                        ? `${countries.data?.data?.find((c) => c.id === selectedCountryId)?.name} ${t("leagues")}`
                        : t("leagues")}
                      <Text
                        as="span"
                        color="fg.muted"
                        ml={2}
                        fontWeight="normal"
                        fontSize="sm"
                      >
                        ({displayedLeagues.length})
                      </Text>
                    </Heading>

                    <HStack
                      gap={2}
                      bg={useColorModeValue("gray.100", "gray.800")}
                      p={1}
                      borderRadius="full"
                    >
                      <Box
                        px={4}
                        py={1.5}
                        borderRadius="full"
                        cursor="pointer"
                        fontSize="sm"
                        fontWeight="medium"
                        bg={!sportFilter ? "white" : "transparent"}
                        color={!sportFilter ? "black" : "fg.muted"}
                        shadow={!sportFilter ? "sm" : "none"}
                        onClick={() => setSportFilter("")}
                        transition="all 0.2s"
                        _dark={{
                          bg: !sportFilter ? "gray.600" : "transparent",
                          color: !sportFilter ? "white" : "gray.400",
                        }}
                      >
                        {t("all")}
                      </Box>
                      <Box
                        px={4}
                        py={1.5}
                        borderRadius="full"
                        cursor="pointer"
                        fontSize="sm"
                        fontWeight="medium"
                        bg={
                          sportFilter === "football"
                            ? "green.500"
                            : "transparent"
                        }
                        color={
                          sportFilter === "football" ? "white" : "fg.muted"
                        }
                        shadow={sportFilter === "football" ? "sm" : "none"}
                        onClick={() =>
                          setSportFilter(
                            sportFilter === "football" ? "" : "football",
                          )
                        }
                        transition="all 0.2s"
                      >
                        {tMatches("football")}
                      </Box>
                      <Box
                        px={4}
                        py={1.5}
                        borderRadius="full"
                        cursor="pointer"
                        fontSize="sm"
                        fontWeight="medium"
                        bg={
                          sportFilter === "basketball"
                            ? "orange.500"
                            : "transparent"
                        }
                        color={
                          sportFilter === "basketball" ? "white" : "fg.muted"
                        }
                        shadow={sportFilter === "basketball" ? "sm" : "none"}
                        onClick={() =>
                          setSportFilter(
                            sportFilter === "basketball" ? "" : "basketball",
                          )
                        }
                        transition="all 0.2s"
                      >
                        {tMatches("basketball")}
                      </Box>
                    </HStack>
                  </Flex>

                  {/* Leagues Grid */}
                  {leagues.isLoading ? (
                    <Flex justify="center" py={20}>
                      <Spinner
                        size="xl"
                        color="primary.500"
                        borderWidth="3px"
                      />
                    </Flex>
                  ) : displayedLeagues.length === 0 ? (
                    <Flex
                      direction="column"
                      align="center"
                      justify="center"
                      py={20}
                      textAlign="center"
                    >
                      <Box
                        bg="gray.100"
                        _dark={{ bg: "gray.800" }}
                        p={6}
                        borderRadius="full"
                        mb={4}
                      >
                        <LuTrophy size={40} color="gray" />
                      </Box>
                      <Heading size="md" mb={2}>
                        {t("not-found")}
                      </Heading>
                      <Text color="fg.muted">
                        {t("no-leagues-found")}
                      </Text>
                    </Flex>
                  ) : (
                    <Grid
                      templateColumns={{
                        base: "1fr",
                        md: "repeat(2, 1fr)",
                        xl: "repeat(3, 1fr)",
                      }}
                      gap={4}
                    >
                      {displayedLeagues.map((league: LeagueDto) => (
                        <GridItem key={league.id}>
                          <ChakraLink
                            as={Link}
                            href={`/leagues/${league.id}`}
                            display="block"
                            h="full"
                            p={5}
                            borderRadius="xl"
                            borderWidth="1px"
                            borderColor={borderColor}
                            bg={cardBg}
                            _hover={{
                              borderColor: "primary.300",
                              shadow: "md",
                              transform: "translateY(-2px)",
                            }}
                            transition="all 0.2s"
                            textDecoration="none"
                            color="inherit"
                            data-group
                          >
                            <Flex
                              justify="space-between"
                              align="flex-start"
                              mb={4}
                            >
                              <Box
                                p={2}
                                borderRadius="lg"
                                bg={
                                  league.sport === "football"
                                    ? "green.50"
                                    : "orange.50"
                                }
                                _dark={{
                                  bg:
                                    league.sport === "football"
                                      ? "green.900"
                                      : "orange.900",
                                }}
                              >
                                <LuTrophy
                                  size={20}
                                  color={
                                    league.sport === "football"
                                      ? "var(--chakra-colors-green-500)"
                                      : "var(--chakra-colors-orange-500)"
                                  }
                                />
                              </Box>
                              <Badge
                                size="sm"
                                variant="subtle"
                                colorScheme={
                                  league.sport === "football"
                                    ? "green"
                                    : "orange"
                                }
                              >
                                {league.sport}
                              </Badge>
                            </Flex>

                            <Heading
                              size="sm"
                              mb={1}
                              lineClamp={1}
                              _groupHover={{ color: "primary.500" }}
                            >
                              {league.name}
                            </Heading>
                            <HStack color="fg.muted" fontSize="sm" gap={1}>
                              <LuMapPin size={14} />
                              <Text lineClamp={1}>
                                {league.country?.name || "Global"}
                              </Text>
                            </HStack>

                            {league.season && (
                              <Flex
                                mt={4}
                                pt={4}
                                borderTopWidth="1px"
                                borderColor={borderColor}
                                justify="space-between"
                                align="center"
                              >
                                <Text
                                  fontSize="xs"
                                  color="fg.muted"
                                  fontWeight="medium"
                                >
                                  SEZON: {league.season}
                                </Text>
                                <Icon
                                  as={LuArrowRight}
                                  color="gray.400"
                                  _groupHover={{
                                    color: "primary.500",
                                    transform: "translateX(4px)",
                                  }}
                                  transition="all 0.2s"
                                />
                              </Flex>
                            )}
                          </ChakraLink>
                        </GridItem>
                      ))}
                    </Grid>
                  )}
                </Box>
              </Flex>
            )}

            {/* TEAMS TAB */}
            {activeTab === "teams" && (
              <Box p={{ base: 4, md: 8 }}>
                <Box maxW="2xl" mx="auto" mb={10}>
                  <InputGroup
                    startElement={<LuSearch color="gray.400" size={20} />}
                    w="full"
                  >
                    <Input
                      placeholder={tMatches("search-teams") + "..."}
                      value={teamSearchQuery}
                      onChange={(e) => setTeamSearchQuery(e.target.value)}
                      variant="outline"
                      borderRadius="xl"
                      fontSize="lg"
                      py={6}
                      boxShadow="sm"
                      _focus={{
                        boxShadow: "0 0 0 2px var(--chakra-colors-primary-500)",
                      }}
                    />
                  </InputGroup>
                </Box>

                {debouncedTeamQuery.length < 2 ? (
                  <Flex
                    direction="column"
                    align="center"
                    justify="center"
                    py={20}
                    textAlign="center"
                  >
                    <Box
                      bg="primary.50"
                      _dark={{ bg: "primary.900" }}
                      p={8}
                      borderRadius="full"
                      mb={6}
                    >
                      <LuUsers
                        size={64}
                        color="var(--chakra-colors-primary-500)"
                      />
                    </Box>
                    <Heading size="lg" mb={3}>
                      {t("search-at-least-2")}
                    </Heading>
                    <Text color="fg.muted" maxW="md">
                      Find detailed statistics, upcoming matches, and
                      head-to-head analysis by searching for any team worldwide.
                    </Text>
                  </Flex>
                ) : searchTeams.isLoading ? (
                  <Flex justify="center" py={20}>
                    <Spinner size="xl" color="primary.500" borderWidth="3px" />
                  </Flex>
                ) : searchTeams.data?.data?.length === 0 ? (
                  <Flex
                    direction="column"
                    align="center"
                    justify="center"
                    py={20}
                    textAlign="center"
                  >
                    <Heading size="md" mb={2}>
                      {t("team-not-found")}
                    </Heading>
                    <Text color="fg.muted">
                      {t("no-teams-found", { query: debouncedTeamQuery })}
                    </Text>
                  </Flex>
                ) : (
                  <Grid
                    templateColumns={{
                      base: "1fr",
                      md: "repeat(2, 1fr)",
                      xl: "repeat(3, 1fr)",
                    }}
                    gap={4}
                  >
                    {searchTeams.data?.data?.map((team: TeamDto) => (
                      <GridItem key={team.id}>
                        <ChakraLink
                          as={Link}
                          href={`/teams/${team.id}`}
                          display="flex"
                          alignItems="center"
                          p={4}
                          borderRadius="xl"
                          borderWidth="1px"
                          borderColor={borderColor}
                          bg={cardBg}
                          _hover={{
                            borderColor: "primary.300",
                            shadow: "md",
                            transform: "translateY(-2px)",
                          }}
                          transition="all 0.2s"
                          textDecoration="none"
                          color="inherit"
                          data-group
                        >
                          {team.logo ? (
                            <Box
                              w={12}
                              h={12}
                              borderRadius="full"
                              overflow="hidden"
                              flexShrink={0}
                              mr={4}
                              bg="white"
                              p={1}
                              shadow="sm"
                            >
                              <img
                                src={team.logo}
                                width="100%"
                                height="100%"
                                style={{ objectFit: "contain" }}
                                alt={team.name}
                              />
                            </Box>
                          ) : (
                            <Flex
                              w={12}
                              h={12}
                              borderRadius="full"
                              bg="gray.100"
                              _dark={{ bg: "gray.700" }}
                              align="center"
                              justify="center"
                              flexShrink={0}
                              mr={4}
                            >
                              <LuUsers size={20} color="gray" />
                            </Flex>
                          )}

                          <VStack align="start" gap={0} flex={1}>
                            <Heading
                              size="sm"
                              lineClamp={1}
                              _groupHover={{ color: "primary.500" }}
                            >
                              {team.name}
                            </Heading>
                            <HStack color="fg.muted" fontSize="xs" gap={1}>
                              <LuMapPin size={12} />
                              <Text lineClamp={1}>
                                {team.country || "Global"}
                              </Text>
                            </HStack>
                          </VStack>

                          <Badge
                            ml={2}
                            size="sm"
                            colorScheme={
                              team.sport === "football" ? "green" : "orange"
                            }
                            variant="subtle"
                          >
                            {team.sport}
                          </Badge>
                        </ChakraLink>
                      </GridItem>
                    ))}
                  </Grid>
                )}
              </Box>
            )}
          </Card.Root>
        </SlideUp>
      </Box>
    </Box>
  );
}
