import { User, UserStatus } from '@/types';
import { motion } from 'framer-motion';
import Image from 'next/image';
import { getInitials } from '@/lib/utils';
import { StatusBadge } from './user-status-badge';
import { formatDate } from '@/lib/utils';
import { ActionMenu } from './ActionMenu';
import { useRouter } from 'next/navigation';

const USER_TYPE_CONFIG: Record<string, { label: string; className: string }> = {
  user: {
    label: 'User',
    className: 'text-emerald-700 border-emerald-200 bg-emerald-50',
  },
  agen: {
    label: 'Agen',
    className: 'text-blue-700 border-blue-200 bg-blue-50',
  },
  admin: {
    label: 'Admin',
    className: 'text-purple-700 border-purple-200 bg-purple-50',
  },
};

export function UserRow({
  user,
  onActivate,
  onSuspendClick,
  onAssignRole,
  isUpdating,
  index,
}: {
  user: User;
  onActivate: (id: string) => void;
  onSuspendClick: (user: User) => void;
  onAssignRole: (user: User, role: 'agen' | 'user') => void;
  isUpdating: boolean;
  index: number;
}) {
  const router = useRouter();
  const typeConfig = USER_TYPE_CONFIG[user.user_type] ?? USER_TYPE_CONFIG.user;

  return (
    <motion.tr
      initial={{ opacity: 0, x: -8 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay: index * 0.04, duration: 0.3 }}
      onClick={() => router.push(`/dashboard/admin/users/${user.id}`)}
      className="group border-b border-gray-100 last:border-0 hover:bg-[#FFF9E8] cursor-pointer transition-colors"
    >
      {/* Kolom Profil */}
      <td className="px-6 py-4">
        <div className="flex items-center gap-4">
          {user.avatar_url ? (
            <Image
              src={user.avatar_url}
              alt={user.name}
              width={40}
              height={40}
              className="w-10 h-10 rounded-full object-cover border border-gray-200 shrink-0 shadow-sm"
            />
          ) : (
            <div className="w-10 h-10 rounded-full bg-yellow-50 border border-yellow-200 flex items-center justify-center shrink-0 shadow-sm">
              <span className="text-sm font-black text-[#FFD738]">
                {getInitials(user.name)}
              </span>
            </div>
          )}
          <div className="min-w-0">
            <p className="text-sm font-bold text-gray-900 tracking-wide truncate max-w-40 group-hover:text-yellow-600 transition-colors">
              {user.name}
            </p>
            <p className="text-[11px] text-gray-500 font-medium truncate max-w-40 mt-0.5">
              {user.email}
            </p>
          </div>
        </div>
      </td>

      {/* Kolom Tipe */}
      <td className="px-6 py-4">
        <span
          className={`text-[9px] font-black border rounded-md px-2.5 py-1 uppercase tracking-widest ${typeConfig.className}`}
        >
          {typeConfig.label}
        </span>
      </td>

      {/* Kolom Role */}
      <td className="px-6 py-4">
        <div className="flex flex-wrap gap-1.5">
          {user.roles.map((role) => (
            <span
              key={role}
              className="text-[9px] font-bold text-yellow-700 border border-yellow-200 bg-yellow-50 rounded-md px-2.5 py-1 uppercase tracking-widest"
            >
              {role}
            </span>
          ))}
        </div>
      </td>

      <td className="px-6 py-4">
        <StatusBadge status={user.status as UserStatus} />
      </td>

      <td className="px-6 py-4 whitespace-nowrap">
        <span className="text-xs font-bold text-gray-500">
          {formatDate(user.created_at, {
            day: 'numeric',
            month: 'short',
            year: 'numeric',
          })}
        </span>
      </td>

      {/* ── Cegah Klik Merambat (Propagation) di Kolom Aksi ── */}
      <td className="px-6 py-4" onClick={(e) => e.stopPropagation()}>
        <ActionMenu
          user={user}
          onActivate={onActivate}
          onSuspendClick={onSuspendClick}
          onAssignRole={onAssignRole}
          isUpdating={isUpdating}
        />
      </td>
    </motion.tr>
  );
}