'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { SoilDataStatistics } from './soilDataReducer';

interface StatisticalAnalysisProps {
  statistics: SoilDataStatistics | null;
}

export default function StatisticalAnalysis({ statistics }: StatisticalAnalysisProps) {
  if (!statistics) {
    return (
      <Card className="p-8 text-center">
        <div className="text-muted-foreground">
          <p>暂无统计数据</p>
          <p className="text-sm mt-1">请先添加采样点数据</p>
        </div>
      </Card>
    );
  }

  const totalSamples = statistics.phDistribution.strongAcidic +
    statistics.phDistribution.acidic +
    statistics.phDistribution.neutral +
    statistics.phDistribution.alkaline +
    statistics.phDistribution.strongAlkaline;

  const calculatePercentage = (value: number) => {
    return totalSamples > 0 ? ((value / totalSamples) * 100).toFixed(0) : '0';
  };

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {/* pH值分布统计 */}
        <Card className="p-6">
          <h3 className="text-lg font-semibold mb-4">pH值分布统计</h3>
          <div className="space-y-3">
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span>强酸性 (&lt;5.5)</span>
                <span>{statistics.phDistribution.strongAcidic} 个 ({calculatePercentage(statistics.phDistribution.strongAcidic)}%)</span>
              </div>
              <div className="w-full h-6 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-red-500 transition-all duration-500"
                  style={{ width: `${calculatePercentage(statistics.phDistribution.strongAcidic)}%` }}
                />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span>酸性 (5.5-6.5)</span>
                <span>{statistics.phDistribution.acidic} 个 ({calculatePercentage(statistics.phDistribution.acidic)}%)</span>
              </div>
              <div className="w-full h-6 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-orange-500 transition-all duration-500"
                  style={{ width: `${calculatePercentage(statistics.phDistribution.acidic)}%` }}
                />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span>中性 (6.5-7.5)</span>
                <span>{statistics.phDistribution.neutral} 个 ({calculatePercentage(statistics.phDistribution.neutral)}%)</span>
              </div>
              <div className="w-full h-6 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-green-500 transition-all duration-500"
                  style={{ width: `${calculatePercentage(statistics.phDistribution.neutral)}%` }}
                />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span>碱性 (7.5-8.5)</span>
                <span>{statistics.phDistribution.alkaline} 个 ({calculatePercentage(statistics.phDistribution.alkaline)}%)</span>
              </div>
              <div className="w-full h-6 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-blue-500 transition-all duration-500"
                  style={{ width: `${calculatePercentage(statistics.phDistribution.alkaline)}%` }}
                />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span>强碱性 (&gt;8.5)</span>
                <span>{statistics.phDistribution.strongAlkaline} 个 ({calculatePercentage(statistics.phDistribution.strongAlkaline)}%)</span>
              </div>
              <div className="w-full h-6 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-purple-500 transition-all duration-500"
                  style={{ width: `${calculatePercentage(statistics.phDistribution.strongAlkaline)}%` }}
                />
              </div>
            </div>
          </div>

          {/* pH值评估 */}
          <div className="mt-4 p-3 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 rounded-lg">
            <div className="text-sm text-green-800 dark:text-green-200">
              <strong>pH值评估：</strong>
              {statistics.phDistribution.neutral > totalSamples * 0.6 ?
                ' 土壤酸碱度适中，适宜大多数作物生长' :
                statistics.phDistribution.acidic > totalSamples * 0.5 ?
                  ' 土壤偏酸性，建议适量施用石灰调节' :
                  statistics.phDistribution.alkaline > totalSamples * 0.5 ?
                    ' 土壤偏碱性，建议适量施用酸性肥料调节' :
                    ' 土壤酸碱度需要进一步检测和调节'
              }
            </div>
          </div>
        </Card>

        {/* 有机质含量统计 */}
        <Card className="p-6">
          <h3 className="text-lg font-semibold mb-4">有机质含量统计</h3>
          <div className="space-y-3">
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span>极低 (&lt;10 g/kg)</span>
                <span>{statistics.organicMatterDistribution.veryLow} 个 ({calculatePercentage(statistics.organicMatterDistribution.veryLow)}%)</span>
              </div>
              <div className="w-full h-6 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-red-500 transition-all duration-500"
                  style={{ width: `${calculatePercentage(statistics.organicMatterDistribution.veryLow)}%` }}
                />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span>低 (10-20 g/kg)</span>
                <span>{statistics.organicMatterDistribution.low} 个 ({calculatePercentage(statistics.organicMatterDistribution.low)}%)</span>
              </div>
              <div className="w-full h-6 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-orange-500 transition-all duration-500"
                  style={{ width: `${calculatePercentage(statistics.organicMatterDistribution.low)}%` }}
                />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span>中等 (20-30 g/kg)</span>
                <span>{statistics.organicMatterDistribution.medium} 个 ({calculatePercentage(statistics.organicMatterDistribution.medium)}%)</span>
              </div>
              <div className="w-full h-6 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-yellow-500 transition-all duration-500"
                  style={{ width: `${calculatePercentage(statistics.organicMatterDistribution.medium)}%` }}
                />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span>较高 (30-40 g/kg)</span>
                <span>{statistics.organicMatterDistribution.high} 个 ({calculatePercentage(statistics.organicMatterDistribution.high)}%)</span>
              </div>
              <div className="w-full h-6 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-green-500 transition-all duration-500"
                  style={{ width: `${calculatePercentage(statistics.organicMatterDistribution.high)}%` }}
                />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span>高 (&gt;40 g/kg)</span>
                <span>{statistics.organicMatterDistribution.veryHigh} 个 ({calculatePercentage(statistics.organicMatterDistribution.veryHigh)}%)</span>
              </div>
              <div className="w-full h-6 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-blue-500 transition-all duration-500"
                  style={{ width: `${calculatePercentage(statistics.organicMatterDistribution.veryHigh)}%` }}
                />
              </div>
            </div>
          </div>

          {/* 有机质评估 */}
          <div className="mt-4 p-3 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 rounded-lg">
            <div className="text-sm text-green-800 dark:text-green-200">
              <strong>有机质评估：</strong>
              {(statistics.organicMatterDistribution.high + statistics.organicMatterDistribution.veryHigh) > totalSamples * 0.5 ?
                ' 土壤有机质含量丰富，肥力良好' :
                (statistics.organicMatterDistribution.medium) > totalSamples * 0.5 ?
                  ' 土壤有机质含量中等，需要适量补充' :
                  ' 土壤有机质含量偏低，建议增施有机肥'
              }
            </div>
          </div>
        </Card>
      </div>

      {/* 综合统计表格 */}
      <Card className="p-6">
        <h3 className="text-lg font-semibold mb-4">数据统计概览</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div className="text-center p-4 bg-muted rounded-lg">
            <div className="text-2xl font-bold text-green-600 dark:text-green-400">
              {statistics.totalPoints}
            </div>
            <div className="text-sm text-muted-foreground mt-1">采样点总数</div>
          </div>
          <div className="text-center p-4 bg-muted rounded-lg">
            <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
              {statistics.totalFields}
            </div>
            <div className="text-sm text-muted-foreground mt-1">覆盖地块数</div>
          </div>
          <div className="text-center p-4 bg-muted rounded-lg">
            <div className="text-2xl font-bold text-purple-600 dark:text-purple-400">
              {statistics.totalLayers}
            </div>
            <div className="text-sm text-muted-foreground mt-1">分层样本数</div>
          </div>
          <div className="text-center p-4 bg-muted rounded-lg">
            <div className="text-2xl font-bold text-orange-600 dark:text-orange-400">
              {statistics.averagePH.toFixed(1)}
            </div>
            <div className="text-sm text-muted-foreground mt-1">平均pH值</div>
          </div>
        </div>

        {/* 综合评估 */}
        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg">
          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">综合评估建议</h4>
          <div className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
            <p>• <strong>数据覆盖度：</strong>已覆盖 {statistics.totalFields} 个地块，采样密度{statistics.totalPoints > 10 ? '充足' : '适中'}</p>
            <p>• <strong>土壤状况：</strong>平均pH值{statistics.averagePH.toFixed(1)}，整体呈{statistics.averagePH < 6.5 ? '酸性' : statistics.averagePH > 7.5 ? '碱性' : '中性'}反应</p>
            <p>• <strong>改进建议：</strong>
              {statistics.phDistribution.neutral > totalSamples * 0.5 ?
                ' 土壤酸碱度状况良好，继续保持当前管理方式' :
                ' 建议进行土壤改良，调节pH值至适宜范围'
              }
            </p>
          </div>
        </div>
      </Card>
    </div>
  );
}