"use client";

import { useState } from "react";
import {
  Box,
  Flex,
  Input,
  Text,
  VStack,
  HStack,
  Heading,
  Image,
  Spinner,
  Card,
} from "@chakra-ui/react";
import { useTranslations } from "next-intl";
import { useColorModeValue } from "@/components/ui/color-mode";
import { SlideUp } from "@/components/motion";
import { useSearchTeams } from "@/lib/api/leagues/use-hooks";
import { useRouter } from "@/i18n/navigation";
import { LuSearch } from "react-icons/lu";
import type { TeamDto } from "@/lib/api/leagues/types";

export default function TeamsContent() {
  const t = useTranslations();
  const [query, setQuery] = useState("");
  const router = useRouter();

  const cardBg = useColorModeValue("white", "gray.800");
  const borderColor = useColorModeValue("gray.100", "gray.700");
  const hoverBg = useColorModeValue("gray.50", "gray.700");

  const { data: searchData, isLoading } = useSearchTeams({ q: query });
  const teams: TeamDto[] = searchData?.data ?? [];

  return (
    <SlideUp>
      <Box>
        <Heading as="h1" size="xl" mb={6}>
          🔍 {t("nav.teams")}
        </Heading>

        {/* Search Bar */}
        <Flex
          align="center"
          bg={cardBg}
          borderRadius="xl"
          border="1px solid"
          borderColor={borderColor}
          px={4}
          py={2}
          mb={6}
          gap={3}
        >
          <LuSearch style={{ opacity: 0.5, flexShrink: 0 }} />
          <Input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Takım adı yazın... (min 2 karakter)"
            variant="flushed"
            size="lg"
            fontSize="md"
          />
        </Flex>

        {/* Results */}
        {isLoading ? (
          <Flex justify="center" py={10}>
            <Spinner size="lg" color="primary.500" />
          </Flex>
        ) : query.length < 2 ? (
          <Flex
            justify="center"
            py={16}
            direction="column"
            align="center"
            gap={3}
          >
            <Text fontSize="5xl">⚽</Text>
            <Text color="fg.muted" fontSize="lg">
              Aramak istediğiniz takımın adını yazın
            </Text>
            <Text color="fg.muted" fontSize="sm">
              Örnek: Galatasaray, Barcelona, Manchester City
            </Text>
          </Flex>
        ) : teams.length === 0 ? (
          <Flex justify="center" py={10}>
            <Text color="fg.muted">Sonuç bulunamadı</Text>
          </Flex>
        ) : (
          <VStack gap={3} align="stretch">
            {teams.map((team: TeamDto) => (
              <Card.Root
                key={team.id}
                bg={cardBg}
                borderColor={borderColor}
                borderRadius="xl"
                cursor="pointer"
                transition="all 0.2s"
                _hover={{
                  bg: hoverBg,
                  transform: "translateY(-2px)",
                  shadow: "md",
                }}
                onClick={() => router.push(`/teams/${team.id}`)}
              >
                <Card.Body>
                  <HStack gap={4}>
                    {team.logo ? (
                      <Image
                        src={team.logo}
                        alt={team.name}
                        boxSize="48px"
                        objectFit="contain"
                        borderRadius="lg"
                      />
                    ) : (
                      <Flex
                        boxSize="48px"
                        bg="primary.subtle"
                        borderRadius="lg"
                        align="center"
                        justify="center"
                      >
                        <Text
                          fontSize="xl"
                          fontWeight="bold"
                          color="primary.fg"
                        >
                          {team.name?.charAt(0) || "T"}
                        </Text>
                      </Flex>
                    )}
                    <Box flex={1}>
                      <Text fontSize="md" fontWeight="700">
                        {team.name}
                      </Text>
                      {team.country && (
                        <Text fontSize="sm" color="fg.muted">
                          {team.country}
                        </Text>
                      )}
                    </Box>
                    <Text fontSize="sm" color="fg.muted">
                      →
                    </Text>
                  </HStack>
                </Card.Body>
              </Card.Root>
            ))}
          </VStack>
        )}
      </Box>
    </SlideUp>
  );
}