'use client';

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { BookOpen, Database, Leaf, Target, Droplet, Cloud, Sun, ThermometerSun, TrendingUp, AlertTriangle } from 'lucide-react';

// 作物知识库数据（与CropRecommendations.tsx保持一致）
const cropKnowledgeBase = [
  {
    id: 'wheat',
    cropName: '小麦',
    category: '粮食作物',
    description: '适应性强的主粮作物，对土壤要求较宽泛，耐寒性好，适合北方地区种植。',
    growthCycle: {
      days: 220,
      seasons: ['春季', '秋季']
    },
    soilRequirements: {
      ph: { optimal: [6.5, 7.5], acceptable: [6.0, 8.0] },
      organicMatter: { optimal: [25, 35], acceptable: [20, 40] },
      soilDepth: { optimal: [60, 100], acceptable: [40, 120] },
      nitrogen: { optimal: [1.5, 2.5], acceptable: [1.0, 3.0] },
      phosphorus: { optimal: [1.0, 2.0], acceptable: [0.6, 2.5] },
      potassium: { optimal: [15, 25], acceptable: [10, 30] },
      drainage: { optimal: [3, 5], acceptable: [2, 5] }
    },
    climateRequirements: {
      temperature: { optimal: [15, 22], acceptable: [10, 25] },
      rainfall: { optimal: [400, 600], acceptable: [300, 800] },
      sunlight: { optimal: [6, 8], acceptable: [5, 10] }
    },
    expectedYield: {
      high: [400, 500],
      medium: [300, 400],
      low: [200, 300]
    },
    riskFactors: [
      {
        id: 'wheat-rust',
        name: '锈病风险',
        condition: '湿度过高、温度适宜',
        severity: 'medium' as const,
        suggestion: '选择抗病品种，合理密植，及时防治'
      },
      {
        id: 'wheat-drought',
        name: '干旱风险',
        condition: '降雨量不足400mm',
        severity: 'high' as const,
        suggestion: '加强灌溉设施建设，选择抗旱品种'
      }
    ]
  },
  {
    id: 'corn',
    cropName: '玉米',
    category: '粮食作物',
    description: '高产作物，对温度要求较高，需水量大，适合水热条件良好的地区。',
    growthCycle: {
      days: 120,
      seasons: ['春季', '夏季']
    },
    soilRequirements: {
      ph: { optimal: [6.0, 7.0], acceptable: [5.5, 7.5] },
      organicMatter: { optimal: [30, 40], acceptable: [25, 45] },
      soilDepth: { optimal: [80, 120], acceptable: [60, 150] },
      nitrogen: { optimal: [2.0, 3.0], acceptable: [1.5, 3.5] },
      phosphorus: { optimal: [1.2, 2.5], acceptable: [0.8, 3.0] },
      potassium: { optimal: [20, 30], acceptable: [15, 35] },
      drainage: { optimal: [3, 5], acceptable: [2, 5] }
    },
    climateRequirements: {
      temperature: { optimal: [20, 28], acceptable: [15, 32] },
      rainfall: { optimal: [500, 800], acceptable: [400, 1000] },
      sunlight: { optimal: [7, 9], acceptable: [6, 10] }
    },
    expectedYield: {
      high: [600, 800],
      medium: [400, 600],
      low: [250, 400]
    },
    riskFactors: [
      {
        id: 'corn-borer',
        name: '玉米螟',
        condition: '温度适宜、湿度适中',
        severity: 'medium' as const,
        suggestion: '生物防治与化学防治结合，适时播种'
      },
      {
        id: 'corn-drought',
        name: '花期干旱',
        condition: '开花期降雨不足',
        severity: 'high' as const,
        suggestion: '保证花期灌溉，选择耐旱品种'
      }
    ]
  },
  {
    id: 'soybean',
    cropName: '大豆',
    category: '经济作物',
    description: '豆科作物，具有固氮能力，对土壤肥力要求较低，适合轮作种植。',
    growthCycle: {
      days: 100,
      seasons: ['春季', '夏季']
    },
    soilRequirements: {
      ph: { optimal: [6.0, 7.0], acceptable: [5.5, 7.5] },
      organicMatter: { optimal: [25, 35], acceptable: [20, 40] },
      soilDepth: { optimal: [50, 80], acceptable: [40, 100] },
      nitrogen: { optimal: [1.0, 2.0], acceptable: [0.5, 2.5] },
      phosphorus: { optimal: [0.8, 1.8], acceptable: [0.5, 2.5] },
      potassium: { optimal: [15, 25], acceptable: [10, 30] },
      drainage: { optimal: [3, 5], acceptable: [2, 5] }
    },
    climateRequirements: {
      temperature: { optimal: [18, 25], acceptable: [15, 28] },
      rainfall: { optimal: [450, 700], acceptable: [350, 900] },
      sunlight: { optimal: [6, 8], acceptable: [5, 9] }
    },
    expectedYield: {
      high: [250, 350],
      medium: [180, 250],
      low: [120, 180]
    },
    riskFactors: [
      {
        id: 'soybean-disease',
        name: '病害风险',
        condition: '高温高湿环境',
        severity: 'medium' as const,
        suggestion: '选择抗病品种，合理轮作，加强田间管理'
      }
    ]
  }
];

