import React from 'react';
import { Badge } from '@/components/ui/badge';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@/components/ui/tooltip';
import { Users, CheckCircle } from 'lucide-react';

interface User {
  id: number;
  realName?: string;
  username?: string;
}

interface ApproversCellProps {
  approvalRequired?: boolean;
  approverUserIds?: number[];
  users?: User[];
}

export const ApproversCell: React.FC<ApproversCellProps> = ({
  approvalRequired,
  approverUserIds,
  users = []
}) => {
  // 不需要审批
  if (!approvalRequired) {
    return (
      <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
        <CheckCircle className="h-3 w-3 text-green-500" />
        <span>无需审批</span>
      </div>
    );
  }

  // 需要审批但没有设置审批人
  if (!approverUserIds || approverUserIds.length === 0) {
    return (
      <div className="flex items-center gap-1.5 text-orange-600 text-sm">
        <Users className="h-3 w-3" />
        <span>未设置审批人</span>
      </div>
    );
  }

  // 获取有效的审批人
  const validApprovers = approverUserIds
    .map(id => users.find(u => u.id === id))
    .filter(Boolean) as User[];

  if (validApprovers.length === 0) {
    return (
      <div className="flex items-center gap-1.5 text-orange-600 text-sm">
        <Users className="h-3 w-3" />
        <span>审批人无效</span>
      </div>
    );
  }

  const displayApprovers = validApprovers.slice(0, 2);
  const remainingCount = validApprovers.length - 2;

  return (
    <TooltipProvider>
      <Tooltip delayDuration={300}>
        <TooltipTrigger asChild>
          <div className="flex items-center gap-1 min-w-0">
            <div className="flex gap-1 flex-wrap">
              {displayApprovers.map((user) => (
                <Badge key={user.id} variant="secondary" className="text-xs">
                  {user.realName || user.username}
                </Badge>
              ))}
              {remainingCount > 0 && (
                <Badge variant="outline" className="text-xs">
                  +{remainingCount}
                </Badge>
              )}
            </div>
          </div>
        </TooltipTrigger>
        {remainingCount > 0 && (
          <TooltipContent className="max-w-xs bg-gray-900 border-gray-700 text-white">
            <div className="space-y-1 text-white">
              <div className="text-xs font-medium">全部审批人:</div>
              <div className="flex flex-wrap gap-1">
                {validApprovers.map((user) => (
                  <Badge key={user.id} variant="outline" className="text-xs border-gray-600 text-gray-200">
                    {user.realName || user.username}
                  </Badge>
                ))}
              </div>
            </div>
          </TooltipContent>
        )}
      </Tooltip>
    </TooltipProvider>
  );
};
