"use client";

import {
  Box,
  Flex,
  Heading,
  Text,
  Button,
  SimpleGrid,
  Card,
  VStack,
  HStack,
  Icon,
} from "@chakra-ui/react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useColorModeValue } from "@/components/ui/color-mode";
import { motion } from "framer-motion";
import {
  ScrollSlideUp,
  StaggerContainer,
  StaggerItem,
  AnimatedCounter,
  Sparkles,
  GradientOrb,
  ScrollScaleIn,
  springs,
} from "@/components/motion";
import { LuBrain, LuTrendingUp, LuTicket, LuRadio } from "react-icons/lu";

const MotionBox = motion.create(Box);

// ========================
// Feature Card — glassmorphic with hover glow
// ========================

interface FeatureCardProps {
  icon: React.ReactNode;
  title: string;
  description: string;
  colorPalette: string;
}

function FeatureCard({
  icon,
  title,
  description,
  colorPalette,
}: FeatureCardProps) {
  const cardBg = useColorModeValue(
    "rgba(255, 255, 255, 0.8)",
    "rgba(26, 32, 44, 0.7)",
  );
  const borderColor = useColorModeValue(
    "rgba(255, 255, 255, 0.6)",
    "rgba(255, 255, 255, 0.06)",
  );

  return (
    <Card.Root
      bg={cardBg}
      borderColor={borderColor}
      borderRadius="2xl"
      backdropFilter="blur(12px)"
      position="relative"
      overflow="hidden"
      _hover={{
        transform: "translateY(-6px)",
        shadow: "2xl",
        borderColor: `${colorPalette}.400`,
      }}
      transition="all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1)"
    >
      {/* Hover glow effect */}
      <Box
        position="absolute"
        top="-50%"
        left="-50%"
        w="200%"
        h="200%"
        bg={`radial-gradient(circle at center, ${colorPalette === "primary" ? "rgba(56,178,172,0.06)" : colorPalette === "green" ? "rgba(72,187,120,0.06)" : colorPalette === "purple" ? "rgba(128,90,213,0.06)" : "rgba(245,101,101,0.06)"} 0%, transparent 70%)`}
        opacity={0}
        transition="opacity 0.4s"
        _groupHover={{ opacity: 1 }}
        pointerEvents="none"
      />
      <Card.Body>
        <VStack gap={4} align="flex-start">
          <Flex
            boxSize="56px"
            bg={`${colorPalette}.subtle`}
            borderRadius="xl"
            align="center"
            justify="center"
            color={`${colorPalette}.fg`}
            fontSize="2xl"
            shadow="sm"
          >
            {icon}
          </Flex>
          <Box>
            <Text fontSize="lg" fontWeight="bold" mb={1}>
              {title}
            </Text>
            <Text fontSize="sm" color="fg.muted" lineHeight="tall">
              {description}
            </Text>
          </Box>
        </VStack>
      </Card.Body>
    </Card.Root>
  );
}

// ========================
// Stat Block — with real counting animation
// ========================

interface StatBlockProps {
  value: number;
  label: string;
  suffix?: string;
}

function StatBlock({ value, label, suffix }: StatBlockProps) {
  return (
    <VStack gap={1}>
      <Text
        fontSize={{ base: "3xl", md: "4xl" }}
        fontWeight="900"
        className="gradient-text"
      >
        <AnimatedCounter value={value} suffix={suffix} duration={2.5} />
      </Text>
      <Text fontSize="sm" color="fg.muted" fontWeight="medium">
        {label}
      </Text>
    </VStack>
  );
}

// ========================
// Home Content — Premium
// ========================

