'use client';

import React, { memo } from 'react';
import { useRouter } from 'next/navigation';
import { Checkbox } from '@/components/ui/checkbox';
import { Can } from '@/components/common/PermissionGuard';
import { type User } from '@/services/api/organization';
import UserAvatar from '@features/organization/components/UserAvatar';

interface UserTableRowProps {
  user: User;
  index: number;
  totalRows: number;
  isSelected: boolean;
  onToggleSelect: (userId: string) => void;
  onEdit: (user: User) => void;
  onDelete: (user: User) => void;
  onStatusChange: (user: User, status: 'ACTIVE' | 'SUSPENDED') => void;
  getStatusStyle: (status: string) => { text: string; bg: string; color: string };
  t: any;
}

export const UserTableRow = memo(function UserTableRow({
  user,
  index,
  totalRows,
  isSelected,
  onToggleSelect,
  onEdit,
  onDelete,
  onStatusChange,
  getStatusStyle,
  t,
}: UserTableRowProps) {
  const router = useRouter();
  const statusStyle = getStatusStyle(user.status);

  return (
    <tr 
      className="hover:bg-gray-50 transition-colors"
      style={{ borderBottom: index < totalRows - 1 ? '1px solid #f0f0f0' : 'none' }}
    >
      <td className="px-6 py-4 text-center">
        <Checkbox
          checked={isSelected}
          onCheckedChange={() => onToggleSelect(user.id)}
        />
      </td>
      <td className="px-6 py-4">
        <div className="flex items-center">
          <UserAvatar 
            avatar={user.avatar}
            displayName={user.displayName || user.username}
            size={40}
          />
          <div className="ml-3">
            <div className="text-sm font-medium text-gray-900">
              {user.displayName || user.username}
            </div>
            {user.employeeId && (
              <div className="text-xs text-gray-500">
                {user.employeeId}
              </div>
            )}
          </div>
        </div>
      </td>
      <td className="px-6 py-4 text-sm text-gray-600">
        {user.email}
      </td>
      <td className="px-6 py-4 text-sm text-gray-900">
        {user.position?.name || user.position?.title || <span className="text-gray-400">-</span>}
      </td>
      <td className="px-6 py-4 text-sm text-gray-900">
        {user.manager?.displayName || <span className="text-gray-400">-</span>}
      </td>
      <td className="px-6 py-4 text-sm text-gray-900">
        {user.region || <span className="text-gray-400">-</span>}
      </td>
      <td className="px-6 py-4">
        <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium" style={{ backgroundColor: statusStyle.bg, color: statusStyle.color }}>
          {statusStyle.text}
        </span>
      </td>
      <td className="px-6 py-4">
        {user.ldapSyncedAt ? (
          <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-50 text-green-700">
            LDAP
          </span>
        ) : (
          <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-50 text-blue-700">
            {'本地'}
          </span>
        )}
      </td>
      <td className="px-6 py-4">
        <div className="flex items-center justify-center gap-3">
          <button
            onClick={() => router.push(`/organization/members/${user.id}`)}
            className="text-sm text-blue-600 hover:text-blue-700 font-medium transition-colors"
          >
            {'查看'}
          </button>
          
          <Can permission="user:update">
            <button
              onClick={(e) => {
                e.stopPropagation();
                onEdit(user);
              }}
              className="text-sm text-blue-600 hover:text-blue-700 font-medium transition-colors"
            >
              {'编辑'}
            </button>
            
            {user.status === 'ACTIVE' ? (
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  onStatusChange(user, 'SUSPENDED');
                }}
                className="text-sm text-blue-600 hover:text-blue-700 font-medium transition-colors"
              >
                {'停用'}
              </button>
            ) : (
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  onStatusChange(user, 'ACTIVE');
                }}
                className="text-sm text-blue-600 hover:text-blue-700 font-medium transition-colors"
              >
                {'激活'}
              </button>
            )}
          </Can>
          
          <Can permission="user:delete">
            <button
              onClick={(e) => {
                e.stopPropagation();
                onDelete(user);
              }}
              className="text-sm text-red-600 hover:text-red-700 font-medium transition-colors"
            >
              {'删除'}
            </button>
          </Can>
        </div>
      </td>
    </tr>
  );
});