import React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Plus, Trash2 } from 'lucide-react';
import { useFieldArray, Control, Controller } from 'react-hook-form';

/**
 * 键值对编辑器组件
 * 通过 x-component: "KeyValueEditor" 声明使用
 * 用于编辑数组类型的键值对数据（如 HTTP 请求头、查询参数）
 */
interface KeyValueEditorProps {
    control: Control<any>;
    name: string;
    keyPlaceholder?: string;
    valuePlaceholder?: string;
    disabled?: boolean;
}

export const KeyValueEditor: React.FC<KeyValueEditorProps> = ({
    control,
    name,
    keyPlaceholder = 'Key',
    valuePlaceholder = 'Value',
    disabled = false,
}) => {
    const { fields, append, remove } = useFieldArray({
        control,
        name,
    });

    return (
        <div className="space-y-2">
            {fields.map((field, index) => (
                <div key={field.id} className="flex items-center gap-2">
                    <div className="flex-1 grid grid-cols-2 gap-2">
                        <Controller
                            control={control}
                            name={`${name}.${index}.key`}
                            defaultValue={(field as any).key || ''}
                            render={({ field: controllerField }) => (
                                <Input
                                    {...controllerField}
                                    placeholder={keyPlaceholder}
                                    disabled={disabled}
                                />
                            )}
                        />
                        <Controller
                            control={control}
                            name={`${name}.${index}.value`}
                            defaultValue={(field as any).value || ''}
                            render={({ field: controllerField }) => (
                                <Input
                                    {...controllerField}
                                    placeholder={valuePlaceholder}
                                    disabled={disabled}
                                />
                            )}
                        />
                    </div>
                    <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
                        onClick={() => remove(index)}
                        disabled={disabled}
                    >
                        <Trash2 className="h-4 w-4" />
                    </Button>
                </div>
            ))}
            
            <Button
                type="button"
                variant="outline"
                size="sm"
                className="w-full"
                onClick={() => append({ key: '', value: '' })}
                disabled={disabled}
            >
                <Plus className="h-4 w-4 mr-2" />
                添加
            </Button>
        </div>
    );
};
