import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { AIAgent } from "@/types/agents";
import { Bot, Sparkles, ArrowRight } from "lucide-react";

interface AgentSwitchCardProps {
  currentAgent: AIAgent;
  newAgent: AIAgent;
  onConfirmSwitch: () => void;
  onCancel: () => void;
}

export function AgentSwitchCard({ 
  currentAgent, 
  newAgent, 
  onConfirmSwitch, 
  onCancel 
}: AgentSwitchCardProps) {
  return (
    <Card className="border-2 border-primary/20 bg-gradient-to-r from-primary/5 to-accent/5">
      <CardContent className="p-4">
        <div className="flex items-center gap-3 mb-4">
          <Sparkles className="w-5 h-5 text-primary" />
          <h4 className="font-semibold text-foreground">智能助理切换</h4>
        </div>
        
        <div className="flex items-center gap-4 mb-4">
          {/* 当前助理 */}
          <div className="flex items-center gap-2 flex-1">
            <Avatar className="w-8 h-8">
              <AvatarImage src={currentAgent.avatar} alt={currentAgent.name} />
              <AvatarFallback className={`${currentAgent.color} text-white text-sm`}>
                {currentAgent.emoji}
              </AvatarFallback>
            </Avatar>
            <div>
              <p className="text-sm font-medium">{currentAgent.name}</p>
              <p className="text-xs text-muted-foreground">{currentAgent.role}</p>
            </div>
          </div>
          
          <ArrowRight className="w-5 h-5 text-muted-foreground" />
          
          {/* 新助理 */}
          <div className="flex items-center gap-2 flex-1">
            <Avatar className="w-8 h-8 border-2 border-primary/30">
              <AvatarImage src={newAgent.avatar} alt={newAgent.name} />
              <AvatarFallback className={`${newAgent.color} text-white text-sm`}>
                {newAgent.emoji}
              </AvatarFallback>
            </Avatar>
            <div>
              <p className="text-sm font-medium">{newAgent.name}</p>
              <p className="text-xs text-muted-foreground">{newAgent.role}</p>
            </div>
          </div>
        </div>
        
        <div className="bg-muted/50 rounded-lg p-3 mb-4">
          <p className="text-sm text-muted-foreground mb-2">
            检测到您可能需要 <span className="font-medium text-foreground">{newAgent.role}</span> 的专业服务
          </p>
          <div className="flex flex-wrap gap-1">
            {newAgent.specialties.slice(0, 3).map((specialty, index) => (
              <Badge key={index} variant="secondary" className="text-xs">
                {specialty}
              </Badge>
            ))}
          </div>
        </div>
        
        <div className="flex gap-2">
          <Button size="sm" onClick={onConfirmSwitch} className="flex-1">
            <Bot className="w-4 h-4 mr-2" />
            切换到{newAgent.name}
          </Button>
          <Button size="sm" variant="outline" onClick={onCancel}>
            继续当前对话
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}
