//! Client-side menu item component
//!
//! Reactive implementation of menu items with SPA navigation capabilities.

use ::rustelo_core_lib::defs::MenuItem;
use leptos::prelude::*;

// TODO: Import these from actual locations
use crate::ui::spa_link::SpaLink;

// Placeholder i18n
fn use_i18n() -> DummyI18n {
    DummyI18n
}
struct DummyI18n;
impl DummyI18n {
    fn lang_code_reactive(&self) -> leptos::prelude::ReadSignal<String> {
        let (lang, _) = signal("en".to_string());
        lang
    }
}

/// Client-side reactive menu item renderer
pub fn menu_item_view(item: MenuItem) -> impl IntoView {
    let i18n = use_i18n();
    let current_lang_reactive = i18n.lang_code_reactive();
    let current_lang = move || {
        // Use reactive i18n context for proper language switching
        current_lang_reactive.get()
    };

    let label = item
        .label
        .get_with_primary_fallback(current_lang().as_str());
    let route = item
        .get_route_for_language(current_lang().as_str())
        .to_string();
    let is_external = item.is_external.unwrap_or(false);

    let target_attr = if is_external { "_blank" } else { "" };
    let icon_class = item.icon.unwrap_or_default();
    let rel_attr = if is_external {
        "noopener noreferrer"
    } else {
        ""
    };
    let class_attr = if is_external {
        "no-underline text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium inline-flex \
         items-center"
    } else {
        "no-underline ds-text hover:text-blue-500 px-3 py-2 text-sm font-medium inline-flex \
         items-center"
    };

    view! {
        <SpaLink
            href=route
            target=target_attr.to_string()
            rel=rel_attr.to_string()
            external=is_external
            class=class_attr.to_string()
        >
            <span class="menu-label"><i class={icon_class} aria-hidden="true"></i> {label}</span>
            <span class="external-icon" style={if is_external { "display: inline;" } else { "display: none;" }}>
                <svg class="ml-1 w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                </svg>
            </span>
        </SpaLink>
    }
}
