use leptos::prelude::*;
use leptos_router::components::A;

use crate::store::use_sidebar_collapsed;

#[component]
pub fn Sidebar() -> impl IntoView {
    let (sidebar_collapsed, set_sidebar_collapsed) = use_sidebar_collapsed();

    let nav_items = vec![
        ("Dashboard", "/dashboard", "📊"),
        ("Servers", "/servers", "🖥️"),
        ("Clusters", "/clusters", "☸️"),
        ("TaskServs", "/taskservs", "⚙️"),
        ("Workflows", "/workflows", "🔄"),
        ("Settings", "/settings", "⚙️"),
    ];

    view! {
        <aside class=move || format!(
            "sidebar bg-base-200 text-base-content transition-all duration-300 {}",
            if sidebar_collapsed.get() { "sidebar-collapsed" } else { "sidebar-expanded" }
        )>
            // Logo and toggle
            <div class="p-4 border-b border-base-300">
                <div class="flex items-center justify-between">
                    <Show when=move || !sidebar_collapsed.get()>
                        <h1 class="text-xl font-bold text-primary">"Control Center"</h1>
                    </Show>
                    <button
                        class="btn btn-ghost btn-sm btn-square"
                        on:click=move |_| set_sidebar_collapsed.set(!sidebar_collapsed.get())
                    >
                        {move || if sidebar_collapsed.get() { "→" } else { "←" }}
                    </button>
                </div>
            </div>

            // Navigation
            <nav class="flex-1 p-2">
                <ul class="menu">
                    {nav_items.into_iter().map(|(label, href, icon)| {
                        view! {
                            <li>
                                <a href=href class="nav-item">
                                    <span class="nav-item-icon">{icon}</span>
                                    <Show when=move || !sidebar_collapsed.get()>
                                        <span class="nav-item-text">{label}</span>
                                    </Show>
                                </a>
                            </li>
                        }
                    }).collect::<Vec<_>>()}
                </ul>
            </nav>

            // Footer
            <div class="p-4 border-t border-base-300">
                <Show when=move || !sidebar_collapsed.get()>
                    <div class="text-xs text-base-content/60">
                        "Control Center UI v1.0.0"
                    </div>
                </Show>
            </div>
        </aside>
    }
}
