'use client';

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

interface ManagementStatusProps {
  comparisonFields: FieldData[];
}

export function ManagementStatus({ comparisonFields }: ManagementStatusProps) {
  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 getYieldColor = (yieldValue: number) => {
    if (yieldValue >= 700) return 'text-green-600';
    if (yieldValue >= 500) return 'text-yellow-600';
    return 'text-red-600';
  };

  return (
    <Card className="p-6">
      <div className="flex items-center gap-2 mb-4">
        <BarChart3 className="w-5 h-5 text-purple-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 text-sm">
                  <Badge variant="outline">{field.currentCrop}</Badge>
                </td>
              ))}
            </tr>
            <tr className="border-t bg-muted/50">
              <td className="px-4 py-3 text-sm font-medium">产量 (kg/亩)</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center">
                  <span className={`text-sm font-medium ${getYieldColor(field.yield)}`}>
                    {field.yield}
                  </span>
                  <div className="text-xs text-muted-foreground mt-1">
                    {field.yield >= 700 ? '高产' : field.yield >= 500 ? '中产' : '低产'}
                  </div>
                </td>
              ))}
            </tr>
            <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 text-sm">
                  <Badge
                    variant={field.irrigation === '喷灌' ? 'default' :
                           field.irrigation === '滴灌' ? 'secondary' : 'outline'}
                  >
                    {field.irrigation}
                  </Badge>
                </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">
                  <Badge
                    variant={field.drainage === '良好' ? 'default' :
                           field.drainage === '中等' ? 'secondary' : 'destructive'}
                  >
                    {field.drainage}
                  </Badge>
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
    </Card>
  );
}