//! MNOTE 思维导图页面组件 (SSR)
//!
//! 提供思维导图页面的服务器端渲染壳。
//! 外部手写 `<body>` 包装和 `<script>` 数据嵌入由路由 handler 处理。

use super::layout::PageLayout;
use leptos::prelude::*;

/// MNOTE 思维导图页面
///
/// 渲染思维导图的 SSR 壳结构：
/// - `<main id="mnote-mindmap-shell" data-object-shell="mindmap">`
/// - 思维导图标题区域
/// - leptos-mindmap / simple-mind-map adapter 挂载占位区
#[component]
pub fn MindmapPage(
    /// 文档 ID
    document_id: String,
    /// 思维导图 ID
    mindmap_id: String,
    /// 页面标题
    title: String,
    /// 侧栏页面树 HTML
    #[prop(optional)]
    sidebar_tree_html: Option<String>,
    /// 工作区名称
    #[prop(optional)]
    workspace_name: Option<String>,
    /// workspace shell 侧栏 sections HTML
    #[prop(optional)]
    workspace_sidebar_html: Option<String>,
) -> impl IntoView {
    let object_identity = format!("resource:mindmap:{document_id}:{mindmap_id}");
    view! {
        <PageLayout
            current_nav="documents"
            sidebar_tree_html={sidebar_tree_html.unwrap_or_default()}
            workspace_name={workspace_name.unwrap_or_default()}
            workspace_sidebar_html={workspace_sidebar_html.unwrap_or_default()}
            topbar_title={title.clone()}
        >
            <main
                id="mnote-mindmap-shell"
                data-object-shell="mindmap"
                data-mnote-object-editor="mindmap"
                data-mnote-object-identity={object_identity}
                data-document-id={document_id}
                data-mindmap-id={mindmap_id}
            >
                <header>
                    <h1>{title}</h1>
                </header>
                <section
                    id="mnote-mindmap-island"
                    data-leptos-mindmap-island="standalone"
                    data-runtime="simple-mind-map"
                    data-projection-query="mindmap.simple_mind_map_scene.get"
                    data-command-name="mindmap.command.apply"
                ></section>
            </main>
        </PageLayout>
    }
}
