use leptos::prelude::*;
use rustelo_content::rustelo_core_lib::i18n::content_helper::create_content_provider_reactive;

use super::GraphView;

/// Full-page knowledge graph.
///
/// Renders the interactive Cytoscape graph with a title and description.
/// When `node_id` is provided the graph opens centred on that node (ego view).
#[component]
pub fn UnifiedContentGraphPage(
    #[prop(default = rustelo_content::rustelo_core_lib::config::get_default_language().to_string())]
    _language: String,
    #[prop(optional)] lang_content: Option<std::collections::HashMap<String, String>>,
    #[prop(optional)] node_id: Option<String>,
) -> impl IntoView {
    let content = create_content_provider_reactive(lang_content);

    // Detect current theme from the <html> `data-theme` attribute.
    // Falls back to "light" — the Cytoscape shim reads `data-theme` on the
    // container anyway, so this default is only used for the prop.
    let theme = {
        #[cfg(target_arch = "wasm32")]
        {
            web_sys::window()
                .and_then(|w| w.document())
                .and_then(|d| d.document_element())
                .and_then(|el| el.get_attribute("data-theme"))
                .unwrap_or_else(|| "light".to_string())
        }
        #[cfg(not(target_arch = "wasm32"))]
        {
            "light".to_string()
        }
    };

    view! {
        <div class="ds-bg-page min-h-screen">
            <div class="ds-container py-ds-8 space-y-6">
                <div class="text-center space-y-2">
                    <h1 class="text-3xl font-bold ds-text">
                        {content.t("content-graph-title")}
                    </h1>
                    <p class="ds-body ds-text-secondary max-w-2xl mx-auto">
                        {content.t("content-graph-subtitle")}
                    </p>
                </div>
                <GraphView node_id=node_id.unwrap_or_default() theme=theme />
                <p class="text-xs ds-text-secondary text-center">
                    {content.t("content-graph-hint")}
                </p>
            </div>
        </div>
    }
}
