use leptos::prelude::*;
use leptos_router::hooks::use_navigate;
use crate::auth::use_auth;
use crate::components::layout::PageContent;
use crate::components::card::{Card, CardVariant};
use crate::components::prelude::*;

#[component]
pub fn AuthGuard(
    children: Children,
    #[prop(optional)] redirect_to: Option<&'static str>,
    #[prop(optional)] show_loading: Option<bool>,
) -> impl IntoView {
    let auth = use_auth();
    let navigate = use_navigate();
    let redirect_path = redirect_to.unwrap_or(t8s!("/en/login"));
    let show_loading_ui = show_loading.unwrap_or(true);
    
    let navigate_clone = navigate.clone();
    let redirect_path_clone = redirect_path;
    let auth_clone = auth.clone();
    let has_redirected = RwSignal::new(false);
    
    Effect::new(move |_| {
        if !auth_clone.is_authenticated.get() && !has_redirected.get() {
            log::warn!("Unauthorized access attempt - redirecting to {}", redirect_path_clone);
            has_redirected.set(true);
            navigate_clone(redirect_path_clone, Default::default());
        }
    });
    
    view! {
        <div class="w-full h-full">
            <div 
                class="w-full h-full"
                class:hidden=move || !auth.is_authenticated.get()
                id="protected-content"
            >
                {children()}
            </div>
            
            {move || {
                if !auth.is_authenticated.get() && show_loading_ui {
                    view! {
                        <div class="w-full h-full" id="auth-loading-content">
                            <PageContent>
                                <Card 
                                    variant=CardVariant::L1
                                    max_width="max-w-md" 
                                    padding="p-8" 
                                    class="w-full mx-auto"
                                    id="auth-guard-card"
                                >
                                    <div class="flex flex-col items-center gap-4 text-center" id="auth-guard-content">
                                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[rgba(255,249,247,0.8)]" id="auth-loading-spinner"></div>
                                        <h2 class="text-lg font-semibold text-[rgba(255,249,247,0.95)]" id="auth-guard-title">
                                            {t8s!("Checking authentication...")}
                                        </h2>
                                        <p class="text-sm text-[rgba(255,249,247,0.6)]" id="auth-guard-description">
                                            {t8s!("Redirecting to login page...")}
                                        </p>
                                    </div>
                                </Card>
                            </PageContent>
                        </div>
                    }.into_any()
                } else {
                    view! {}.into_any()
                }
            }}
        </div>
    }
}
