import React from 'react';
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Users, ClipboardCheck } from "lucide-react";
import type { DeployTeam } from '../types';

interface TeamSelectorProps {
  teams: DeployTeam[];
  currentTeamId: number | null;
  pendingApprovalCount: number;
  showApprovalButton: boolean; // 是否显示待审批按钮（基于当前环境）
  onTeamChange: (teamId: string) => void;
  onApprovalClick: () => void;
}

/**
 * 团队选择器组件
 * 负责显示团队选择下拉框和待审批按钮
 */
export const TeamSelector: React.FC<TeamSelectorProps> = React.memo(({
  teams,
  currentTeamId,
  pendingApprovalCount,
  showApprovalButton,
  onTeamChange,
  onApprovalClick
}) => {
  return (
    <div className="flex items-center gap-4">
      {/* 待审批按钮 - 只在当前环境需要审批且用户有权限时显示 */}
      {showApprovalButton && (
        <Button
          variant="outline"
          className="border-orange-500 text-orange-600 hover:bg-orange-50 hover:text-orange-700 hover:border-orange-600"
          onClick={onApprovalClick}
        >
          <ClipboardCheck className="h-4 w-4 mr-2" />
          待审批
          {pendingApprovalCount > 0 && (
            <span className="ml-2 px-2 py-0.5 rounded-full bg-orange-100 text-orange-700 text-xs font-semibold">
              {pendingApprovalCount}
            </span>
          )}
        </Button>
      )}

      <div className="h-6 w-px bg-border" />

      <div className="flex items-center gap-2">
        <Users className="h-4 w-4 text-muted-foreground" />
        <span className="text-sm text-muted-foreground">当前团队:</span>
      </div>
      
      <Select value={currentTeamId?.toString()} onValueChange={onTeamChange}>
        <SelectTrigger className="w-[200px]">
          <SelectValue placeholder="选择团队" />
        </SelectTrigger>
        <SelectContent>
          {teams.map((team) => (
            <SelectItem key={team.teamId} value={team.teamId.toString()}>
              {team.teamName}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
});

TeamSelector.displayName = 'TeamSelector';
