'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ThermometerSun, Leaf, Droplet } from 'lucide-react';
import { SuitabilityResult } from './cropRecommendReducer';

interface FieldEnvironmentOverviewProps {
  currentResult: SuitabilityResult;
}

export function FieldEnvironmentOverview({ currentResult }: FieldEnvironmentOverviewProps) {
  const getScoreColor = (score: number) => {
    if (score >= 80) return 'text-green-600 dark:text-green-400';
    if (score >= 60) return 'text-yellow-600 dark:text-yellow-400';
    return 'text-red-600 dark:text-red-400';
  };

  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';
    }
  };

  return (
    <Card className="p-6">
      <h3 className="mb-4 flex items-center gap-2">
        <Leaf className="w-5 h-5 text-green-600" />
        {currentResult.fieldName} - 环境参数概览
      </h3>

      <div className="grid grid-cols-4 gap-4 mb-4">
        <div className="p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 rounded-lg">
          <p className="text-xs text-blue-600 dark:text-blue-400 mb-1 flex items-center gap-1">
            <ThermometerSun className="w-3 h-3" />
            pH值
          </p>
          <p className="text-xl font-medium text-blue-900 dark:text-blue-100">
            {currentResult.factors.find(f => f.id === 'ph')?.value.toFixed(1)}
          </p>
          <p className="text-xs text-blue-700 dark:text-blue-300 mt-1">
            最佳: {currentResult.factors.find(f => f.id === 'ph')?.optimalRange[0]}-{currentResult.factors.find(f => f.id === 'ph')?.optimalRange[1]}
          </p>
        </div>

        <div className="p-4 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900 rounded-lg">
          <p className="text-xs text-green-600 dark:text-green-400 mb-1 flex items-center gap-1">
            <Leaf className="w-3 h-3" />
            有机质
          </p>
          <p className="text-xl font-medium text-green-900 dark:text-green-100">
            {currentResult.factors.find(f => f.id === 'organic')?.value.toFixed(1)} g/kg
          </p>
          <p className="text-xs text-green-700 dark:text-green-300 mt-1">
            最佳: {currentResult.factors.find(f => f.id === 'organic')?.optimalRange[0]}-{currentResult.factors.find(f => f.id === 'organic')?.optimalRange[1]} g/kg
          </p>
        </div>

        <div className="p-4 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-950 dark:to-amber-900 rounded-lg">
          <p className="text-xs text-amber-600 dark:text-amber-400 mb-1">土层厚度</p>
          <p className="text-xl font-medium text-amber-900 dark:text-amber-100">
            {currentResult.factors.find(f => f.id === 'depth')?.value.toFixed(0)} cm
          </p>
          <p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
            最佳: {currentResult.factors.find(f => f.id === 'depth')?.optimalRange[0]}-{currentResult.factors.find(f => f.id === 'depth')?.optimalRange[1]} cm
          </p>
        </div>

        <div className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-950 dark:to-purple-900 rounded-lg">
          <p className="text-xs text-purple-600 dark:text-purple-400 mb-1 flex items-center gap-1">
            <Droplet className="w-3 h-3" />
            排水性
          </p>
          <p className="text-xl font-medium text-purple-900 dark:text-purple-100">
            {currentResult.factors.find(f => f.id === 'drainage')?.value.toFixed(0)}分
          </p>
          <p className="text-xs text-purple-700 dark:text-purple-300 mt-1">
            最佳: {currentResult.factors.find(f => f.id === 'drainage')?.optimalRange[0]}-{currentResult.factors.find(f => f.id === 'drainage')?.optimalRange[1]} 分
          </p>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-4 mb-4">
        <div className="p-3 bg-gray-50 dark:bg-gray-900 rounded-lg">
          <p className="text-xs text-muted-foreground mb-1">全氮</p>
          <p className="font-medium">{currentResult.factors.find(f => f.id === 'nitrogen')?.value.toFixed(2)} g/kg</p>
          <p className="text-xs text-muted-foreground">
            最佳: {currentResult.factors.find(f => f.id === 'nitrogen')?.optimalRange[0]}-{currentResult.factors.find(f => f.id === 'nitrogen')?.optimalRange[1]} g/kg
          </p>
        </div>
        <div className="p-3 bg-gray-50 dark:bg-gray-900 rounded-lg">
          <p className="text-xs text-muted-foreground mb-1">全磷</p>
          <p className="font-medium">{currentResult.factors.find(f => f.id === 'phosphorus')?.value.toFixed(2)} g/kg</p>
          <p className="text-xs text-muted-foreground">
            最佳: {currentResult.factors.find(f => f.id === 'phosphorus')?.optimalRange[0]}-{currentResult.factors.find(f => f.id === 'phosphorus')?.optimalRange[1]} g/kg
          </p>
        </div>
        <div className="p-3 bg-gray-50 dark:bg-gray-900 rounded-lg">
          <p className="text-xs text-muted-foreground mb-1">全钾</p>
          <p className="font-medium">{currentResult.factors.find(f => f.id === 'potassium')?.value.toFixed(1)} g/kg</p>
          <p className="text-xs text-muted-foreground">
            最佳: {currentResult.factors.find(f => f.id === 'potassium')?.optimalRange[0]}-{currentResult.factors.find(f => f.id === 'potassium')?.optimalRange[1]} g/kg
          </p>
        </div>
      </div>

      <div className="p-4 bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-950 dark:to-blue-950 rounded-lg border border-green-200 dark:border-green-800">
        <h4 className="text-green-900 dark:text-green-100 mb-3 font-medium">地块适宜性分析</h4>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
          <div>
            <p className="text-green-800 dark:text-green-200 mb-2">
              <span className="font-medium">综合评分：</span>
              <span className={`ml-2 text-lg font-bold ${getScoreColor(currentResult.totalScore)}`}>
                {currentResult.totalScore}分
              </span>
            </p>
            <Badge className={`${getGradeColor(currentResult.grade)} text-white`}>
              {currentResult.grade}
            </Badge>
          </div>
          <div>
            <p className="text-green-800 dark:text-green-200 mb-1">
              <span className="font-medium">优秀因子：</span>
              <span className="text-green-600 dark:text-green-400 font-medium ml-1">
                {currentResult.factors.filter(f => f.score >= 80).length}项
              </span>
            </p>
            <p className="text-green-800 dark:text-green-200">
              <span className="font-medium">待改善因子：</span>
              <span className="text-red-600 dark:text-red-400 font-medium ml-1">
                {currentResult.factors.filter(f => f.score < 70).length}项
              </span>
            </p>
          </div>
          <div>
            <p className="text-green-800 dark:text-green-200 mb-1">
              <span className="font-medium">评价时间：</span>
              <span className="text-muted-foreground ml-1">{currentResult.timestamp}</span>
            </p>
            <p className="text-green-800 dark:text-green-200">
              <span className="font-medium">地块ID：</span>
              <span className="text-muted-foreground ml-1">{currentResult.fieldId}</span>
            </p>
          </div>
        </div>
      </div>
    </Card>
  );
}