'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Progress } from '@/components/ui/progress';
import { Plus, X, FileText } from 'lucide-react';
import { ReportComparisonState, FieldData } from './reportComparisonReducer';

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

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

  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">
            {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>
        <div className="flex-shrink-0">
          <label className="text-xs text-muted-foreground mb-2 block opacity-0">操作</label>
          <Button
            className="bg-green-600 hover:bg-green-700"
            onClick={onGenerateReport}
            disabled={state.reportGenerating}
          >
            <FileText className="w-4 h-4 mr-2" />
            生成报告
          </Button>
        </div>
      </div>

      {state.reportGenerating && (
        <div className="mt-4 pt-4 border-t">
          <div className="flex items-center justify-between text-sm mb-2">
            <span className="text-muted-foreground">生成进度</span>
            <span className="font-medium">{state.reportProgress}%</span>
          </div>
          <Progress value={state.reportProgress} className="h-2" />
          <p className="text-xs text-muted-foreground text-center mt-2">
            正在生成报告，请稍候...
          </p>
        </div>
      )}
    </Card>
  );
}