'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Activity, TrendingUp } from 'lucide-react';

interface DataAnalysisProps {
  selectedNutrient: 'organic' | 'nitrogen' | 'phosphorus' | 'potassium';
}

export function DataAnalysis({ selectedNutrient }: DataAnalysisProps) {
  const nutrientConfig = {
    organic: { label: '有机质', unit: 'g/kg', color: '#22c55e', min: 0, max: 40 },
    nitrogen: { label: '全氮', unit: 'g/kg', color: '#3b82f6', min: 0, max: 2 },
    phosphorus: { label: '有效磷', unit: 'mg/kg', color: '#f59e0b', min: 0, max: 40 },
    potassium: { label: '速效钾', unit: 'mg/kg', color: '#a855f7', min: 0, max: 250 },
  };

  const currentNutrient = nutrientConfig[selectedNutrient];

  const layers3DData = [
    { depth: '0-20cm', avgValue: 28.5, distribution: [25, 28, 32, 27, 30, 26, 29, 31, 28, 27] },
    { depth: '20-40cm', avgValue: 20.2, distribution: [18, 21, 23, 19, 22, 20, 21, 22, 19, 20] },
    { depth: '40-60cm', avgValue: 13.5, distribution: [12, 14, 15, 13, 14, 12, 13, 15, 14, 13] },
  ];

  const getColorForValue = (value: number, nutrient: typeof selectedNutrient) => {
    const config = nutrientConfig[nutrient];
    const ratio = (value - config.min) / (config.max - config.min);

    if (ratio < 0.2) return '#ef4444';
    if (ratio < 0.4) return '#f97316';
    if (ratio < 0.6) return '#eab308';
    if (ratio < 0.8) return '#84cc16';
    return '#22c55e';
  };

  return (
    <div className="space-y-4">
      <Card className="p-4">
        <div className="flex items-center gap-2 mb-3">
          <Activity className="w-5 h-5 text-blue-600" />
          <h4>垂直分布趋势</h4>
        </div>
        <div className="space-y-3">
          {layers3DData.map((layer, index) => (
            <div key={index}>
              <div className="flex items-center justify-between text-sm mb-1">
                <span className="text-muted-foreground">{layer.depth}</span>
                <span className="font-medium">
                  {layer.avgValue} {currentNutrient.unit}
                </span>
              </div>
              <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full transition-all"
                  style={{
                    width: `${(layer.avgValue / currentNutrient.max) * 100}%`,
                    backgroundColor: getColorForValue(layer.avgValue, selectedNutrient),
                  }}
                />
              </div>
            </div>
          ))}
        </div>

        <div className="mt-4 pt-4 border-t">
          <div className="text-sm space-y-1">
            <div className="flex justify-between">
              <span className="text-muted-foreground">递减率:</span>
              <span className="text-red-600">-29.1%/20cm</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">表层富集:</span>
              <span className="text-green-600">明显</span>
            </div>
          </div>
        </div>
      </Card>

      <Card className="p-4">
        <div className="flex items-center gap-2 mb-3">
          <TrendingUp className="w-5 h-5 text-orange-600" />
          <h4>水平变异性</h4>
        </div>
        <div className="space-y-3 text-sm">
          <div className="flex justify-between">
            <span className="text-muted-foreground">变异系数:</span>
            <span>14.8%</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">变异等级:</span>
            <Badge className="bg-yellow-500">中等变异</Badge>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">最高值:</span>
            <span className="text-green-600">32.1 {currentNutrient.unit}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">最低值:</span>
            <span className="text-orange-600">22.3 {currentNutrient.unit}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">极差:</span>
            <span>9.8 {currentNutrient.unit}</span>
          </div>
        </div>
      </Card>

      <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
        <h4 className="mb-2 text-blue-900 dark:text-blue-100">插值算法</h4>
        <div className="text-xs text-blue-800 dark:text-blue-200 space-y-1">
          <p>• <strong>克里金插值</strong>（Kriging）</p>
          <p>• 考虑空间自相关性</p>
          <p>• 最佳无偏估计</p>
          <p>• 适用于土壤养分空间预测</p>
        </div>
      </Card>

      <Card className="p-4 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
        <h4 className="mb-2 text-green-900 dark:text-green-100">分析结论</h4>
        <ul className="text-xs text-green-800 dark:text-green-200 space-y-1">
          <li>• 养分在垂直方向呈递减分布</li>
          <li>• 表层（0-20cm）含量最高</li>
          <li>• 水平分布呈中等变异</li>
          <li>• 建议分层精准施肥</li>
        </ul>
      </Card>
    </div>
  );
}