import { User } from '@/types';
import { useState } from 'react';
import {
  MoreVertical,
  ShieldCheck,
  ShieldOff,
  UserCheck,
  Shield,
} from 'lucide-react';
import { AnimatePresence, motion } from 'framer-motion';

export function ActionMenu({
  user,
  onActivate,
  onSuspendClick,
  onAssignRole,
  isUpdating,
}: {
  user: User;
  onActivate: (id: string) => void;
  onSuspendClick: (user: User) => void;
  onAssignRole: (user: User, role: 'agen' | 'user') => void;
  isUpdating: boolean;
}) {
  const [open, setOpen] = useState(false);

  const isAgen = user.user_type === 'agen';
  const isAdmin = user.user_type === 'admin';

  return (
    <div className="relative">
      <button
        onClick={() => setOpen((v) => !v)}
        className="p-2 rounded-lg border border-transparent text-gray-400 hover:border-gray-200 hover:bg-gray-100 hover:text-gray-900 transition-all"
      >
        <MoreVertical className="w-4 h-4 text-gray-500" />
      </button>

      <AnimatePresence>
        {open && (
          <>
            <div
              className="fixed inset-0 z-10"
              onClick={() => setOpen(false)}
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: -4 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: -4 }}
              transition={{ duration: 0.15 }}
              className="absolute right-0 top-full mt-2 z-20 bg-white/90 backdrop-blur-xl border border-gray-200 shadow-xl rounded-xl py-2 min-w-[180px] overflow-hidden"
            >
              {user.status !== 'active' && (
                <button
                  onClick={() => {
                    onActivate(user.id);
                    setOpen(false);
                  }}
                  disabled={isUpdating}
                  className="w-full flex items-center gap-3 px-4 py-2.5 text-[11px] font-bold text-gray-600 hover:text-emerald-700 hover:bg-emerald-50 uppercase tracking-wider transition-colors disabled:opacity-40"
                >
                  <ShieldCheck className="w-4 h-4 text-emerald-400" />
                  Aktifkan
                </button>
              )}
              {user.status !== 'suspended' && (
                <button
                  onClick={() => {
                    onSuspendClick(user);
                    setOpen(false);
                  }}
                  disabled={isUpdating}
                  className="w-full flex items-center gap-3 px-4 py-2.5 text-[11px] font-bold text-gray-600 hover:text-amber-700 hover:bg-amber-50 uppercase tracking-wider transition-colors disabled:opacity-40"
                >
                  <ShieldOff className="w-4 h-4 text-amber-600" />
                  Suspend
                </button>
              )}

              {/* Separator */}
              {!isAdmin && <div className="my-1 border-t border-gray-100" />}

              {/* Assign Role Actions — only for non-admin users */}
              {!isAdmin && !isAgen && (
                <button
                  onClick={() => {
                    onAssignRole(user, 'agen');
                    setOpen(false);
                  }}
                  disabled={isUpdating}
                  className="w-full flex items-center gap-3 px-4 py-2.5 text-[11px] font-bold text-gray-600 hover:text-blue-700 hover:bg-blue-50 uppercase tracking-wider transition-colors disabled:opacity-40"
                >
                  <Shield className="w-4 h-4 text-blue-500" />
                  Jadikan Agen
                </button>
              )}
              {!isAdmin && isAgen && (
                <button
                  onClick={() => {
                    onAssignRole(user, 'user');
                    setOpen(false);
                  }}
                  disabled={isUpdating}
                  className="w-full flex items-center gap-3 px-4 py-2.5 text-[11px] font-bold text-gray-600 hover:text-teal-700 hover:bg-teal-50 uppercase tracking-wider transition-colors disabled:opacity-40"
                >
                  <UserCheck className="w-4 h-4 text-teal-500" />
                  Jadikan User
                </button>
              )}
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
}