"use client"

import React, { useState, useRef, useEffect } from "react"
import { cn } from "../../lib/utils"
import { Input } from "../ui/input"
import { Label } from "../ui/label"
import { CreditCard, Lock } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"

export interface CreditCardInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
  value?: {
    number: string
    expiry: string
    cvc: string
    name?: string
  }
  onChange?: (value: {
    number: string
    expiry: string
    cvc: string
    name?: string
  }) => void
  showCardPreview?: boolean
  showCardType?: boolean
  showSecurityBadge?: boolean
  autoFormat?: boolean
  validateOnChange?: boolean
  labels?: {
    number?: string
    expiry?: string
    cvc?: string
    name?: string
  }
  placeholders?: {
    number?: string
    expiry?: string
    cvc?: string
    name?: string
  }
  errors?: {
    number?: string
    expiry?: string
    cvc?: string
    name?: string
  }
  className?: string
  inputClassName?: string
  labelClassName?: string
  errorClassName?: string
}

// Kart tipi tespiti için regex patternleri
const cardPatterns = {
  visa: /^4/,
  mastercard: /^5[1-5]/,
  amex: /^3[47]/,
  discover: /^6(?:011|5)/,
  diners: /^3(?:0[0-5]|[68])/,
  jcb: /^35/,
  unionpay: /^62/
}

// Kart numarası formatlama fonksiyonu
function formatCardNumber(value: string, cardType?: string): string {
  const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
  const matches = cardType === 'amex' 
    ? v.match(/\d{1,4}/g) 
    : v.match(/\d{1,4}/g)
  return matches ? matches.join(' ') : v
}

// Expiry formatlama fonksiyonu
function formatExpiry(value: string): string {
  const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
  if (v.length >= 2) {
    return v.slice(0, 2) + (v.length > 2 ? '/' + v.slice(2, 4) : '')
  }
  return v
}

// Kart tipi tespiti
function detectCardType(number: string): string | null {
  const cleanNumber = number.replace(/\s+/g, '')
  for (const [type, pattern] of Object.entries(cardPatterns)) {
    if (pattern.test(cleanNumber)) {
      return type
    }
  }
  return null
}

// Luhn algoritması ile kart numarası doğrulama
function validateCardNumber(number: string): boolean {
  const cleanNumber = number.replace(/\s+/g, '')
  if (!/^\d+$/.test(cleanNumber)) return false
  
  let sum = 0
  let isEven = false
  
  for (let i = cleanNumber.length - 1; i >= 0; i--) {
    let digit = parseInt(cleanNumber.charAt(i), 10)
    
    if (isEven) {
      digit *= 2
      if (digit > 9) {
        digit -= 9
      }
    }
    
    sum += digit
    isEven = !isEven
  }
  
  return sum % 10 === 0
}

// Expiry doğrulama
function validateExpiry(expiry: string): boolean {
  const parts = expiry.split('/')
  if (parts.length !== 2) return false
  
  const month = parseInt(parts[0], 10)
  const year = parseInt('20' + parts[1], 10)
  
  if (month < 1 || month > 12) return false
  
  const now = new Date()
  const expiryDate = new Date(year, month - 1)
  
  return expiryDate > now
}

