'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Plus, X } from 'lucide-react';
import { FieldData } from './multiDimensionReducer';

interface FieldSelectorProps {
  selectedFields: string[];
  fieldsData: FieldData[];
  onAddField: (fieldId: string) => void;
  onRemoveField: (fieldId: string) => void;
}

export function FieldSelector({
  selectedFields,
  fieldsData,
  onAddField,
  onRemoveField
}: FieldSelectorProps) {
  const comparisonFields = fieldsData.filter(f => selectedFields.includes(f.id));
  const availableFields = fieldsData.filter(f => !selectedFields.includes(f.id));

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

  return (
    <Card className="p-4">
      <div className="flex items-start gap-4">
        <div className="flex-1">
          <label className="text-xs text-muted-foreground mb-2 block">选择对比地块 (2-4个)</label>
          <div className="flex flex-wrap gap-2 mb-3">
            {comparisonFields.map(field => (
              <Badge
                key={field.id}
                className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-3 py-1.5 flex items-center gap-2 border border-green-200 dark:border-green-800"
              >
                {field.name}
                <button
                  onClick={() => onRemoveField(field.id)}
                  className="hover:bg-green-200 dark:hover:bg-green-800 rounded-full p-0.5 transition-colors"
                >
                  <X className="w-3 h-3" />
                </button>
              </Badge>
            ))}
            {availableFields.length > 0 && (
              <Select onValueChange={onAddField}>
                <SelectTrigger className="w-40">
                  <div className="flex items-center gap-2">
                    <Plus className="w-4 h-4" />
                    <span>添加地块</span>
                  </div>
                </SelectTrigger>
                <SelectContent>
                  {availableFields.map(field => (
                    <SelectItem key={field.id} value={field.id}>
                      {field.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            )}
          </div>
          {selectedFields.length < 2 && (
            <p className="text-xs text-muted-foreground">
              至少需要选择2个地块进行对比
            </p>
          )}
          {selectedFields.length >= 4 && (
            <p className="text-xs text-muted-foreground">
              最多只能同时对比4个地块
            </p>
          )}

          {/* 选中地块的简要信息 */}
          {comparisonFields.length > 0 && (
            <div className="mt-4 pt-4 border-t border-border">
              <p className="text-xs text-muted-foreground mb-2">已选地块信息：</p>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                {comparisonFields.map(field => (
                  <div key={field.id} className="p-3 bg-muted rounded-lg">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-xs font-medium truncate">{field.name}</span>
                      <Badge className={`${getGradeColor(field.suitabilityGrade)} text-xs`}>
                        {field.suitabilityGrade}
                      </Badge>
                    </div>
                    <div className="text-xs text-muted-foreground space-y-1">
                      <div className="flex justify-between">
                        <span>面积:</span>
                        <span>{field.area}亩</span>
                      </div>
                      <div className="flex justify-between">
                        <span>作物:</span>
                        <span>{field.currentCrop}</span>
                      </div>
                      <div className="flex justify-between">
                        <span>产量:</span>
                        <span>{field.yield}kg/亩</span>
                      </div>
                      <div className="flex justify-between">
                        <span>评分:</span>
                        <span>{field.suitabilityScore}分</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </Card>
  );
}