(function() {
    const ViewConsoleFilms = () => {
        const { fetchAPI } = window.useApp();
        const [films, setFilms] = React.useState([]);

        React.useEffect(() => {
            fetchAPI('/movies').then(data => {
                if(Array.isArray(data)) setFilms(data);
            });
        }, []);

        return (
            <div>
                 <div className="flex justify-between items-center mb-6">
                    <h2 className="text-xl font-bold text-white">Daftar Film Saya</h2>
                    <button className="bg-purple-600 text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-purple-700 transition">
                        + Tambah Film
                    </button>
                </div>

                <div className="bg-[#1e1e2e] rounded-2xl border border-white/5 overflow-hidden">
                    <table className="w-full text-left text-sm text-gray-400">
                        <thead className="bg-white/5 text-gray-200 font-bold uppercase text-xs">
                            <tr>
                                <th className="p-4">Judul</th>
                                <th className="p-4">Kategori</th>
                                <th className="p-4">Rating</th>
                                <th className="p-4 text-right">Aksi</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-white/5">
                            {films.map((film) => (
                                <tr key={film.id} className="hover:bg-white/5 transition">
                                    <td className="p-4 text-white font-medium">{film.title}</td>
                                    <td className="p-4"><span className="bg-white/10 px-2 py-1 rounded text-xs">{film.category}</span></td>
                                    <td className="p-4 text-yellow-400">{film.rating} ★</td>
                                    <td className="p-4 text-right">
                                        <button className="text-blue-400 hover:text-white mr-3">Edit</button>
                                        <button className="text-red-400 hover:text-white">Hapus</button>
                                    </td>
                                </tr>
                            ))}
                            {films.length === 0 && (
                                <tr>
                                    <td colSpan="4" className="p-8 text-center">Belum ada data film.</td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    };

    window.ViewConsoleFilms = ViewConsoleFilms;
})();