//! Client-side Unified Content Category page component
//!
//! Reactive implementation with automatic content type detection and i18n
//! pattern discovery.

use leptos::prelude::*;
use reactive_graph::traits::Get;
use rustelo_components_leptos::content::UnifiedContentGrid;
use rustelo_core_lib::state::use_language;

use crate::common::use_page_i18n_dynamic;

/// Client-side reactive Unified Content Category page component
#[component]
pub fn ContentCategoryPageClient(
    content_type: String,
    category: String,
    _language: String,
) -> impl IntoView {
    // Use provided content type directly
    let resolved_content_type = content_type;
    let resolved_category = category;

    // Get language context outside the memo to ensure we track the same instance
    let _language_context = use_language();
    // Clone values for memo closure
    let category_for_memo = resolved_category.clone();

    let content_type_for_memo = resolved_content_type.clone();
    let content_type_for_data = resolved_content_type.clone();

    // Use the new helper function for i18n patterns - replaces 10+ lines of
    // boilerplate!
    let page_content = use_page_i18n_dynamic(vec!["content-", "nav-"], move || {
        vec![format!("{}-", content_type_for_memo)]
    });

    // Make other data reactive to language changes
    let content_data = Memo::new(move |_| {
        let language_context = use_language();
        let _current_language = language_context.current.get();

        // Generate category-specific keys first, fallback to generic keys
        let category_title_key =
            format!("{}-cat-{}-title", content_type_for_data, category_for_memo);
        let category_desc_key = format!("{}-cat-{}-desc", content_type_for_data, category_for_memo);
        let page_title_key = format!("{}-category-page-title", content_type_for_data);
        let page_description_key = format!("{}-category-page-description", content_type_for_data);

        // Get category display name for fallback
        let category_display =
            rustelo_core_lib::content_resolver::get_content_type_display_name(&category_for_memo);

        (
            category_title_key,
            category_desc_key,
            page_title_key,
            page_description_key,
            category_display,
        )
    });

    // Use a stable initial render to prevent hydration mismatches
    let stable_title = format!("{} Category", resolved_category);
    let stable_description = "Loading category content...".to_string();

    // Access reactive data inside the view to maintain proper reactive context
    move || {
        view! {
            <div class="ds-bg-page">
                // Hero section with category
                <section class="py-ds-4 ds-container ds-rounded-lg ds-shadow-lg">
                    <div class="mx-auto max-w-4xl text-center">
                        <h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-6xl mb-ds-4">
                            {
                                // Use stable title initially to prevent hydration mismatch
                                if !cfg!(target_arch = "wasm32") {
                                    stable_title.clone()
                                } else {
                                    let page_content_data = page_content.get();
                                    let (category_title_key, _category_desc_key, page_title_key, _page_description_key, category_display) = content_data.get();

                                    // Try category-specific title first, fallback to generic + category name
                                    let category_title = page_content_data
                                        .get(&category_title_key)
                                        .cloned()
                                        .unwrap_or_default();

                                    if !category_title.is_empty() {
                                        category_title
                                    } else {
                                        let generic_title = page_content_data
                                            .get(&page_title_key)
                                            .cloned()
                                            .unwrap_or_default();
                                        if !generic_title.is_empty() {
                                            format!("{} - {}", generic_title, category_display)
                                        } else {
                                            stable_title.clone()
                                        }
                                    }
                                }
                            }
                        </h1>
                        <p class="ds-text-secondary ds-body max-w-2xl mx-auto">
                            {
                                // Use stable description initially to prevent hydration mismatch
                                if !cfg!(target_arch = "wasm32") {
                                    stable_description.clone()
                                } else {
                                    let page_content_data = page_content.get();
                                    let (_category_title_key, category_desc_key, _page_title_key, page_description_key, _category_display) = content_data.get();

                                    // Try category-specific description first, fallback to generic
                                    let category_description = page_content_data
                                        .get(&category_desc_key)
                                        .cloned()
                                        .unwrap_or_default();

                                    if !category_description.is_empty() {
                                        category_description
                                    } else {
                                        let generic_description = page_content_data
                                            .get(&page_description_key)
                                            .cloned()
                                            .unwrap_or_default();
                                        if !generic_description.is_empty() {
                                            generic_description
                                        } else {
                                            stable_description.clone()
                                        }
                                    }
                                }
                            }
                        </p>
                    </div>
                </section>

                // Filtered content grid
                <section class="py-ds-6">
                    <div class="ds-container">
                        <UnifiedContentGrid
                            content_type=resolved_content_type.clone()
                            language=_language.clone()
                            show_categories=true
                            category_filter=resolved_category.clone()
                            limit=12
                        />
                    </div>
                </section>
            </div>
        }
    }
}
