'use client';

import { useState } from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import {
  Database,
  Download,
  Eye,
  AlertTriangle,
  CheckCircle2,
} from 'lucide-react';
import { toast } from 'sonner';

interface EvaluationFactor {
  id: string;
  name: string;
  value: number;
  weight: number;
  unit: string;
  optimalRange: [number, number];
  score: number;
}

interface SuitabilityResult {
  fieldId: string;
  fieldName: string;
  totalScore: number;
  grade: '高度适宜' | '一般适宜' | '不适宜';
  factors: EvaluationFactor[];
  timestamp: string;
}

export default function BatchEvaluationPage() {
  const [isBatchRunning, setIsBatchRunning] = useState(false);
  const [batchProgress, setBatchProgress] = useState(0);
  const [batchResults, setBatchResults] = useState<{
    total: number;
    processed: number;
    highSuitability: number;
    mediumSuitability: number;
    lowSuitability: number;
    currentField: string;
  }>({
    total: 68,
    processed: 0,
    highSuitability: 0,
    mediumSuitability: 0,
    lowSuitability: 0,
    currentField: '',
  });
  const [batchAnalysisResults, setBatchAnalysisResults] = useState<SuitabilityResult[]>([]);

  // 评价因子权重配置
  const [factorWeights] = useState([
    { id: 'ph', name: 'pH值', weight: 20, unit: '' },
    { id: 'organic', name: '有机质含量', weight: 25, unit: 'g/kg' },
    { id: 'depth', name: '土层厚度', weight: 20, unit: 'cm' },
    { id: 'nitrogen', name: '全氮', weight: 10, unit: 'g/kg' },
    { id: 'phosphorus', name: '全磷', weight: 10, unit: 'g/kg' },
    { id: 'potassium', name: '全钾', weight: 10, unit: 'g/kg' },
    { id: 'drainage', name: '排水性', weight: 5, unit: '' },
  ]);

  const totalWeight = factorWeights.reduce((sum, f) => sum + f.weight, 0);

  // 模拟从空间分析服务读取地块因子数据
  const fetchFieldFactorsFromSpatialService = (): EvaluationFactor[] => {
    return [
      {
        id: 'ph',
        name: 'pH值',
        value: 6.0 + Math.random() * 2,
        weight: factorWeights.find(f => f.id === 'ph')?.weight || 20,
        unit: '',
        optimalRange: [6.5, 7.5],
        score: 0
      },
      {
        id: 'organic',
        name: '有机质含量',
        value: 15 + Math.random() * 20,
        weight: factorWeights.find(f => f.id === 'organic')?.weight || 25,
        unit: 'g/kg',
        optimalRange: [20, 30],
        score: 0
      },
      {
        id: 'depth',
        name: '土层厚度',
        value: 30 + Math.random() * 70,
        weight: factorWeights.find(f => f.id === 'depth')?.weight || 20,
        unit: 'cm',
        optimalRange: [50, 80],
        score: 0
      },
      {
        id: 'nitrogen',
        name: '全氮',
        value: 0.8 + Math.random() * 1.5,
        weight: factorWeights.find(f => f.id === 'nitrogen')?.weight || 10,
        unit: 'g/kg',
        optimalRange: [1.0, 2.0],
        score: 0
      },
      {
        id: 'phosphorus',
        name: '全磷',
        value: 0.4 + Math.random() * 1.2,
        weight: factorWeights.find(f => f.id === 'phosphorus')?.weight || 10,
        unit: 'g/kg',
        optimalRange: [0.6, 1.2],
        score: 0
      },
      {
        id: 'potassium',
        name: '全钾',
        value: 12 + Math.random() * 13,
        weight: factorWeights.find(f => f.id === 'potassium')?.weight || 10,
        unit: 'g/kg',
        optimalRange: [15, 20],
        score: 0
      },
      {
        id: 'drainage',
        name: '排水性',
        value: 60 + Math.random() * 40,
        weight: factorWeights.find(f => f.id === 'drainage')?.weight || 5,
        unit: '',
        optimalRange: [70, 90],
        score: 0
      },
    ];
  };

  // 计算单个因子的得分
  const calculateFactorScore = (value: number, optimalRange: [number, number]): number => {
    const [min, max] = optimalRange;
    const mid = (min + max) / 2;
    const range = max - min;

    if (value >= min && value <= max) {
      const deviation = Math.abs(value - mid);
      const deviationRatio = deviation / (range / 2);
      return Math.max(85, 100 - deviationRatio * 15);
    }

    const deviation = value < min ? min - value : value - max;
    const deviationRatio = deviation / range;
    return Math.max(20, 85 - deviationRatio * 65);
  };

  // 计算综合评分
  const calculateTotalScore = (factors: EvaluationFactor[]): number => {
    let totalScore = 0;
    for (const factor of factors) {
      totalScore += (factor.score * factor.weight) / 100;
    }
    return Math.round(totalScore);
  };

  // 根据总分确定适宜性等级
  const getGrade = (totalScore: number): '高度适宜' | '一般适宜' | '不适宜' => {
    if (totalScore >= 80) return '高度适宜';
    if (totalScore >= 60) return '一般适宜';
    return '不适宜';
  };

  const getGradeColor = (grade: string) => {
    switch (grade) {
      case '高度适宜': return 'bg-green-500';
      case '一般适宜': return 'bg-yellow-500';
      case '不适宜': return 'bg-red-500';
      default: return 'bg-gray-500';
    }
  };

  const getScoreColor = (score: number) => {
    if (score >= 80) return 'text-green-600';
    if (score >= 60) return 'text-yellow-600';
    return 'text-red-600';
  };

  // 批量分析处理函数
  const handleRunBatchAnalysis = async () => {
    if (totalWeight !== 100) {
      toast.error('权重总和必须为100%才能进行批量分析');
      return;
    }

    setIsBatchRunning(true);
    setBatchProgress(0);
    setBatchResults({
      total: 68,
      processed: 0,
      highSuitability: 0,
      mediumSuitability: 0,
      lowSuitability: 0,
      currentField: '',
    });
    setBatchAnalysisResults([]);

    toast.success('开始批量分析，正在读取地块数据...');

    const totalFields = 68;
    const results: SuitabilityResult[] = [];

    for (let i = 0; i < totalFields; i++) {
      await new Promise(resolve => setTimeout(resolve, 100));

      const fieldId = `field-${i + 1}`;
      const fieldName = `地块${String.fromCharCode(65 + (i % 26))}${Math.floor(i / 26) + 1}`;

      const factors = fetchFieldFactorsFromSpatialService();
      const scoredFactors = factors.map(factor => ({
        ...factor,
        score: calculateFactorScore(factor.value, factor.optimalRange)
      }));

      const totalScore = calculateTotalScore(scoredFactors);
      const grade = getGrade(totalScore);

      const result: SuitabilityResult = {
        fieldId,
        fieldName,
        totalScore,
        grade,
        factors: scoredFactors,
        timestamp: new Date().toISOString(),
      };

      results.push(result);

      setBatchResults(prev => ({
        ...prev,
        processed: i + 1,
        highSuitability: prev.highSuitability + (grade === '高度适宜' ? 1 : 0),
        mediumSuitability: prev.mediumSuitability + (grade === '一般适宜' ? 1 : 0),
        lowSuitability: prev.lowSuitability + (grade === '不适宜' ? 1 : 0),
        currentField: fieldName,
      }));

      setBatchProgress(Math.round(((i + 1) / totalFields) * 100));
    }

    setBatchAnalysisResults(results);
    setIsBatchRunning(false);

    toast.success(`批量分析完成！已为${totalFields}个地块生成适宜性评价结果并更新到数据库`);
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-green-800">自动化空间分析</h2>
          <p className="text-muted-foreground">
            批量评价地块，自动读取空间分析数据，生成适宜性指数并更新数据库
          </p>
        </div>
      </div>

      <Card className="p-6">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h3 className="mb-2">批量评价地块</h3>
            <p className="text-sm text-muted-foreground">
              自动循环调用空间分析服务，读取各项因子数据，进行加权汇总计算，生成适宜性指数并更新到数据库
            </p>
          </div>
          <Button
            size="lg"
            className="bg-green-600 hover:bg-green-700"
            onClick={handleRunBatchAnalysis}
            disabled={isBatchRunning || totalWeight !== 100}
          >
            <Database className="w-5 h-5 mr-2" />
            {isBatchRunning ? '分析中...' : '开始批量分析'}
          </Button>
        </div>

        {totalWeight !== 100 && (
          <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
            <p className="text-sm text-yellow-800">
              ⚠️ 权重总和必须为100%才能进行批量分析（当前：{totalWeight}%）
            </p>
          </div>
        )}

        {isBatchRunning && (
          <div className="space-y-4">
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">分析进度</span>
              <span className="font-medium">{batchProgress}%</span>
            </div>
            <Progress value={batchProgress} className="h-3" />
            <div className="grid grid-cols-2 gap-3 text-sm">
              <div className="p-3 bg-blue-50 rounded-lg">
                <p className="text-xs text-muted-foreground">当前处理</p>
                <p className="mt-1 text-blue-900">{batchResults.currentField}</p>
              </div>
              <div className="p-3 bg-blue-50 rounded-lg">
                <p className="text-xs text-muted-foreground">处理进度</p>
                <p className="mt-1 text-blue-900">{batchResults.processed} / {batchResults.total} 地块</p>
              </div>
            </div>
            <div className="text-xs text-muted-foreground space-y-1">
              <p>✓ 正在从空间分析服务读取因子数据...</p>
              <p>✓ 正在计算各因子得分（pH、有机质、土层厚度、全氮、全磷、全钾、排水性）...</p>
              <p>✓ 正在进行加权汇总计算...</p>
              <p>✓ 正在生成适宜性指数并更新到数据库...</p>
            </div>
          </div>
        )}

        {!isBatchRunning && batchResults.processed > 0 && (
          <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
            <p className="text-sm text-green-800">
              ✓ 批量分析已完成！已为 {batchResults.processed} 个地块生成适宜性评价结果并更新到数据库
            </p>
          </div>
        )}
      </Card>

      {/* 批量分析结果统计 */}
      <div className="grid grid-cols-3 gap-4">
        <Card className="p-6 bg-gradient-to-br from-green-50 to-green-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">高度适宜</p>
              <p className="mt-2 text-3xl text-green-600">{batchResults.highSuitability}</p>
              <p className="text-xs text-muted-foreground mt-1">
                地块数量 ({batchResults.total > 0 ? Math.round((batchResults.highSuitability / batchResults.total) * 100) : 0}%)
              </p>
            </div>
            <CheckCircle2 className="w-12 h-12 text-green-600 opacity-50" />
          </div>
        </Card>

        <Card className="p-6 bg-gradient-to-br from-yellow-50 to-yellow-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">一般适宜</p>
              <p className="mt-2 text-3xl text-yellow-600">{batchResults.mediumSuitability}</p>
              <p className="text-xs text-muted-foreground mt-1">
                地块数量 ({batchResults.total > 0 ? Math.round((batchResults.mediumSuitability / batchResults.total) * 100) : 0}%)
              </p>
            </div>
            <AlertTriangle className="w-12 h-12 text-yellow-600 opacity-50" />
          </div>
        </Card>

        <Card className="p-6 bg-gradient-to-br from-red-50 to-red-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">不适宜</p>
              <p className="mt-2 text-3xl text-red-600">{batchResults.lowSuitability}</p>
              <p className="text-xs text-muted-foreground mt-1">
                地块数量 ({batchResults.total > 0 ? Math.round((batchResults.lowSuitability / batchResults.total) * 100) : 0}%)
              </p>
            </div>
            <AlertTriangle className="w-12 h-12 text-red-600 opacity-50" />
          </div>
        </Card>
      </div>

      {/* 地块列表 */}
      {batchAnalysisResults.length > 0 && (
        <Card className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h3>地块适宜性评价结果</h3>
            <div className="flex gap-2">
              <Button variant="outline" size="sm">
                <Download className="w-4 h-4 mr-2" />
                导出结果
              </Button>
            </div>
          </div>
          <div className="overflow-x-auto max-h-[600px] overflow-y-auto">
            <table className="w-full">
              <thead className="bg-gray-50 sticky top-0">
                <tr>
                  <th className="px-4 py-3 text-left text-xs">地块名称</th>
                  <th className="px-4 py-3 text-center text-xs">综合评分</th>
                  <th className="px-4 py-3 text-center text-xs">适宜性等级</th>
                  <th className="px-4 py-3 text-center text-xs">pH值</th>
                  <th className="px-4 py-3 text-center text-xs">有机质(g/kg)</th>
                  <th className="px-4 py-3 text-center text-xs">土层厚度(cm)</th>
                  <th className="px-4 py-3 text-center text-xs">全氮(g/kg)</th>
                  <th className="px-4 py-3 text-center text-xs">更新时间</th>
                  <th className="px-4 py-3 text-center text-xs">操作</th>
                </tr>
              </thead>
              <tbody>
                {batchAnalysisResults.map((result) => (
                  <tr key={result.fieldId} className="border-t hover:bg-gray-50">
                    <td className="px-4 py-3 text-sm">{result.fieldName}</td>
                    <td className="px-4 py-3 text-center">
                      <span className={`text-sm font-medium ${getScoreColor(result.totalScore)}`}>
                        {result.totalScore}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-center">
                      <Badge className={`${getGradeColor(result.grade)} text-white`}>
                        {result.grade}
                      </Badge>
                    </td>
                    <td className="px-4 py-3 text-center text-sm">
                      {result.factors.find(f => f.id === 'ph')?.value.toFixed(1)}
                    </td>
                    <td className="px-4 py-3 text-center text-sm">
                      {result.factors.find(f => f.id === 'organic')?.value.toFixed(1)}
                    </td>
                    <td className="px-4 py-3 text-center text-sm">
                      {result.factors.find(f => f.id === 'depth')?.value.toFixed(0)}
                    </td>
                    <td className="px-4 py-3 text-center text-sm">
                      {result.factors.find(f => f.id === 'nitrogen')?.value.toFixed(2)}
                    </td>
                    <td className="px-4 py-3 text-center text-sm text-muted-foreground">
                      {new Date(result.timestamp).toLocaleString('zh-CN')}
                    </td>
                    <td className="px-4 py-3 text-center">
                      <Button variant="outline" size="sm">
                        <Eye className="w-4 h-4" />
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {/* 空间分析说明 */}
      <Card className="p-4 bg-blue-50 border-blue-200">
        <div className="flex items-start gap-2">
          <Database className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
          <div className="text-sm text-blue-800">
            <p className="mb-2">自动化空间分析流程说明：</p>
            <ul className="space-y-1 text-xs">
              <li>• <strong>1. 数据读取</strong>: 从数据库中读取所有地块单元，获取每个地块的空间位置信息</li>
              <li>• <strong>2. 循环调用空间分析服务</strong>: 自动遍历每个地块，调用空间分析服务读取7项因子数据（pH值、有机质含量、土层厚度、全氮、全磷、全钾、排水性）</li>
              <li>• <strong>3. 因子评分</strong>: 根据实际值与最佳范围的接近程度，计算各因子得分（0-100分）</li>
              <li>• <strong>4. 加权汇总计算</strong>: 使用配置的权重体系（总和=100%），计算综合得分 = Σ(因子得分 × 因子权重)</li>
              <li>• <strong>5. 适宜性分级</strong>: 根据综合得分自动分级：高度适宜(≥80分)、一般适宜(60-79分)、不适宜(&lt;60分)</li>
              <li>• <strong>6. 批量更新数据库</strong>: 将每个地块的适宜性指数和评价结果批量写回数据库，完成更新</li>
              <li>• <strong>7. 结果统计与可视化</strong>: 自动生成统计报告，支持按适宜性等级分类查看和导出</li>
            </ul>
          </div>
        </div>
      </Card>
    </div>
  );
}