use leptos::prelude::*;
use leptos_router::hooks::use_location;

/// Navigation link that highlights when active
#[component]
pub fn NavLink(
    #[prop(into)] href: String,
    #[prop(into)] label: String,
    #[prop(optional, into)] icon: Option<String>,
) -> impl IntoView {
    let location = use_location();
    let href_clone = href.clone();

    // Check if current path matches the href
    let is_active = move || {
        let pathname = location.pathname.get();
        pathname == href_clone || pathname.starts_with(&format!("{}/", href_clone))
    };

    let active_style = move || {
        if is_active() {
            "display: block; padding: 10px 15px; color: white; text-decoration: none; \
             border-radius: 6px; background: #3b82f6; font-weight: 600;"
                .to_string()
        } else {
            "display: block; padding: 10px 15px; color: white; text-decoration: none; \
             border-radius: 6px; transition: background 0.2s;"
                .to_string()
        }
    };

    let icon_text = icon.unwrap_or_else(|| "•".to_string());
    let display_text = format!("{} {}", icon_text, label);

    view! {
        <li style="margin-bottom: 5px;">
            <a href=href style=active_style>
                {display_text}
            </a>
        </li>
    }
}

/// Breadcrumb navigation component
#[component]
pub fn Breadcrumb(#[prop(into)] items: Vec<(String, String)>) -> impl IntoView {
    view! {
        <nav class="breadcrumb" style="display: flex; align-items: center; gap: 8px; padding: 12px 0; font-size: 0.9rem; color: #6b7280;">
            {items.into_iter().enumerate().map(|(idx, (label, href))| {
                view! {
                    <>
                        {if idx > 0 {
                            view! { <span style="color: #d1d5db;">"/"</span> }.into_any()
                        } else {
                            view! { <span></span> }.into_any()
                        }}
                        <a href=href style="color: #3b82f6; text-decoration: none;">
                            {label}
                        </a>
                    </>
                }
            }).collect_view()}
        </nav>
    }
}

/// Page header with title and breadcrumbs
#[component]
pub fn PageHeader(
    #[prop(into)] title: String,
    #[prop(optional, into)] subtitle: Option<String>,
    #[prop(optional)] breadcrumbs: Option<Vec<(String, String)>>,
) -> impl IntoView {
    view! {
        <div style="padding: 24px; background: white; border-bottom: 1px solid #e5e7eb; margin-bottom: 24px;">
            {breadcrumbs.as_ref().map(|crumbs| {
                view! {
                    <Breadcrumb items=crumbs.clone() />
                }
            })}

            <h1 style="font-size: 2rem; font-weight: 700; color: #111827; margin: 12px 0 0 0;">
                {title}
            </h1>

            {subtitle.as_ref().map(|sub| {
                view! {
                    <p style="color: #6b7280; margin: 8px 0 0 0;">
                        {sub.clone()}
                    </p>
                }
            })}
        </div>
    }
}
