'use client';

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { FiLock, FiDelete, FiX } from 'react-icons/fi';
import Button from '@/components/ui/Button';

interface PinVerificationModalProps {
  onSuccess: () => void;
  onClose: () => void;
}

export default function PinVerificationModal({ onSuccess, onClose }: PinVerificationModalProps) {
  const [pin, setPin] = useState<string>('');
  const [isError, setIsError] = useState<boolean>(false);
  const [errorMessage, setErrorMessage] = useState<string>('');

  const handleKeyPress = (num: string) => {
    if (pin.length < 4) {
      setPin((prev) => prev + num);
      setIsError(false);
      setErrorMessage('');
    }
  };

  const handleDelete = () => {
    setPin((prev) => prev.slice(0, -1));
  };

  useEffect(() => {
    if (pin.length === 4) {
      if (pin === '0000') {
        // Success
        onSuccess();
      } else {
        // Error
        setIsError(true);
        setErrorMessage('PIN incorrecto. Intenta de nuevo.');
        // Reset pin after animation
        setTimeout(() => {
          setPin('');
        }, 500);
      }
    }
  }, [pin, onSuccess]);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-md px-4 select-none">
      <div className="relative w-full max-w-sm glass-card border border-white/10 rounded-2xl p-6 text-center shadow-2xl flex flex-col items-center">
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 rounded-lg text-white/50 hover:text-white hover:bg-white/10 transition-all cursor-pointer border-0"
        >
          <FiX size={18} />
        </button>

        {/* Lock Icon */}
        <div className="w-16 h-16 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center text-primary mb-4 shadow-lg shadow-primary/10">
          <FiLock size={28} className="animate-pulse" />
        </div>

        {/* Title */}
        <h2 className="text-lg font-bold text-white uppercase tracking-wider">
          Contenido Protegido
        </h2>
        <p className="text-xs text-white/50 mt-1 max-w-[250px] leading-relaxed">
          Ingresa el PIN de seguridad de 4 dígitos para reproducir este canal (Por defecto <span className="font-bold text-primary">0000</span>)
        </p>

        {/* Enter Code Dots */}
        <motion.div 
          animate={isError ? { x: [-10, 10, -10, 10, -5, 5, 0] } : {}}
          transition={{ duration: 0.4 }}
          className="flex gap-4 my-6 justify-center"
        >
          {[0, 1, 2, 3].map((idx) => (
            <div
              key={idx}
              className={`w-4.5 h-4.5 rounded-full border transition-all duration-300 ${
                pin.length > idx
                  ? 'bg-primary border-primary scale-110 shadow shadow-primary/50'
                  : 'bg-transparent border-white/20'
              }`}
            />
          ))}
        </motion.div>

        {/* Error message */}
        <div className="h-4 text-[11px] font-bold text-red-500 mb-3 uppercase tracking-wide">
          {errorMessage}
        </div>

        {/* Dial Pad */}
        <div className="grid grid-cols-3 gap-3 w-full max-w-[240px]">
          {['1', '2', '3', '4', '5', '6', '7', '8', '9'].map((num) => (
            <button
              key={num}
              onClick={() => handleKeyPress(num)}
              className="w-16 h-16 rounded-full bg-white/5 border border-white/5 text-white hover:bg-white/15 text-xl font-bold flex items-center justify-center transition-all active:scale-90 cursor-pointer"
            >
              {num}
            </button>
          ))}
          {/* Bottom row */}
          <div className="w-16 h-16" /> {/* Empty spacer */}
          <button
            onClick={() => handleKeyPress('0')}
            className="w-16 h-16 rounded-full bg-white/5 border border-white/5 text-white hover:bg-white/15 text-xl font-bold flex items-center justify-center transition-all active:scale-90 cursor-pointer"
          >
            0
          </button>
          <button
            onClick={handleDelete}
            className="w-16 h-16 rounded-full bg-white/5 border border-white/5 text-white hover:bg-white/15 text-lg flex items-center justify-center transition-all active:scale-90 cursor-pointer text-white/60 hover:text-white"
          >
            <FiDelete size={20} />
          </button>
        </div>
      </div>
    </div>
  );
}
