import React from 'react';
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Palette, ChevronDown, Check } from 'lucide-react';
import { cn } from '@/utils';
import { StyleConfig } from '@/types';
import type { ModelConfig } from '@/types/model';
import { SecureImage } from '@/components/common/SecureImage';

export function StyleSelector({
    selectedStyleId,
    styles,
    onSelect,
    selectedModelId,
    models
}: {
    selectedStyleId?: string,
    styles: StyleConfig[],
    onSelect: (id: string) => void,
    selectedModelId?: string,
    models?: Record<string, ModelConfig>
}) {
    const selectedStyle = styles.find(s => s.id === selectedStyleId);

    const availableStyles = React.useMemo(() => {
        if (!models || !selectedModelId) {
             return styles.filter(s => s.type !== 'lora');
        }

        const currentModelConfig = models[selectedModelId];

        if (!currentModelConfig) {
             return styles.filter(s => s.type !== 'lora');
        }

        return styles.filter(style => {
            if (style.type === 'lora') {
                if (!currentModelConfig.capabilities?.supportsLora) return false;
                return style.lora?.base_model === currentModelConfig.id;
            }
            return true;
        });
    }, [styles, selectedModelId, models]);

    if (availableStyles.length === 0) return null;

    return (
        <Popover>
            <PopoverTrigger asChild>
                <div className="flex items-center gap-1.5 px-2 py-1 rounded-full hover:bg-white/5 cursor-pointer transition-colors text-[10px] font-bold text-muted-foreground hover:text-cyan-400 group">
                    <Palette className="w-3 h-3 group-hover:text-cyan-400 transition-colors" />
                    <span className="truncate max-w-[80px]">
                        {selectedStyle?.name || "风格"}
                    </span>
                    <ChevronDown size={10} className="opacity-50 group-hover:opacity-100 transition-opacity" />
                </div>
            </PopoverTrigger>
            <PopoverContent
                className="w-48 p-1 bg-black/40 backdrop-blur-xl border-white/10 z-[1000] shadow-2xl rounded-xl interaction-model-popover"
                side="top"
                align="center"
                sideOffset={10}
            >
                <div className="max-h-[200px] overflow-y-auto custom-scrollbar flex flex-col gap-0.5">
                    <div
                        onClick={() => onSelect('')}
                        className={cn(
                            "px-3 py-2 rounded-lg text-[11px] font-medium cursor-pointer transition-all flex items-center justify-between group",
                            !selectedStyleId
                                ? "bg-blue-500/10 text-blue-400"
                                : "text-foreground/70 hover:bg-white/5 hover:text-foreground"
                        )}
                    >
                        <div className="flex items-center gap-2">
                             <div className="w-5 h-5 rounded-md flex items-center justify-center bg-white/5">
                                <Palette size={12} />
                             </div>
                             <span>不使用</span>
                        </div>
                        {!selectedStyleId && <Check size={12} className="text-blue-400 shrink-0 ml-2" />}
                    </div>

                    {availableStyles.map((style) => (
                        <div
                            key={style.id}
                            onClick={() => onSelect(style.id)}
                            className={cn(
                                "px-3 py-2 rounded-lg text-[11px] font-medium cursor-pointer transition-all flex items-center justify-between group",
                                selectedStyleId === style.id
                                    ? "bg-blue-500/10 text-blue-400"
                                    : "text-foreground/70 hover:bg-white/5 hover:text-foreground"
                            )}
                        >
                            <div className="flex items-center gap-2 overflow-hidden">
                                {style.imageUrl && (
                                    <SecureImage
                                        src={style.imageUrl}
                                        alt={style.name}
                                        className="w-5 h-5 rounded-md overflow-hidden object-cover"
                                    />
                                )}
                                {!style.imageUrl && (
                                    <div className="w-5 h-5 rounded-md flex items-center justify-center bg-white/5">
                                        <Palette size={12} />
                                    </div>
                                )}
                                <span className="truncate">{style.name}</span>
                            </div>
                            {selectedStyleId === style.id && <Check size={12} className="text-blue-400 shrink-0 ml-2" />}
                        </div>
                    ))}
                </div>
            </PopoverContent>
        </Popover>
    );
}
