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

export function SuspendDialog({
  user,
  onConfirm,
  onCancel,
  isPending,
}: {
  user: User;
  onConfirm: (reason: string) => void;
  onCancel: () => void;
  isPending: boolean;
}) {
  const [reason, setReason] = useState('');

  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/20 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-white/90 backdrop-blur-2xl border border-gray-200 rounded-3xl p-6 w-full max-w-md overflow-hidden shadow-2xl"
      >
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-32 bg-amber-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-amber-500/20 bg-amber-500/10 flex items-center justify-center shrink-0">
            <ShieldOff className="w-6 h-6 text-amber-400" />
          </div>
          <div>
            <h3 className="text-lg font-black text-gray-900 tracking-wide">
              Suspend Pengguna
            </h3>
            <p className="text-[10px] text-gray-500 font-bold uppercase tracking-widest mt-0.5">
              {user.name}
            </p>
          </div>
        </div>

        <div className="relative z-10 space-y-4 mb-8">
          <p className="text-sm font-medium text-gray-600">
            Pengguna yang di-suspend tidak akan bisa login ke dalam sistem.
            Silakan berikan alasan penangguhan.
          </p>
          <div>
            <textarea
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              placeholder="Alasan suspend (wajib diisi)..."
              rows={3}
              maxLength={500}
              className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-sm font-medium text-gray-900 placeholder:text-gray-400 focus:outline-none focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/50 transition-all resize-none shadow-sm"
            />
            <p className="text-right text-[10px] font-bold text-gray-500 uppercase tracking-widest mt-2">
              {reason.length} / 500
            </p>
          </div>
        </div>

        <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-600 bg-gray-50 border border-gray-200 hover:bg-gray-100 hover:text-gray-900 uppercase tracking-wider transition-all"
          >
            Batal
          </button>
          <button
            onClick={() => onConfirm(reason)}
            disabled={isPending || !reason.trim()}
            className="flex-1 py-3 px-4 rounded-xl text-xs font-bold text-[#1C1D1F] bg-amber-400 hover:bg-amber-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" />
            ) : (
              <ShieldOff className="w-4 h-4" />
            )}
            Suspend
          </button>
        </div>
      </motion.div>
    </div>
  );
}