import React from 'react';
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Image as ImageIcon, ChevronDown, Check, X } from 'lucide-react';
import { cn } from '@/utils';
import { InputAsset } from '../../../types/node';

interface AssetSelectorProps {
    isExpanded: boolean;
    selectedAssets: string[];
    onToggleAsset: (id: string) => void;
    inputAssets: InputAsset[];
}

export function AssetSelector({
    isExpanded,
    selectedAssets,
    onToggleAsset,
    inputAssets
}: AssetSelectorProps) {
    if (!isExpanded || inputAssets.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 pointer-events-auto">
                    <ImageIcon className="w-3 h-3 group-hover:text-cyan-400 transition-colors" />
                    <span className="truncate max-w-[80px]">
                        素材 ({inputAssets.length})
                    </span>
                    <ChevronDown size={10} className="opacity-50 group-hover:opacity-100 transition-opacity" />
                </div>
            </PopoverTrigger>
            <PopoverContent
                className="w-56 p-2 bg-black/40 backdrop-blur-xl border-white/10 z-[1000] shadow-2xl rounded-xl interaction-model-popover"
                side="top"
                align="start"
                sideOffset={10}
            >
                <div className="max-h-[280px] overflow-y-auto custom-scrollbar flex flex-col gap-1">
                    {inputAssets.map((asset) => {
                        const isSelected = selectedAssets.includes(asset.id);

                        return (
                            <div
                                key={asset.id}
                                onClick={() => onToggleAsset(asset.id)}
                                className={cn(
                                    "px-3 py-2 rounded-lg text-[11px] font-medium cursor-pointer transition-all flex items-center justify-between group",
                                    isSelected
                                        ? "bg-blue-500/10 text-blue-400"
                                        : "text-foreground/70 hover:bg-white/5 hover:text-foreground"
                                )}
                            >
                                <div className="flex items-center gap-2.5 overflow-hidden">
                                    {asset.thumbnail ? (
                                        <img
                                            src={asset.thumbnail}
                                            alt={asset.name}
                                            className="w-8 h-8 rounded-md object-cover"
                                        />
                                    ) : (
                                        <div className="w-8 h-8 rounded-md flex items-center justify-center bg-white/5">
                                            <ImageIcon size={14} />
                                        </div>
                                    )}
                                    <div className="flex flex-col truncate">
                                        <span className="truncate">{asset.name}</span>
                                        <span className="text-[9px] text-foreground/30 font-normal">
                                            {asset.type}
                                        </span>
                                    </div>
                                </div>
                                {isSelected && <Check size={12} className="text-blue-400 shrink-0 ml-2" />}
                            </div>
                        );
                    })}
                </div>
            </PopoverContent>
        </Popover>
    );
}
