/**
 * filekorolheader: 用户列表组件 - 用户数据表格展示界面
 * 功能：用户数据表格展示、状态徽章、操作按钮、分页功能
 * 路径：/central-config/tenant/user-management/components/UserList
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
 */

import { User, PaginationState } from '../types';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Eye, Edit, Trash2, Lock, UserX, UserCheck } from 'lucide-react';

interface UserListProps {
  users: User[];
  loading: boolean;
  pagination: PaginationState;
  onPageChange: (page: number) => void;
  onViewDetail: (user: User) => void;
  onEdit?: (user: User) => void;
  onDelete?: (user: User) => void;
  onToggleStatus?: (user: User) => void;
  onResetPassword?: (user: User) => void;
}

export function UserList({
  users,
  loading,
  pagination,
  onPageChange,
  onViewDetail,
  onEdit,
  onDelete,
  onToggleStatus,
  onResetPassword
}: UserListProps) {
  const getStatusBadge = (user: User) => {
    // 根据isSuperuser和isActive判断状态
    if (user.isSuperuser) {
      return user.isActive ? (
        <Badge className="bg-green-100 text-green-700">正常</Badge>
      ) : (
        <Badge className="bg-gray-100 text-gray-700">已冻结</Badge>
      );
    }

    if (user.isActive) {
      return <Badge className="bg-green-100 text-green-700">正常</Badge>;
    } else {
      return <Badge className="bg-red-100 text-red-700">停用</Badge>;
    }
  };

  const getUserTypeBadge = (user: User) => {
    if (user.isSuperuser) {
      return <Badge className="bg-purple-100 text-purple-700">超级管理员</Badge>;
    }
    // 根据scope或其他字段判断用户类型
    if (user.scope === 'enterprise' || user.companyName) {
      return <Badge className="bg-blue-100 text-blue-700">企业管理员</Badge>;
    }
    return <Badge className="bg-green-100 text-green-700">员工</Badge>;
  };

  const getRoleBadge = (user: User) => {
    if (user.isSuperuser) {
      return <Badge className="bg-purple-100 text-purple-700">超级管理员</Badge>;
    }
    return <Badge className="bg-blue-100 text-blue-700">普通用户</Badge>;
  };

  const getVerifiedBadge = (isVerified: boolean) => {
    return isVerified ? (
      <Badge className="bg-green-100 text-green-700">已验证</Badge>
    ) : (
      <Badge variant="outline">未验证</Badge>
    );
  };

  
  if (loading) {
    return (
      <Card>
        <div className="flex items-center justify-center h-96">
          <div className="text-muted-foreground">加载中...</div>
        </div>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      <Card>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>用户名</TableHead>
              <TableHead>姓名</TableHead>
              <TableHead>电话</TableHead>
              <TableHead>所属企业</TableHead>
              <TableHead>用户类型</TableHead>
              <TableHead>角色</TableHead>
              <TableHead>状态</TableHead>
              <TableHead>操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {users.length === 0 ? (
              <TableRow>
                <TableCell colSpan={8} className="text-center text-muted-foreground py-8">
                  暂无用户数据
                </TableCell>
              </TableRow>
            ) : (
              users.map((user) => (
                <TableRow key={user.id}>
                  <TableCell className="font-medium">
                    <div className="flex items-center gap-2">
                      {user.avatarUrl && (
                        <img
                          src={user.avatarUrl}
                          alt={user.username}
                          className="w-8 h-8 rounded-full"
                        />
                      )}
                      <span>{user.username}</span>
                    </div>
                  </TableCell>
                  <TableCell>
                    {user.fullName || user.displayName || '-'}
                  </TableCell>
                  <TableCell>{user.phone || '-'}</TableCell>
                  <TableCell className="text-muted-foreground">{user.companyName || '-'}</TableCell>
                  <TableCell>{getUserTypeBadge(user)}</TableCell>
                  <TableCell>{getRoleBadge(user)}</TableCell>
                  <TableCell>{getStatusBadge(user)}</TableCell>
                  <TableCell>
                    <div className="flex gap-1">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => onViewDetail(user)}
                      >
                        <Eye className="w-4 h-4" />
                      </Button>
                      {onEdit && (
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => onEdit(user)}
                        >
                          <Edit className="w-4 h-4" />
                        </Button>
                      )}
                      {onResetPassword && (
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => onResetPassword(user)}
                        >
                          <Lock className="w-4 h-4" />
                        </Button>
                      )}
                      {onToggleStatus && (
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => onToggleStatus(user)}
                        >
                          {user.isActive ? (
                            <UserX className="w-4 h-4 text-orange-600" />
                          ) : (
                            <UserCheck className="w-4 h-4 text-green-600" />
                          )}
                        </Button>
                      )}
                      {onDelete && !user.isSuperuser && (
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => onDelete(user)}
                        >
                          <Trash2 className="w-4 h-4 text-destructive" />
                        </Button>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Card>

      {/* 分页 */}
      {pagination.total > 0 && (
        <div className="flex items-center justify-between">
          <div className="text-sm text-muted-foreground">
            显示第 {(pagination.page - 1) * pagination.size + 1} - {Math.min(pagination.page * pagination.size, pagination.total)} 条，共 {pagination.total} 条记录
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => onPageChange(pagination.page - 1)}
              disabled={!pagination.hasPrev}
            >
              上一页
            </Button>

            <div className="flex items-center gap-1">
              <span className="text-sm text-muted-foreground">第</span>
              <div className="flex items-center">
                <input
                  type="number"
                  min={1}
                  max={pagination.totalPages}
                  value={pagination.page}
                  onChange={(e) => {
                    const newPage = parseInt(e.target.value);
                    if (!isNaN(newPage)) {
                      onPageChange(newPage);
                    }
                  }}
                  className="w-16 h-8 text-center border rounded-md"
                />
              </div>
              <span className="text-sm text-muted-foreground">/ {pagination.totalPages} 页</span>
            </div>

            <Button
              variant="outline"
              size="sm"
              onClick={() => onPageChange(pagination.page + 1)}
              disabled={!pagination.hasNext}
            >
              下一页
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}