import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Bot, Lightbulb, Clock, CheckCircle2, Settings } from "lucide-react";
import { Button } from "@/components/ui/button";

interface AgentStatusBarProps {
  status: 'running' | 'paused' | 'error';
  insightCount: number;
  pendingCount: number;
  executedCount: number;
  onSettingsClick?: () => void;
  onExecutedClick?: () => void;
}

const statusConfig = {
  running: { label: "运行中", color: "bg-emerald-500", pulseColor: "bg-emerald-400" },
  paused: { label: "已暂停", color: "bg-amber-500", pulseColor: "bg-amber-400" },
  error: { label: "异常", color: "bg-destructive", pulseColor: "bg-destructive" }
};

export function AgentStatusBar({ 
  status, 
  insightCount, 
  pendingCount, 
  executedCount,
  onSettingsClick,
  onExecutedClick
}: AgentStatusBarProps) {
  const statusInfo = statusConfig[status];
  
  return (
    <div className="flex items-center gap-4 flex-wrap">
      {/* Agent状态 */}
      <Card className="flex-shrink-0">
        <CardContent className="p-3 flex items-center gap-3">
          <div className="relative">
            <div className={`h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center`}>
              <Bot className="h-5 w-5 text-primary" />
            </div>
            <span className="absolute -bottom-0.5 -right-0.5 flex h-3.5 w-3.5">
              <span className={`animate-ping absolute inline-flex h-full w-full rounded-full ${statusInfo.pulseColor} opacity-75`}></span>
              <span className={`relative inline-flex rounded-full h-3.5 w-3.5 ${statusInfo.color}`}></span>
            </span>
          </div>
          <div>
            <p className="text-xs text-muted-foreground">营销AI · 小营</p>
            <div className="flex items-center gap-1.5">
              <span className="font-medium text-sm">{statusInfo.label}</span>
            </div>
          </div>
        </CardContent>
      </Card>
      
      {/* 今日洞察 */}
      <Card className="flex-shrink-0">
        <CardContent className="p-3 flex items-center gap-3">
          <div className="h-10 w-10 rounded-full bg-amber-500/20 flex items-center justify-center">
            <Lightbulb className="h-5 w-5 text-amber-500" />
          </div>
          <div>
            <p className="text-xs text-muted-foreground">今日洞察</p>
            <p className="font-semibold text-lg text-amber-600">{insightCount}</p>
          </div>
        </CardContent>
      </Card>
      
      {/* 待审批 */}
      <Card className="flex-shrink-0">
        <CardContent className="p-3 flex items-center gap-3">
          <div className="h-10 w-10 rounded-full bg-destructive/20 flex items-center justify-center">
            <Clock className="h-5 w-5 text-destructive" />
          </div>
          <div>
            <p className="text-xs text-muted-foreground">待审批</p>
            <p className="font-semibold text-lg text-destructive">{pendingCount}</p>
          </div>
        </CardContent>
      </Card>
      
      {/* 已自动执行 */}
      <Card 
        className="flex-shrink-0 cursor-pointer hover:border-primary/50 transition-colors"
        onClick={onExecutedClick}
      >
        <CardContent className="p-3 flex items-center gap-3">
          <div className="h-10 w-10 rounded-full bg-emerald-500/20 flex items-center justify-center">
            <CheckCircle2 className="h-5 w-5 text-emerald-500" />
          </div>
          <div>
            <p className="text-xs text-muted-foreground">已自动执行</p>
            <p className="font-semibold text-lg text-emerald-600">{executedCount}</p>
          </div>
        </CardContent>
      </Card>
      
      {/* 操作按钮 */}
      <div className="flex-1 flex justify-end">
        <Button variant="outline" size="sm" onClick={onSettingsClick}>
          <Settings className="h-4 w-4 mr-1" />
          Agent设置
        </Button>
      </div>
    </div>
  );
}
