//! Unified PostViewer Page Component

use leptos::prelude::*;
use rustelo_core_lib::i18n::content_helper::create_content_provider;

#[component]
pub fn PostViewerPage(
    _language: String,
    #[prop(optional)] slug: Option<String>,
    #[prop(default = "content".to_string())] content_type: String,
) -> impl IntoView {
    #[cfg(not(target_arch = "wasm32"))]
    {
        view! { <crate::post_viewer::ssr::PostViewerPageSSR _language=_language.clone() slug=slug.unwrap_or_default() content_type=content_type /> }
    }
    #[cfg(target_arch = "wasm32")]
    {
        view! { <crate::post_viewer::client::PostViewerPageClient _language=_language.clone() slug=slug.unwrap_or_default() content_type=content_type /> }
    }
}

#[component]
pub fn UnifiedPostViewerPage(
    #[allow(unused_variables)]
    #[prop(default = rustelo_core_lib::config::get_default_language().to_string())]
    _language: String,
    #[prop(optional)] lang_content: Option<std::collections::HashMap<String, String>>,
    #[allow(unused_variables)]
    #[prop(default = "content".to_string())]
    content_type: String,
    #[allow(unused_variables)]
    #[prop(default = "".to_string())]
    slug: String,
) -> impl IntoView {
    // Clean closure pattern that works with Leptos ownership model
    // Use DRY content accessor helper
    let content = create_content_provider(lang_content.clone());

    // Create safe accessors that avoid hydration mismatches
    let post_title = content.t_quiet("post-title");
    let post_subtitle = content.t_quiet("post-subtitle");
    let post_content = content.t_quiet("post-content");

    // Check if we have actual content or if this might be a 404
    let has_content = !post_title.is_empty() || !post_content.is_empty();

    view! {
      <div class="ds-bg-page">
        <section
          class="relative py-ds-4 ds-container ds-rounded-lg ds-shadow-lg"
          class:hidden={!has_content}
          id="title-section"
        >
          <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">
              {post_title}
            </h1>
            <div class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto">
              {post_subtitle}
            </div>
          </div>
        </section>

        <section
          class="py-ds-6 px-ds-4 ds-bg ds-rounded-lg"
          class:hidden={!has_content}
        >
          <div class="ds-container-lg ds-container">
            <div class="max-w-4xl mx-auto">
              <div class="ds-text-secondary space-y-4">
                <div inner_html={post_content}></div>
              </div>
            </div>
          </div>
        </section>

        <div
          class="py-ds-8"
          class:hidden={has_content}
        >
          <div class="ds-container max-w-4xl mx-auto text-center">
            <div class="ds-text-secondary">
              "Loading..."
            </div>
          </div>
        </div>
      </div>
    }
}
