import React, { useEffect, useState } from "react";

// ================================================================
// DUMMY COMPONENTS & HOOKS (REPLACEMENTS FOR INERTIA/COMPONENTS)
// ================================================================

// MOCK: usePage hook
const usePage = () => {
    const [url, setUrl] = useState('/login');

    useEffect(() => {
        const handleHashChange = () => {
            const hash = window.location.hash;
            if (hash.includes('register')) {
                setUrl('/register');
            } else if (hash.includes('forgot-password')) {
                setUrl('/forgot-password');
            } else {
                setUrl('/login');
            }
        };

        window.addEventListener('hashchange', handleHashChange);
        handleHashChange();

        return () => window.removeEventListener('hashchange', handleHashChange);
    }, []);

    return { url };
};

// MOCK: Link component
const Link = ({ children, href, className, ...props }) => (
    <a 
        href={href} 
        className={className} 
        onClick={(e) => { 
            e.preventDefault(); 
            window.location.hash = href.replace('#', ''); 
        }} 
        {...props}
    >
        {children}
    </a>
);

// MOCK: route function
const route = (name) => {
    if (name === 'register') return '#register';
    if (name === 'password.request') return '#forgot-password';
    return '#login';
};

// ================================================================
// GUESTLAYOUT DENGAN LATAR BELAKANG GELAP SESUAI GAMBAR
// ================================================================

export default function GuestLayout({ children }) {
    const { url } = usePage();

    const isLoginPage = url.startsWith("/login");
    const isRegisterPage = url.startsWith("/register");
    const isForgotPasswordPage = url.startsWith("/forgot-password");

    return (
        <div 
            // Latar Belakang Disesuaikan dengan Gambar Anda: Biru Dongker Gelap
            className="min-h-screen flex items-center justify-center 
                       bg-gradient-to-br from-blue-600 via-gray-800 to-slate-700 px-4 py-8"
        >
            <div 
                // Card utama tetap putih dengan bayangan yang bersih
                className="w-full max-w-5xl bg-white shadow-2xl rounded-3xl overflow-hidden 
                           flex flex-col md:flex-row transition-all duration-700 ease-in-out"
            >
                {/* LEFT CONTENT (Form) */}
                <div className="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                    {children}
                </div>

                {/* RIGHT PANEL (Info/Promo) - Tetap Cerah */}
                <div
                    // Panel Kanan tetap cerah seperti yang Anda inginkan di iterasi sebelumnya
                    className={`relative hidden md:flex w-1/2 bg-gradient-to-br from-sky-500 via-blue-500 to-indigo-600 
                                text-white flex-col items-center justify-center p-10 
                                rounded-l-[70px]
                                transition-all duration-700 ease-in-out
                                ${isLoginPage || isRegisterPage || isForgotPasswordPage ? "animate-slideInRight" : ""}`}
                >
                    {/* Elemen Latar Belakang Abstrak untuk Efek Lebih Hidup */}
                    <div className="absolute top-0 right-0 w-full h-full opacity-10 bg-no-repeat bg-cover" 
                         style={{ backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iLjE1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNhKSIvPjwvc3ZnPg==")' }}
                    />
                    
                    <img
                        src="/images/k2.png"
                        alt="Logo K2"
                        className="h-40 w-auto filter drop-shadow-lg contrast-125 brightness-125 z-10 mb-2" 
                    />
                    <h2 className="text-3xl font-extrabold mb-4 mt-6 text-white text-center z-10">
                        {isLoginPage && "Selamat Datang di PMB!"}
                        {isRegisterPage && "Kembali ke halaman login!"}
                        {isForgotPasswordPage && "Lupa Password?"}
                    </h2>
                    <p className="mb-6 text-blue-100 text-center leading-relaxed max-w-sm z-10">
                        {isLoginPage &&
                            "Daftar dengan detail pribadi anda untuk menggunakan semua fitur kami"}
                        {isRegisterPage &&
                            "Masuk dengan akun Anda untuk terus menjelajahi platform kami"}
                        {isForgotPasswordPage &&
                            "Masukkan email Anda untuk reset password dan dapatkan akses kembali"}
                    </p>

                </div>
            </div>

            {/* CSS untuk animasi slideInRight */}
            <style jsx="true">{`
                @keyframes slideInRight {
                    from { opacity: 0; transform: translateX(50px); }
                    to { opacity: 1; transform: translateX(0); }
                }
                .animate-slideInRight {
                    animation: slideInRight 1.2s ease-out;
                }
            `}</style>
        </div>
    );
}