//! Client-side Mobile Menu Components
//!
//! Reactive implementation of mobile menu components for client-side rendering.

use ::rustelo_core_lib::i18n::use_unified_i18n;
use leptos::ev::MouseEvent;
use leptos::prelude::*;
#[cfg(target_arch = "wasm32")]
use wasm_bindgen::JsCast;

/// Client-side mobile menu toggle component
#[component]
pub fn MobileMenuToggle() -> impl IntoView {
    let i18n = use_unified_i18n();

    // Signal to control mobile menu visibility
    let (is_open, set_is_open) = signal(false);

    // Handle escape key to close menu
    #[cfg(target_arch = "wasm32")]
    {
        let set_is_open_clone = set_is_open;
        Effect::new(move |_| {
            let closure =
                wasm_bindgen::closure::Closure::wrap(Box::new(move |e: web_sys::KeyboardEvent| {
                    if e.key() == "Escape" && is_open.get() {
                        set_is_open_clone.set(false);
                    }
                }) as Box<dyn FnMut(_)>);

            if let Some(window) = web_sys::window() {
                if let Some(document) = window.document() {
                    let _ = document.add_event_listener_with_callback(
                        "keydown",
                        closure.as_ref().unchecked_ref(),
                    );
                }
            }
            closure.forget();
        });
    }

    view! {
        <div class="md:hidden">
            <button
                type="button"
                class="p-2 rounded-md ds-text hover:ds-bg focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                aria-controls="mobile-menu"
                aria-expanded=move || is_open.get().to_string()
                on:click=move |e: MouseEvent| {
                    e.prevent_default();
                    set_is_open.update(|open| *open = !*open);
                }
            >
                <span class="sr-only">{i18n.t("mobile-menu-open")}</span>
                <Show
                    when=move || !is_open.get()
                    fallback=move || view! {
                        // X icon when menu is open
                        <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    }
                >
                    // Hamburger icon when menu is closed
                    <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </Show>
            </button>

            // Mobile menu panel
            <div
                id="mobile-menu"
                class=move || {
                    format!(
                        "md:hidden border-t ds-border {}",
                        if is_open.get() { "block" } else { "hidden" }
                    )
                }
            >
                <slot name="menu-content" />
            </div>
        </div>
    }
}

/// Client-side mobile menu with integrated content
#[component]
pub fn MobileMenu(children: Children) -> impl IntoView {
    let i18n = use_unified_i18n();

    // Signal to control mobile menu visibility
    let (is_open, set_is_open) = signal(false);

    // Handle escape key to close menu
    #[cfg(target_arch = "wasm32")]
    {
        let set_is_open_clone = set_is_open;
        Effect::new(move |_| {
            let closure =
                wasm_bindgen::closure::Closure::wrap(Box::new(move |e: web_sys::KeyboardEvent| {
                    if e.key() == "Escape" && is_open.get() {
                        set_is_open_clone.set(false);
                    }
                }) as Box<dyn FnMut(_)>);

            if let Some(window) = web_sys::window() {
                if let Some(document) = window.document() {
                    let _ = document.add_event_listener_with_callback(
                        "keydown",
                        closure.as_ref().unchecked_ref(),
                    );
                }
            }
            closure.forget();
        });
    }

    view! {
        <>
            <button
                type="button"
                class="md:hidden p-2 rounded-md ds-text hover:ds-bg focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                aria-controls="mobile-menu"
                aria-expanded=move || is_open.get().to_string()
                on:click=move |e: MouseEvent| {
                    e.prevent_default();
                    set_is_open.update(|open| *open = !*open);
                }
            >
                <span class="sr-only">{i18n.t("mobile-menu-open")}</span>
                <Show
                    when=move || !is_open.get()
                    fallback=move || view! {
                        // X icon when menu is open
                        <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    }
                >
                    // Hamburger icon when menu is closed
                    <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </Show>
            </button>

            // Mobile menu panel
            <div
                id="mobile-menu"
                style:display=move || if is_open.get() { "block" } else { "none" }
                class="md:hidden border-t ds-border"
            >
                {children()}
            </div>
        </>
    }
}
