'use client';

import { Card } from '@/components/ui/card';
import { useChartComparison } from './components/chartComparisonReducer';
import { FieldSelector } from './components/FieldSelector';
import { RadarChart } from './components/RadarChart';
import { YieldNutrientCharts } from './components/YieldNutrientCharts';
import { MapComparison } from './components/MapComparison';
import { ReportList } from './components/ReportList';

export default function ChartPage() {
  const {
    state,
    availableFields,
    comparisonFields,
    handleAddField,
    handleRemoveField,
    handleGenerateReport,
    handleDeleteReport,
    handleDownloadPDF,
    handleDownloadWord,
  } = useChartComparison();

  if (state.isInitializing) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-green-800">可视化图表分析</h2>
            <p className="text-muted-foreground">
              多维度指标看板、可视化图表分析与智能对比报告
            </p>
          </div>
        </div>
        <div className="flex items-center justify-center py-12">
          <div className="text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600 mx-auto mb-4"></div>
            <p className="text-muted-foreground">正在初始化数据...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-green-800">可视化图表分析</h2>
          <p className="text-muted-foreground">
            多维度指标看板、可视化图表分析与智能对比报告
          </p>
        </div>
      </div>

      {/* 地块选择器 */}
      <Card className="p-4 bg-card">
        <FieldSelector
          availableFields={availableFields}
          comparisonFields={comparisonFields}
          onAddField={handleAddField}
          onRemoveField={handleRemoveField}
          onGenerateReport={handleGenerateReport}
          reportGenerating={state.reportGenerating}
          reportProgress={state.reportProgress}
        />
      </Card>

      {/* 可视化图表分析 */}
      <div className="space-y-4">
        {/* 雷达图 */}
        <RadarChart comparisonFields={comparisonFields} />

        {/* 产量与养分对比 */}
        <YieldNutrientCharts comparisonFields={comparisonFields} />

        {/* 地图对比 */}
        <MapComparison comparisonFields={comparisonFields} />
      </div>

      {/* 历史报告列表 */}
      <ReportList
        savedReports={state.savedReports}
        onDeleteReport={handleDeleteReport}
        onDownloadPDF={handleDownloadPDF}
        onDownloadWord={handleDownloadWord}
      />

      {/* 使用说明 */}
      <Card className="p-6 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
        <h3 className="mb-3 text-blue-800 dark:text-blue-200">💡 报告功能说明</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-700 dark:text-blue-300">
          <div>
            <h4 className="font-medium mb-2">📊 报告内容</h4>
            <ul className="space-y-1 text-xs">
              <li>• 执行摘要：最优地块、最高产量、最佳有机质分析</li>
              <li>• 详细数据对比：各地块完整数据表格</li>
              <li>• 智能分析建议：基于数据的对比分析和改进建议</li>
            </ul>
          </div>
          <div>
            <h4 className="font-medium mb-2">🎯 使用方式</h4>
            <ul className="space-y-1 text-xs">
              <li>• 选择2-4个地块进行对比分析</li>
              <li>• 点击"生成报告"创建分析报告</li>
              <li>• 支持PDF和Word格式导出</li>
              <li>• 历史报告可在下方查看和管理</li>
            </ul>
          </div>
        </div>
        <div className="mt-4 p-3 bg-blue-100 dark:bg-blue-900 rounded-lg">
          <p className="text-xs text-blue-600 dark:text-blue-400">
            <strong>提示：</strong>点击下载按钮后，报告会立即生成并在右下角显示成功提示。报告包含完整的地块对比分析数据和专业建议。
          </p>
        </div>
      </Card>
    </div>
  );
}