import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { 
  TrendingUp, 
  TrendingDown, 
  AlertTriangle, 
  CheckCircle2,
  BarChart3,
  ArrowRight,
  Lightbulb,
  RefreshCw
} from "lucide-react";
import { formatDistanceToNow } from "date-fns";
import { zhCN } from "date-fns/locale";

export interface FinanceInsight {
  id: string;
  type: 'success' | 'warning' | 'info' | 'opportunity';
  title: string;
  description: string;
  metric?: { label: string; value: string; trend: 'up' | 'down' | 'neutral' };
  action?: { label: string };
  timestamp: Date;
}

interface FinanceInsightFeedProps {
  insights: FinanceInsight[];
  onAction?: (insightId: string, action: string) => void;
}

const typeConfig = {
  success: { 
    icon: TrendingUp, 
    bgColor: "bg-emerald-50 dark:bg-emerald-950", 
    borderColor: "border-emerald-200 dark:border-emerald-800",
    iconColor: "text-emerald-600" 
  },
  warning: { 
    icon: AlertTriangle, 
    bgColor: "bg-amber-50 dark:bg-amber-950", 
    borderColor: "border-amber-200 dark:border-amber-800",
    iconColor: "text-amber-600" 
  },
  info: { 
    icon: BarChart3, 
    bgColor: "bg-blue-50 dark:bg-blue-950", 
    borderColor: "border-blue-200 dark:border-blue-800",
    iconColor: "text-blue-600" 
  },
  opportunity: { 
    icon: Lightbulb, 
    bgColor: "bg-purple-50 dark:bg-purple-950", 
    borderColor: "border-purple-200 dark:border-purple-800",
    iconColor: "text-purple-600" 
  }
};

export function FinanceInsightFeed({ insights, onAction }: FinanceInsightFeedProps) {
  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-base flex items-center gap-2">
            <Lightbulb className="h-4 w-4 text-emerald-500" />
            财务洞察
            <Badge variant="secondary" className="ml-1">{insights.length}</Badge>
          </CardTitle>
          <Button variant="ghost" size="sm">
            <RefreshCw className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent className="p-0">
        <ScrollArea className="h-[320px]">
          <div className="space-y-2 p-4 pt-0">
            {insights.map((insight) => {
              const config = typeConfig[insight.type];
              const InsightIcon = config.icon;
              return (
                <div
                  key={insight.id}
                  className={`p-3 rounded-lg border ${config.bgColor} ${config.borderColor}`}
                >
                  <div className="flex items-start gap-3">
                    <InsightIcon className={`h-5 w-5 mt-0.5 ${config.iconColor}`} />
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center justify-between gap-2">
                        <h4 className="font-medium text-sm">{insight.title}</h4>
                        <span className="text-xs text-muted-foreground whitespace-nowrap">
                          {formatDistanceToNow(insight.timestamp, { addSuffix: true, locale: zhCN })}
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">
                        {insight.description}
                      </p>
                      {insight.action && (
                        <Button 
                          variant="ghost" 
                          size="sm" 
                          className="h-6 text-xs mt-2 px-0"
                          onClick={() => onAction?.(insight.id, insight.action!.label)}
                        >
                          {insight.action.label}
                          <ArrowRight className="h-3 w-3 ml-1" />
                        </Button>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
}
