(function() {
    const ViewAuth = () => {
        const { setUser, showToast, fetchAPI, navigateTo } = window.useApp();
        const [loading, setLoading] = React.useState(false);
        const [formData, setFormData] = React.useState({ username: '', password: '' });

        const handleLogin = async (e) => {
            e.preventDefault();
            setLoading(true);

            try {
                // Panggil Endpoint API Custom yang kita buat di class-api.php
                const result = await fetchAPI('/login', {
                    method: 'POST',
                    body: JSON.stringify(formData)
                });

                if (result.success) {
                    showToast("Login Berhasil! Mengalihkan...", "success");
                    
                    // HARD RELOAD: Kunci arsitektur ini.
                    // Agar cookie WP tersetting dan PHP mengenali user di reload berikutnya.
                    setTimeout(() => {
                        window.location.href = '/console';
                    }, 1000);
                }
            } catch (err) {
                // Error sudah dihandle oleh fetchAPI (muncul toast)
                console.error(err);
            } finally {
                setLoading(false);
            }
        };

        return (
            <div className="min-h-screen flex items-center justify-center p-6 bg-[#0f0f1a] relative overflow-hidden">
                {/* Background Blobs */}
                <div className="absolute top-[-10%] right-[-10%] w-96 h-96 bg-purple-600/20 blur-[120px] rounded-full"></div>
                <div className="absolute bottom-[-10%] left-[-10%] w-96 h-96 bg-orange-600/10 blur-[100px] rounded-full"></div>

                <div className="w-full max-w-sm glass-card p-8 rounded-3xl border border-white/10 relative z-10">
                    <div className="text-center mb-8">
                        <div className="w-16 h-16 bg-gradient-to-br from-purple-600 to-orange-500 rounded-2xl mx-auto flex items-center justify-center mb-4 shadow-lg shadow-purple-500/30">
                            <i data-lucide="video" className="w-8 h-8 text-white"></i>
                        </div>
                        <h1 className="text-2xl font-bold text-white">CFF Hub</h1>
                        <p className="text-gray-400 text-sm">Masuk untuk akses Creator Console</p>
                    </div>

                    <form onSubmit={handleLogin} className="space-y-4">
                        <div>
                            <input 
                                type="text" 
                                placeholder="Username"
                                className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none transition"
                                value={formData.username}
                                onChange={e => setFormData({...formData, username: e.target.value})}
                                required
                            />
                        </div>
                        <div>
                            <input 
                                type="password" 
                                placeholder="Password"
                                className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none transition"
                                value={formData.password}
                                onChange={e => setFormData({...formData, password: e.target.value})}
                                required
                            />
                        </div>
                        
                        <button 
                            type="submit" 
                            disabled={loading}
                            className="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold py-3.5 rounded-xl shadow-lg shadow-purple-900/40 hover:opacity-90 transition active:scale-95 disabled:opacity-50 flex justify-center items-center gap-2"
                        >
                            {loading ? <span className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></span> : "Masuk Sekarang"}
                        </button>
                    </form>

                    <div className="mt-6 text-center">
                        <button onClick={() => navigateTo('home')} className="text-sm text-gray-500 hover:text-white transition">
                            &larr; Kembali ke Beranda
                        </button>
                    </div>
                </div>
            </div>
        );
    };

    window.ViewAuth = ViewAuth;
})();