import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { 
  Clock, CheckCircle2, XCircle, Edit2, 
  Target, DollarSign, Users, TrendingUp,
  AlertCircle, Bot
} from "lucide-react";
import { formatDistanceToNow } from "date-fns";
import { zhCN } from "date-fns/locale";

export interface PendingCampaign {
  id: string;
  name: string;
  type: string;
  description: string;
  budget: number;
  targetUsers: number;
  expectedROI: number;
  riskLevel: 'low' | 'medium' | 'high';
  createdAt: Date;
  aiStrategy?: string;
}

interface PendingApprovalsProps {
  campaigns: PendingCampaign[];
  onApprove?: (id: string) => void;
  onReject?: (id: string) => void;
  onEdit?: (id: string) => void;
}

const riskConfig = {
  low: { label: "低风险", color: "bg-emerald-500/20 text-emerald-600" },
  medium: { label: "中风险", color: "bg-amber-500/20 text-amber-600" },
  high: { label: "高风险", color: "bg-destructive/20 text-destructive" }
};

export function PendingApprovals({ campaigns, onApprove, onReject, onEdit }: PendingApprovalsProps) {
  return (
    <Card className="h-full">
      <div className="p-4 border-b flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Clock className="h-5 w-5 text-amber-500" />
          <h3 className="font-semibold">待审批活动</h3>
        </div>
        {campaigns.length > 0 && (
          <Badge variant="destructive" className="text-xs">
            {campaigns.length} 待处理
          </Badge>
        )}
      </div>
      
      <ScrollArea className="h-[400px]">
        <div className="p-4 space-y-3">
          {campaigns.length === 0 ? (
            <div className="text-center py-12 text-muted-foreground">
              <CheckCircle2 className="h-12 w-12 mx-auto mb-3 opacity-20" />
              <p>暂无待审批活动</p>
              <p className="text-sm mt-1">AI生成的活动将在这里等待审批</p>
            </div>
          ) : (
            campaigns.map((campaign) => {
              const risk = riskConfig[campaign.riskLevel];
              
              return (
                <div
                  key={campaign.id}
                  className="p-4 rounded-lg border bg-card hover:shadow-md transition-all"
                >
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex items-center gap-2">
                      <Bot className="h-4 w-4 text-primary" />
                      <h4 className="font-medium">{campaign.name}</h4>
                    </div>
                    <Badge className={`text-xs ${risk.color}`}>
                      {risk.label}
                    </Badge>
                  </div>
                  
                  <p className="text-sm text-muted-foreground mb-3">
                    {campaign.description}
                  </p>
                  
                  <div className="grid grid-cols-3 gap-2 mb-3 text-sm">
                    <div className="flex items-center gap-1.5 text-muted-foreground">
                      <DollarSign className="h-3.5 w-3.5" />
                      <span>预算: ¥{campaign.budget.toLocaleString()}</span>
                    </div>
                    <div className="flex items-center gap-1.5 text-muted-foreground">
                      <Users className="h-3.5 w-3.5" />
                      <span>目标: {campaign.targetUsers}人</span>
                    </div>
                    <div className="flex items-center gap-1.5 text-muted-foreground">
                      <TrendingUp className="h-3.5 w-3.5" />
                      <span>预期ROI: {campaign.expectedROI}x</span>
                    </div>
                  </div>
                  
                  {campaign.aiStrategy && (
                    <div className="p-2 rounded bg-muted/50 mb-3">
                      <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-1">
                        <Bot className="h-3 w-3" />
                        AI策略说明
                      </div>
                      <p className="text-xs">{campaign.aiStrategy}</p>
                    </div>
                  )}
                  
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-muted-foreground">
                      {formatDistanceToNow(campaign.createdAt, { addSuffix: true, locale: zhCN })}
                    </span>
                    
                    <div className="flex items-center gap-2">
                      <Button
                        size="sm"
                        variant="ghost"
                        className="h-7 text-xs"
                        onClick={() => onEdit?.(campaign.id)}
                      >
                        <Edit2 className="h-3 w-3 mr-1" />
                        调整
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        className="h-7 text-xs text-destructive hover:text-destructive"
                        onClick={() => onReject?.(campaign.id)}
                      >
                        <XCircle className="h-3 w-3 mr-1" />
                        拒绝
                      </Button>
                      <Button
                        size="sm"
                        variant="default"
                        className="h-7 text-xs"
                        onClick={() => onApprove?.(campaign.id)}
                      >
                        <CheckCircle2 className="h-3 w-3 mr-1" />
                        批准
                      </Button>
                    </div>
                  </div>
                </div>
              );
            })
          )}
        </div>
      </ScrollArea>
    </Card>
  );
}
