'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Target } from 'lucide-react';
import { FieldData } from './multiDimensionReducer';

interface SuitabilityEvaluationProps {
  comparisonFields: FieldData[];
}

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

  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 getScoreLevel = (score: number) => {
    if (score >= 80) return '优秀';
    if (score >= 60) return '良好';
    return '需改善';
  };

  return (
    <Card className="p-6">
      <div className="flex items-center gap-2 mb-4">
        <Target className="w-5 h-5 text-orange-600" />
        <h3>适宜性评价对比</h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-muted">
            <tr>
              <th className="px-4 py-3 text-left text-xs">指标项</th>
              {comparisonFields.map(field => (
                <th key={field.id} className="px-4 py-3 text-center text-xs">
                  {field.name}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            <tr className="border-t border-border">
              <td className="px-4 py-3 text-sm font-medium">综合评分</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center">
                  <div className="space-y-1">
                    <span className={`text-2xl font-bold ${getScoreColor(field.suitabilityScore)}`}>
                      {field.suitabilityScore}
                    </span>
                    <div className="text-xs text-muted-foreground">
                      {getScoreLevel(field.suitabilityScore)}
                    </div>
                  </div>
                </td>
              ))}
            </tr>
            <tr className="border-t bg-muted/50">
              <td className="px-4 py-3 text-sm font-medium">适宜性等级</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center">
                  <div className="space-y-2">
                    <Badge className={`${getGradeColor(field.suitabilityGrade)} text-sm px-3 py-1`}>
                      {field.suitabilityGrade}
                    </Badge>
                    <div className="text-xs text-muted-foreground">
                      {field.suitabilityGrade === '高度适宜' ? '适合多种作物' :
                       field.suitabilityGrade === '一般适宜' ? '适合耐性作物' : '需系统改良'}
                    </div>
                  </div>
                </td>
              ))}
            </tr>
            <tr className="border-t border-border">
              <td className="px-4 py-3 text-sm font-medium">主要限制因子</td>
              {comparisonFields.map(field => {
                const limitations = [];
                if (field.ph < 6.0 || field.ph > 7.5) limitations.push('pH值');
                if (field.organicMatter < 25) limitations.push('有机质');
                if (field.soilDepth < 60) limitations.push('土层厚度');
                if (field.nitrogen < 1.5) limitations.push('全氮');
                if (field.phosphorus < 1.0) limitations.push('全磷');
                if (field.potassium < 15) limitations.push('全钾');

                return (
                  <td key={field.id} className="px-4 py-3 text-center text-sm">
                    {limitations.length > 0 ? (
                      <div className="space-y-1">
                        {limitations.slice(0, 2).map((limit, index) => (
                          <Badge key={index} variant="outline" className="text-xs">
                            {limit}
                          </Badge>
                        ))}
                        {limitations.length > 2 && (
                          <span className="text-xs text-muted-foreground">
                            +{limitations.length - 2}个
                          </span>
                        )}
                      </div>
                    ) : (
                      <span className="text-xs text-green-600">无限制因子</span>
                    )}
                  </td>
                );
              })}
            </tr>
            <tr className="border-t bg-muted/50">
              <td className="px-4 py-3 text-sm font-medium">推荐作物类型</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center text-sm">
                  <div className="space-y-1">
                    {field.suitabilityGrade === '高度适宜' ? (
                      <>
                        <Badge className="bg-green-100 text-green-800 border-green-200" variant="outline">
                          经济作物
                        </Badge>
                        <Badge className="bg-blue-100 text-blue-800 border-blue-200" variant="outline">
                          粮食作物
                        </Badge>
                      </>
                    ) : field.suitabilityGrade === '一般适宜' ? (
                      <Badge className="bg-yellow-100 text-yellow-800 border-yellow-200" variant="outline">
                        耐性作物
                      </Badge>
                    ) : (
                      <Badge className="bg-red-100 text-red-800 border-red-200" variant="outline">
                        需改良后种植
                      </Badge>
                    )}
                  </div>
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
    </Card>
  );
}