"use client";

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

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

/**
 * PhoneInput - 전화번호 자동 포맷팅 입력 컴포넌트
 *
 * 특징:
 * - 입력 시 자동 하이픈 삽입 (010-1234-5678)
 * - 숫자만 입력 허용
 * - onChange에는 숫자만 전달 (DB 저장용)
 * - 복사/붙여넣기 시 숫자만 추출
 *
 * @example
 * <PhoneInput
 *   value={phoneNumber}
 *   onChange={setPhoneNumber}
 *   placeholder="전화번호를 입력하세요"
 * />
 */
const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
  ({ className, value, onChange, error, ...props }, ref) => {
    // 표시용 포맷된 값
    const displayValue = React.useMemo(() => formatPhoneNumber(value || ""), [value]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const inputValue = e.target.value;
      // 숫자만 추출하여 전달
      const numbersOnly = parsePhoneNumber(inputValue);
      // 최대 11자리 (휴대폰 번호 기준)
      onChange(numbersOnly.slice(0, 11));
    };

    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 = parsePhoneNumber(pastedText);
      onChange(numbersOnly.slice(0, 11));
    };

    return (
      <input
        type="tel"
        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}
      />
    );
  }
);

PhoneInput.displayName = "PhoneInput";

export { PhoneInput };