'use client';

import { useEffect } from 'react';
import { Card } from '@/components/ui/card';
import { toast } from 'sonner';
import { FieldSelector } from './components/FieldSelector';
import { ChartRadarAnalysis } from './components/RadarChart';
import { YieldComparison } from './components/YieldComparison';
import { NutrientComparison } from './components/NutrientComparison';
import { MapComparison } from './components/MapComparison';
import { useChartAnalysis, FieldData } from './components/chartAnalysisReducer';

// 模拟地块数据
const mockFieldsData: FieldData[] = [
  {
    id: 'field-1',
    name: '东区1号地',
    area: 50.5,
    location: '东经120.15°, 北纬30.25°',
    soilType: '壤土',
    ph: 6.5,
    organicMatter: 32,
    nitrogen: 1.8,
    phosphorus: 1.2,
    potassium: 18,
    soilDepth: 85,
    slope: 3,
    currentCrop: '水稻',
    yield: 750,
    suitabilityScore: 87,
    suitabilityGrade: '高度适宜',
    irrigation: '喷灌',
    drainage: '良好',
  },
  {
    id: 'field-2',
    name: '西区2号地',
    area: 45.2,
    location: '东经120.12°, 北纬30.28°',
    soilType: '粘土',
    ph: 7.8,
    organicMatter: 22,
    nitrogen: 1.3,
    phosphorus: 0.9,
    potassium: 14,
    soilDepth: 55,
    slope: 5,
    currentCrop: '玉米',
    yield: 650,
    suitabilityScore: 72,
    suitabilityGrade: '一般适宜',
    irrigation: '滴灌',
    drainage: '中等',
  },
  {
    id: 'field-3',
    name: '南区3号地',
    area: 38.8,
    location: '东经120.18°, 北纬30.22°',
    soilType: '砂土',
    ph: 8.5,
    organicMatter: 15,
    nitrogen: 0.8,
    phosphorus: 0.6,
    potassium: 10,
    soilDepth: 42,
    slope: 8,
    currentCrop: '小麦',
    yield: 480,
    suitabilityScore: 58,
    suitabilityGrade: '不适宜',
    irrigation: '漫灌',
    drainage: '较差',
  },
  {
    id: 'field-4',
    name: '北区4号地',
    area: 55.0,
    location: '东经120.20°, 北纬30.30°',
    soilType: '壤土',
    ph: 6.8,
    organicMatter: 28,
    nitrogen: 1.6,
    phosphorus: 1.0,
    potassium: 16,
    soilDepth: 75,
    slope: 2,
    currentCrop: '大豆',
    yield: 380,
    suitabilityScore: 82,
    suitabilityGrade: '高度适宜',
    irrigation: '喷灌',
    drainage: '良好',
  },
];

export default function ChartPage() {
  const { setFields, state } = useChartAnalysis();

  // 初始化数据
  useEffect(() => {
    // 直接使用模拟数据，确保数据可用
    setFields(mockFieldsData);
    localStorage.setItem('chart-analysis-fields', JSON.stringify(mockFieldsData));
  }, [setFields]);

  // 如果数据还没有加载，显示loading状态
  if (state.fields.length === 0) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-green-800 dark:text-green-200">可视化图表分析</h2>
            <p className="text-muted-foreground">
              多维度指标可视化展示与对比分析
            </p>
          </div>
        </div>
        <Card className="p-6 bg-card">
          <div className="text-center py-8">
            <p>正在加载数据...</p>
          </div>
        </Card>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-green-800 dark:text-green-200">可视化图表分析</h2>
          <p className="text-muted-foreground">
            多维度指标可视化展示与对比分析
          </p>
        </div>
      </div>

      {/* 地块选择器 */}
      <FieldSelector fields={state.fields} />

      {/* 图表分析区域 */}
      <div className="space-y-4">
        {/* 雷达图 */}
        <ChartRadarAnalysis />

        {/* 产量与有机质对比 */}
        <YieldComparison />

        {/* 养分对比 */}
        <NutrientComparison />

        {/* 地图对比 */}
        <MapComparison />
      </div>
    </div>
  );
}