import { User } from '@/types';
import { motion } from 'framer-motion';
import { AlertTriangle, Loader2, Trash2 } from 'lucide-react';

// ── Delete confirm dialog ──────────────────────────────────────────────
export function DeleteDialog({
  user,
  onConfirm,
  onCancel,
  isPending,
}: {
  user: User;
  onConfirm: () => void;
  onCancel: () => void;
  isPending: boolean;
}) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onCancel}
      />
      <motion.div
        initial={{ opacity: 0, scale: 0.95, y: 10 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.95, y: 10 }}
        className="relative bg-[#252629] border border-white/10 rounded-2xl p-6 w-full max-w-sm overflow-hidden shadow-2xl"
      >
        {/* Subtle red glow background */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-32 bg-rose-500/20 blur-3xl pointer-events-none rounded-full" />

        <div className="flex items-center gap-4 mb-6 relative z-10">
          <div className="w-12 h-12 rounded-full border border-rose-500/20 bg-rose-500/10 flex items-center justify-center shrink-0">
            <AlertTriangle className="w-6 h-6 text-rose-400" />
          </div>
          <div>
            <h3 className="text-lg font-black text-white tracking-wide">
              Hapus Pengguna?
            </h3>
            <p className="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-0.5">
              Tindakan permanen
            </p>
          </div>
        </div>

        <p className="text-sm font-medium text-gray-300 mb-8 leading-relaxed relative z-10">
          Akun <span className="font-bold text-white px-1">{user.name}</span>{' '}
          akan dihapus permanen dari sistem dan tidak dapat dipulihkan.
        </p>

        <div className="flex gap-3 relative z-10">
          <button
            onClick={onCancel}
            className="flex-1 py-3 px-4 rounded-xl text-xs font-bold text-gray-300 bg-white/5 border border-white/5 hover:bg-white/10 hover:text-white uppercase tracking-wider transition-all"
          >
            Batal
          </button>
          <button
            onClick={onConfirm}
            disabled={isPending}
            className="flex-1 py-3 px-4 rounded-xl text-xs font-bold text-[#1C1D1F] bg-rose-400 hover:bg-rose-500 uppercase tracking-wider transition-all flex items-center justify-center gap-2 disabled:opacity-50"
          >
            {isPending ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              <Trash2 className="w-4 h-4" />
            )}
            Hapus
          </button>
        </div>
      </motion.div>
    </div>
  );
}