use leptos::prelude::*;
use crate::t8s;

#[component]
pub fn WasmGuard(
    children: Children,
    #[prop(optional)] show_loading: Option<bool>,
) -> impl IntoView {
    let show_loading_ui = show_loading.unwrap_or(true);
    let is_wasm_loaded = RwSignal::new(false);
    
    // Simple effect that runs once when WASM is loaded
    Effect::new(move |_| {
        // This effect will only run after WASM is hydrated
        is_wasm_loaded.set(true);
    });
    
    view! {
        <style>
            {r#"
            .sun-loader {
                height: 200px;
                width: 200px;
                position: relative;
                background: linear-gradient(45deg, #FF4400, #FF5011);
                border-radius: 50%;
                animation: sunRotate 3s linear infinite, shadowPulse 2s ease-in-out infinite;
                box-shadow: 0px 0px 40px 20px rgba(255, 68, 0, 0.6),
                           -7px 0px 16px 3px #ffb453 inset,
                           16px 3px 40px 20px #bb6d01c5 inset,
                           -24px -3px 45px 24px #ffa265c2 inset,
                           150px 0px 80px 35px #c55f00aa inset;
            }
            @keyframes sunRotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            @keyframes shadowPulse {
                0%, 100% {
                    box-shadow: 0px 0px 40px 20px rgba(255, 68, 0, 0.6),
                               -7px 0px 16px 3px #ffb453 inset,
                               16px 3px 40px 20px #bb6d01c5 inset,
                               -24px -3px 45px 24px #ffa265c2 inset,
                               150px 0px 80px 35px #c55f00aa inset;
                }
                50% {
                    box-shadow: 0px 0px 60px 30px rgba(255, 68, 0, 0.8),
                               -7px 0px 25px 5px #ffb453 inset,
                               16px 3px 60px 30px #bb6d01c5 inset,
                               -24px -3px 65px 35px #ffa265c2 inset,
                               150px 0px 100px 45px #c55f00aa inset;
                }
            }
            .star {
                position: absolute;
                width: 8px;
                height: 8px;
                background: rgba(255, 249, 247, 0.9);
                border-radius: 4px;
                animation: twinkling 2s ease-in-out infinite;
            }
            @keyframes twinkling {
                0%, 100% { opacity: 0.3; transform: scale(1); }
                50% { opacity: 1; transform: scale(1.4); }
            }
            .star-1 { top: -20px; left: -25px; animation-delay: 0s; }
            .star-2 { top: 40px; left: -45px; animation-delay: 0.5s; }
            .star-3 { top: 120px; right: -40px; animation-delay: 1s; }
            .star-4 { bottom: 40px; right: -25px; animation-delay: 1.5s; }
            .star-5 { bottom: -20px; left: 20px; animation-delay: 0.3s; }
            .star-6 { top: 10px; right: -60px; animation-delay: 0.8s; }
            "#}
        </style>
        
        <div class="w-full h-full">
            <div 
                class="w-full h-full"
                class:hidden=move || !is_wasm_loaded.get()
                id="wasm-content"
            >
                {children()}
            </div>
            
            {move || {
                if !is_wasm_loaded.get() && show_loading_ui {
                    view! {
                        <div class="w-full h-screen flex items-center justify-center bg-[var(--bg-primary)] fixed inset-0 z-50" id="wasm-loading-content">
                            <div class="sun-loader relative" id="wasm-loading-spinner">
                                <div class="star star-1"></div>
                                <div class="star star-2"></div>
                                <div class="star star-3"></div>
                                <div class="star star-4"></div>
                                <div class="star star-5"></div>
                                <div class="star star-6"></div>
                            </div>
                        </div>
                    }.into_any()
                } else {
                    view! {}.into_any()
                }
            }}
        </div>
    }
}
