/**
 * filekorolheader: 模型分析图表组件 - 模型调用趋势和类型分布
 * 功能：展示模型调用趋势图表、模型类型分布饼图
 * 路径：/ai-crop-model/model-integration/management
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式
 */

'use client';

import { Card } from '@/components/ui/card';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip as RechartsTooltip,
  Legend,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  BarChart,
  Bar
} from 'recharts';
import { TrendingUp, PieChart as PieChartIcon } from 'lucide-react';

interface ModelAnalyticsProps {
  models: any[];
}

const getModelTypeLabel = (type: string) => {
  const labels: Record<string, string> = {
    'pest_identification': '病虫害识别',
    'growth_status': '生长状态',
    'yield_prediction': '产量预测'
  };
  return labels[type] || type;
};

export function ModelAnalytics({ models }: ModelAnalyticsProps) {
  // 模拟调用趋势数据 (最近7天)
  const callTrendData = [
    { date: '03-15', calls: 12500, success: 12200, failed: 300 },
    { date: '03-16', calls: 13800, success: 13500, failed: 300 },
    { date: '03-17', calls: 14200, success: 13850, failed: 350 },
    { date: '03-18', calls: 15600, success: 15200, failed: 400 },
    { date: '03-19', calls: 16800, success: 16400, failed: 400 },
    { date: '03-20', calls: 18900, success: 18450, failed: 450 },
    { date: '03-21', calls: 21300, success: 20800, failed: 500 }
  ];

  // 模型类型分布数据
  const modelTypeData = models.reduce((acc, model) => {
    const existing = acc.find(item => item.type === model.type);
    if (existing) {
      existing.count += 1;
    } else {
      acc.push({
        type: model.type,
        count: 1,
        name: getModelTypeLabel(model.type)
      });
    }
    return acc;
  }, [] as { type: string; count: number; name: string }[]);

  
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8', '#82CA9D'];

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* 模型调用趋势 */}
      <Card className="p-6">
        <div className="flex items-center gap-2 mb-4">
          <TrendingUp className="w-5 h-5 text-blue-600 dark:text-blue-400" />
          <h3 className="text-lg font-semibold text-foreground">模型调用趋势</h3>
        </div>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={callTrendData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="date" />
            <YAxis />
            <RechartsTooltip />
            <Legend />
            <Line
              type="monotone"
              dataKey="success"
              stroke="#10b981"
              strokeWidth={2}
              name="成功调用"
            />
            <Line
              type="monotone"
              dataKey="failed"
              stroke="#ef4444"
              strokeWidth={2}
              name="失败调用"
            />
            <Line
              type="monotone"
              dataKey="calls"
              stroke="#3b82f6"
              strokeWidth={2}
              name="总调用"
            />
          </LineChart>
        </ResponsiveContainer>
      </Card>

      {/* 模型类型分布 */}
      <Card className="p-6">
        <div className="flex items-center gap-2 mb-4">
          <PieChartIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
          <h3 className="text-lg font-semibold text-foreground">模型类型分布</h3>
        </div>
        <ResponsiveContainer width="100%" height={300}>
          <PieChart>
            <Pie
              data={modelTypeData}
              cx="50%"
              cy="50%"
              labelLine={false}
              label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
              outerRadius={80}
              fill="#8884d8"
              dataKey="count"
            >
              {modelTypeData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
              ))}
            </Pie>
            <RechartsTooltip />
          </PieChart>
        </ResponsiveContainer>
      </Card>
    </div>
  );
}