export default function HomeContent() {
  const t = useTranslations("landing");
  const router = useRouter();

  const heroBg = useColorModeValue(
    "linear-gradient(135deg, #E6FFFA 0%, #C4F1F9 25%, #B2F5EA 50%, #81E6D9 75%, #4FD1C5 100%)",
    "linear-gradient(135deg, #1A202C 0%, #1D4044 30%, #234E52 60%, #285E61 100%)",
  );
  const heroTextColor = useColorModeValue("gray.800", "white");
  const statsBg = useColorModeValue(
    "rgba(255, 255, 255, 0.6)",
    "rgba(26, 32, 44, 0.6)",
  );
  const statsBorder = useColorModeValue(
    "rgba(255, 255, 255, 0.8)",
    "rgba(255, 255, 255, 0.06)",
  );

  return (
    <Box className="gradient-mesh" position="relative">
      {/* Hero Section */}
      <MotionBox
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7, ease: [0.25, 0.1, 0.25, 1] }}
      >
        <Box
          bgGradient={heroBg}
          borderRadius="3xl"
          px={{ base: 6, md: 12 }}
          py={{ base: 14, md: 24 }}
          mb={12}
          position="relative"
          overflow="hidden"
        >
          {/* Animated gradient orbs */}
          <GradientOrb
            color="rgba(56, 178, 172, 0.2)"
            size={250}
            top="-80px"
            right="-60px"
            blur={80}
          />
          <GradientOrb
            color="rgba(128, 90, 213, 0.15)"
            size={200}
            bottom="-60px"
            left="-40px"
            blur={70}
          />
          <GradientOrb
            color="rgba(66, 153, 225, 0.1)"
            size={150}
            top="50%"
            right="20%"
            blur={50}
          />

          {/* Sparkle particles */}
          <Sparkles count={8} color="rgba(255, 255, 255, 0.4)" />

          {/* Decorative grid pattern */}
          <Box
            position="absolute"
            inset={0}
            opacity={0.03}
            backgroundImage="radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)"
            backgroundSize="40px 40px"
            pointerEvents="none"
          />

          <VStack
            gap={6}
            position="relative"
            zIndex={1}
            maxW="2xl"
            mx="auto"
            textAlign="center"
          >
            <MotionBox
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2, duration: 0.6 }}
            >
              <Heading
                as="h1"
                fontSize={{ base: "3xl", md: "5xl", lg: "6xl" }}
                fontWeight="800"
                color={heroTextColor}
                lineHeight="shorter"
                letterSpacing="tight"
              >
                {t("hero-title")}
              </Heading>
            </MotionBox>

            <MotionBox
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4, duration: 0.6 }}
            >
              <Text
                fontSize={{ base: "md", md: "lg" }}
                color={heroTextColor}
                opacity={0.85}
                maxW="lg"
                lineHeight="tall"
              >
                {t("hero-subtitle")}
              </Text>
            </MotionBox>

            <MotionBox
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.6, duration: 0.6 }}
            >
              <HStack gap={4} mt={2}>
                <Button
                  size="lg"
                  colorPalette="primary"
                  borderRadius="full"
                  px={8}
                  fontWeight="bold"
                  onClick={() => router.push("/matches")}
                  _hover={{ transform: "scale(1.05)", shadow: "xl" }}
                  transition="all 0.3s"
                  className="animate-glow"
                >
                  {t("get-started")} →
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  borderRadius="full"
                  px={8}
                  color={heroTextColor}
                  borderColor={heroTextColor}
                  _hover={{
                    bg: "whiteAlpha.200",
                    transform: "scale(1.03)",
                  }}
                  transition="all 0.3s"
                >
                  {t("learn-more")}
                </Button>
              </HStack>
            </MotionBox>
          </VStack>
        </Box>
      </MotionBox>

      {/* Stats Section — glassmorphic card */}
      <ScrollSlideUp>
        <Box
          bg={statsBg}
          backdropFilter="blur(16px) saturate(180%)"
          border="1px solid"
          borderColor={statsBorder}
          borderRadius="2xl"
          px={{ base: 4, md: 8 }}
          py={{ base: 6, md: 8 }}
          mb={16}
          shadow="lg"
        >
          <SimpleGrid columns={{ base: 2, md: 4 }} gap={6}>
            <StatBlock
              value={15000}
              label={t("stats-predictions")}
              suffix="+"
            />
            <StatBlock value={72} label={t("stats-accuracy")} suffix="%" />
            <StatBlock value={3200} label={t("stats-users")} suffix="+" />
            <StatBlock value={50000} label={t("stats-matches")} suffix="+" />
          </SimpleGrid>
        </Box>
      </ScrollSlideUp>

      {/* Features Section */}
      <Box mb={16}>
        <ScrollScaleIn>
          <Heading
            as="h2"
            size="xl"
            textAlign="center"
            mb={3}
            fontWeight="bold"
          >
            {t("features-title")}
          </Heading>
          <Text
            textAlign="center"
            color="fg.muted"
            fontSize="md"
            maxW="lg"
            mx="auto"
            mb={10}
          >
            {t("hero-subtitle")}
          </Text>
        </ScrollScaleIn>

        <StaggerContainer inView>
          <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} gap={6}>
            <StaggerItem>
              <FeatureCard
                icon={<LuBrain />}
                title={t("feature-ai")}
                description={t("feature-ai-desc")}
                colorPalette="primary"
              />
            </StaggerItem>
            <StaggerItem>
              <FeatureCard
                icon={<LuTrendingUp />}
                title={t("feature-value")}
                description={t("feature-value-desc")}
                colorPalette="green"
              />
            </StaggerItem>
            <StaggerItem>
              <FeatureCard
                icon={<LuTicket />}
                title={t("feature-coupon")}
                description={t("feature-coupon-desc")}
                colorPalette="purple"
              />
            </StaggerItem>
            <StaggerItem>
              <FeatureCard
                icon={<LuRadio />}
                title={t("feature-live")}
                description={t("feature-live-desc")}
                colorPalette="red"
              />
            </StaggerItem>
          </SimpleGrid>
        </StaggerContainer>
      </Box>
    </Box>
  );
}
