//! # Navigation Demo Example
//! 
//! Comprehensive demonstration of navigation components including
//! responsive menus, language switching, and active state management.

use rustelo_components::{
    navigation::{BrandHeader, Footer, NavMenu, LanguageSelector},
    ui::{SpaLink, MobileMenu, MobileMenuToggle},
    content::UnifiedContentCard,
};
use leptos::*;

/// Advanced navigation demo with responsive mobile menu and language switching
#[component]
pub fn NavigationDemo() -> impl IntoView {
    // Mobile menu state
    let (mobile_menu_open, set_mobile_menu_open) = create_signal(false);
    
    // Language state  
    let (current_language, set_current_language) = create_signal("en".to_string());
    let available_languages = vec!["en".to_string(), "es".to_string(), "fr".to_string()];
    
    // Current page for active state demo
    let (current_path, set_current_path) = create_signal("/".to_string());

    view! {
        <div class="min-h-screen bg-gray-50">
            // Advanced header with responsive navigation
            <BrandHeader 
                brand_name="Rustelo Navigation Demo"
                logo_url="/logo.svg"
                class="bg-white shadow-md"
            >
                <div class="flex items-center justify-between w-full">
                    // Desktop navigation menu
                    <div class="hidden lg:block">
                        <NavMenu 
                            orientation="horizontal" 
                            active_path=current_path
                            class="space-x-1"
                        >
                            <SpaLink 
                                href="/" 
                                class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
                                active_class="bg-blue-100 text-blue-700"
                                on:click=move |_| set_current_path.set("/".to_string())
                            >
                                "Home"
                            </SpaLink>
                            
                            <SpaLink 
                                href="/products" 
                                class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
                                active_class="bg-blue-100 text-blue-700"
                                on:click=move |_| set_current_path.set("/products".to_string())
                            >
                                "Products"
                            </SpaLink>
                            
                            <SpaLink 
                                href="/services" 
                                class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
                                active_class="bg-blue-100 text-blue-700"
                                on:click=move |_| set_current_path.set("/services".to_string())
                            >
                                "Services"
                            </SpaLink>
                            
                            <SpaLink 
                                href="/blog" 
                                class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
                                active_class="bg-blue-100 text-blue-700"
                                on:click=move |_| set_current_path.set("/blog".to_string())
                            >
                                "Blog"
                            </SpaLink>
                            
                            <SpaLink 
                                href="/contact" 
                                class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
                                active_class="bg-blue-100 text-blue-700"
                                on:click=move |_| set_current_path.set("/contact".to_string())
                            >
                                "Contact"
                            </SpaLink>
                        </NavMenu>
                    </div>
                    
                    // Header utilities (language selector + mobile menu toggle)
                    <div class="flex items-center space-x-4">
                        // Language selector  
                        <LanguageSelector 
                            current_lang=current_language
                            available_langs=available_languages
                            on_change=move |new_lang| {
                                set_current_language.set(new_lang.clone());
                                logging::log!("Language changed to: {}", new_lang);
                            }
                            class="text-sm"
                        />
                        
                        // Mobile menu toggle (hidden on desktop)
                        <div class="lg:hidden">
                            <MobileMenuToggle 
                                is_open=mobile_menu_open
                                on_toggle=move |_| {
                                    set_mobile_menu_open.update(|open| *open = !*open);
                                }
                                class="text-gray-700"
                            />
                        </div>
                    </div>
                </div>
            </BrandHeader>
            
            // Mobile slide-out menu
            <MobileMenu 
                is_open=mobile_menu_open
                on_close=move |_| set_mobile_menu_open.set(false)
                position="right"
                class="lg:hidden"
            >
                <div class="px-4 py-6 space-y-4">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">"Navigation"</h3>
                    
                    <div class="space-y-2">
                        <SpaLink 
                            href="/" 
                            class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
                            active_class="bg-blue-100 text-blue-700"
                            on:click=move |_| {
                                set_current_path.set("/".to_string());
                                set_mobile_menu_open.set(false);
                            }
                        >
                            "🏠 Home"
                        </SpaLink>
                        
                        <SpaLink 
                            href="/products" 
                            class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
                            active_class="bg-blue-100 text-blue-700"
                            on:click=move |_| {
                                set_current_path.set("/products".to_string());
                                set_mobile_menu_open.set(false);
                            }
                        >
                            "📦 Products"
                        </SpaLink>
                        
                        <SpaLink 
                            href="/services" 
                            class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
                            active_class="bg-blue-100 text-blue-700"
                            on:click=move |_| {
                                set_current_path.set("/services".to_string());
                                set_mobile_menu_open.set(false);
                            }
                        >
                            "⚙️ Services"
                        </SpaLink>
                        
                        <SpaLink 
                            href="/blog" 
                            class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
                            active_class="bg-blue-100 text-blue-700"
                            on:click=move |_| {
                                set_current_path.set("/blog".to_string());
                                set_mobile_menu_open.set(false);
                            }
                        >
                            "📝 Blog"
                        </SpaLink>
                        
                        <SpaLink 
                            href="/contact" 
                            class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
                            active_class="bg-blue-100 text-blue-700"
                            on:click=move |_| {
                                set_current_path.set("/contact".to_string());
                                set_mobile_menu_open.set(false);
                            }
                        >
                            "📞 Contact"
                        </SpaLink>
                    </div>
                    
                    // Mobile language selector
                    <div class="pt-4 mt-4 border-t border-gray-200">
                        <h4 class="text-sm font-medium text-gray-900 mb-2">"Language"</h4>
                        <LanguageSelector 
                            current_lang=current_language
                            available_langs=available_languages.clone()
                            on_change=move |new_lang| {
                                set_current_language.set(new_lang.clone());
                                set_mobile_menu_open.set(false);
                            }
                        />
                    </div>
                </div>
            </MobileMenu>

            // Main content showcasing current navigation state
            <main class="container mx-auto px-4 py-8">
                <UnifiedContentCard 
                    title="Navigation Demo"
                    subtitle="Interactive navigation component showcase"
                >
                    <div class="space-y-6">
                        <div>
                            <h3 class="text-lg font-semibold mb-2">"Current State"</h3>
                            <div class="bg-gray-100 p-4 rounded-lg">
                                <p><strong>"Active Page:"</strong> {move || current_path.get()}</p>
                                <p><strong>"Current Language:"</strong> {move || current_language.get()}</p>
                                <p><strong>"Mobile Menu:"</strong> {move || if mobile_menu_open.get() { "Open" } else { "Closed" }}</p>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-semibold mb-2">"Features Demonstrated"</h3>
                            <ul class="list-disc list-inside space-y-2 text-gray-700">
                                <li>"Responsive navigation (desktop horizontal, mobile slide-out)"</li>
                                <li>"Active state management with visual indicators"</li>
                                <li>"Language switching with state persistence"</li>
                                <li>"Mobile menu toggle with overlay"</li>
                                <li>"SPA-aware navigation links"</li>
                                <li>"Keyboard navigation support"</li>
                                <li>"Accessible ARIA attributes"</li>
                            </ul>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-semibold mb-2">"Try It Out"</h3>
                            <div class="grid md:grid-cols-2 gap-4">
                                <div class="space-y-2">
                                    <p class="font-medium">"Desktop Navigation:"</p>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li>"• Click navigation items to see active states"</li>
                                        <li>"• Switch languages to see state changes"</li>
                                        <li>"• Resize window to see responsive behavior"</li>
                                    </ul>
                                </div>
                                <div class="space-y-2">
                                    <p class="font-medium">"Mobile Navigation:"</p>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li>"• Use hamburger menu on small screens"</li>
                                        <li>"• Test slide-out navigation"</li>
                                        <li>"• Try mobile language switching"</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </UnifiedContentCard>
                
                // Demonstration pages content
                <div class="mt-8 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {move || {
                        match current_path.get().as_str() {
                            "/" => view! {
                                <UnifiedContentCard title="Home Page">
                                    <p>"Welcome to the navigation demo home page. This content changes based on the active navigation item."</p>
                                </UnifiedContentCard>
                            }.into_view(),
                            
                            "/products" => view! {
                                <UnifiedContentCard title="Products">
                                    <p>"Product catalog and listings would appear here."</p>
                                </UnifiedContentCard>
                            }.into_view(),
                            
                            "/services" => view! {
                                <UnifiedContentCard title="Services">
                                    <p>"Service offerings and descriptions would be shown here."</p>
                                </UnifiedContentCard>
                            }.into_view(),
                            
                            "/blog" => view! {
                                <UnifiedContentCard title="Blog">
                                    <p>"Blog posts and articles would be listed here."</p>
                                </UnifiedContentCard>
                            }.into_view(),
                            
                            "/contact" => view! {
                                <UnifiedContentCard title="Contact">
                                    <p>"Contact information and forms would be available here."</p>
                                </UnifiedContentCard>
                            }.into_view(),
                            
                            _ => view! {
                                <UnifiedContentCard title="Page Not Found">
                                    <p>"This page doesn't exist in the demo."</p>
                                </UnifiedContentCard>
                            }.into_view(),
                        }
                    }}
                </div>
            </main>

            // Footer with additional navigation
            <Footer 
                copyright="© 2024 Rustelo Navigation Demo"
                class="bg-white border-t"
            >
                <div class="flex flex-wrap justify-center space-x-6 text-sm">
                    <SpaLink href="/privacy" class="text-gray-600 hover:text-gray-800">
                        "Privacy Policy"
                    </SpaLink>
                    <SpaLink href="/terms" class="text-gray-600 hover:text-gray-800">
                        "Terms of Service"
                    </SpaLink>
                    <SpaLink href="/accessibility" class="text-gray-600 hover:text-gray-800">
                        "Accessibility"
                    </SpaLink>
                    <SpaLink href="/sitemap" class="text-gray-600 hover:text-gray-800">
                        "Sitemap"
                    </SpaLink>
                </div>
            </Footer>
        </div>
    }
}

/*
This example demonstrates:

✅ **Responsive Navigation**
- Desktop horizontal navigation menu
- Mobile slide-out menu with overlay
- Automatic responsive behavior

✅ **Active State Management** 
- Visual indicators for current page
- Consistent styling across components
- State synchronization

✅ **Language Switching**
- Multi-language support
- State persistence across navigation
- Integration with i18n systems

✅ **Mobile UX**
- Touch-friendly mobile menu toggle
- Slide-out navigation with proper animations
- Mobile-optimized layout and spacing

✅ **Accessibility Features**
- ARIA attributes for screen readers
- Keyboard navigation support
- Focus management and indicators

✅ **SPA Navigation**
- Client-side routing with SpaLink
- No page reloads for navigation
- Fast navigation between pages

To use in your application:
1. Import the NavigationDemo component
2. Customize the navigation items for your needs
3. Replace demo content with real pages
4. Add your brand colors and styling
5. Integrate with your routing system

The component is fully self-contained and can be used as-is
or customized for your specific navigation requirements.
*/