/**
 * filekorolheader: 最新决策建议组件 - 最新决策展示与详情
 * 功能：决策列表、状态标识、优先级显示、详情展示
 * 路径：/ai-crop-model/support/dashboard/components/LatestDecisions
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式
 */
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import {
  Info,
  Sparkles,
  Droplets,
  Bug,
  Sprout,
  Package,
  CloudRain,
  Layers,
  Activity,
  CheckCircle,
  Clock,
  MapPin,
  Zap,
  CircleDot,
} from 'lucide-react';
import { DecisionRecord } from './aiDecisionDashboardReducer';

interface LatestDecisionsProps {
  latestDecisions: DecisionRecord[];
}

export function LatestDecisions({ latestDecisions }: LatestDecisionsProps) {
  const getTypeBadge = (type: string) => {
    const config = {
      irrigation: { label: '灌溉', icon: Droplets, className: 'bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-800' },
      fertilizer: { label: '施肥', icon: Sprout, className: 'bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800' },
      pesticide: { label: '打药', icon: Bug, className: 'bg-yellow-50 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800' },
      harvest: { label: '收获', icon: Package, className: 'bg-purple-50 dark:bg-purple-950 text-purple-600 dark:text-purple-400 border-purple-200 dark:border-purple-800' },
      soil: { label: '土壤', icon: Layers, className: 'bg-orange-50 dark:bg-orange-950 text-orange-600 dark:text-orange-400 border-orange-200 dark:border-orange-800' },
      weather: { label: '气象', icon: CloudRain, className: 'bg-cyan-50 dark:bg-cyan-950 text-cyan-600 dark:text-cyan-400 border-cyan-200 dark:border-cyan-800' },
    };
    const { label, icon: Icon, className } = config[type as keyof typeof config];
    return (
      <Badge variant="outline" className={`font-light ${className}`}>
        <Icon className="w-3 h-3 mr-1" />
        {label}
      </Badge>
    );
  };

  const getPriorityBadge = (priority: string) => {
    const config = {
      urgent: { label: '紧急', className: 'bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400 border-red-200 dark:border-red-800' },
      high: { label: '高', className: 'bg-orange-50 dark:bg-orange-950 text-orange-600 dark:text-orange-400 border-orange-200 dark:border-orange-800' },
      medium: { label: '中', className: 'bg-yellow-50 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800' },
      low: { label: '低', className: 'bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800' },
    };
    const { label, className } = config[priority as keyof typeof config];
    return <Badge variant="outline" className={`font-light ${className}`}>{label}</Badge>;
  };

  const getStatusBadge = (status: string) => {
    const config = {
      generated: { label: '已生成', icon: Sparkles, className: 'bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-800' },
      executing: { label: '执行中', icon: Activity, className: 'bg-purple-50 dark:bg-purple-950 text-purple-600 dark:text-purple-400 border-purple-200 dark:border-purple-800' },
      completed: { label: '已完成', icon: CheckCircle, className: 'bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800' },
      expired: { label: '已过期', icon: Clock, className: 'bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800' },
    };
    const { label, icon: Icon, className } = config[status as keyof typeof config];
    return (
      <Badge variant="outline" className={`font-light ${className}`}>
        <Icon className="w-3 h-3 mr-1" />
        {label}
      </Badge>
    );
  };

  return (
    <Card className="p-6 bg-card">
      <div className="flex items-center justify-between mb-4">
        <h3>最新决策建议</h3>
        <Badge variant="outline" className="bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800 font-light">
          <Sparkles className="w-3 h-3 mr-1" />
          最新5条
        </Badge>
      </div>

      {latestDecisions.length === 0 ? (
        <div className="text-center py-12 text-muted-foreground">
          <Info className="w-12 h-12 mx-auto mb-3 opacity-50" />
          <div>暂无决策建议</div>
        </div>
      ) : (
        <div className="space-y-4">
          {latestDecisions.map((decision, index) => (
            <Card key={decision.id} className="p-5 hover:shadow-md transition-shadow border-l-4 bg-card"
              style={{
                borderLeftColor: decision.priority === 'urgent' ? '#ef4444' :
                                decision.priority === 'high' ? '#f59e0b' :
                                decision.priority === 'medium' ? '#eab308' : '#9ca3af'
              }}>
              <div className="flex items-start">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2 flex-wrap">
                    <Badge variant="outline" className="bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-800 font-light">
                      <CircleDot className="w-3 h-3 mr-1" />
                      #{index + 1}
                    </Badge>
                    {getTypeBadge(decision.type)}
                    {getPriorityBadge(decision.priority)}
                    {getStatusBadge(decision.status)}
                  </div>

                  <h4 className="mb-2">{decision.title}</h4>

                  <p className="text-sm text-muted-foreground mb-3">
                    {decision.description}
                  </p>

                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
                    <div>
                      <div className="text-muted-foreground mb-1">地块信息</div>
                      <div className="flex items-center gap-1">
                        <MapPin className="w-4 h-4 text-green-600 dark:text-green-400" />
                        <span className="font-medium">{decision.fieldName}</span>
                      </div>
                    </div>
                    <div>
                      <div className="text-muted-foreground mb-1">作物类型</div>
                      <div className="flex items-center gap-1">
                        <Sprout className="w-4 h-4 text-green-600 dark:text-green-400" />
                        <span className="font-medium">{decision.cropType}</span>
                      </div>
                    </div>
                    <div>
                      <div className="text-muted-foreground mb-1">置信度</div>
                      <div className="flex items-center gap-1">
                        <Zap className="w-4 h-4 text-yellow-600 dark:text-yellow-400" />
                        <span className="font-medium">{(decision.confidence * 100).toFixed(0)}%</span>
                      </div>
                    </div>
                    <div>
                      <div className="text-muted-foreground mb-1">生成时间</div>
                      <div className="flex items-center gap-1">
                        <Clock className="w-4 h-4 text-muted-foreground" />
                        <span className="font-medium">{decision.createdAt}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}
    </Card>
  );
}