export const MoonUICreditCardInputPro = React.forwardRef<HTMLDivElement, CreditCardInputProps>(({
  value = { number: '', expiry: '', cvc: '', name: '' },
  onChange,
  showCardPreview = true,
  showCardType = true,
  showSecurityBadge = true,
  autoFormat = true,
  validateOnChange = false,
  labels = {},
  placeholders = {},
  errors = {},
  className,
  inputClassName,
  labelClassName,
  errorClassName,
  disabled,
  required,
  ...props
}, ref) => {
  const [cardType, setCardType] = useState<string | null>(null)
  const [focused, setFocused] = useState<string | null>(null)
  const [localErrors, setLocalErrors] = useState<typeof errors>({})
  
  const numberRef = useRef<HTMLInputElement>(null)
  const expiryRef = useRef<HTMLInputElement>(null)
  const cvcRef = useRef<HTMLInputElement>(null)
  const nameRef = useRef<HTMLInputElement>(null)

  // Kart tipini tespit et
  useEffect(() => {
    const detectedType = detectCardType(value.number)
    setCardType(detectedType)
  }, [value.number])

  // Doğrulama
  useEffect(() => {
    if (!validateOnChange) return

    const newErrors: typeof errors = {}
    
    if (value.number && !validateCardNumber(value.number)) {
      newErrors.number = 'Invalid card number'
    }
    
    if (value.expiry && !validateExpiry(value.expiry)) {
      newErrors.expiry = 'Invalid expiry date'
    }
    
    if (value.cvc && (value.cvc.length < 3 || value.cvc.length > 4)) {
      newErrors.cvc = 'Invalid CVC'
    }
    
    setLocalErrors(newErrors)
  }, [value, validateOnChange])

  const handleChange = (field: keyof typeof value, newValue: string) => {
    let formattedValue = newValue
    
    if (autoFormat) {
      if (field === 'number') {
        formattedValue = formatCardNumber(newValue, cardType || undefined)
        // Maksimum uzunluk kontrolü
        const maxLength = cardType === 'amex' ? 18 : 19 // Boşluklarla birlikte
        if (formattedValue.length > maxLength) return
      } else if (field === 'expiry') {
        formattedValue = formatExpiry(newValue)
        if (formattedValue.length > 5) return
      } else if (field === 'cvc') {
        formattedValue = newValue.replace(/\D/g, '')
        const maxLength = cardType === 'amex' ? 4 : 3
        if (formattedValue.length > maxLength) return
      }
    }
    
    onChange?.({
      ...value,
      [field]: formattedValue
    })
    
    // Otomatik geçiş
    if (autoFormat) {
      if (field === 'number' && formattedValue.length === (cardType === 'amex' ? 18 : 19)) {
        expiryRef.current?.focus()
      } else if (field === 'expiry' && formattedValue.length === 5) {
        cvcRef.current?.focus()
      } else if (field === 'cvc' && formattedValue.length === (cardType === 'amex' ? 4 : 3)) {
        nameRef.current?.focus()
      }
    }
  }

  const displayErrors = { ...localErrors, ...errors }

  return (
    <div ref={ref} className={cn("space-y-4", className)} {...props}>
      {showCardPreview && (
        <motion.div
          className="relative w-full max-w-md mx-auto h-48 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700 p-6 text-white shadow-xl overflow-hidden"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
        >
          <div className="flex justify-between items-start mb-8">
            <div className="text-lg font-semibold">
              {cardType ? cardType.toUpperCase() : 'CARD'}
            </div>
            <CreditCard className="w-8 h-8 text-white/80" />
          </div>
          
          <div className="space-y-4">
            <div className="text-xl font-mono tracking-wider">
              {value.number || '•••• •••• •••• ••••'}
            </div>
            
            <div className="flex justify-between">
              <div>
                <div className="text-xs text-white/70">NAME</div>
                <div className="text-sm uppercase">
                  {value.name || 'YOUR NAME'}
                </div>
              </div>
              
              <div>
                <div className="text-xs text-white/70">EXPIRES</div>
                <div className="text-sm">
                  {value.expiry || 'MM/YY'}
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      )}

      <div className="space-y-4">
        {/* Kart Numarası */}
        <div className="space-y-1">
          <Label htmlFor="card-number" className={labelClassName}>
            {labels.number || 'Card Number'}
            {required && <span className="text-destructive ml-1">*</span>}
          </Label>
          <div className="relative">
            <Input
              ref={numberRef}
              id="card-number"
              type="text"
              inputMode="numeric"
              value={value.number}
              onChange={(e) => handleChange('number', e.target.value)}
              onFocus={() => setFocused('number')}
              onBlur={() => setFocused(null)}
              placeholder={placeholders.number || '1234 5678 9012 3456'}
              className={cn(
                "pr-20",
                displayErrors.number && "border-destructive",
                inputClassName
              )}
              disabled={disabled}
            />
            {showCardType && cardType && (
              <div className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-medium text-muted-foreground">
                {cardType.toUpperCase()}
              </div>
            )}
          </div>
          {displayErrors.number && (
            <p className={cn("text-sm text-destructive", errorClassName)}>
              {displayErrors.number}
            </p>
          )}
        </div>

        {/* Expiry ve CVC */}
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1">
            <Label htmlFor="card-expiry" className={labelClassName}>
              {labels.expiry || 'Expiry Date'}
              {required && <span className="text-destructive ml-1">*</span>}
            </Label>
            <Input
              ref={expiryRef}
              id="card-expiry"
              type="text"
              inputMode="numeric"
              value={value.expiry}
              onChange={(e) => handleChange('expiry', e.target.value)}
              onFocus={() => setFocused('expiry')}
              onBlur={() => setFocused(null)}
              placeholder={placeholders.expiry || 'MM/YY'}
              className={cn(
                displayErrors.expiry && "border-destructive",
                inputClassName
              )}
              disabled={disabled}
            />
            {displayErrors.expiry && (
              <p className={cn("text-sm text-destructive", errorClassName)}>
                {displayErrors.expiry}
              </p>
            )}
          </div>

          <div className="space-y-1">
            <Label htmlFor="card-cvc" className={labelClassName}>
              {labels.cvc || 'CVC'}
              {required && <span className="text-destructive ml-1">*</span>}
            </Label>
            <div className="relative">
              <Input
                ref={cvcRef}
                id="card-cvc"
                type="text"
                inputMode="numeric"
                value={value.cvc}
                onChange={(e) => handleChange('cvc', e.target.value)}
                onFocus={() => setFocused('cvc')}
                onBlur={() => setFocused(null)}
                placeholder={placeholders.cvc || cardType === 'amex' ? '1234' : '123'}
                className={cn(
                  displayErrors.cvc && "border-destructive",
                  inputClassName
                )}
                disabled={disabled}
              />
              {showSecurityBadge && (
                <Lock className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              )}
            </div>
            {displayErrors.cvc && (
              <p className={cn("text-sm text-destructive", errorClassName)}>
                {displayErrors.cvc}
              </p>
            )}
          </div>
        </div>

        {/* Kart Sahibi Adı */}
        <div className="space-y-1">
          <Label htmlFor="card-name" className={labelClassName}>
            {labels.name || 'Cardholder Name'}
          </Label>
          <Input
            ref={nameRef}
            id="card-name"
            type="text"
            value={value.name}
            onChange={(e) => handleChange('name', e.target.value)}
            onFocus={() => setFocused('name')}
            onBlur={() => setFocused(null)}
            placeholder={placeholders.name || 'John Doe'}
            className={cn(
              displayErrors.name && "border-destructive",
              inputClassName
            )}
            disabled={disabled}
          />
          {displayErrors.name && (
            <p className={cn("text-sm text-destructive", errorClassName)}>
              {displayErrors.name}
            </p>
          )}
        </div>
      </div>

      {showSecurityBadge && (
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Lock className="w-4 h-4" />
          <span>Your payment information is secure and encrypted</span>
        </div>
      )}
    </div>
  )
})

MoonUICreditCardInputPro.displayName = "MoonUICreditCardInputPro"