'use client';

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Plus, X } from 'lucide-react';
import { ReportGenerator } from './ReportGenerator';

interface FieldSelectorProps {
  availableFields: ReturnType<typeof useChartComparison>['availableFields'];
  comparisonFields: ReturnType<typeof useChartComparison>['comparisonFields'];
  onAddField: (fieldId: string) => void;
  onRemoveField: (fieldId: string) => void;
  onGenerateReport: () => void;
  reportGenerating: boolean;
  reportProgress: number;
}

export function FieldSelector({
  availableFields,
  comparisonFields,
  onAddField,
  onRemoveField,
  onGenerateReport,
  reportGenerating,
  reportProgress,
}: FieldSelectorProps) {
  return (
    <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">
          {comparisonFields.map(field => (
            <Badge
              key={field.id}
              className="bg-green-100 text-green-800 px-3 py-1.5 flex items-center gap-2 font-light"
            >
              {field.name}
              <button
                onClick={() => onRemoveField(field.id)}
                className="hover:bg-green-200 rounded-full p-0.5"
              >
                <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>
      </div>

      <ReportGenerator
        onGenerateReport={onGenerateReport}
        reportGenerating={reportGenerating}
        reportProgress={reportProgress}
      />
    </div>
  );
}