"use client";

import {
  Box,
  Card,
  Heading,
  Text,
  VStack,
  HStack,
  Button,
  Badge,
} from "@chakra-ui/react";
import { useTranslations } from "next-intl";
import { useColorModeValue } from "@/components/ui/color-mode";
import type { PlanInfo } from "@/lib/api/subscriptions/types";
import { LuCheck, LuZap, LuCrown, LuRocket } from "react-icons/lu";

interface PricingCardProps {
  plan: PlanInfo;
  isCurrentPlan: boolean;
  isYearly: boolean;
  onSelect: (plan: PlanInfo) => void;
  isLoading: boolean;
}

const planIconMap: Record<string, React.ReactNode> = {
  free: <LuZap size={20} />,
  plus: <LuRocket size={20} />,
  premium: <LuCrown size={20} />,
};

/**
 * Individual pricing card for a subscription plan.
 * Shows plan details, features, price, and CTA button.
 */
export function PricingCard({
  plan,
  isCurrentPlan,
  isYearly,
  onSelect,
  isLoading,
}: PricingCardProps) {
  const t = useTranslations("pricing");

  const highlightBorder = useColorModeValue("primary.500", "primary.400");
  const cardBg = useColorModeValue("white", "gray.900");
  const mutedText = useColorModeValue("gray.500", "gray.400");

  const price = isYearly ? plan.yearlyPrice : plan.monthlyPrice;
  const displayPrice = isYearly
    ? Math.round(plan.yearlyPrice / 12)
    : plan.monthlyPrice;
  const isFree = plan.id === "free";

  const buttonLabel = isCurrentPlan
    ? t("current-plan")
    : isFree
      ? t("get-started")
      : t("upgrade");

  return (
    <Card.Root
      bg={cardBg}
      borderWidth={plan.highlighted ? "2px" : "1px"}
      borderColor={plan.highlighted ? highlightBorder : "border.muted"}
      borderRadius="2xl"
      position="relative"
      overflow="visible"
      transition="all 0.3s ease"
      _hover={{
        transform: "translateY(-4px)",
        shadow: plan.highlighted ? "2xl" : "lg",
      }}
      height="full"
    >
      {/* Most Popular Badge */}
      {plan.highlighted && (
        <Badge
          position="absolute"
          top="-3"
          left="50%"
          transform="translateX(-50%)"
          colorPalette="primary"
          variant="solid"
          borderRadius="full"
          px={4}
          py={1}
          fontSize="xs"
          fontWeight="bold"
          whiteSpace="nowrap"
        >
          {t("most-popular")}
        </Badge>
      )}

      <Card.Body p={6}>
        <VStack gap={6} align="stretch" height="full">
          {/* Plan Header */}
          <VStack gap={2} align="start">
            <HStack gap={2}>
              <Box
                p={2}
                borderRadius="lg"
                bg={plan.highlighted ? "primary.50" : "gray.50"}
                _dark={{
                  bg: plan.highlighted ? "primary.950" : "gray.800",
                }}
                color={plan.highlighted ? "primary.500" : "fg.muted"}
              >
                {planIconMap[plan.id] ?? <LuZap size={20} />}
              </Box>
              <Heading as="h3" size="lg" fontWeight="bold">
                {plan.name}
              </Heading>
            </HStack>
            <Text fontSize="sm" color={mutedText} minH="10">
              {plan.description}
            </Text>
          </VStack>

          {/* Price */}
          <Box>
            {isFree ? (
              <VStack gap={0} align="start">
                <HStack gap={1} align="baseline">
                  <Text fontSize="4xl" fontWeight="900" lineHeight="1">
                    {plan.currency === "TRY" ? "₺" : "$"}0
                  </Text>
                </HStack>
                <Text fontSize="xs" color={mutedText}>
                  {t("free-forever")}
                </Text>
              </VStack>
            ) : (
              <VStack gap={0} align="start">
                <HStack gap={1} align="baseline">
                  <Text fontSize="4xl" fontWeight="900" lineHeight="1">
                    {plan.currency === "TRY" ? "₺" : "$"}
                    {displayPrice}
                  </Text>
                  <Text fontSize="sm" color={mutedText}>
                    {t("per-month")}
                  </Text>
                </HStack>
                {isYearly && (
                  <Text fontSize="xs" color={mutedText}>
                    {plan.currency === "TRY" ? "₺" : "$"}
                    {price}
                    {t("per-year")} · {t("billed-yearly")}
                  </Text>
                )}
              </VStack>
            )}
          </Box>

          {/* Features List */}
          <VStack gap={3} align="start" flex={1}>
            {plan.features.map((feature) => (
              <HStack key={feature} gap={2} align="start">
                <Box
                  color={plan.highlighted ? "primary.500" : "green.500"}
                  mt="0.5"
                  flexShrink={0}
                >
                  <LuCheck size={16} />
                </Box>
                <Text fontSize="sm">{feature}</Text>
              </HStack>
            ))}
          </VStack>

          {/* CTA */}
          <Button
            w="full"
            size="lg"
            borderRadius="xl"
            fontWeight="bold"
            variant={
              isCurrentPlan ? "outline" : plan.highlighted ? "solid" : "outline"
            }
            colorPalette={plan.highlighted ? "primary" : "gray"}
            disabled={isCurrentPlan}
            loading={isLoading}
            onClick={() => onSelect(plan)}
          >
            {buttonLabel}
          </Button>
        </VStack>
      </Card.Body>
    </Card.Root>
  );
}
