//! Unified logo component interface using shared delegation patterns
//!
//! This module provides a unified interface that automatically selects between
//! client-side reactive and server-side static implementations based on
//! context.

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

/// Simple Logo component that displays just the image
#[component]
pub fn Logo(
    config: LogoConfig,
    #[prop(default = "h-8 w-auto".to_string())] class: String,
    #[prop(default = false)] as_link: bool,
) -> impl IntoView {
    let logo_config = config;

    // Build size classes from config
    let mut size_classes = String::new();
    if let (Some(width), Some(height)) = (&logo_config.width, &logo_config.height) {
        size_classes = format!("w-[{}px] h-[{}px]", width, height);
    }

    let img_classes = if size_classes.is_empty() {
        class.clone()
    } else {
        format!("{} {}", size_classes, class)
    };

    // Always render the same structure to avoid hydration mismatch
    let logo_image = view! {
        <img src={logo_config.light_src.clone()}
             alt={logo_config.alt.clone()}
             class={
                if logo_config.has_dark_variant() {
                    format!("{} dark:hidden", img_classes)
                } else {
                    img_classes.clone()
                }
             } />
        <img src={logo_config.dark_src.clone()}
             alt={logo_config.alt.clone()}
             class={
                if logo_config.has_dark_variant() {
                    format!("{} hidden dark:block", img_classes)
                } else {
                    "hidden".to_string()
                }
             } />
    }
    .into_any();

    if as_link {
        view! {
            <a href={logo_config.href} class="block">
                {logo_image}
            </a>
        }
        .into_any()
    } else {
        logo_image
    }
}

/// Logo Link component - Logo wrapped in a link
#[component]
pub fn LogoLink(
    config: LogoConfig,
    #[prop(default = "h-8 w-auto".to_string())] class: String,
) -> impl IntoView {
    view! {
        <Logo config=config class=class as_link=true />
    }
}

/// Legacy UnifiedProjectLogo component for backward compatibility
#[component]
pub fn UnifiedProjectLogo(
    light_src: String,
    dark_src: String,
    alt: String,
    href: String,
) -> impl IntoView {
    let config = LogoConfig {
        light_src,
        dark_src,
        alt,
        href,
        show_in_nav: true,
        show_in_footer: true,
        width: None,
        height: None,
    };

    view! {
        <LogoLink config=config class="h-28 w-28 hover:scale-105 transition-transform".to_string() />
    }
}
