"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { formatCardNumber, parseCardNumber } from "@/lib/formatters";

export interface CardNumberInputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "type"> {
  value: string;
  onChange: (value: string) => void;
  error?: boolean;
}

/**
 * CardNumberInput - 카드번호 자동 포맷팅 입력 컴포넌트
 *
 * 특징:
 * - 입력 시 자동 하이픈 삽입 (0000-0000-0000-0000)
 * - 숫자만 입력 허용 (최대 16자리)
 * - onChange에는 숫자만 전달 (DB 저장용)
 * - 복사/붙여넣기 시 숫자만 추출
 *
 * @example
 * <CardNumberInput
 *   value={cardNumber}
 *   onChange={setCardNumber}
 *   placeholder="카드번호를 입력하세요"
 * />
 */
const CardNumberInput = React.forwardRef<HTMLInputElement, CardNumberInputProps>(
  ({ className, value, onChange, error, ...props }, ref) => {
    // 마스킹된 값(****-****-****-1234) 여부 판별
    const isMasked = value?.includes('*') ?? false;

    // 표시용 포맷된 값: 마스킹이면 그대로, 숫자만이면 포맷팅
    const displayValue = React.useMemo(() => {
      if (!value) return "";
      if (isMasked) return value;
      return formatCardNumber(value);
    }, [value, isMasked]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const inputValue = e.target.value;
      // 숫자만 추출하여 전달 (마스킹 문자 자동 제거)
      const numbersOnly = parseCardNumber(inputValue);
      onChange(numbersOnly);
    };

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
      // 숫자, 백스페이스, 탭, 화살표, 복사/붙여넣기 허용
      const allowedKeys = [
        "Backspace", "Delete", "Tab", "Escape", "Enter",
        "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
        "Home", "End"
      ];

      if (allowedKeys.includes(e.key)) return;

      // Ctrl/Cmd + A, C, V, X 허용
      if ((e.ctrlKey || e.metaKey) && ["a", "c", "v", "x"].includes(e.key.toLowerCase())) {
        return;
      }

      // 숫자가 아니면 차단
      if (!/^\d$/.test(e.key)) {
        e.preventDefault();
      }
    };

    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
      e.preventDefault();
      const pastedText = e.clipboardData.getData("text");
      const numbersOnly = parseCardNumber(pastedText);
      onChange(numbersOnly);
    };

    return (
      <input
        type="text"
        inputMode="numeric"
        ref={ref}
        data-slot="input"
        className={cn(
          "file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
          error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/20",
          className
        )}
        value={displayValue}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        onPaste={handlePaste}
        {...props}
      />
    );
  }
);

CardNumberInput.displayName = "CardNumberInput";

export { CardNumberInput };