interface KnowledgeBaseDialogProps {
  showKnowledgeBase: boolean;
  onClose: () => void;
}

export function KnowledgeBaseDialog({ showKnowledgeBase, onClose }: KnowledgeBaseDialogProps) {
  return (
    <Dialog open={showKnowledgeBase} onOpenChange={onClose}>
      <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <BookOpen className="w-5 h-5 text-green-600" />
            作物-环境知识库
          </DialogTitle>
          <DialogDescription>
            查看各种作物的土壤环境要求、气候要求、预期产量及风险因子
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6 mt-4">
          {/* 知识库统计 */}
          <div className="grid grid-cols-4 gap-4">
            <Card className="p-4 bg-green-50 dark:bg-green-950">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-green-700 dark:text-green-300 mb-1">作物总数</p>
                  <p className="text-2xl font-semibold text-green-900 dark:text-green-100">{cropKnowledgeBase.length}</p>
                </div>
                <Database className="w-8 h-8 text-green-600 dark:text-green-400 opacity-50" />
              </div>
            </Card>
            <Card className="p-4 bg-blue-50 dark:bg-blue-950">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-blue-700 dark:text-blue-300 mb-1">粮食作物</p>
                  <p className="text-2xl font-semibold text-blue-900 dark:text-blue-100">
                    {cropKnowledgeBase.filter(c => c.category === '粮食作物').length}
                  </p>
                </div>
                <Leaf className="w-8 h-8 text-blue-600 dark:text-blue-400 opacity-50" />
              </div>
            </Card>
            <Card className="p-4 bg-amber-50 dark:bg-amber-950">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-amber-700 dark:text-amber-300 mb-1">经济作物</p>
                  <p className="text-2xl font-semibold text-amber-900 dark:text-amber-100">
                    {cropKnowledgeBase.filter(c => c.category === '经济作物').length}
                  </p>
                </div>
                <Target className="w-8 h-8 text-amber-600 dark:text-amber-400 opacity-50" />
              </div>
            </Card>
            <Card className="p-4 bg-purple-50 dark:bg-purple-950">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-purple-700 dark:text-purple-300 mb-1">蔬菜作物</p>
                  <p className="text-2xl font-semibold text-purple-900 dark:text-purple-100">
                    {cropKnowledgeBase.filter(c => c.category === '蔬菜作物').length}
                  </p>
                </div>
                <Droplet className="w-8 h-8 text-purple-600 dark:text-purple-400 opacity-50" />
              </div>
            </Card>
          </div>

          {/* 作物列表 */}
          <div className="space-y-4">
            {cropKnowledgeBase.map((crop) => (
              <Card key={crop.id} className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-green-800 dark:text-green-200">{crop.cropName}</h3>
                      <Badge variant={
                        crop.category === '粮食作物' ? 'default' :
                        crop.category === '经济作物' ? 'secondary' :
                        'outline'
                      }>
                        {crop.category}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">{crop.description}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-muted-foreground mb-1">生长周期</p>
                    <p className="text-lg font-semibold text-green-700 dark:text-green-300">{crop.growthCycle.days}天</p>
                    <p className="text-xs text-muted-foreground mt-1">
                      {crop.growthCycle.seasons.join('、')}
                    </p>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-6">
                  {/* 土壤环境要求 */}
                  <div>
                    <h4 className="mb-3 flex items-center gap-2">
                      <Database className="w-4 h-4 text-green-600" />
                      土壤环境要求
                    </h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between py-1.5 border-b">
                        <span className="text-muted-foreground">pH值:</span>
                        <span className="font-medium">
                          最佳 {crop.soilRequirements.ph.optimal[0]}-{crop.soilRequirements.ph.optimal[1]}
                          <span className="text-muted-foreground text-xs ml-2">
                            (可接受 {crop.soilRequirements.ph.acceptable[0]}-{crop.soilRequirements.ph.acceptable[1]})
                          </span>
                        </span>
                      </div>
                      <div className="flex justify-between py-1.5 border-b">
                        <span className="text-muted-foreground">有机质:</span>
                        <span className="font-medium">
                          {crop.soilRequirements.organicMatter.optimal[0]}-{crop.soilRequirements.organicMatter.optimal[1]} g/kg
                        </span>
                      </div>
                      <div className="flex justify-between py-1.5 border-b">
                        <span className="text-muted-foreground">土层厚度:</span>
                        <span className="font-medium">
                          {crop.soilRequirements.soilDepth.optimal[0]}-{crop.soilRequirements.soilDepth.optimal[1]} cm
                        </span>
                      </div>
                      <div className="flex justify-between py-1.5 border-b">
                        <span className="text-muted-foreground">全氮:</span>
                        <span className="font-medium">
                          {crop.soilRequirements.nitrogen.optimal[0]}-{crop.soilRequirements.nitrogen.optimal[1]} g/kg
                        </span>
                      </div>
                      <div className="flex justify-between py-1.5 border-b">
                        <span className="text-muted-foreground">全磷:</span>
                        <span className="font-medium">
                          {crop.soilRequirements.phosphorus.optimal[0]}-{crop.soilRequirements.phosphorus.optimal[1]} g/kg
                        </span>
                      </div>
                      <div className="flex justify-between py-1.5 border-b">
                        <span className="text-muted-foreground">全钾:</span>
                        <span className="font-medium">
                          {crop.soilRequirements.potassium.optimal[0]}-{crop.soilRequirements.potassium.optimal[1]} g/kg
                        </span>
                      </div>
                      <div className="flex justify-between py-1.5">
                        <span className="text-muted-foreground">排水性评分:</span>
                        <span className="font-medium">
                          {crop.soilRequirements.drainage.optimal[0]}-{crop.soilRequirements.drainage.optimal[1]} 分
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* 气候要求与产量 */}
                  <div>
                    <h4 className="mb-3 flex items-center gap-2">
                      <Cloud className="w-4 h-4 text-blue-600" />
                      气候要求
                    </h4>
                    <div className="space-y-2 text-sm mb-4">
                      <div className="flex justify-between py-1.5 border-b">
                        <span className="text-muted-foreground flex items-center gap-1">
                          <ThermometerSun className="w-3 h-3" />
                          温度:
                        </span>
                        <span className="font-medium">
                          {crop.climateRequirements.temperature.optimal[0]}-{crop.climateRequirements.temperature.optimal[1]} °C
                        </span>
                      </div>
                      <div className="flex justify-between py-1.5 border-b">
                        <span className="text-muted-foreground flex items-center gap-1">
                          <Droplet className="w-3 h-3" />
                          降雨量:
                        </span>
                        <span className="font-medium">
                          {crop.climateRequirements.rainfall.optimal[0]}-{crop.climateRequirements.rainfall.optimal[1]} mm/年
                        </span>
                      </div>
                      <div className="flex justify-between py-1.5">
                        <span className="text-muted-foreground flex items-center gap-1">
                          <Sun className="w-3 h-3" />
                          光照:
                        </span>
                        <span className="font-medium">
                          {crop.climateRequirements.sunlight.optimal[0]}-{crop.climateRequirements.sunlight.optimal[1]} 小时/天
                        </span>
                      </div>
                    </div>

                    <h4 className="mb-3 flex items-center gap-2 mt-4">
                      <TrendingUp className="w-4 h-4 text-amber-600" />
                      预期产量 (kg/亩)
                    </h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between py-1.5 border-b bg-green-50 dark:bg-green-950 px-2 rounded">
                        <span className="text-green-700 dark:text-green-300">高适宜性:</span>
                        <span className="font-semibold text-green-800 dark:text-green-200">
                          {crop.expectedYield.high[0]}-{crop.expectedYield.high[1]}
                        </span>
                      </div>
                      <div className="flex justify-between py-1.5 border-b bg-blue-50 dark:bg-blue-950 px-2 rounded">
                        <span className="text-blue-700 dark:text-blue-300">中等适宜性:</span>
                        <span className="font-semibold text-blue-800 dark:text-blue-200">
                          {crop.expectedYield.medium[0]}-{crop.expectedYield.medium[1]}
                        </span>
                      </div>
                      <div className="flex justify-between py-1.5 bg-gray-50 dark:bg-gray-900 px-2 rounded">
                        <span className="text-gray-700 dark:text-gray-300">低适宜性:</span>
                        <span className="font-semibold text-gray-800 dark:text-gray-200">
                          {crop.expectedYield.low[0]}-{crop.expectedYield.low[1]}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

                {/* 风险因子 */}
                {crop.riskFactors.length > 0 && (
                  <div className="mt-4 pt-4 border-t">
                    <h4 className="mb-3 flex items-center gap-2">
                      <AlertTriangle className="w-4 h-4 text-amber-600" />
                      主要风险因子
                    </h4>
                    <div className="grid grid-cols-2 gap-3">
                      {crop.riskFactors.map((risk) => (
                        <div
                          key={risk.id}
                          className={`p-3 rounded-lg border ${
                            risk.severity === 'high' ? 'bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800' :
                            risk.severity === 'medium' ? 'bg-amber-50 dark:bg-amber-950 border-amber-200 dark:border-amber-800' :
                            'bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800'
                          }`}
                        >
                          <div className="flex items-start justify-between mb-2">
                            <p className={`text-sm font-medium ${
                              risk.severity === 'high' ? 'text-red-900 dark:text-red-100' :
                              risk.severity === 'medium' ? 'text-amber-900 dark:text-amber-100' :
                              'text-blue-900 dark:text-blue-100'
                            }`}>
                              {risk.name}
                            </p>
                            <Badge
                              variant={risk.severity === 'high' ? 'destructive' : 'outline'}
                              className="text-xs"
                            >
                              {risk.severity === 'high' ? '高风险' : risk.severity === 'medium' ? '中风险' : '低风险'}
                            </Badge>
                          </div>
                          <p className="text-xs text-muted-foreground mb-2">
                            触发条件: {risk.condition}
                          </p>
                          <p className="text-xs text-foreground">
                            应对建议: {risk.suggestion}
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </Card>
            ))}
          </div>
        </div>

        <div className="flex justify-end pt-4 border-t mt-4">
          <Button onClick={onClose}>
            关闭
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}