'use client';

import { Card } from '@/components/ui/card';
import { BarChart3, TrendingUp, Scale } from 'lucide-react';
import {
  ResponsiveContainer,
  BarChart as RechartsBarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  LineChart as RechartsLineChart,
  Line,
} from 'recharts';
import { FieldData } from './chartComparisonReducer';

interface YieldNutrientChartsProps {
  comparisonFields: FieldData[];
}

export function YieldNutrientCharts({ comparisonFields }: YieldNutrientChartsProps) {
  // 产量对比数据
  const yieldData = comparisonFields.map(field => ({
    name: field.name,
    产量: field.yield,
    有机质: field.organicMatter,
  }));

  // 养分对比数据
  const nutrientData = comparisonFields.map(field => ({
    name: field.name,
    全氮: field.nitrogen,
    全磷: field.phosphorus,
    全钾: field.potassium,
  }));

  return (
    <div className="space-y-4">
      {/* 产量与有机质对比 */}
      <div className="grid grid-cols-2 gap-4">
        <Card className="p-6">
          <h3 className="mb-4 flex items-center gap-2">
            <BarChart3 className="w-5 h-5 text-green-600" />
            产量对比 (kg/亩)
          </h3>
          <div className="h-72">
            <ResponsiveContainer width="100%" height="100%">
              <RechartsBarChart data={yieldData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="产量" fill="#10b981" />
              </RechartsBarChart>
            </ResponsiveContainer>
          </div>
        </Card>

        <Card className="p-6">
          <h3 className="mb-4 flex items-center gap-2">
            <TrendingUp className="w-5 h-5 text-purple-600" />
            有机质含量对比 (g/kg)
          </h3>
          <div className="h-72">
            <ResponsiveContainer width="100%" height="100%">
              <RechartsBarChart data={yieldData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="有机质" fill="#8b5cf6" />
              </RechartsBarChart>
            </ResponsiveContainer>
          </div>
        </Card>
      </div>

      {/* 养分对比 */}
      <Card className="p-6">
        <h3 className="mb-4 flex items-center gap-2">
          <Scale className="w-5 h-5 text-orange-600" />
          土壤养分对比 (g/kg)
        </h3>
        <div className="h-80">
          <ResponsiveContainer width="100%" height="100%">
            <RechartsLineChart data={nutrientData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Line type="monotone" dataKey="全氮" stroke="#10b981" strokeWidth={2} />
              <Line type="monotone" dataKey="全磷" stroke="#3b82f6" strokeWidth={2} />
              <Line type="monotone" dataKey="全钾" stroke="#f59e0b" strokeWidth={2} />
            </RechartsLineChart>
          </ResponsiveContainer>
        </div>
      </Card>
    </div>
  );
}