"use client";

import {
  Box,
  Flex,
  Heading,
  Text,
  VStack,
  HStack,
  Badge,
  Spinner,
} from "@chakra-ui/react";
import { Link as ChakraLink } from "@chakra-ui/react";
import { useTranslations } from "next-intl";
import { useColorModeValue } from "@/components/ui/color-mode";
import { SlideUp } from "@/components/motion";
import { useLeagueById } from "@/lib/api/leagues/use-hooks";
import { useQuery } from "@tanstack/react-query";
import { matchesService } from "@/lib/api/matches/service";
import MatchList from "@/components/matches/match-list";
import { LuTrophy, LuMapPin, LuArrowLeft } from "react-icons/lu";
import { Link } from "@/i18n/navigation";

export default function LeagueDetailContent({
  leagueId,
}: {
  leagueId: string;
}) {
  const t = useTranslations("leagues");

  const leagueQuery = useLeagueById(leagueId);
  const league = leagueQuery.data?.data;

  const matchesQuery = useQuery({
    queryKey: ["league-matches", leagueId, league?.sport],
    queryFn: () =>
      matchesService.queryMatches({
        sport: league?.sport || "football",
        leagueId: leagueId,
        status: "Finished",
        limit: 100,
      }),
    enabled: !!league,
  });

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

  const flatMatches = matchesQuery.data?.data?.[0]?.matches || [];

  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="flex-start" gap={4} maxW="3xl">
              <ChakraLink
                as={Link}
                href="/leagues"
                color="whiteAlpha.900"
                _hover={{ color: "white" }}
                display="flex"
                alignItems="center"
                gap={2}
                mb={2}
                fontWeight="medium"
              >
                <LuArrowLeft /> {t("back-to-leagues")}
              </ChakraLink>

              {leagueQuery.isLoading ? (
                <Spinner color="white" borderWidth="3px" size="xl" />
              ) : league ? (
                <>
                  <HStack gap={3}>
                    <Badge
                      colorScheme={
                        league.sport === "football" ? "green" : "orange"
                      }
                      variant="solid"
                      bg="whiteAlpha.300"
                      size="lg"
                      px={4}
                      py={1}
                      rounded="full"
                    >
                      {league.sport}
                    </Badge>
                    {league.season && (
                      <Badge
                        variant="outline"
                        color="white"
                        borderColor="whiteAlpha.400"
                        size="lg"
                        px={4}
                        py={1}
                        rounded="full"
                      >
                        SEZON: {league.season}
                      </Badge>
                    )}
                  </HStack>
                  <Heading
                    as="h1"
                    fontSize={{ base: "3xl", md: "5xl" }}
                    fontWeight="800"
                    letterSpacing="tight"
                  >
                    {league.name}
                  </Heading>
                  <HStack fontSize="lg" color="whiteAlpha.900">
                    <LuMapPin />
                    <Text>{league.country?.name || "Global"}</Text>
                  </HStack>
                </>
              ) : (
                <Heading>{t("league-not-found")}</Heading>
              )}
            </VStack>
          </SlideUp>
        </Box>
      </Box>

      {/* Main Content Area */}
      <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] }}
        >
          <Box
            bg={useColorModeValue("white", "gray.900")}
            p={{ base: 4, md: 8 }}
            shadow="xl"
            borderRadius="2xl"
            borderWidth="1px"
            borderColor={useColorModeValue("gray.200", "gray.800")}
          >
            <Heading size="md" mb={6}>
              {t("past-matches")}
            </Heading>
            <MatchList
              flatMatches={flatMatches}
              isLoading={matchesQuery.isLoading || leagueQuery.isLoading}
            />
          </Box>
        </SlideUp>
      </Box>
    </Box>
  );
}
