import React from 'react';
import { X } from 'lucide-react';
import { Button } from "@/components/ui/button";
import * as Label from '@radix-ui/react-label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export function MultiSelectControl({
    label,
    options,
    selectedValues,
    onChange,
    id
}: {
    label: string;
    options: (string | { label: string; value: string })[];
    selectedValues: string[];
    onChange: (values: string[]) => void;
    id?: string;
}) {
    const normalizedOptions = options.map(opt => 
        typeof opt === 'string' ? { label: opt, value: opt } : opt
    );

    const generatedId = React.useId();
    const selectId = id || generatedId;

    return (
        <div className="space-y-1.5">
            <Label.Root 
                htmlFor={selectId}
                className="text-[10px] text-muted-foreground font-medium uppercase tracking-wider block mb-1.5"
            >
                {label}
            </Label.Root>
            
            {/* Chips Container */}
            <div className="flex flex-wrap gap-2 mb-2">
                {selectedValues.map(value => {
                    const option = normalizedOptions.find(opt => opt.value === value);
                    const displayLabel = option ? option.label : value;
                    return (
                        <div key={value} className="flex items-center gap-1 bg-card text-foreground text-[11px] px-2 py-1 rounded border border-border">
                            <span>{displayLabel}</span>
                            <Button 
                                variant="ghost"
                                size="icon"
                                onClick={() => onChange(selectedValues.filter(v => v !== value))}
                                className="h-3 w-3 text-muted-foreground hover:text-foreground hover:bg-transparent"
                            >
                                <X size={10} />
                            </Button>
                        </div>
                    );
                })}
            </div>

            <Select 
                value="" 
                onValueChange={(value: string) => {
                    if (value && !selectedValues.includes(value)) {
                        onChange([...selectedValues, value]);
                    }
                }}
            >
                <SelectTrigger id={selectId} className="w-full !text-[11px] h-8">
                    <SelectValue placeholder={`+ 添加${label}...`} />
                </SelectTrigger>
                <SelectContent>
                    {normalizedOptions.map(opt => (
                        <SelectItem 
                            key={opt.value} 
                            value={opt.value} 
                            disabled={selectedValues.includes(opt.value)}
                            className="!text-[11px]"
                        >
                            {opt.label}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>
        </div>
    );
}
