import { useState } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { Progress } from '../ui/progress';
import {
  Award,
  TrendingUp,
  Target,
  FileText,
  Download,
  Calendar,
  Lightbulb,
  AlertCircle,
  CheckCircle2,
  Activity,
  BarChart3,
  Leaf,
  Droplets,
} from 'lucide-react';
import { toast } from 'sonner@2.0.3';

interface FieldEvaluation {
  fieldId: string;
  fieldName: string;
  fertilityIndex: number;
  grade: 'S' | 'A' | 'B' | 'C' | 'D';
  pH: number;
  organicMatter: number;
  nitrogen: number;
  phosphorus: number;
  potassium: number;
  indicators: {
    physical: number; // 物理性状
    chemical: number; // 化学性质
    biological: number; // 生物学性质
  };
}

interface CropSuitability {
  cropName: string;
  suitabilityLevel: '最适' | '较适' | '适宜' | '不适';
  score: number;
  reasons: string[];
  suggestions: string[];
}

export function SoilQualityEvaluation() {
  const [selectedField, setSelectedField] = useState('field-1');
  const [selectedCrop, setSelectedCrop] = useState('rice');
  const [activeTab, setActiveTab] = useState('evaluation');

  // 模拟地块评价数据
  const fieldEvaluations: FieldEvaluation[] = [
    {
      fieldId: 'field-1',
      fieldName: '东区1号地',
      fertilityIndex: 0.82,
      grade: 'A',
      pH: 6.8,
      organicMatter: 28.5,
      nitrogen: 1.2,
      phosphorus: 25.3,
      potassium: 180,
      indicators: {
        physical: 85,
        chemical: 88,
        biological: 78,
      },
    },
    {
      fieldId: 'field-2',
      fieldName: '西区2号地',
      fertilityIndex: 0.68,
      grade: 'B',
      pH: 5.8,
      organicMatter: 22.3,
      nitrogen: 0.9,
      phosphorus: 18.5,
      potassium: 152,
      indicators: {
        physical: 72,
        chemical: 68,
        biological: 65,
      },
    },
    {
      fieldId: 'field-3',
      fieldName: '南区3号地',
      fertilityIndex: 0.75,
      grade: 'B',
      pH: 7.2,
      organicMatter: 25.8,
      nitrogen: 1.1,
      phosphorus: 22.1,
      potassium: 165,
      indicators: {
        physical: 78,
        chemical: 75,
        biological: 72,
      },
    },
  ];

  const currentEvaluation = fieldEvaluations.find(e => e.fieldId === selectedField) || fieldEvaluations[0];

  // 作物适宜性数据
  const cropSuitability: Record<string, CropSuitability> = {
    rice: {
      cropName: '水稻',
      suitabilityLevel: '最适',
      score: 92,
      reasons: [
        'pH值6.8接近水稻最适范围（6.0-7.0）',
        '有机质含量28.5 g/kg，满足水稻高产要求',
        '速效钾180 mg/kg，符合水田钾素需求',
      ],
      suggestions: [
        '建议适量补充磷肥，提高磷素利用效率',
        '保持水层管理，促进养分转化',
        '配施有机肥，维持土壤肥力',
      ],
    },
    wheat: {
      cropName: '小麦',
      suitabilityLevel: '较适',
      score: 78,
      reasons: [
        'pH值适宜小麦生长（最适6.5-7.5）',
        '有机质含量良好，有利于小麦根系发育',
        '氮素含量偏低，需要补充',
      ],
      suggestions: [
        '播前增施基肥，提高土壤氮素水平',
        '适当增施有机肥，改善土壤结构',
        '追肥分次施用，提高利用率',
      ],
    },
    corn: {
      cropName: '玉米',
      suitabilityLevel: '较适',
      score: 82,
      reasons: [
        '土壤pH值适中，有利于玉米养分吸收',
        '有机质含量较高，满足玉米需求',
        '钾素含量充足，利于玉米灌浆',
      ],
      suggestions: [
        '大喇叭口期重施氮肥',
        '适当增施磷肥促进根系发育',
        '灌浆期保证钾肥供应',
      ],
    },
    soybean: {
      cropName: '大豆',
      suitabilityLevel: '适宜',
      score: 72,
      reasons: [
        'pH值6.8略低于大豆最适（6.5-7.5）',
        '有机质含量较好，有利于根瘤菌活动',
        '磷素水平中等，需要关注',
      ],
      suggestions: [
        '适量施用石灰，调整土壤pH值',
        '增施磷肥，促进根瘤形成',
        '配施钼肥，提高固氮能力',
      ],
    },
  };

  const currentCropSuitability = cropSuitability[selectedCrop];

  const getGradeColor = (grade: string) => {
    const colors: Record<string, string> = {
      S: 'bg-purple-500',
      A: 'bg-green-500',
      B: 'bg-blue-500',
      C: 'bg-yellow-500',
      D: 'bg-red-500',
    };
    return colors[grade] || 'bg-gray-500';
  };

  const getGradeLabel = (grade: string) => {
    const labels: Record<string, string> = {
      S: '优秀',
      A: '良好',
      B: '中等',
      C: '较差',
      D: '差',
    };
    return labels[grade] || '未知';
  };

  const getSuitabilityColor = (level: string) => {
    const colors: Record<string, string> = {
      '最适': 'bg-green-600',
      '较适': 'bg-blue-600',
      '适宜': 'bg-yellow-600',
      '不适': 'bg-red-600',
    };
    return colors[level] || 'bg-gray-600';
  };

  const handleGenerateReport = () => {
    toast.success('正在生成土壤质量评价报告...');
    setTimeout(() => {
      // 生成HTML报告
      const reportHTML = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>土壤质量评价报告 - ${currentEvaluation.fieldName}</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
      line-height: 1.6;
      color: #333;
      background: #f5f5f5;
      padding: 20px;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      padding: 40px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .header {
      text-align: center;
      border-bottom: 3px solid #16a34a;
      padding-bottom: 20px;
      margin-bottom: 30px;
    }
    .header h1 {
      font-size: 32px;
      color: #166534;
      margin-bottom: 10px;
    }
    .header .subtitle {
      font-size: 16px;
      color: #666;
    }
    .meta-info {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 30px;
      padding: 20px;
      background: #f0fdf4;
      border-radius: 8px;
    }
    .meta-item {
      padding: 10px;
    }
    .meta-label {
      font-size: 12px;
      color: #666;
      text-transform: uppercase;
      margin-bottom: 5px;
    }
    .meta-value {
      font-size: 18px;
      font-weight: 600;
      color: #166534;
    }
    .section {
      margin-bottom: 40px;
    }
    .section-title {
      font-size: 24px;
      color: #16a34a;
      border-left: 4px solid #16a34a;
      padding-left: 15px;
      margin-bottom: 20px;
    }
    .grade-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px;
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
      border-radius: 12px;
      margin-bottom: 30px;
      border: 2px solid #86efac;
    }
    .grade-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      background: #16a34a;
      color: white;
      font-size: 48px;
      font-weight: bold;
      border-radius: 50%;
      box-shadow: 0 4px 10px rgba(22, 163, 74, 0.3);
    }
    .grade-info {
      flex: 1;
      padding: 0 30px;
    }
    .grade-label {
      font-size: 16px;
      color: #666;
      margin-bottom: 5px;
    }
    .grade-text {
      font-size: 32px;
      font-weight: bold;
      color: #166534;
    }
    .fertility-score {
      text-align: center;
      font-size: 48px;
      font-weight: bold;
      color: #3b82f6;
    }
    .indicators-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 30px;
    }
    .indicator-card {
      padding: 20px;
      background: #f9fafb;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
    }
    .indicator-name {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }
    .indicator-score {
      font-size: 32px;
      font-weight: bold;
      color: #16a34a;
      margin-bottom: 10px;
    }
    .indicator-bar {
      width: 100%;
      height: 8px;
      background: #e5e7eb;
      border-radius: 4px;
      overflow: hidden;
    }
    .indicator-fill {
      height: 100%;
      background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
      border-radius: 4px;
    }
    .indicator-desc {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }
    .nutrients-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-bottom: 30px;
    }
    .nutrient-item {
      padding: 15px;
      background: #f9fafb;
      border-radius: 8px;
      border-left: 4px solid #16a34a;
    }
    .nutrient-header {
      display: flex;
      justify-content: between;
      align-items: center;
      margin-bottom: 5px;
    }
    .nutrient-name {
      font-size: 14px;
      color: #666;
    }
    .nutrient-value {
      font-size: 18px;
      font-weight: 600;
      color: #16a34a;
      margin-left: auto;
    }
    .nutrient-status {
      font-size: 12px;
      color: #999;
    }
    .conclusion-box {
      padding: 25px;
      background: #f0fdf4;
      border: 2px solid #86efac;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .conclusion-title {
      font-size: 18px;
      font-weight: 600;
      color: #166534;
      margin-bottom: 15px;
    }
    .conclusion-list {
      list-style: none;
      padding: 0;
    }
    .conclusion-list li {
      padding: 8px 0;
      padding-left: 25px;
      position: relative;
      color: #166534;
    }
    .conclusion-list li:before {
      content: "✓";
      position: absolute;
      left: 0;
      color: #16a34a;
      font-weight: bold;
    }
    .warning-box {
      padding: 25px;
      background: #fef3c7;
      border: 2px solid #fbbf24;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .warning-title {
      font-size: 18px;
      font-weight: 600;
      color: #92400e;
      margin-bottom: 15px;
    }
    .warning-list {
      list-style: none;
      padding: 0;
    }
    .warning-list li {
      padding: 8px 0;
      padding-left: 25px;
      position: relative;
      color: #92400e;
    }
    .warning-list li:before {
      content: "!";
      position: absolute;
      left: 0;
      color: #f59e0b;
      font-weight: bold;
      width: 18px;
      height: 18px;
      background: #fbbf24;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    .crop-suitability {
      padding: 25px;
      background: #eff6ff;
      border: 2px solid #93c5fd;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .crop-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .crop-name {
      font-size: 20px;
      font-weight: 600;
      color: #1e40af;
    }
    .suitability-badge {
      padding: 8px 20px;
      background: #16a34a;
      color: white;
      border-radius: 20px;
      font-weight: 600;
    }
    .crop-score {
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      color: #3b82f6;
      margin-bottom: 15px;
    }
    .suggestions-list {
      list-style: none;
      padding: 0;
    }
    .suggestions-list li {
      padding: 10px;
      margin-bottom: 8px;
      background: white;
      border-radius: 6px;
      padding-left: 30px;
      position: relative;
    }
    .suggestions-list li:before {
      content: "💡";
      position: absolute;
      left: 8px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }
    th, td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #e5e7eb;
    }
    th {
      background: #f9fafb;
      font-weight: 600;
      color: #374151;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: 0.5px;
    }
    tr:hover {
      background: #f9fafb;
    }
    .footer {
      margin-top: 50px;
      padding-top: 30px;
      border-top: 2px solid #e5e7eb;
      text-align: center;
      color: #666;
      font-size: 14px;
    }
    .footer-logo {
      font-size: 20px;
      font-weight: 600;
      color: #16a34a;
      margin-bottom: 10px;
    }
    @media print {
      body {
        background: white;
        padding: 0;
      }
      .container {
        box-shadow: none;
        padding: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 报告头部 -->
    <div class="header">
      <h1>土壤质量评价报告</h1>
      <p class="subtitle">Soil Quality Evaluation Report</p>
    </div>

    <!-- 基本信息 -->
    <div class="meta-info">
      <div class="meta-item">
        <div class="meta-label">地块名称</div>
        <div class="meta-value">${currentEvaluation.fieldName}</div>
      </div>
      <div class="meta-item">
        <div class="meta-label">报告日期</div>
        <div class="meta-value">${new Date().toLocaleDateString('zh-CN')}</div>
      </div>
      <div class="meta-item">
        <div class="meta-label">报告编号</div>
        <div class="meta-value">SQR-${Date.now().toString().slice(-8)}</div>
      </div>
    </div>

    <!-- 综合评价 -->
    <div class="section">
      <h2 class="section-title">一、综合质量评价</h2>
      
      <div class="grade-card">
        <div class="grade-badge">${currentEvaluation.grade}</div>
        <div class="grade-info">
          <div class="grade-label">土壤质量等级</div>
          <div class="grade-text">${getGradeLabel(currentEvaluation.grade)}</div>
        </div>
        <div>
          <div class="grade-label" style="text-align: center;">综合肥力指数</div>
          <div class="fertility-score">${(currentEvaluation.fertilityIndex * 100).toFixed(0)}</div>
        </div>
      </div>

      <!-- 评价指标 -->
      <h3 style="margin-bottom: 15px; color: #374151;">评价指标得分</h3>
      <div class="indicators-grid">
        <div class="indicator-card">
          <div class="indicator-name">物理性状</div>
          <div class="indicator-score">${currentEvaluation.indicators.physical}</div>
          <div class="indicator-bar">
            <div class="indicator-fill" style="width: ${currentEvaluation.indicators.physical}%"></div>
          </div>
          <div class="indicator-desc">质地、结构、孔隙度、容重</div>
        </div>
        <div class="indicator-card">
          <div class="indicator-name">化学性质</div>
          <div class="indicator-score">${currentEvaluation.indicators.chemical}</div>
          <div class="indicator-bar">
            <div class="indicator-fill" style="width: ${currentEvaluation.indicators.chemical}%"></div>
          </div>
          <div class="indicator-desc">pH值、有机质、氮磷钾含量</div>
        </div>
        <div class="indicator-card">
          <div class="indicator-name">生物学性质</div>
          <div class="indicator-score">${currentEvaluation.indicators.biological}</div>
          <div class="indicator-bar">
            <div class="indicator-fill" style="width: ${currentEvaluation.indicators.biological}%"></div>
          </div>
          <div class="indicator-desc">微生物活性、酶活性、呼吸强度</div>
        </div>
      </div>
    </div>

    <!-- 养分状况 -->
    <div class="section">
      <h2 class="section-title">二、土壤养分状况</h2>
      <div class="nutrients-grid">
        <div class="nutrient-item">
          <div class="nutrient-header">
            <span class="nutrient-name">pH值</span>
            <span class="nutrient-value">${currentEvaluation.pH}</span>
          </div>
          <div class="nutrient-status">${currentEvaluation.pH < 6.5 ? '偏酸性，建议适当调整' : currentEvaluation.pH > 7.5 ? '偏碱性，需要改良' : '中性，适宜作物生长'}</div>
        </div>
        <div class="nutrient-item">
          <div class="nutrient-header">
            <span class="nutrient-name">有机质</span>
            <span class="nutrient-value">${currentEvaluation.organicMatter} g/kg</span>
          </div>
          <div class="nutrient-status">${currentEvaluation.organicMatter < 20 ? '含量较低，需要补充' : currentEvaluation.organicMatter > 30 ? '含量较高，保肥能力强' : '含量适中'}</div>
        </div>
        <div class="nutrient-item">
          <div class="nutrient-header">
            <span class="nutrient-name">全氮</span>
            <span class="nutrient-value">${currentEvaluation.nitrogen} g/kg</span>
          </div>
          <div class="nutrient-status">${currentEvaluation.nitrogen < 1.0 ? '缺乏，需要大量补充' : currentEvaluation.nitrogen > 1.5 ? '丰富，供应充足' : '适中，可维持现状'}</div>
        </div>
        <div class="nutrient-item">
          <div class="nutrient-header">
            <span class="nutrient-name">有效磷</span>
            <span class="nutrient-value">${currentEvaluation.phosphorus} mg/kg</span>
          </div>
          <div class="nutrient-status">${currentEvaluation.phosphorus < 15 ? '较低，建议增施' : currentEvaluation.phosphorus > 30 ? '较高，注意平衡' : '适中，满足作物需求'}</div>
        </div>
        <div class="nutrient-item">
          <div class="nutrient-header">
            <span class="nutrient-name">速效钾</span>
            <span class="nutrient-value">${currentEvaluation.potassium} mg/kg</span>
          </div>
          <div class="nutrient-status">${currentEvaluation.potassium < 100 ? '缺乏，急需补充' : currentEvaluation.potassium > 200 ? '丰富，供应充足' : '适中，维持即可'}</div>
        </div>
      </div>
    </div>

    <!-- 评价结论 -->
    <div class="section">
      <h2 class="section-title">三、评价结论</h2>
      
      <div class="conclusion-box">
        <div class="conclusion-title">✓ 优势特征</div>
        <ul class="conclusion-list">
          <li>有机质含量${currentEvaluation.organicMatter >= 25 ? '较高' : '适中'}，保肥保水能力${currentEvaluation.organicMatter >= 25 ? '强' : '良好'}</li>
          <li>pH值为${currentEvaluation.pH}，${currentEvaluation.pH >= 6.5 && currentEvaluation.pH <= 7.5 ? '处于理想范围' : '基本适宜'}，养分有效性好</li>
          <li>速效钾含量${currentEvaluation.potassium >= 150 ? '充足' : '适中'}，满足作物生长需求</li>
          <li>土壤物理性状良好，结构稳定，通气透水性佳</li>
        </ul>
      </div>

      <div class="warning-box">
        <div class="warning-title">! 限制因素与改进方向</div>
        <ul class="warning-list">
          <li>全氮含量${currentEvaluation.nitrogen < 1.0 ? '偏低' : '中等'}，建议${currentEvaluation.nitrogen < 1.0 ? '增施氮肥' : '适量补充氮肥'}，提高产量潜力</li>
          <li>有效磷含量${currentEvaluation.phosphorus < 20 ? '中等偏低' : '适中'}，可适当增施磷肥，促进根系发育</li>
          <li>土壤微生物活性有待提高，建议增施有机肥和生物菌剂</li>
          <li>建议定期监测土壤养分变化，实施精准施肥管理</li>
        </ul>
      </div>

      <div style="padding: 20px; background: #f0fdf4; border-radius: 8px; border-left: 4px solid #16a34a;">
        <p style="font-size: 16px; line-height: 1.8; color: #166534;">
          <strong>综合评价：</strong>该地块土壤质量处于<strong>${getGradeLabel(currentEvaluation.grade)}</strong>水平，
          综合肥力指数为<strong>${(currentEvaluation.fertilityIndex * 100).toFixed(0)}</strong>，
          基础肥力${currentEvaluation.fertilityIndex >= 0.75 ? '较好' : '中等'}。
          土壤理化性状基本适宜，养分供应${currentEvaluation.fertilityIndex >= 0.80 ? '充足' : '基本满足需求'}。
          建议通过合理施肥、有机培肥和科学管理，进一步提升土壤质量，实现可持续利用。
        </p>
      </div>
    </div>

    <!-- 作物适宜性 -->
    <div class="section">
      <h2 class="section-title">四、作物适宜性分析</h2>
      
      <div class="crop-suitability">
        <div class="crop-header">
          <span class="crop-name">${currentCropSuitability.cropName}</span>
          <span class="suitability-badge">${currentCropSuitability.suitabilityLevel}</span>
        </div>
        <div class="crop-score">${currentCropSuitability.score} 分</div>
        
        <h4 style="margin: 20px 0 10px 0; color: #1e40af;">适宜性分析：</h4>
        <ul class="conclusion-list" style="margin-bottom: 20px;">
          ${currentCropSuitability.reasons.map(reason => `<li>${reason}</li>`).join('')}
        </ul>

        <h4 style="margin: 20px 0 10px 0; color: #1e40af;">种植建议：</h4>
        <ul class="suggestions-list">
          ${currentCropSuitability.suggestions.map(suggestion => `<li>${suggestion}</li>`).join('')}
        </ul>
      </div>

      <!-- 其他作物适宜性概览 -->
      <h3 style="margin: 30px 0 15px 0; color: #374151;">其他作物适宜性概览</h3>
      <table>
        <thead>
          <tr>
            <th>作物名称</th>
            <th style="text-align: center;">适宜等级</th>
            <th style="text-align: center;">适宜性评分</th>
            <th>主要优势</th>
          </tr>
        </thead>
        <tbody>
          ${Object.entries(cropSuitability).map(([key, crop]) => `
            <tr>
              <td><strong>${crop.cropName}</strong></td>
              <td style="text-align: center;">
                <span style="padding: 4px 12px; background: ${key === selectedCrop ? '#16a34a' : '#e5e7eb'}; color: ${key === selectedCrop ? 'white' : '#374151'}; border-radius: 12px; font-size: 12px;">
                  ${crop.suitabilityLevel}
                </span>
              </td>
              <td style="text-align: center; font-weight: 600; color: #16a34a;">${crop.score}</td>
              <td style="font-size: 14px; color: #666;">${crop.reasons[0]}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    </div>

    <!-- 改良建议 -->
    <div class="section">
      <h2 class="section-title">五、土壤改良建议</h2>
      
      <h3 style="margin-bottom: 15px; color: #374151;">短期措施（1-3个月）</h3>
      <ul class="suggestions-list" style="margin-bottom: 30px;">
        <li>根据土壤检测结果，制定精准施肥方案，平衡氮磷钾比例</li>
        <li>增施有机肥料${currentEvaluation.organicMatter < 25 ? '2-3吨/亩' : '1-2吨/亩'}，提高土壤有机质含量</li>
        <li>${currentEvaluation.pH < 6.5 ? '适量施用石灰或碱性肥料，调整土壤pH值' : '维持当前pH水平，避免过度施用酸碱性肥料'}</li>
        <li>配施微生物菌剂，改善土壤微生物群落结构</li>
      </ul>

      <h3 style="margin-bottom: 15px; color: #374151;">中期措施（3-12个月）</h3>
      <ul class="suggestions-list" style="margin-bottom: 30px;">
        <li>实施秸秆还田，每年还田量不少于500kg/亩，提高土壤有机质</li>
        <li>合理轮作倒茬，选择豆科作物增加土壤氮素</li>
        <li>深耕改土，打破犁底层，改善土壤通气透水性</li>
        <li>建立土壤养分监测体系，每季度检测一次主要养分指标</li>
      </ul>

      <h3 style="margin-bottom: 15px; color: #374151;">长期措施（1-3年）</h3>
      <ul class="suggestions-list">
        <li>持续增施有机肥，目标有机质含量提高到${Math.min(currentEvaluation.organicMatter + 10, 40)} g/kg以上</li>
        <li>建立水肥一体化系统，实现精准灌溉施肥</li>
        <li>推广保护性耕作，减少土壤侵蚀，保持土壤肥力</li>
        <li>定期培训农技人员，提高科学种植和土壤管理水平</li>
        <li>建立地块档案，记录施肥、产量等信息，为精准管理提供依据</li>
      </ul>
    </div>

    <!-- 报告尾部 -->
    <div class="footer">
      <div class="footer-logo">智慧农业生产管理系统</div>
      <p>本报告由系统自动生成，仅供参考</p>
      <p>生成时间：${new Date().toLocaleString('zh-CN')}</p>
      <p style="margin-top: 10px; font-size: 12px; color: #999;">
        报告编号：SQR-${Date.now().toString().slice(-8)} | 
        地块：${currentEvaluation.fieldName} | 
        质量等级：${currentEvaluation.grade}级
      </p>
    </div>
  </div>
</body>
</html>
      `;

      // 创建Blob并下载
      const blob = new Blob([reportHTML], { type: 'text/html;charset=utf-8' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `土壤质量评价报告_${currentEvaluation.fieldName}_${new Date().toLocaleDateString('zh-CN').replace(/\//g, '-')}.html`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);

      toast.success('评价报告已生成并下载！');
    }, 1000);
  };

  const handleExportData = () => {
    toast.success('评价数据已导出为Excel格式');
  };

  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 className="flex gap-2">
          <Button variant="outline" onClick={handleExportData}>
            <Download className="w-4 h-4 mr-2" />
            导出数据
          </Button>
          <Button className="bg-green-600 hover:bg-green-700" onClick={handleGenerateReport}>
            <FileText className="w-4 h-4 mr-2" />
            生成报告
          </Button>
        </div>
      </div>

      {/* 地块选择 */}
      <Card className="p-4">
        <div className="flex items-center gap-4">
          <div className="flex-1">
            <label className="text-sm text-muted-foreground mb-2 block">选择地块</label>
            <Select value={selectedField} onValueChange={setSelectedField}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {fieldEvaluations.map((field) => (
                  <SelectItem key={field.fieldId} value={field.fieldId}>
                    {field.fieldName}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 综合评级卡片 */}
          <Card className="flex-1 p-4 bg-gradient-to-br from-green-50 to-green-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">土壤质量等级</p>
                <div className="mt-2 flex items-center gap-3">
                  <Badge className={`${getGradeColor(currentEvaluation.grade)} text-white text-2xl px-4 py-2`}>
                    {currentEvaluation.grade}
                  </Badge>
                  <span className="text-lg">{getGradeLabel(currentEvaluation.grade)}</span>
                </div>
              </div>
              <Award className="w-12 h-12 text-green-600 opacity-50" />
            </div>
          </Card>

          {/* 肥力指数卡片 */}
          <Card className="flex-1 p-4 bg-gradient-to-br from-blue-50 to-blue-100">
            <div className="flex items-center justify-between">
              <div className="flex-1">
                <p className="text-sm text-muted-foreground">综合肥力指数</p>
                <p className="mt-2 text-3xl text-blue-600">{(currentEvaluation.fertilityIndex * 100).toFixed(0)}</p>
                <Progress value={currentEvaluation.fertilityIndex * 100} className="mt-2" />
              </div>
              <TrendingUp className="w-12 h-12 text-blue-600 opacity-50" />
            </div>
          </Card>
        </div>
      </Card>

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="evaluation">质量评价</TabsTrigger>
          <TabsTrigger value="suitability">作物适宜性</TabsTrigger>
          <TabsTrigger value="comparison">历史对比</TabsTrigger>
          <TabsTrigger value="improvement">改良建议</TabsTrigger>
          <TabsTrigger value="distribution">分布地图</TabsTrigger>
        </TabsList>

        {/* 质量评价 */}
        <TabsContent value="evaluation" className="space-y-4">
          <div className="grid grid-cols-3 gap-4">
            {/* 评价指标 */}
            <Card className="p-6">
              <h3 className="mb-4">评价指标体系</h3>
              <div className="space-y-4">
                <div>
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm">物理性状</span>
                    <span className="text-sm font-medium">{currentEvaluation.indicators.physical}分</span>
                  </div>
                  <Progress value={currentEvaluation.indicators.physical} />
                  <p className="text-xs text-muted-foreground mt-1">
                    质地、结构、孔隙度、容重
                  </p>
                </div>

                <div>
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm">化学性质</span>
                    <span className="text-sm font-medium">{currentEvaluation.indicators.chemical}分</span>
                  </div>
                  <Progress value={currentEvaluation.indicators.chemical} />
                  <p className="text-xs text-muted-foreground mt-1">
                    pH值、有机质、氮磷钾含量
                  </p>
                </div>

                <div>
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm">生物学性质</span>
                    <span className="text-sm font-medium">{currentEvaluation.indicators.biological}分</span>
                  </div>
                  <Progress value={currentEvaluation.indicators.biological} />
                  <p className="text-xs text-muted-foreground mt-1">
                    微生物活性、酶活性、呼吸强度
                  </p>
                </div>
              </div>

              <div className="mt-6 pt-4 border-t">
                <div className="flex items-center justify-between">
                  <span>综合得分</span>
                  <span className="text-2xl text-green-600">
                    {Math.round((currentEvaluation.indicators.physical + currentEvaluation.indicators.chemical + currentEvaluation.indicators.biological) / 3)}
                  </span>
                </div>
              </div>
            </Card>

            {/* 养分状况 */}
            <Card className="p-6">
              <h3 className="mb-4">养分状况评价</h3>
              <div className="space-y-3">
                <div className="p-3 bg-gray-50 rounded-lg">
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-sm text-muted-foreground">pH值</span>
                    <Badge variant="outline">{currentEvaluation.pH}</Badge>
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {currentEvaluation.pH < 6.5 ? '偏酸性' : currentEvaluation.pH > 7.5 ? '偏碱性' : '中性，适宜'}
                  </div>
                </div>

                <div className="p-3 bg-gray-50 rounded-lg">
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-sm text-muted-foreground">有机质</span>
                    <Badge variant="outline">{currentEvaluation.organicMatter} g/kg</Badge>
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {currentEvaluation.organicMatter < 20 ? '含量较低' : currentEvaluation.organicMatter > 30 ? '含量较高' : '含量适中'}
                  </div>
                </div>

                <div className="p-3 bg-gray-50 rounded-lg">
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-sm text-muted-foreground">全氮</span>
                    <Badge variant="outline">{currentEvaluation.nitrogen} g/kg</Badge>
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {currentEvaluation.nitrogen < 1.0 ? '缺乏' : currentEvaluation.nitrogen > 1.5 ? '丰富' : '适中'}
                  </div>
                </div>

                <div className="p-3 bg-gray-50 rounded-lg">
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-sm text-muted-foreground">有效磷</span>
                    <Badge variant="outline">{currentEvaluation.phosphorus} mg/kg</Badge>
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {currentEvaluation.phosphorus < 15 ? '较低' : currentEvaluation.phosphorus > 30 ? '较高' : '适中'}
                  </div>
                </div>

                <div className="p-3 bg-gray-50 rounded-lg">
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-sm text-muted-foreground">速效钾</span>
                    <Badge variant="outline">{currentEvaluation.potassium} mg/kg</Badge>
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {currentEvaluation.potassium < 100 ? '缺乏' : currentEvaluation.potassium > 200 ? '丰富' : '适中'}
                  </div>
                </div>
              </div>
            </Card>

            {/* 评价结论 */}
            <Card className="p-6">
              <h3 className="mb-4">评价结论</h3>
              <div className="space-y-3">
                <div className="flex items-start gap-2">
                  <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <p className="text-sm font-medium">优势特征</p>
                    <ul className="text-xs text-muted-foreground mt-1 space-y-1">
                      <li>• 有机质含量较高，保肥能力强</li>
                      <li>• pH值适中，养分有效性好</li>
                      <li>• 速效钾含量充足</li>
                    </ul>
                  </div>
                </div>

                <div className="flex items-start gap-2">
                  <AlertCircle className="w-5 h-5 text-orange-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <p className="text-sm font-medium">限制因素</p>
                    <ul className="text-xs text-muted-foreground mt-1 space-y-1">
                      <li>• 全氮含量偏低，需要补充</li>
                      <li>• 有效磷含量中等，可适当增施</li>
                      <li>• 微生物活性有待提高</li>
                    </ul>
                  </div>
                </div>

                <div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg">
                  <p className="text-sm text-green-900 font-medium mb-2">综合评价</p>
                  <p className="text-xs text-green-800">
                    该地块土壤质量处于<strong>良好</strong>水平，基础肥力较好，
                    适宜多种作物种植。建议通过合理施肥和有机培肥，
                    进一步提升土壤质量，实现可持续利用。
                  </p>
                </div>
              </div>
            </Card>
          </div>

          {/* 肥力指数计算方法 */}
          <Card className="p-6">
            <h3 className="mb-4">肥力指数计算方法</h3>
            <div className="grid grid-cols-2 gap-6">
              <div>
                <h4 className="mb-3 text-sm">计算公式</h4>
                <div className="p-4 bg-gray-50 rounded-lg font-mono text-sm">
                  <p>IFI = Σ(Wi × Ni)</p>
                  <p className="text-xs text-muted-foreground mt-2">
                    IFI: 综合肥力指数<br />
                    Wi: 第i个指标的权重<br />
                    Ni: 第i个指标的归一化得分
                  </p>
                </div>
              </div>
              <div>
                <h4 className="mb-3 text-sm">权重分配</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between p-2 bg-gray-50 rounded">
                    <span>有机质</span>
                    <span className="font-medium">25%</span>
                  </div>
                  <div className="flex justify-between p-2 bg-gray-50 rounded">
                    <span>pH值</span>
                    <span className="font-medium">15%</span>
                  </div>
                  <div className="flex justify-between p-2 bg-gray-50 rounded">
                    <span>全氮</span>
                    <span className="font-medium">20%</span>
                  </div>
                  <div className="flex justify-between p-2 bg-gray-50 rounded">
                    <span>有效磷</span>
                    <span className="font-medium">15%</span>
                  </div>
                  <div className="flex justify-between p-2 bg-gray-50 rounded">
                    <span>速效钾</span>
                    <span className="font-medium">15%</span>
                  </div>
                  <div className="flex justify-between p-2 bg-gray-50 rounded">
                    <span>物理性状</span>
                    <span className="font-medium">10%</span>
                  </div>
                </div>
              </div>
            </div>
          </Card>
        </TabsContent>

        {/* 作物适宜性 */}
        <TabsContent value="suitability" className="space-y-4">
          <Card className="p-4">
            <div className="flex items-center gap-4 mb-4">
              <div className="flex-1">
                <label className="text-sm text-muted-foreground mb-2 block">选择作物</label>
                <Select value={selectedCrop} onValueChange={setSelectedCrop}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="rice">水稻</SelectItem>
                    <SelectItem value="wheat">小麦</SelectItem>
                    <SelectItem value="corn">玉米</SelectItem>
                    <SelectItem value="soybean">大豆</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <Card className="flex-1 p-4 bg-gradient-to-br from-green-50 to-green-100">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">适宜等级</p>
                    <Badge className={`mt-2 ${getSuitabilityColor(currentCropSuitability.suitabilityLevel)} text-white text-lg px-4 py-1`}>
                      {currentCropSuitability.suitabilityLevel}
                    </Badge>
                  </div>
                  <Target className="w-10 h-10 text-green-600 opacity-50" />
                </div>
              </Card>

              <Card className="flex-1 p-4 bg-gradient-to-br from-blue-50 to-blue-100">
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    <p className="text-sm text-muted-foreground">适宜性评分</p>
                    <p className="mt-2 text-3xl text-blue-600">{currentCropSuitability.score}</p>
                    <Progress value={currentCropSuitability.score} className="mt-2" />
                  </div>
                  <BarChart3 className="w-10 h-10 text-blue-600 opacity-50" />
                </div>
              </Card>
            </div>
          </Card>

          <div className="grid grid-cols-2 gap-4">
            {/* 适宜性分析 */}
            <Card className="p-6">
              <div className="flex items-center gap-2 mb-4">
                <Leaf className="w-5 h-5 text-green-600" />
                <h3>适宜性分析</h3>
              </div>
              <div className="space-y-3">
                {currentCropSuitability.reasons.map((reason, index) => (
                  <div key={index} className="flex items-start gap-2 p-3 bg-green-50 border border-green-200 rounded-lg">
                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <p className="text-sm text-green-900">{reason}</p>
                  </div>
                ))}
              </div>
            </Card>

            {/* 种植建议 */}
            <Card className="p-6">
              <div className="flex items-center gap-2 mb-4">
                <Lightbulb className="w-5 h-5 text-orange-600" />
                <h3>种植建议</h3>
              </div>
              <div className="space-y-3">
                {currentCropSuitability.suggestions.map((suggestion, index) => (
                  <div key={index} className="flex items-start gap-2 p-3 bg-orange-50 border border-orange-200 rounded-lg">
                    <Activity className="w-5 h-5 text-orange-600 flex-shrink-0 mt-0.5" />
                    <p className="text-sm text-orange-900">{suggestion}</p>
                  </div>
                ))}
              </div>
            </Card>
          </div>

          {/* 作物需求对比 */}
          <Card className="p-6">
            <h3 className="mb-4">作物需求与土壤条件对比</h3>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-4 py-3 text-left text-sm">指标</th>
                    <th className="px-4 py-3 text-center text-sm">{currentCropSuitability.cropName}需求</th>
                    <th className="px-4 py-3 text-center text-sm">当前土壤</th>
                    <th className="px-4 py-3 text-center text-sm">匹配度</th>
                    <th className="px-4 py-3 text-center text-sm">评价</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-t">
                    <td className="px-4 py-3">pH值</td>
                    <td className="px-4 py-3 text-center">6.0-7.0</td>
                    <td className="px-4 py-3 text-center">{currentEvaluation.pH}</td>
                    <td className="px-4 py-3 text-center">
                      <Progress value={95} className="w-20 mx-auto" />
                    </td>
                    <td className="px-4 py-3 text-center">
                      <Badge className="bg-green-500">优秀</Badge>
                    </td>
                  </tr>
                  <tr className="border-t bg-gray-50">
                    <td className="px-4 py-3">有机质</td>
                    <td className="px-4 py-3 text-center">&gt; 25 g/kg</td>
                    <td className="px-4 py-3 text-center">{currentEvaluation.organicMatter} g/kg</td>
                    <td className="px-4 py-3 text-center">
                      <Progress value={92} className="w-20 mx-auto" />
                    </td>
                    <td className="px-4 py-3 text-center">
                      <Badge className="bg-green-500">优秀</Badge>
                    </td>
                  </tr>
                  <tr className="border-t">
                    <td className="px-4 py-3">全氮</td>
                    <td className="px-4 py-3 text-center">&gt; 1.5 g/kg</td>
                    <td className="px-4 py-3 text-center">{currentEvaluation.nitrogen} g/kg</td>
                    <td className="px-4 py-3 text-center">
                      <Progress value={75} className="w-20 mx-auto" />
                    </td>
                    <td className="px-4 py-3 text-center">
                      <Badge className="bg-yellow-500">中等</Badge>
                    </td>
                  </tr>
                  <tr className="border-t bg-gray-50">
                    <td className="px-4 py-3">有效磷</td>
                    <td className="px-4 py-3 text-center">&gt; 20 mg/kg</td>
                    <td className="px-4 py-3 text-center">{currentEvaluation.phosphorus} mg/kg</td>
                    <td className="px-4 py-3 text-center">
                      <Progress value={88} className="w-20 mx-auto" />
                    </td>
                    <td className="px-4 py-3 text-center">
                      <Badge className="bg-green-500">良好</Badge>
                    </td>
                  </tr>
                  <tr className="border-t">
                    <td className="px-4 py-3">速效钾</td>
                    <td className="px-4 py-3 text-center">&gt; 150 mg/kg</td>
                    <td className="px-4 py-3 text-center">{currentEvaluation.potassium} mg/kg</td>
                    <td className="px-4 py-3 text-center">
                      <Progress value={95} className="w-20 mx-auto" />
                    </td>
                    <td className="px-4 py-3 text-center">
                      <Badge className="bg-green-500">优秀</Badge>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </Card>

          {/* 其他作物适宜性概览 */}
          <Card className="p-6">
            <h3 className="mb-4">其他作物适宜性概览</h3>
            <div className="grid grid-cols-4 gap-4">
              {Object.entries(cropSuitability).map(([key, crop]) => (
                <Card 
                  key={key}
                  className={`p-4 cursor-pointer transition-all ${selectedCrop === key ? 'ring-2 ring-green-500' : ''}`}
                  onClick={() => setSelectedCrop(key)}
                >
                  <div className="text-center">
                    <p className="font-medium mb-2">{crop.cropName}</p>
                    <Badge className={`${getSuitabilityColor(crop.suitabilityLevel)} text-white mb-2`}>
                      {crop.suitabilityLevel}
                    </Badge>
                    <div className="text-2xl text-green-600">{crop.score}</div>
                    <Progress value={crop.score} className="mt-2" />
                  </div>
                </Card>
              ))}
            </div>
          </Card>
        </TabsContent>

        {/* 历史对比 */}
        <TabsContent value="comparison" className="space-y-4">
          <Card className="p-6">
            <h3 className="mb-4">肥力指数变化趋势</h3>
            <div className="relative h-64 border rounded-lg p-4">
              <svg className="w-full h-full">
                {/* 坐标轴 */}
                <line x1="10%" y1="90%" x2="90%" y2="90%" stroke="#e5e7eb" strokeWidth="2" />
                <line x1="10%" y1="10%" x2="10%" y2="90%" stroke="#e5e7eb" strokeWidth="2" />
                
                {/* 趋势线 */}
                <polyline
                  points="10%,70% 30%,65% 50%,55% 70%,45% 90%,30%"
                  fill="none"
                  stroke="#22c55e"
                  strokeWidth="3"
                />
                
                {/* 数据点 */}
                {[
                  { x: '10%', y: '70%', label: '2020' },
                  { x: '30%', y: '65%', label: '2021' },
                  { x: '50%', y: '55%', label: '2022' },
                  { x: '70%', y: '45%', label: '2023' },
                  { x: '90%', y: '30%', label: '2024' },
                ].map((point, index) => (
                  <g key={index}>
                    <circle cx={point.x} cy={point.y} r="6" fill="#22c55e" />
                    <text x={point.x} y="95%" className="text-xs" textAnchor="middle" fill="#6b7280">
                      {point.label}
                    </text>
                  </g>
                ))}
              </svg>
            </div>
            <div className="mt-4 text-center text-sm text-muted-foreground">
              近5年肥力指数呈上升趋势，累计提升17.5%
            </div>
          </Card>

          <div className="grid grid-cols-2 gap-4">
            <Card className="p-6">
              <h3 className="mb-4">历史数据对比</h3>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-4 py-2 text-left">年份</th>
                      <th className="px-4 py-2 text-center">肥力指数</th>
                      <th className="px-4 py-2 text-center">等级</th>
                      <th className="px-4 py-2 text-center">变化</th>
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      { year: '2024', index: 0.82, grade: 'A', change: '+3.5%' },
                      { year: '2023', index: 0.79, grade: 'B', change: '+2.6%' },
                      { year: '2022', index: 0.77, grade: 'B', change: '+4.1%' },
                      { year: '2021', index: 0.74, grade: 'B', change: '+2.8%' },
                      { year: '2020', index: 0.72, grade: 'B', change: '-' },
                    ].map((row, index) => (
                      <tr key={index} className="border-t">
                        <td className="px-4 py-2">{row.year}</td>
                        <td className="px-4 py-2 text-center">{row.index}</td>
                        <td className="px-4 py-2 text-center">
                          <Badge className={getGradeColor(row.grade)}>{row.grade}</Badge>
                        </td>
                        <td className="px-4 py-2 text-center text-green-600">{row.change}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>

            <Card className="p-6">
              <h3 className="mb-4">主要指标变化</h3>
              <div className="space-y-4">
                <div>
                  <div className="flex justify-between text-sm mb-2">
                    <span>有机质</span>
                    <span className="text-green-600">↑ 8.3%</span>
                  </div>
                  <div className="flex gap-2">
                    <div className="flex-1 h-6 bg-gray-200 rounded-full overflow-hidden">
                      <div className="h-full bg-gray-400" style={{ width: '68%' }} />
                    </div>
                    <div className="flex-1 h-6 bg-gray-200 rounded-full overflow-hidden">
                      <div className="h-full bg-green-500" style={{ width: '74%' }} />
                    </div>
                  </div>
                  <div className="flex justify-between text-xs text-muted-foreground mt-1">
                    <span>2020: 26.3 g/kg</span>
                    <span>2024: 28.5 g/kg</span>
                  </div>
                </div>

                <div>
                  <div className="flex justify-between text-sm mb-2">
                    <span>全氮</span>
                    <span className="text-green-600">↑ 9.1%</span>
                  </div>
                  <div className="flex gap-2">
                    <div className="flex-1 h-6 bg-gray-200 rounded-full overflow-hidden">
                      <div className="h-full bg-gray-400" style={{ width: '55%' }} />
                    </div>
                    <div className="flex-1 h-6 bg-gray-200 rounded-full overflow-hidden">
                      <div className="h-full bg-green-500" style={{ width: '60%' }} />
                    </div>
                  </div>
                  <div className="flex justify-between text-xs text-muted-foreground mt-1">
                    <span>2020: 1.1 g/kg</span>
                    <span>2024: 1.2 g/kg</span>
                  </div>
                </div>

                <div>
                  <div className="flex justify-between text-sm mb-2">
                    <span>有效磷</span>
                    <span className="text-green-600">↑ 15.5%</span>
                  </div>
                  <div className="flex gap-2">
                    <div className="flex-1 h-6 bg-gray-200 rounded-full overflow-hidden">
                      <div className="h-full bg-gray-400" style={{ width: '55%' }} />
                    </div>
                    <div className="flex-1 h-6 bg-gray-200 rounded-full overflow-hidden">
                      <div className="h-full bg-green-500" style={{ width: '63%' }} />
                    </div>
                  </div>
                  <div className="flex justify-between text-xs text-muted-foreground mt-1">
                    <span>2020: 21.9 mg/kg</span>
                    <span>2024: 25.3 mg/kg</span>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </TabsContent>

        {/* 改良建议 */}
        <TabsContent value="improvement" className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <Card className="p-6">
              <div className="flex items-center gap-2 mb-4">
                <Lightbulb className="w-5 h-5 text-orange-600" />
                <h3>施肥建议</h3>
              </div>
              <div className="space-y-4">
                <div className="p-4 bg-orange-50 border border-orange-200 rounded-lg">
                  <h4 className="mb-2">氮肥补充方案</h4>
                  <ul className="text-sm space-y-1 text-orange-900">
                    <li>• 基肥: 尿素 15-20 kg/亩</li>
                    <li>• 追肥: 分3次施用，每次10 kg/亩</li>
                    <li>• 配施有机肥 500 kg/亩</li>
                    <li>• 预期提升全氮含量至1.5 g/kg</li>
                  </ul>
                </div>

                <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                  <h4 className="mb-2">磷肥优化方案</h4>
                  <ul className="text-sm space-y-1 text-blue-900">
                    <li>• 过磷酸钙 30-40 kg/亩</li>
                    <li>• 或磷酸二铵 15-20 kg/亩</li>
                    <li>• 建议深施，提高利用率</li>
                    <li>• 目标: 有效磷达到30 mg/kg</li>
                  </ul>
                </div>

                <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
                  <h4 className="mb-2">钾肥维持方案</h4>
                  <ul className="text-sm space-y-1 text-green-900">
                    <li>• 当前钾素含量充足</li>
                    <li>• 维持性施用硫酸钾 10 kg/亩</li>
                    <li>• 或氯化钾 8 kg/亩</li>
                    <li>• 保持速效钾在180 mg/kg以上</li>
                  </ul>
                </div>
              </div>
            </Card>

            <Card className="p-6">
              <div className="flex items-center gap-2 mb-4">
                <Droplets className="w-5 h-5 text-blue-600" />
                <h3>培肥改良建议</h3>
              </div>
              <div className="space-y-4">
                <div className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
                  <h4 className="mb-2">有机培肥</h4>
                  <ul className="text-sm space-y-1 text-purple-900">
                    <li>• 秸秆还田: 全量还田，翻压入土</li>
                    <li>• 施用腐熟有机肥 1000 kg/亩/年</li>
                    <li>• 种植绿肥作物（如苜蓿、紫云英）</li>
                    <li>• 目标: 有机质年增长1-2 g/kg</li>
                  </ul>
                </div>

                <div className="p-4 bg-cyan-50 border border-cyan-200 rounded-lg">
                  <h4 className="mb-2">土壤调理</h4>
                  <ul className="text-sm space-y-1 text-cyan-900">
                    <li>• 深耕松土，打破犁底层</li>
                    <li>• 增施生物菌肥，活化养分</li>
                    <li>• 合理轮作，改善土壤结构</li>
                    <li>• 避免连作，减少病虫害</li>
                  </ul>
                </div>

                <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                  <h4 className="mb-2">水分管理</h4>
                  <ul className="text-sm space-y-1 text-yellow-900">
                    <li>• 合理灌溉，保持适宜含水量</li>
                    <li>• 雨季注意排水，防止渍害</li>
                    <li>• 采用滴灌等节水灌溉技术</li>
                    <li>• 覆盖保墒，减少水分蒸发</li>
                  </ul>
                </div>
              </div>
            </Card>
          </div>

          {/* 改良时间表 */}
          <Card className="p-6">
            <h3 className="mb-4">土壤改良时间表</h3>
            <div className="relative">
              <div className="flex justify-between mb-6">
                {[
                  { month: '春季（3-5月）', tasks: ['深耕松土', '施用基肥', '播种绿肥'] },
                  { month: '夏季（6-8月）', tasks: ['追肥', '灌溉管理', '病虫害防治'] },
                  { month: '秋季（9-11月）', tasks: ['秸秆还田', '测土配方', '土壤检测'] },
                  { month: '冬季（12-2月）', tasks: ['冬季培肥', '改良剂施用', '土壤休闲'] },
                ].map((season, index) => (
                  <div key={index} className="flex-1 text-center">
                    <div className="mb-2">
                      <Calendar className="w-6 h-6 text-green-600 mx-auto mb-1" />
                      <p className="text-sm font-medium">{season.month}</p>
                    </div>
                    <div className="bg-gray-50 rounded-lg p-3 text-left">
                      <ul className="text-xs space-y-1">
                        {season.tasks.map((task, i) => (
                          <li key={i}>• {task}</li>
                        ))}
                      </ul>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </TabsContent>

        {/* 分布地图 */}
        <TabsContent value="distribution" className="space-y-4">
          <Card className="p-6">
            <h3 className="mb-4">地块质量分布图</h3>
            <div className="relative h-[500px] bg-gradient-to-br from-gray-100 to-gray-50 rounded-lg border">
              {/* 模拟地图 */}
              <div className="absolute inset-0 p-8">
                {fieldEvaluations.map((field, index) => {
                  const x = 20 + (index * 30);
                  const y = 30 + (index % 2) * 35;
                  const color = field.grade === 'A' ? '#22c55e' : field.grade === 'B' ? '#3b82f6' : '#f59e0b';
                  
                  return (
                    <div
                      key={field.fieldId}
                      className="absolute group"
                      style={{ left: `${x}%`, top: `${y}%` }}
                    >
                      <div 
                        className="w-32 h-24 rounded-lg shadow-lg cursor-pointer transition-transform hover:scale-110"
                        style={{ backgroundColor: color, opacity: 0.7 }}
                      >
                        <div className="p-3 text-white">
                          <p className="text-xs">{field.fieldName}</p>
                          <p className="text-2xl font-bold mt-1">{field.grade}</p>
                          <p className="text-xs mt-1">指数: {(field.fertilityIndex * 100).toFixed(0)}</p>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* 图例 */}
              <div className="absolute bottom-4 right-4 bg-white p-4 rounded-lg shadow-lg">
                <h4 className="text-sm mb-3">质量等级</h4>
                <div className="space-y-2 text-xs">
                  <div className="flex items-center gap-2">
                    <div className="w-4 h-4 rounded bg-green-500" />
                    <span>A级 - 良好</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-4 h-4 rounded bg-blue-500" />
                    <span>B级 - 中等</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-4 h-4 rounded bg-yellow-500" />
                    <span>C级 - 较差</span>
                  </div>
                </div>
              </div>
            </div>
          </Card>

          {/* 统计汇总 */}
          <div className="grid grid-cols-4 gap-4">
            <Card className="p-4 bg-green-50">
              <p className="text-sm text-muted-foreground">A级地块</p>
              <p className="mt-2 text-3xl text-green-600">1</p>
              <p className="text-xs text-muted-foreground mt-1">占比 33.3%</p>
            </Card>
            <Card className="p-4 bg-blue-50">
              <p className="text-sm text-muted-foreground">B级地块</p>
              <p className="mt-2 text-3xl text-blue-600">2</p>
              <p className="text-xs text-muted-foreground mt-1">占比 66.7%</p>
            </Card>
            <Card className="p-4 bg-gray-50">
              <p className="text-sm text-muted-foreground">平均肥力指数</p>
              <p className="mt-2 text-3xl">75</p>
              <p className="text-xs text-muted-foreground mt-1">中等水平</p>
            </Card>
            <Card className="p-4 bg-purple-50">
              <p className="text-sm text-muted-foreground">改良潜力</p>
              <p className="mt-2 text-3xl text-purple-600">高</p>
              <p className="text-xs text-muted-foreground mt-1">可提升至85+</p>
            </Card>
          </div>
        </TabsContent>
      </Tabs>

      {/* 使用说明 */}
      <Card className="p-4 bg-blue-50 border-blue-200">
        <div className="flex gap-2">
          <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0" />
          <div className="text-sm text-blue-800">
            <p className="mb-2">土壤质量评价系统说明：</p>
            <ul className="space-y-1 text-xs">
              <li>• <strong>智能评级</strong>: 基于多指标综合评价，自动计算土壤质量等级（S/A/B/C/D）</li>
              <li>• <strong>肥力指数</strong>: 采用加权平均法计算，反映土壤综合肥力水平（0-100）</li>
              <li>• <strong>作物适宜性</strong>: 匹配作物生长需求模型，输出适宜等级和种植建议</li>
              <li>• <strong>历史对比</strong>: 跟踪多年数据变化，分析土壤质量演变趋势</li>
              <li>• <strong>改良建议</strong>: 根据限制因素，提供针对性的施肥和培肥方案</li>
              <li>• <strong>分布地图</strong>: 可视化展示各地块质量分布，支持区域对比分析</li>
              <li>• <strong>报告生成</strong>: 一键生成专业评价报告，支持打印和存档</li>
            </ul>
          </div>
        </div>
      </Card>
    </div>
  );
}
