import { useState } from "react";
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 { 
  Lightbulb, TrendingDown, TrendingUp, Zap, 
  CheckCircle2, AlertTriangle, ArrowRight, Clock
} from "lucide-react";
import { formatDistanceToNow } from "date-fns";
import { zhCN } from "date-fns/locale";

export interface Insight {
  id: string;
  type: 'opportunity' | 'warning' | 'auto_executed' | 'suggestion';
  title: string;
  description: string;
  metric?: {
    label: string;
    value: string;
    trend: 'up' | 'down' | 'neutral';
  };
  action?: {
    label: string;
    onClick?: () => void;
  };
  timestamp: Date;
  status?: 'pending' | 'executed' | 'dismissed';
}

interface InsightFeedProps {
  insights: Insight[];
  onAction?: (insightId: string, action: string) => void;
  onCreateCampaign?: (insight: Insight) => void;
}

const insightConfig = {
  opportunity: {
    icon: Lightbulb,
    color: "text-amber-500",
    bgColor: "bg-amber-500/10",
    borderColor: "border-amber-500/30",
    label: "发现机会"
  },
  warning: {
    icon: AlertTriangle,
    color: "text-destructive",
    bgColor: "bg-destructive/10",
    borderColor: "border-destructive/30",
    label: "异常预警"
  },
  auto_executed: {
    icon: CheckCircle2,
    color: "text-emerald-500",
    bgColor: "bg-emerald-500/10",
    borderColor: "border-emerald-500/30",
    label: "自动执行"
  },
  suggestion: {
    icon: Zap,
    color: "text-primary",
    bgColor: "bg-primary/10",
    borderColor: "border-primary/30",
    label: "AI建议"
  }
};

export function InsightFeed({ insights, onAction, onCreateCampaign }: InsightFeedProps) {
  return (
    <Card className="h-full">
      <div className="p-4 border-b flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Lightbulb className="h-5 w-5 text-amber-500" />
          <h3 className="font-semibold">AI洞察流</h3>
        </div>
        <Badge variant="secondary" className="text-xs">
          实时更新
        </Badge>
      </div>
      
      <ScrollArea className="h-[400px]">
        <div className="p-4 space-y-3">
          {insights.length === 0 ? (
            <div className="text-center py-12 text-muted-foreground">
              <Lightbulb className="h-12 w-12 mx-auto mb-3 opacity-20" />
              <p>AI正在分析数据...</p>
              <p className="text-sm mt-1">洞察将在发现后自动显示</p>
            </div>
          ) : (
            insights.map((insight) => {
              const config = insightConfig[insight.type];
              const Icon = config.icon;
              
              return (
                <div
                  key={insight.id}
                  className={`p-4 rounded-lg border ${config.bgColor} ${config.borderColor} transition-all hover:shadow-sm`}
                >
                  <div className="flex items-start gap-3">
                    <div className={`p-2 rounded-full ${config.bgColor}`}>
                      <Icon className={`h-4 w-4 ${config.color}`} />
                    </div>
                    
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <Badge variant="outline" className={`text-xs ${config.color} border-current`}>
                          {config.label}
                        </Badge>
                        <span className="text-xs text-muted-foreground flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          {formatDistanceToNow(insight.timestamp, { addSuffix: true, locale: zhCN })}
                        </span>
                      </div>
                      
                      <h4 className="font-medium text-sm mb-1">{insight.title}</h4>
                      <p className="text-sm text-muted-foreground">{insight.description}</p>
                      
                      {insight.metric && (
                        <div className="flex items-center gap-2 mt-2 text-sm">
                          <span className="text-muted-foreground">{insight.metric.label}:</span>
                          <span className="font-medium">{insight.metric.value}</span>
                          {insight.metric.trend === 'up' && (
                            <TrendingUp className="h-4 w-4 text-emerald-500" />
                          )}
                          {insight.metric.trend === 'down' && (
                            <TrendingDown className="h-4 w-4 text-destructive" />
                          )}
                        </div>
                      )}
                      
                      {insight.type !== 'auto_executed' && insight.action && (
                        <div className="flex items-center gap-2 mt-3">
                          <Button
                            size="sm"
                            variant="default"
                            className="h-7 text-xs"
                            onClick={() => onCreateCampaign?.(insight)}
                          >
                            {insight.action.label}
                            <ArrowRight className="h-3 w-3 ml-1" />
                          </Button>
                          <Button
                            size="sm"
                            variant="ghost"
                            className="h-7 text-xs"
                            onClick={() => onAction?.(insight.id, 'dismiss')}
                          >
                            稍后处理
                          </Button>
                        </div>
                      )}
                      
                      {insight.type === 'auto_executed' && (
                        <div className="flex items-center gap-2 mt-2">
                          <Badge variant="secondary" className="text-xs bg-emerald-500/20 text-emerald-600">
                            <CheckCircle2 className="h-3 w-3 mr-1" />
                            已自动执行
                          </Badge>
                          <Button
                            size="sm"
                            variant="link"
                            className="h-auto p-0 text-xs"
                            onClick={() => onAction?.(insight.id, 'view_details')}
                          >
                            查看详情
                          </Button>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              );
            })
          )}
        </div>
      </ScrollArea>
    </Card>
  );
}
