import React, { memo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Library, Music, Plus, UserCircle } from 'lucide-react';
import { Button } from "@/components/ui/button";
import { cn } from '@/utils';
import { InputAsset } from '../../types/node';
import { SecureImage } from '@/components/common/SecureImage';
import { SecureVideo } from '../../nodes/components/SecureVideo';

export const AssetSelector = memo(({ isExpanded, selectedAssets, onToggleAsset, inputAssets = [] }: { 
    isExpanded: boolean, 
    selectedAssets: string[], 
    onToggleAsset: (id: string) => void,
    inputAssets?: InputAsset[]
}) => {
    return (
        <AnimatePresence>
        {isExpanded && (
            <motion.div 
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 10 }}
                transition={{ duration: 0.2 }}
                className="mb-3 flex items-center gap-2 pointer-events-auto"
            >
              <div className="bg-black/40 backdrop-blur-md rounded-full p-1.5 flex items-center gap-1 border border-white/10 shadow-lg">
                 <div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center">
                    <Library className="w-4 h-4 text-foreground/70" />
                 </div>
                 <span className="text-[10px] font-medium text-foreground/70 px-2">素材</span>
              </div>
    
              <div className="flex items-center -space-x-2 overflow-visible hover:space-x-1 transition-all duration-300">
                 {/* Input Assets */}
                 {inputAssets.map((asset) => (
                   <div
                     key={asset.id}
                     className={cn(
                       "w-10 h-10 rounded-full border-2 border-cyan-500/50 relative overflow-hidden group bg-black/50 transition-all duration-200 z-20",
                       "hover:scale-110 hover:border-cyan-400 hover:z-30 shadow-[0_0_10px_rgba(6,182,212,0.3)]"
                     )}
                     title={asset.label || undefined}
                   >
                     {asset.type === 'video' ? (
                         <SecureVideo 
                            src={asset.src} 
                            className="w-full h-full object-cover" 
                            muted 
                            loop 
                            autoPlay 
                            playsInline
                         />
                     ) : asset.type === 'audio' ? (
                         <div className={cn(
                             "w-full h-full flex items-center justify-center",
                             asset.gender ? "bg-black/40" : "bg-cyan-500/20"
                         )}>
                             {asset.gender ? (
                                 <UserCircle
                                     size={20}
                                     className={cn(
                                         asset.gender === '男' || asset.gender === 'male' ? 'text-blue-400' : 'text-pink-400'
                                     )}
                                 />
                             ) : (
                                 <Music className="w-5 h-5 text-cyan-400" />
                             )}
                         </div>
                     ) : (
                         <SecureImage 
                            src={asset.src} 
                            alt="Input Asset" 
                            className="w-full h-full object-cover" 
                         />
                     )}
                   </div>
                 ))}

                 <Button 
                    variant="ghost"
                    className="w-10 h-10 rounded-full border-2 border-white/10 border-dashed bg-black/20 hover:bg-white/10 flex items-center justify-center transition-colors p-0"
                 >
                   <Plus className="w-4 h-4 text-foreground/50" />
                 </Button>
              </div>
            </motion.div>
        )}
        </AnimatePresence>
    );
});

AssetSelector.displayName = 'AssetSelector';
