/**
 * filekorolheader: 决策趋势图组件 - 决策生成与完成趋势分析
 * 功能：趋势线图、数据可视化、时间序列展示
 * 路径：/ai-crop-model/support/dashboard/components/DecisionTrends
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式
 */
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Calendar } from 'lucide-react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip as RechartsTooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import { TrendData } from './aiDecisionDashboardReducer';

interface DecisionTrendsProps {
  trendData: TrendData[];
}

export function DecisionTrends({ trendData }: DecisionTrendsProps) {
  return (
    <Card className="p-6 bg-card">
      <div className="flex items-center justify-between mb-4">
        <h3>决策生成与完成趋势</h3>
        <Badge variant="outline" className="font-light">
          <Calendar className="w-3 h-3 mr-1" />
          近7天
        </Badge>
      </div>

      <div className="h-96">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={trendData}>
            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
            <XAxis
              dataKey="date"
              className="text-xs"
              tick={{ fill: 'hsl(var(--muted-foreground))' }}
            />
            <YAxis
              className="text-xs"
              tick={{ fill: 'hsl(var(--muted-foreground))' }}
            />
            <RechartsTooltip
              contentStyle={{
                backgroundColor: 'hsl(var(--card))',
                border: '1px solid hsl(var(--border))',
                borderRadius: '6px',
              }}
              labelStyle={{ color: 'hsl(var(--foreground))' }}
            />
            <Legend
              wrapperStyle={{
                fontSize: '12px',
              }}
            />
            <Line
              type="monotone"
              dataKey="generated"
              stroke="hsl(var(--chart-1))"
              name="生成决策"
              strokeWidth={2}
              dot={{ r: 4, fill: 'hsl(var(--chart-1))' }}
              activeDot={{ r: 6 }}
            />
            <Line
              type="monotone"
              dataKey="completed"
              stroke="hsl(var(--chart-2))"
              name="完成决策"
              strokeWidth={2}
              dot={{ r: 4, fill: 'hsl(var(--chart-2))' }}
              activeDot={{ r: 6 }}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}