'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { FaExclamationTriangle, FaTimes } from 'react-icons/fa';
import { Album } from '@/lib/types';

interface DeleteConfirmationModalProps {
  show: boolean;
  album: Album | null;
  onClose: () => void;
  onConfirm: () => void;
}

export default function DeleteConfirmationModal({
  show,
  album,
  onClose,
  onConfirm,
}: DeleteConfirmationModalProps) {
  if (!album) return null;

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
          onClick={onClose}
        >
          <motion.div
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            onClick={(e) => e.stopPropagation()}
            className="glass-effect rounded-2xl max-w-md w-full p-8 border-2 border-red-500/30"
          >
            {/* Header */}
            <div className="flex items-start justify-between mb-6">
              <div className="flex items-center gap-3">
                <div className="p-3 bg-red-500/20 rounded-full">
                  <FaExclamationTriangle className="text-3xl text-red-400" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold text-white">Delete Album</h2>
                  <p className="text-sm text-gray-400">This action cannot be undone</p>
                </div>
              </div>
              <button
                onClick={onClose}
                className="p-2 hover:bg-white/10 rounded-full transition-colors"
                aria-label="Close"
              >
                <FaTimes className="text-xl text-gray-400" />
              </button>
            </div>

            {/* Content */}
            <div className="mb-6">
              <p className="text-gray-300 mb-4">
                Are you sure you want to delete the following album?
              </p>
              <div className="p-4 bg-white/5 rounded-lg">
                <p className="text-white font-semibold">{album.title}</p>
                <p className="text-sm text-gray-400">
                  {album.year} • {album.genre} • {album.songs.length} tracks
                </p>
              </div>
              <p className="text-red-400 text-sm mt-4">
                Warning: This will permanently delete this album and all associated data.
              </p>
            </div>

            {/* Actions */}
            <div className="flex gap-3">
              <button
                onClick={onClose}
                className="flex-1 py-3 bg-white/10 hover:bg-white/20 rounded-lg font-semibold text-white transition-all"
              >
                Cancel
              </button>
              <button
                onClick={onConfirm}
                className="flex-1 py-3 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 rounded-lg font-semibold text-white transition-all"
              >
                Delete Album
              </button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}