//! Layout components.

use leptos::prelude::*;

/// Main page layout wrapper.
#[component]
pub fn PageLayout(children: Children) -> impl IntoView {
    view! {
        <div class="min-h-screen bg-gray-900 text-white flex flex-col overflow-x-hidden">
            <Header />
            <main class="flex-1">{children()}</main>
            <Footer />
        </div>
    }
}

/// Simple site header for non-realm pages.
#[component]
pub fn Header() -> impl IntoView {
    view! {
        <header class="bg-gray-800 border-b border-gray-700">
            <nav class="px-4" aria-label="Main navigation">
                <div class="flex items-center h-16">
                    <a
                        href="/"
                        class="flex items-center space-x-2 text-xl font-bold text-white hover:text-blue-400 transition-colors"
                    >
                        <img src="/icons/castle.svg" alt="" class="w-6 h-6" aria-hidden="true" />
                        <span>"Chattyness"</span>
                    </a>
                </div>
            </nav>
        </header>
    }
}

/// Realm-specific header with realm/scene info and user actions.
#[component]
pub fn RealmHeader(
    realm_name: String,
    realm_slug: String,
    realm_description: Option<String>,
    scene_name: String,
    scene_description: Option<String>,
    online_count: Signal<i32>,
    total_members: i32,
    max_capacity: i32,
    can_admin: bool,
    on_logout: Callback<()>,
) -> impl IntoView {
    let stats_tooltip = format!("Members: {} / Max: {}", total_members, max_capacity);
    let online_text = move || format!("{} ONLINE", online_count.get());
    let admin_url = format!("/admin/realms/{}", realm_slug);

    view! {
        <header class="bg-gray-800 border-b border-gray-700">
            <div class="flex items-center justify-between h-16 px-4">
                // Left side: Logo + Realm/Scene info
                <div class="flex items-center gap-4">
                    <a
                        href="/"
                        class="flex items-center space-x-2 text-xl font-bold text-white hover:text-blue-400 transition-colors"
                    >
                        <img src="/icons/castle.svg" alt="" class="w-6 h-6" aria-hidden="true" />
                        <span>"Chattyness"</span>
                    </a>
                    <span class="text-gray-500">"|"</span>
                    <span
                        class="text-white font-medium cursor-default"
                        title=realm_description.unwrap_or_default()
                    >
                        {realm_name}
                    </span>
                    <span class="text-gray-500">"/"</span>
                    <span
                        class="text-gray-300 cursor-default"
                        title=scene_description.unwrap_or_default()
                    >
                        {scene_name}
                    </span>
                </div>

                // Right side: Stats + Actions
                <div class="flex items-center gap-4">
                    <span class="text-green-400 font-medium cursor-default" title=stats_tooltip>
                        {online_text}
                    </span>
                    <button
                        type="button"
                        class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
                        on:click=move |_| on_logout.run(())
                    >
                        "Logout"
                    </button>
                    {can_admin.then(|| {
                        view! {
                            <a
                                href=admin_url
                                class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
                            >
                                "Admin"
                            </a>
                        }
                    })}
                </div>
            </div>
        </header>
    }
}

/// Site footer.
#[component]
pub fn Footer() -> impl IntoView {
    view! {
        <footer class="bg-gray-800 border-t border-gray-700 py-8">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row items-center justify-between">
                    <p class="text-gray-400 text-sm">
                        "Built with "
                        <a
                            href="https://leptos.dev"
                            class="text-blue-400 hover:underline"
                            target="_blank"
                            rel="noopener"
                        >
                            "Leptos"
                        </a>
                        " and "
                        <a
                            href="https://www.rust-lang.org"
                            class="text-blue-400 hover:underline"
                            target="_blank"
                            rel="noopener"
                        >
                            "Rust"
                        </a>
                        "."
                    </p>
                    <nav class="flex items-center space-x-4 mt-4 md:mt-0" aria-label="Footer navigation">
                        <a
                            href="/about"
                            class="text-gray-400 hover:text-white text-sm transition-colors"
                        >
                            "About"
                        </a>
                        <a
                            href="/privacy"
                            class="text-gray-400 hover:text-white text-sm transition-colors"
                        >
                            "Privacy"
                        </a>
                        <a
                            href="/terms"
                            class="text-gray-400 hover:text-white text-sm transition-colors"
                        >
                            "Terms"
                        </a>
                    </nav>
                </div>
            </div>
        </footer>
    }
}

/// Simple centered layout for forms and dialogs.
#[component]
pub fn CenteredLayout(children: Children) -> impl IntoView {
    view! {
        <div class="min-h-screen bg-gray-900 flex items-center justify-center p-4">
            {children()}
        </div>
    }
}

/// Card container.
#[component]
pub fn Card(#[prop(optional)] class: &'static str, children: Children) -> impl IntoView {
    let base_class = "bg-gray-800 rounded-lg shadow-xl";
    let combined_class = if class.is_empty() {
        base_class.to_string()
    } else {
        format!("{} {}", base_class, class)
    };

    view! { <div class=combined_class>{children()}</div> }
}

/// Scene thumbnail component.
#[component]
pub fn SceneThumbnail(scene: chattyness_db::models::SceneSummary) -> impl IntoView {
    let background_style = match (&scene.background_image_path, &scene.background_color) {
        (Some(path), _) => format!(
            "background-image: url('{}'); background-size: cover; background-position: center;",
            path
        ),
        (None, Some(color)) => format!("background-color: {};", color),
        (None, None) => "background-color: #1a1a2e;".to_string(),
    };

    view! {
        <Card class="overflow-hidden">
            <div class="h-32 w-full" style=background_style></div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-white">{scene.name}</h3>
                <p class="text-gray-400 text-sm">"/" {scene.slug}</p>
                <div class="flex items-center gap-2 mt-2">
                    {scene.is_entry_point.then(|| view! {
                        <span class="text-xs px-2 py-0.5 bg-green-600 rounded">"Entry"</span>
                    })}
                    {scene.is_hidden.then(|| view! {
                        <span class="text-xs px-2 py-0.5 bg-gray-600 rounded">"Hidden"</span>
                    })}
                </div>
            </div>
        </Card>
    }
}
