'use client';
import { Shield, UserCog, User as UserIcon, Trash2, Power, PowerOff } from 'lucide-react';
import Avatar from '@/components/ui/Avatar';
import { timeAgo } from '@/lib/time';

const ROLE_META = {
  admin:   { label: 'Admin',   icon: Shield,    cls: 'bg-brand-100 text-brand-700 border border-brand-200' },
  manager: { label: 'Manager', icon: UserCog,   cls: 'bg-violet-100 text-violet-700 border border-violet-200' },
  member:  { label: 'Member',  icon: UserIcon,  cls: 'bg-ink-100 text-ink-700 border border-ink-200' },
};

export default function UserRow({ user, onChangeRole, onToggleActive, onDelete, busy }) {
  const meta = ROLE_META[user.role];
  const Icon = meta.icon;

  return (
    <div className={`flex items-center gap-4 px-4 py-3 border-b border-ink-100 last:border-0
                    hover:bg-ink-50/60 transition
                    ${!user.isActive ? 'opacity-60' : ''}`}>
      {/* Avatar + info */}
      <div className="flex items-center gap-3 flex-1 min-w-0">
        <Avatar name={user.name} size={38} />
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 flex-wrap">
            <p className="text-[13px] font-semibold text-ink-900 truncate">
              {user.name}
            </p>
            {user.isSelf && (
              <span className="text-[10px] font-semibold text-ink-400">(you)</span>
            )}
            {!user.isActive && (
              <span className="chip bg-red-50 text-red-600 border border-red-200">
                Disabled
              </span>
            )}
          </div>
          <p className="text-[11px] text-ink-500 truncate">{user.email}</p>
          <p className="text-[10px] text-ink-400 mt-0.5">
            Joined {timeAgo(user.createdAt)}
          </p>
        </div>
      </div>

      {/* Role select */}
      <select
        value={user.role}
        onChange={(e) => onChangeRole(user, e.target.value)}
        disabled={user.isSelf || busy}
        className={`text-[11px] font-semibold rounded-lg border border-ink-200
                    bg-white px-2 py-1.5 outline-none cursor-pointer
                    hover:border-ink-300 transition
                    disabled:cursor-not-allowed disabled:opacity-60`}
      >
        <option value="admin">Admin</option>
        <option value="manager">Manager</option>
        <option value="member">Member</option>
      </select>

      {/* Role chip */}
      <span className={`chip ${meta.cls} hidden md:inline-flex`}>
        <Icon size={10} /> {meta.label}
      </span>

      {/* Actions */}
      <div className="flex items-center gap-1">
        <button
          onClick={() => onToggleActive(user)}
          disabled={user.isSelf || busy}
          title={user.isActive ? 'Disable account' : 'Enable account'}
          className={`p-2 rounded-lg transition
            disabled:opacity-30 disabled:cursor-not-allowed
            ${user.isActive
              ? 'text-ink-400 hover:text-amber-600 hover:bg-amber-50'
              : 'text-ink-400 hover:text-emerald-600 hover:bg-emerald-50'}`}
        >
          {user.isActive ? <PowerOff size={14} /> : <Power size={14} />}
        </button>

        <button
          onClick={() => onDelete(user)}
          disabled={user.isSelf || busy}
          title="Delete user"
          className="p-2 rounded-lg text-ink-400 hover:text-red-600 hover:bg-red-50
                     transition disabled:opacity-30 disabled:cursor-not-allowed"
        >
          <Trash2 size={14} />
        </button>
      </div>
    </div>
  );
}