veza/apps/web/src/components/admin/UserTableRow.tsx

import React, { useState } from 'react';
import { User } from '@/types';
import { Badge } from '../ui/badge';
import { Button } from '../ui/button';
import { MoreVertical, Shield, Ban, Mail, Trash2 } from 'lucide-react';

interface UserTableRowProps {
  user: User;
  onBan: (user: User) => void;
  onDelete: (user: User) => void;
  onEditRole: (user: User) => void;
}

export const UserTableRow: React.FC<UserTableRowProps> = ({
  user,
  onBan,
  onDelete,
  onEditRole,
}) => {
  const [showMenu, setShowMenu] = useState(false);

  const statusColor: Record<string, string> = {
    online: 'bg-success',
    offline: 'bg-muted',
    away: 'bg-warning',
    idle: 'bg-warning',
    busy: 'bg-destructive',
    dnd: 'bg-destructive',
  };

  return (
    <tr className="border-b border-border/50 last:border-0 hover:bg-muted/50 transition-colors duration-150 group relative">
      <td className="p-4">
        <div className="flex items-center gap-4">
          <div className="relative">
            <img
              src={user.avatar}
              className="w-8 h-8 rounded-full object-cover"
            />
            <div
              className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 border-2 border-background rounded-full ${user.status ? statusColor[user.status] : statusColor.offline}`}
            ></div>
          </div>
          <div>
            <div className="font-bold text-foreground text-sm">{user.username}</div>
            <div className="text-xs text-muted-foreground font-mono">{user.id}</div>
          </div>
        </div>
      </td>
      <td className="p-4 text-sm text-muted-foreground">{user.email}</td>
      <td className="p-4">
        <div className="flex gap-1">
          {(user.roles || [user.role]).map((role: string) => (
            <Badge
              key={role}
              label={role}
              variant={
                role === 'Admin' || role === 'admin' ? 'magenta' : 'cyan'
              }
              className="scale-90"
            />
          ))}
        </div>
      </td>
      <td className="p-4 text-sm text-muted-foreground">{user.tier || 'Free'}</td>
      <td className="p-4 text-sm text-muted-foreground font-mono">
        {user.joinDate || user.created_at}
      </td>
      <td className="p-4 text-sm text-muted-foreground font-mono">
        {user.lastLogin || user.last_login_at || 'Never'}
      </td>
      <td className="p-4 text-right">
        <div className="relative">
          <button
            className="p-1.5 hover:bg-muted/50 rounded text-muted-foreground hover:text-foreground"
            onClick={(e) => {
              e.stopPropagation();
              setShowMenu(!showMenu);
            }}
          >
            <MoreVertical className="w-4 h-4" />
          </button>

          {showMenu && (
            <>
              <div
                className="fixed inset-0 z-10"
                onClick={() => setShowMenu(false)}
              ></div>
              <div className="absolute right-0 top-full mt-2 w-48 bg-card border border-border rounded-lg shadow-xl z-20 overflow-hidden">
                <Button
                  variant="ghost"
                  size="sm"
                  className="w-full justify-start text-xs h-auto py-2.5"
                  onClick={() => {
                    onEditRole(user);
                    setShowMenu(false);
                  }}
                >
                  <Shield className="w-3 h-3" /> Change Role
                </Button>
                <Button variant="ghost" size="sm" className="w-full justify-start text-xs h-auto py-2.5">
                  <Mail className="w-3 h-3" /> Send Email
                </Button>
                <div className="h-px bg-border my-1"></div>
                <Button
                  variant="ghost"
                  size="sm"
                  className="w-full justify-start text-xs h-auto py-2.5 text-warning"
                  onClick={() => {
                    onBan(user);
                    setShowMenu(false);
                  }}
                >
                  <Ban className="w-3 h-3" /> Suspend User
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  className="w-full justify-start text-xs h-auto py-2.5 text-destructive"
                  onClick={() => {
                    onDelete(user);
                    setShowMenu(false);
                  }}
                >
                  <Trash2 className="w-3 h-3" /> Delete Account
                </Button>
              </div>
            </>
          )}
        </div>
      </td>
    </tr>
  );
};