'use client';

import { Card } from '@/components/ui/card';
import { Radar } from 'lucide-react';
import {
  RadarChart as RechartsRadarChart,
  Radar as RechartsRadar,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  ResponsiveContainer,
  Legend,
} from 'recharts';
import { FieldData } from './chartComparisonReducer';

interface RadarChartProps {
  comparisonFields: FieldData[];
}

export function RadarChart({ comparisonFields }: RadarChartProps) {
  // 雷达图数据
  const radarData = [
    {
      indicator: 'pH值',
      ...comparisonFields.reduce((acc, field) => ({
        ...acc,
        [field.name]: (field.ph / 10) * 100,
      }), {}),
    },
    {
      indicator: '有机质',
      ...comparisonFields.reduce((acc, field) => ({
        ...acc,
        [field.name]: (field.organicMatter / 40) * 100,
      }), {}),
    },
    {
      indicator: '全氮',
      ...comparisonFields.reduce((acc, field) => ({
        ...acc,
        [field.name]: (field.nitrogen / 2.5) * 100,
      }), {}),
    },
    {
      indicator: '全磷',
      ...comparisonFields.reduce((acc, field) => ({
        ...acc,
        [field.name]: (field.phosphorus / 2.0) * 100,
      }), {}),
    },
    {
      indicator: '全钾',
      ...comparisonFields.reduce((acc, field) => ({
        ...acc,
        [field.name]: (field.potassium / 25) * 100,
      }), {}),
    },
    {
      indicator: '土层厚度',
      ...comparisonFields.reduce((acc, field) => ({
        ...acc,
        [field.name]: (field.soilDepth / 100) * 100,
      }), {}),
    },
  ];

  return (
    <Card className="p-6">
      <h3 className="mb-4 flex items-center gap-2">
        <Radar className="w-5 h-5 text-blue-600" />
        多维度雷达图对比
      </h3>
      <p className="text-sm text-muted-foreground mb-4">
        综合展示各地块在多个指标上的相对优劣势
      </p>
      <div className="h-96">
        <ResponsiveContainer width="100%" height="100%">
          <RechartsRadarChart data={radarData}>
            <PolarGrid />
            <PolarAngleAxis dataKey="indicator" />
            <PolarRadiusAxis angle={90} domain={[0, 100]} />
            {comparisonFields.map((field, index) => {
              const colors = ['#10b981', '#3b82f6', '#f59e0b', '#ef4444'];
              return (
                <RechartsRadar
                  key={field.id}
                  name={field.name}
                  dataKey={field.name}
                  stroke={colors[index]}
                  fill={colors[index]}
                  fillOpacity={0.3}
                />
              );
            })}
            <Legend />
          </RechartsRadarChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}