"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

/* ---------------------------------- Types --------------------------------- */

export interface PaymentCardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof cardVariants> {
  network?: "visa" | "mastercard" | "amex" | "discover" | "generic";
  number?: string;
  holderName?: string;
  expiryMonth?: string | number;
  expiryYear?: string | number;
  showChip?: boolean;
  showLogo?: boolean;
  isHoverable?: boolean;
  isFlippable?: boolean;
  aspectRatio?: "standard" | "wide" | "square";
}

export interface PaymentCardChipProps
  extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "minimal" | "detailed";
}

export interface PaymentCardNumberProps
  extends React.HTMLAttributes<HTMLDivElement> {
  value?: string;
  format?: "grouped" | "single" | "masked";
}

export interface PaymentCardHolderProps
  extends React.HTMLAttributes<HTMLDivElement> {
  name?: string;
  label?: string;
}

export interface PaymentCardExpiryProps
  extends React.HTMLAttributes<HTMLDivElement> {
  month?: string | number;
  year?: string | number;
  label?: string;
}

export interface PaymentCardNetworkProps
  extends React.HTMLAttributes<HTMLDivElement> {
  network?: "visa" | "mastercard" | "amex" | "discover" | "generic";
}

/* -------------------------------- Variants -------------------------------- */

const cardVariants = cva(
  "relative overflow-hidden transition-all duration-300 ease-out text-white",
  {
    variants: {
      variant: {
        default: "bg-[#111111] p-6",
        gradient: "bg-gradient-to-r from-[#0f509e] to-[#1399cd] p-6",
        outline: "bg-white text-black border border-neutral-200 p-6",
        flat: "bg-neutral-100 text-black p-6",
      },
      size: {
        default: "w-[340px] h-[215px]",
        sm: "w-[272px] h-[172px] p-4",
        lg: "w-[408px] h-[258px] p-8",
      },
      radius: {
        default: "rounded-xl",
        sm: "rounded-lg",
        lg: "rounded-2xl",
        none: "rounded-none",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      radius: "default",
    },
  }
);

/* ------------------------------ Main Component ----------------------------- */

const PaymentCard = React.forwardRef<HTMLDivElement, PaymentCardProps>(
  (
    {
      className,
      variant,
      size,
      radius,
      network = "visa",
      number = "4242424242424242",
      holderName = "TEST USER",
      expiryMonth = "12",
      expiryYear = "29",
      showChip = true,
      showLogo = true,
      isHoverable = true,
      isFlippable = false,
      aspectRatio = "standard",
      children,
      ...props
    },
    ref
  ) => {
    const [isHovered, setIsHovered] = React.useState(false);

    // Format card number with spaces
    const formattedNumber = React.useMemo(() => {
      if (!number) return "";
      return number.replace(/(\d{4})/g, "$1 ").trim();
    }, [number]);

    // Handle hover state
    const hoverProps = isHoverable
      ? {
          onMouseEnter: () => setIsHovered(true),
          onMouseLeave: () => setIsHovered(false),
        }
      : {};

    // Dynamic styles based on hover
    const dynamicStyles = isHoverable
      ? {
          boxShadow: isHovered
            ? "0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05)"
            : "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05)",
          transform: isHovered ? "translateY(-2px)" : "translateY(0)",
        }
      : {};

    return (
      <div
        ref={ref}
        className={cn(cardVariants({ variant, size, radius }), className)}
        style={dynamicStyles}
        {...hoverProps}
        {...props}
      >
        {/* Subtle gradient overlay */}
        <div className="absolute inset-0 bg-gradient-to-br from-neutral-800 to-neutral-900 opacity-40" />

        {/* Minimal shine effect */}
        {isHoverable && (
          <div
            className={`absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent transition-opacity duration-1500 ease-out ${
              isHovered ? "opacity-100" : "opacity-0"
            }`}
            style={{
              backgroundSize: "200% 100%",
              backgroundPosition: isHovered ? "right center" : "left center",
              transition:
                "background-position 1.5s ease-out, opacity 0.3s ease-out",
            }}
          />
        )}

        <div className="relative h-full flex flex-col justify-between">
          {/* Top section */}
          <div className="flex justify-between items-start">
            {/* Chip */}
            {showChip && <PaymentCardChip variant="default" />}

            {/* Network logo */}
            {showLogo && <PaymentCardNetwork network={network} />}
          </div>

          {/* Middle section - Card number */}
          <PaymentCardNumber value={formattedNumber} />

          {/* Bottom section */}
          <div className="flex justify-between items-end">
            <PaymentCardHolder name={holderName} />
            <PaymentCardExpiry month={expiryMonth} year={expiryYear} />
          </div>

          {children}
        </div>
      </div>
    );
  }
);
PaymentCard.displayName = "PaymentCard";

/* ---------------------------- Sub Components ---------------------------- */

const PaymentCardChip = React.forwardRef<HTMLDivElement, PaymentCardChipProps>(
  ({ className, variant = "minimal", ...props }, ref) => {
    const chipVariants = {
      default:
        "h-9 w-12 rounded-md bg-yellow-500/90 border border-yellow-600/50",
      minimal: "h-9 w-12 rounded-md bg-neutral-800 border border-neutral-700",
      detailed:
        "h-9 w-12 rounded-md bg-gradient-to-br from-yellow-500 to-yellow-300 border border-yellow-600/50",
    };

    return (
      <div
        ref={ref}
        className={cn(
          chipVariants[variant],
          "overflow-hidden flex items-center justify-center",
          className
        )}
        {...props}
      >
        <div className="w-full h-full grid grid-cols-2 gap-px p-px">
          <div className="bg-neutral-700/50 rounded-sm"></div>
          <div className="bg-neutral-700/50 rounded-sm"></div>
          <div className="bg-neutral-700/50 rounded-sm"></div>
          <div className="bg-neutral-700/50 rounded-sm"></div>
          <div className="bg-neutral-700/50 rounded-sm"></div>
          <div className="bg-neutral-700/50 rounded-sm"></div>
        </div>
      </div>
    );
  }
);
PaymentCardChip.displayName = "PaymentCardChip";

const PaymentCardNumber = React.forwardRef<
  HTMLDivElement,
  PaymentCardNumberProps
>(
  (
    { className, value = "4242 4242 4242 4242", format = "grouped", ...props },
    ref
  ) => {
    // Format the card number based on the format prop
    const displayValue = React.useMemo(() => {
      if (format === "masked") {
        // Show only last 4 digits
        return value.replace(/\d(?=\d{4})/g, "•");
      }
      if (format === "single") {
        // Remove spaces
        return value.replace(/\s/g, "");
      }
      // Default: grouped (already formatted)
      return value;
    }, [value, format]);

    return (
      <div
        ref={ref}
        className={cn(
          "font-mono text-base tracking-widest text-white/90 mt-2",
          className
        )}
        {...props}
      >
        {format === "grouped" ? (
          <div className="flex space-x-4">
            {displayValue.split(" ").map((group, index) => (
              <span key={index}>{group}</span>
            ))}
          </div>
        ) : (
          <div>{displayValue}</div>
        )}
      </div>
    );
  }
);
PaymentCardNumber.displayName = "PaymentCardNumber";

const PaymentCardHolder = React.forwardRef<
  HTMLDivElement,
  PaymentCardHolderProps
>(({ className, name = "TEST USER", label = "Card Holder", ...props }, ref) => {
  return (
    <div ref={ref} className={cn("", className)} {...props}>
      <div className="text-[10px] text-white/60 uppercase mb-1 tracking-wider">
        {label}
      </div>
      <div className="font-mono text-sm tracking-wide uppercase text-white/90">
        {name}
      </div>
    </div>
  );
});
PaymentCardHolder.displayName = "PaymentCardHolder";

const PaymentCardExpiry = React.forwardRef<
  HTMLDivElement,
  PaymentCardExpiryProps
>(
  (
    { className, month = "12", year = "29", label = "Expires", ...props },
    ref
  ) => {
    return (
      <div ref={ref} className={cn("", className)} {...props}>
        <div className="text-[10px] text-white/60 uppercase mb-1 tracking-wider">
          {label}
        </div>
        <div className="font-mono text-sm tracking-wide text-white/90">
          {month}/{year}
        </div>
      </div>
    );
  }
);
PaymentCardExpiry.displayName = "PaymentCardExpiry";

const PaymentCardNetwork = React.forwardRef<
  HTMLDivElement,
  PaymentCardNetworkProps
>(({ className, network = "visa", ...props }, ref) => {
  return (
    <div ref={ref} className={cn("", className)} {...props}>
      {network === "visa" && (
        <svg
          width="42"
          height="14"
          viewBox="0 0 42 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M17.5 13.5H13.5L16 0.5H20L17.5 13.5Z" fill="white" />
          <path
            d="M30 0.8C29.2 0.5 27.8 0.2 26.1 0.2C22.8 0.2 20.5 1.9 20.5 4.5C20.5 6.4 22.2 7.5 23.3 8.1C24.4 8.7 24.7 9.2 24.7 9.5C24.7 10.1 23.9 10.4 23.1 10.4C22 10.4 20.9 10.1 20 9.5L19.5 9.2L19 12.5C19.9 13 21.6 13.3 23.3 13.3C26.8 13.3 29 11.6 29 8.9C29 7.5 28.2 6.4 26.2 5.5C25 5 24.5 4.7 24.5 4.2C24.5 3.7 25 3.4 26.1 3.4C27 3.4 27.8 3.7 28.3 3.7L28.8 4L30 0.8Z"
            fill="white"
          />
          <path
            d="M34.8 8.9C35.1 8.1 36.2 5 36.2 5C36.2 5 36.5 4.2 36.7 3.6L37 4.7C37 4.7 37.5 8.1 37.8 8.9H34.8ZM39.8 0.5H36.7C35.9 0.5 35.3 0.8 35 1.6L30 13.5H33.9C33.9 13.5 34.5 12.1 34.7 11.5H39.5C39.8 12.3 40.1 13.5 40.1 13.5H43.5L39.8 0.5Z"
            fill="white"
          />
          <path
            d="M11.8 0.5L8.2 9.2L7.9 7.8C7.1 5.6 5.1 3.3 2.8 2.2L6.2 13.5H10.1L15.7 0.5H11.8Z"
            fill="white"
          />
          <path
            d="M5.6 0.5H0L0 0.8C4.2 1.9 7 4.4 8.2 7.8L7 1.6C6.7 0.8 6.2 0.5 5.6 0.5Z"
            fill="white"
          />
        </svg>
      )}
      {network === "mastercard" && (
        <svg
          width="30"
          height="18"
          viewBox="0 0 30 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="9" cy="9" r="9" fill="#EB001B" fillOpacity="0.8" />
          <circle cx="21" cy="9" r="9" fill="#F79E1B" fillOpacity="0.8" />
          <path
            d="M15 14.5C17.5 12.5 17.5 5.5 15 3.5C12.5 5.5 12.5 12.5 15 14.5Z"
            fill="white"
            fillOpacity="0.8"
          />
        </svg>
      )}
      {network === "amex" && (
        <svg
          width="30"
          height="18"
          viewBox="0 0 30 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <rect
            width="30"
            height="18"
            rx="2"
            fill="#006FCF"
            fillOpacity="0.8"
          />
          <path
            d="M3 9L6 3H10L11.5 6L13 3H27V9L25 11L27 13V18H13L11.5 15L10 18H6L3 12V9Z"
            stroke="white"
            strokeOpacity="0.8"
            strokeWidth="0.5"
          />
          <path
            d="M15 6H20L21 9L20 12H15L14 9L15 6Z"
            stroke="white"
            strokeOpacity="0.8"
            strokeWidth="0.5"
          />
        </svg>
      )}
      {network === "discover" && (
        <svg
          width="30"
          height="18"
          viewBox="0 0 30 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <rect
            width="30"
            height="18"
            rx="2"
            fill="#FF6600"
            fillOpacity="0.8"
          />
          <path
            d="M20 9C20 12.3137 17.3137 15 14 15C10.6863 15 8 12.3137 8 9C8 5.68629 10.6863 3 14 3C17.3137 3 20 5.68629 20 9Z"
            fill="white"
            fillOpacity="0.8"
          />
        </svg>
      )}
      {network === "generic" && (
        <svg
          width="30"
          height="18"
          viewBox="0 0 30 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <rect width="30" height="18" rx="2" fill="white" fillOpacity="0.2" />
          <path
            d="M6 6H24M6 9H16M6 12H20"
            stroke="white"
            strokeOpacity="0.8"
            strokeWidth="1.5"
            strokeLinecap="round"
          />
        </svg>
      )}
    </div>
  );
});
PaymentCardNetwork.displayName = "PaymentCardNetwork";

export {
  PaymentCard,
  PaymentCardChip,
  PaymentCardNumber,
  PaymentCardHolder,
  PaymentCardExpiry,
  PaymentCardNetwork,
};