/**
 * 洞察卡片组件 - 显示 AI 生成的洞察
 */

import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Lightbulb, AlertTriangle, CheckCircle, AlertCircle } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { ComponentPropsMap, RenderContext } from '../types';

interface InsightCardProps {
  props: ComponentPropsMap['insight_card'] | {
    type: 'info' | 'warning' | 'success' | 'error' | 'opportunity';
    title: string;
    description: string;
    action?: { id?: string; label: string; action: string; params?: Record<string, any> };
    metric?: { label: string; value: string; trend?: 'up' | 'down' | 'neutral' };
  };
  context: RenderContext;
}

export function InsightCard({ props, context }: InsightCardProps) {
  const data = 'data' in props && props.data ? props.data : props as any;

  if (!data || !data.type || !data.title) {
    console.warn('[InsightCard] Invalid props received:', props);
    return null;
  }

  const normalizedType = data.type === 'opportunity' ? 'info' : data.type;

  const typeConfig = {
    info: {
      icon: Lightbulb,
      bar: 'bg-sky-500',
      iconBg: 'bg-sky-500/10',
      iconColor: 'text-sky-600 dark:text-sky-400',
    },
    warning: {
      icon: AlertTriangle,
      bar: 'bg-amber-500',
      iconBg: 'bg-amber-500/10',
      iconColor: 'text-amber-600 dark:text-amber-400',
    },
    success: {
      icon: CheckCircle,
      bar: 'bg-emerald-500',
      iconBg: 'bg-emerald-500/10',
      iconColor: 'text-emerald-600 dark:text-emerald-400',
    },
    error: {
      icon: AlertCircle,
      bar: 'bg-rose-500',
      iconBg: 'bg-rose-500/10',
      iconColor: 'text-rose-600 dark:text-rose-400',
    },
  };

  const config = typeConfig[normalizedType] || typeConfig.info;
  const Icon = config.icon;

  return (
    <Card className="relative overflow-hidden border-border/60 hover:shadow-md transition-all duration-200">
      {/* 左侧色条 */}
      <div className={cn('absolute left-0 top-0 bottom-0 w-1', config.bar)} />
      <CardContent className="p-4 pl-5">
        <div className="flex gap-3">
          <div className={cn('h-9 w-9 rounded-lg flex items-center justify-center flex-shrink-0', config.iconBg)}>
            <Icon className={cn('h-4.5 w-4.5', config.iconColor)} />
          </div>
          <div className="flex-1 min-w-0">
            <h4 className="font-semibold text-sm text-foreground leading-tight">{data.title}</h4>
            <p className="text-sm text-muted-foreground mt-1 leading-relaxed">{data.description}</p>
            {data.action && (
              <Button
                size="sm"
                variant="outline"
                className="mt-3 h-8"
                disabled={context.loading}
                onClick={() => context.onAction?.(data.action!.action, data.action!.params)}
              >
                {data.action.label}
              </Button>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
