use leptos::prelude::*;

#[component]
pub fn Logo(
    #[prop(default = "horizontal".to_string())] orientation: String,
    #[prop(default = "normal".to_string())] size: String,
    #[prop(default = true)] show_text: bool,
    #[prop(default = "".to_string())] class: String,
    #[prop(default = false)] dark_theme: bool,
) -> impl IntoView {
    let logo_path = move || {
        let base_path = "/logos/";

        if !show_text {
            format!("{}rustelo-imag.svg", base_path)
        } else {
            match (orientation.as_str(), dark_theme) {
                ("horizontal", false) => format!("{}rustelo_dev-logo-h.svg", base_path),
                ("horizontal", true) => format!("{}rustelo_dev-logo-b-h.svg", base_path),
                ("vertical", false) => format!("{}rustelo_dev-logo-v.svg", base_path),
                ("vertical", true) => format!("{}rustelo_dev-logo-b-v.svg", base_path),
                _ => format!("{}rustelo_dev-logo-h.svg", base_path),
            }
        }
    };

    let size_class = match size.as_str() {
        "small" => "h-8 w-auto",
        "medium" => "h-12 w-auto",
        "large" => "h-16 w-auto",
        "xlarge" => "h-20 w-auto",
        _ => "h-10 w-auto",
    };

    let combined_class = format!("{} {}", size_class, class);

    view! {
        <img
            src=logo_path
            alt="RUSTELO"
            class=combined_class
            loading="lazy"
        />
    }
}

#[component]
pub fn LogoLink(
    #[prop(default = "horizontal".to_string())] orientation: String,
    #[prop(default = "normal".to_string())] size: String,
    #[prop(default = true)] show_text: bool,
    #[prop(default = "".to_string())] class: String,
    #[prop(default = "/".to_string())] href: String,
    #[prop(default = false)] dark_theme: bool,
) -> impl IntoView {
    view! {
        <a
            href=href.clone()
            class="inline-block transition-opacity duration-200 hover:opacity-80"
            title="RUSTELO - Home"
        >
            <Logo
                orientation=orientation
                size=size
                show_text=show_text
                class=class
                dark_theme=dark_theme
            />
        </a>
    }
}

#[component]
pub fn BrandHeader(
    #[prop(default = "RUSTELO".to_string())] title: String,
    #[prop(default = "".to_string())] subtitle: String,
    #[prop(default = "medium".to_string())] logo_size: String,
    #[prop(default = "".to_string())] class: String,
    #[prop(default = false)] dark_theme: bool,
) -> impl IntoView {
    let base_class = "flex items-center gap-4";
    let combined_class = if class.is_empty() {
        base_class.to_string()
    } else {
        format!("{} {}", base_class, class)
    };

    view! {
        <div class=combined_class>
            <Logo
                orientation="horizontal".to_string()
                size=logo_size
                show_text=false
                class="flex-shrink-0".to_string()
                dark_theme=dark_theme
            />
            <div class="flex flex-col">
                <h1 class="text-xl font-bold text-gray-900 dark:text-white">{title}</h1>
                {(!subtitle.is_empty()).then(|| view! {
                    <p class="text-sm text-gray-600 dark:text-gray-400">{subtitle}</p>
                })}
            </div>
        </div>
    }
}

#[component]
pub fn NavbarLogo(
    #[prop(default = "small".to_string())] size: String,
    #[prop(default = "".to_string())] class: String,
    #[prop(default = false)] dark_theme: bool,
) -> impl IntoView {
    let nav_class = format!(
        "font-sans antialiased text-sm text-current ml-2 mr-2 block py-1 font-semibold {}",
        class
    );

    view! {
        <LogoLink
            orientation="horizontal".to_string()
            size=size
            show_text=true
            class=nav_class
            href="/".to_string()
            dark_theme=dark_theme
        />
    }
}
