(function() {
    const UICard = window.UICard;
    const UIModal = window.UIModal;
    const Search = window.createIcon('Search');

    const ViewHome = () => {
        const { fetchAPI, isLoading } = window.useApp();
        const [movies, setMovies] = React.useState([]);
        const [selectedMovie, setSelectedMovie] = React.useState(null);
        const [searchTerm, setSearchTerm] = React.useState('');

        // Fetch Data saat Mount
        React.useEffect(() => {
            const loadMovies = async () => {
                try {
                    const data = await fetchAPI('/movies');
                    if(Array.isArray(data)) setMovies(data);
                } catch (err) {
                    console.error("Gagal load film", err);
                }
            };
            loadMovies();
        }, []);

        // Filter Logic
        const filteredMovies = movies.filter(m => 
            m.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
            (m.category && m.category.toLowerCase().includes(searchTerm.toLowerCase()))
        );

        return (
            <div className="pb-32">
                {/* Hero Section */}
                <div className="relative h-72 w-full overflow-hidden mb-6">
                    <div className="absolute inset-0 bg-gradient-to-b from-purple-900 via-[#1e1e2e] to-[#0f0f1a] opacity-90 z-0"></div>
                    <div className="relative z-10 px-6 pt-20">
                        <div className="flex items-center gap-2 mb-2">
                            <span className="h-1 w-6 bg-orange-500 rounded-full"></span>
                            <span className="text-orange-400 text-xs font-bold uppercase tracking-widest">Official App</span>
                        </div>
                        <h1 className="text-3xl font-extrabold text-white leading-tight mb-6">
                            Cilacap <br/> <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-orange-400">Film Festival</span>
                        </h1>
                        
                        {/* Search Bar */}
                        <div className="flex items-center bg-white/10 backdrop-blur-md border border-white/10 rounded-2xl p-2 pr-4 shadow-xl">
                            <div className="p-2 bg-purple-600 rounded-xl mr-3">
                                <Search className="h-5 w-5 text-white" />
                            </div>
                            <input 
                                type="text" 
                                placeholder="Cari film lokal..." 
                                className="bg-transparent border-none outline-none text-white placeholder-gray-400 text-sm w-full"
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                            />
                        </div>
                    </div>
                </div>

                {/* Content Grid */}
                <div className="px-4 space-y-5">
                    <div className="flex justify-between items-end mb-2">
                        <h3 className="text-lg font-bold text-white">Sedang Tayang</h3>
                    </div>

                    {isLoading && movies.length === 0 ? (
                        <div className="text-center py-10 text-gray-500">Memuat data...</div>
                    ) : filteredMovies.length > 0 ? (
                        filteredMovies.map(movie => (
                            <UICard 
                                key={movie.id} 
                                item={movie} 
                                onClick={setSelectedMovie}
                                isLiked={false} // Todo: Implement like logic
                            />
                        ))
                    ) : (
                        <div className="p-8 text-center bg-white/5 rounded-2xl border border-dashed border-white/10">
                            <p className="text-gray-400">Tidak ada film ditemukan.</p>
                        </div>
                    )}
                </div>

                {/* Modal Detail */}
                <UIModal 
                    isOpen={!!selectedMovie} 
                    onClose={() => setSelectedMovie(null)} 
                    item={selectedMovie} 
                />
            </div>
        );
    };

    window.ViewHome = ViewHome;
})();