(function() {
    const X = window.createIcon('X');
    const Play = window.createIcon('Play');
    const Star = window.createIcon('Star');
    const Clock = window.createIcon('Clock');
    const MapPin = window.createIcon('MapPin');
    const Ticket = window.createIcon('Ticket');
    const Share2 = window.createIcon('Share2');

    const UIModal = ({ isOpen, onClose, item, actionLabel = "Booking Tiket", onAction }) => {
        if (!isOpen || !item) return null;

        // Prevent click inside modal from closing it
        const handleContentClick = (e) => e.stopPropagation();

        return (
            <div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-in fade-in duration-200">
                {/* Backdrop */}
                <div className="absolute inset-0 bg-black/80 backdrop-blur-sm transition-opacity" onClick={onClose}></div>
                
                {/* Modal Content */}
                <div 
                    onClick={handleContentClick}
                    className="relative bg-[#1e1e2e] w-full max-w-sm rounded-3xl overflow-hidden shadow-2xl border border-white/10 animate-in zoom-in-95 duration-300"
                >
                    {/* Header Image */}
                    <div className={`h-48 bg-gradient-to-br ${item.imageColor || 'from-gray-800 to-black'} relative`}>
                        <button onClick={onClose} className="absolute top-4 right-4 bg-black/40 backdrop-blur-md p-2 rounded-full text-white hover:bg-white/20 transition hover:rotate-90">
                            <X className="w-5 h-5" />
                        </button>
                        <div className="absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-[#1e1e2e] to-transparent"></div>
                        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                            <div className="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/20 shadow-lg">
                                <Play className="w-6 h-6 text-white ml-1 fill-white" />
                            </div>
                        </div>
                    </div>
                    
                    {/* Body */}
                    <div className="p-6 pt-2">
                        <div className="flex justify-between items-start mb-2">
                            <span className="bg-purple-600/20 text-purple-300 text-[10px] font-bold px-2 py-1 rounded border border-purple-500/30 uppercase tracking-wider">
                                {item.category || 'Film'}
                            </span>
                            <div className="flex items-center gap-1 text-yellow-400 text-sm font-bold">
                                <Star className="w-4 h-4 fill-current" /> {item.rating || 'N/A'}
                            </div>
                        </div>
                        
                        <h2 className="text-2xl font-bold text-white mb-1 leading-tight">{item.title}</h2>
                        <p className="text-sm text-gray-400 mb-4">by <span className="text-purple-400">{item.creator}</span> • {item.duration || '-'}</p>
                        
                        <div className="max-h-32 overflow-y-auto scrollbar-hide mb-6">
                            <p className="text-gray-300 text-sm leading-relaxed">
                                {item.desc || "Tidak ada deskripsi tersedia."}
                            </p>
                        </div>

                        {/* Quick Info Grid */}
                        <div className="grid grid-cols-2 gap-3 mb-6">
                            <div className="bg-white/5 p-3 rounded-xl border border-white/5">
                                <div className="flex items-center gap-2 text-gray-400 text-xs mb-1">
                                    <Clock className="w-3 h-3" /> Waktu
                                </div>
                                <div className="text-white text-sm font-semibold">{item.schedule || 'TBA'}</div>
                            </div>
                            <div className="bg-white/5 p-3 rounded-xl border border-white/5">
                                <div className="flex items-center gap-2 text-gray-400 text-xs mb-1">
                                    <MapPin className="w-3 h-3" /> Lokasi
                                </div>
                                <div className="text-white text-sm font-semibold">{item.location || 'CFF Venue'}</div>
                            </div>
                        </div>

                        {/* Action Buttons */}
                        <div className="flex gap-3">
                            <button 
                                onClick={() => onAction && onAction(item)}
                                className="flex-1 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold py-3 rounded-xl shadow-lg shadow-purple-900/40 hover:opacity-90 transition active:scale-95 flex items-center justify-center gap-2"
                            >
                                <Ticket className="w-4 h-4" /> {actionLabel}
                            </button>
                            <button className="p-3 bg-white/5 border border-white/10 rounded-xl text-white hover:bg-white/10 transition active:scale-95">
                                <Share2 className="w-5 h-5" />
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    window.UIModal = UIModal;
})();