use crate::app::AppState;
use crate::context::RequestContext;
use crate::error::WebError;
use crate::routes::documents::{
    content as document_content, meta as document_meta, DocumentContentQuery, DocumentMetaQuery,
};
use axum::extract::{Extension, Json, Query, State};
use axum::http::{header, HeaderValue, StatusCode};
use axum::response::{Html, IntoResponse, Response};
use mnote_editor_core::{BlockType, DocumentBlock, DocumentModel, EditorCommand, EditorSession};
use serde::{Deserialize, Serialize};
use serde_json::{json, Value};

#[derive(Debug, Deserialize)]
#[serde(rename_all = "camelCase")]
pub struct DocumentEditorShellQuery {
    pub document_id: String,
    pub workspace_id: Option<String>,
    pub host: Option<String>,
}

#[derive(Debug, Clone, Serialize, Deserialize)]
#[serde(rename_all = "camelCase")]
pub struct RuntimeShellBlockWire {
    pub id: String,
    pub block_type: String,
    pub parent_id: Option<String>,
    pub depth: u16,
    #[serde(default)]
    pub text: String,
    pub heading_level: Option<u8>,
    pub checked: Option<bool>,
    #[serde(default)]
    pub collapsed: bool,
    #[serde(default)]
    pub editable: bool,
    #[serde(default)]
    pub raw_type: String,
    pub language: Option<String>,
    #[serde(default)]
    pub raw_block: Value,
}

#[derive(Debug, Deserialize)]
#[serde(rename_all = "camelCase")]
pub struct RuntimeTransformRequest {
    pub document_id: String,
    pub workspace_id: Option<String>,
    pub snapshot: RuntimeTransformSnapshotRequest,
    pub command: RuntimeTransformCommandRequest,
}

#[derive(Debug, Deserialize)]
#[serde(rename_all = "camelCase")]
pub struct RuntimeTransformSnapshotRequest {
    pub blocks: Vec<RuntimeShellBlockWire>,
}

#[derive(Debug, Deserialize)]
#[serde(rename_all = "snake_case", tag = "action")]
pub enum RuntimeTransformCommandRequest {
    SetBlockType {
        block_id: String,
        block_type: String,
    },
    SplitBlock {
        block_id: String,
        offset: usize,
        new_block_id: String,
    },
    MergeWithPrevious {
        block_id: String,
    },
    IndentBlock {
        block_id: String,
    },
    OutdentBlock {
        block_id: String,
    },
    ToggleHeadingCollapse {
        block_id: String,
    },
}

fn escape_html(input: &str) -> String {
    input
        .replace('&', "&amp;")
        .replace('<', "&lt;")
        .replace('>', "&gt;")
        .replace('"', "&quot;")
        .replace('\'', "&#39;")
}

fn escape_inline_json(input: &str) -> String {
    input
        .replace('&', "\\u0026")
        .replace('<', "\\u003c")
        .replace('>', "\\u003e")
}

fn read_non_empty_string(value: &Value, keys: &[&str]) -> Option<String> {
    let map = value.as_object()?;
    for key in keys {
        let candidate = map
            .get(*key)
            .and_then(Value::as_str)
            .map(str::trim)
            .unwrap_or("");
        if !candidate.is_empty() {
            return Some(candidate.to_string());
        }
    }
    None
}

fn read_bool(value: &Value, keys: &[&str], default: bool) -> bool {
    let Some(map) = value.as_object() else {
        return default;
    };
    for key in keys {
        if let Some(flag) = map.get(*key).and_then(Value::as_bool) {
            return flag;
        }
    }
    default
}

fn read_u64(value: &Value, keys: &[&str], default: u64) -> u64 {
    let Some(map) = value.as_object() else {
        return default;
    };
    for key in keys {
        if let Some(number) = map.get(*key).and_then(Value::as_u64) {
            return number;
        }
    }
    default
}

fn read_non_empty_prop_string(value: &Value, key: &str) -> Option<String> {
    value
        .get("props")
        .and_then(Value::as_object)
        .and_then(|props| props.get(key))
        .and_then(Value::as_str)
        .map(str::trim)
        .filter(|item| !item.is_empty())
        .map(ToOwned::to_owned)
}

fn read_prop_bool(value: &Value, key: &str) -> Option<bool> {
    value
        .get("props")
        .and_then(Value::as_object)
        .and_then(|props| props.get(key))
        .and_then(Value::as_bool)
}

fn read_prop_u8(value: &Value, key: &str) -> Option<u8> {
    value
        .get("props")
        .and_then(Value::as_object)
        .and_then(|props| props.get(key))
        .and_then(Value::as_u64)
        .and_then(|item| u8::try_from(item).ok())
}

fn get_inline_text(value: &Value) -> String {
    match value {
        Value::String(text) => text.clone(),
        Value::Array(items) => items
            .iter()
            .map(|item| match item {
                Value::String(text) => text.clone(),
                Value::Object(map) => {
                    if let Some(text) = map.get("text").and_then(Value::as_str) {
                        return text.to_string();
                    }
                    if let Some(content) = map.get("content") {
                        return get_inline_text(content);
                    }
                    String::new()
                }
                _ => String::new(),
            })
            .collect::<Vec<String>>()
            .join(""),
        _ => String::new(),
    }
}

fn split_content_root(content_result: &Value) -> (Vec<Value>, Option<Value>) {
    let current = content_result
        .get("content")
        .cloned()
        .unwrap_or(Value::Null);
    if let Some(array) = current.as_array() {
        return (array.clone(), None);
    }
    if let Some(map) = current.as_object() {
        let blocks = map
            .get("blocks")
            .and_then(Value::as_array)
            .cloned()
            .unwrap_or_default();
        let mut wrapper = map.clone();
        wrapper.remove("blocks");
        return (blocks, Some(Value::Object(wrapper)));
    }
    (Vec::new(), None)
}

fn runtime_block_type_for_raw_type(raw_type: &str) -> (&'static str, bool) {
    match raw_type {
        "paragraph" => ("paragraph", true),
        "heading" => ("heading", true),
        "bulletListItem" | "bullet_list_item" => ("bullet_list_item", true),
        "numberedListItem" | "numbered_list_item" => ("numbered_list_item", true),
        "checkListItem" | "advancedTodo" | "todo" => ("todo", true),
        "quote" | "blockquote" => ("quote", true),
        "divider" => ("divider", true),
        "codeBlock" => ("code_block", true),
        "pageReference" => ("page_reference", false),
        "blockReference" => ("block_reference", false),
        "progress" | "progressBlock" => ("progress_placeholder", false),
        "media" | "mindmap" | "onlineTable" => ("media_placeholder", false),
        _ => ("media_placeholder", false),
    }
}

fn raw_type_for_runtime_block_type(block_type: &str, fallback_raw_type: &str) -> String {
    match block_type {
        "paragraph" => "paragraph".into(),
        "heading" => "heading".into(),
        "bullet_list_item" => "bulletListItem".into(),
        "numbered_list_item" => "numberedListItem".into(),
        "todo" => {
            if fallback_raw_type == "advancedTodo" {
                "advancedTodo".into()
            } else if fallback_raw_type == "todo" {
                "todo".into()
            } else {
                "checkListItem".into()
            }
        }
        "quote" => "quote".into(),
        "divider" => "divider".into(),
        "code_block" => "codeBlock".into(),
        "page_reference" => "pageReference".into(),
        "block_reference" => "blockReference".into(),
        "progress_placeholder" => {
            if fallback_raw_type.trim().is_empty() {
                "progressBlock".into()
            } else {
                fallback_raw_type.to_string()
            }
        }
        "media_placeholder" => {
            if fallback_raw_type.trim().is_empty() {
                "media".into()
            } else {
                fallback_raw_type.to_string()
            }
        }
        _ => {
            if fallback_raw_type.trim().is_empty() {
                "paragraph".into()
            } else {
                fallback_raw_type.to_string()
            }
        }
    }
}

fn append_runtime_shell_blocks(
    raw_blocks: &[Value],
    depth: u16,
    parent_id: Option<&str>,
    output: &mut Vec<RuntimeShellBlockWire>,
) {
    for (index, raw_block) in raw_blocks.iter().enumerate() {
        let id = read_non_empty_string(raw_block, &["id"])
            .unwrap_or_else(|| format!("runtime_block_{}_{}", depth, index + 1));
        let raw_type =
            read_non_empty_string(raw_block, &["type"]).unwrap_or_else(|| "paragraph".into());
        let (block_type, editable) = runtime_block_type_for_raw_type(&raw_type);
        let text = get_inline_text(raw_block.get("content").unwrap_or(&Value::Null));
        let block = RuntimeShellBlockWire {
            id: id.clone(),
            block_type: block_type.into(),
            parent_id: parent_id.map(ToOwned::to_owned),
            depth,
            text: text.clone(),
            heading_level: read_prop_u8(raw_block, "level"),
            checked: read_prop_bool(raw_block, "checked").or_else(|| {
                read_non_empty_prop_string(raw_block, "status")
                    .map(|status| matches!(status.as_str(), "done" | "completed"))
            }),
            collapsed: read_prop_bool(raw_block, "collapsed").unwrap_or(false),
            editable,
            raw_type: raw_type.clone(),
            language: read_non_empty_prop_string(raw_block, "language"),
            raw_block: raw_block.clone(),
        };
        output.push(block);
        let children = raw_block
            .get("children")
            .and_then(Value::as_array)
            .cloned()
            .unwrap_or_default();
        if !children.is_empty() {
            append_runtime_shell_blocks(&children, depth + 1, Some(id.as_str()), output);
        }
    }
}

fn initial_runtime_shell_blocks(
    content_result: &Value,
    document_id: &str,
) -> (Vec<RuntimeShellBlockWire>, Option<Value>) {
    let (raw_blocks, content_wrapper) = split_content_root(content_result);
    let mut blocks = Vec::new();
    append_runtime_shell_blocks(&raw_blocks, 0, None, &mut blocks);
    if blocks.is_empty() {
        blocks.push(RuntimeShellBlockWire {
            id: format!("{document_id}_block_1"),
            block_type: "paragraph".into(),
            parent_id: None,
            depth: 0,
            text: String::new(),
            heading_level: None,
            checked: None,
            collapsed: false,
            editable: true,
            raw_type: "paragraph".into(),
            language: None,
            raw_block: Value::Null,
        });
    }
    (blocks, content_wrapper)
}

fn core_block_type_from_runtime(block_type: &str) -> BlockType {
    match block_type {
        "paragraph" => BlockType::Paragraph,
        "heading" => BlockType::Heading,
        "bullet_list_item" => BlockType::BulletListItem,
        "numbered_list_item" => BlockType::NumberedListItem,
        "todo" => BlockType::Todo,
        "quote" => BlockType::Quote,
        "divider" => BlockType::Divider,
        "code_block" => BlockType::CodeBlock,
        "page_reference" => BlockType::PageReference,
        "block_reference" => BlockType::BlockReference,
        "progress_placeholder" => BlockType::ProgressPlaceholder,
        _ => BlockType::MediaPlaceholder,
    }
}

fn runtime_block_type_from_core(block_type: &BlockType) -> &'static str {
    match block_type {
        BlockType::Paragraph => "paragraph",
        BlockType::Heading => "heading",
        BlockType::BulletListItem => "bullet_list_item",
        BlockType::NumberedListItem => "numbered_list_item",
        BlockType::Todo => "todo",
        BlockType::Quote => "quote",
        BlockType::Divider => "divider",
        BlockType::CodeBlock => "code_block",
        BlockType::PageReference => "page_reference",
        BlockType::BlockReference => "block_reference",
        BlockType::ProgressPlaceholder => "progress_placeholder",
        BlockType::MediaPlaceholder => "media_placeholder",
    }
}

fn runtime_snapshot_to_document(blocks: &[RuntimeShellBlockWire]) -> DocumentModel {
    DocumentModel::new(
        blocks
            .iter()
            .map(|block| {
                let mut item = DocumentBlock::new(
                    block.id.clone(),
                    core_block_type_from_runtime(&block.block_type),
                )
                .with_text(block.text.clone())
                .with_collapsed(block.collapsed);
                item.parent_id = block.parent_id.clone();
                item.indent = block.depth;
                item.heading_level = block.heading_level;
                item.checked = block.checked;
                if let Some(language) = block.language.as_deref() {
                    item.content.language = Some(language.to_string());
                }
                item
            })
            .collect(),
    )
}

fn runtime_snapshot_from_document(
    document: &DocumentModel,
    previous: &[RuntimeShellBlockWire],
) -> Vec<RuntimeShellBlockWire> {
    document
        .blocks()
        .iter()
        .map(|block| {
            let previous_block = previous.iter().find(|item| item.id == block.id);
            let editable = previous_block.map(|item| item.editable).unwrap_or(true);
            let raw_type = previous_block
                .map(|item| {
                    raw_type_for_runtime_block_type(
                        runtime_block_type_from_core(&block.block_type),
                        &item.raw_type,
                    )
                })
                .unwrap_or_else(|| {
                    raw_type_for_runtime_block_type(
                        runtime_block_type_from_core(&block.block_type),
                        "",
                    )
                });
            RuntimeShellBlockWire {
                id: block.id.clone(),
                block_type: runtime_block_type_from_core(&block.block_type).into(),
                parent_id: block.parent_id.clone(),
                depth: block.indent,
                text: block.content.text.clone(),
                heading_level: block.heading_level,
                checked: block.checked,
                collapsed: block.collapsed,
                editable,
                raw_type,
                language: block.content.language.clone(),
                raw_block: Value::Null,
            }
        })
        .collect()
}

fn runtime_editor_command(
    request: RuntimeTransformCommandRequest,
) -> Result<EditorCommand, WebError> {
    match request {
        RuntimeTransformCommandRequest::SetBlockType {
            block_id,
            block_type,
        } => {
            let Some(block_type) = BlockType::from_editor_label(block_type.as_str()) else {
                return Err(WebError::bad_request(format!(
                    "不支持的 blockType: {block_type}"
                )));
            };
            Ok(EditorCommand::SetBlockType {
                block_id,
                block_type,
            })
        }
        RuntimeTransformCommandRequest::SplitBlock {
            block_id,
            offset,
            new_block_id,
        } => Ok(EditorCommand::SplitBlock {
            block_id,
            offset,
            new_block_id,
        }),
        RuntimeTransformCommandRequest::MergeWithPrevious { block_id } => {
            Ok(EditorCommand::MergeWithPrevious { block_id })
        }
        RuntimeTransformCommandRequest::IndentBlock { block_id } => {
            Ok(EditorCommand::IndentBlock { block_id })
        }
        RuntimeTransformCommandRequest::OutdentBlock { block_id } => {
            Ok(EditorCommand::OutdentBlock { block_id })
        }
        RuntimeTransformCommandRequest::ToggleHeadingCollapse { block_id } => {
            Ok(EditorCommand::ToggleHeadingCollapse { block_id })
        }
    }
}

fn build_document_editor_shell_html(
    workspace_id: Option<&str>,
    document_id: &str,
    host: Option<&str>,
    meta_result: &Value,
    content_result: &Value,
) -> String {
    let page_title =
        read_non_empty_string(meta_result, &["title"]).unwrap_or_else(|| "无标题".into());
    let updated_at = read_non_empty_string(meta_result, &["updated_at", "updatedAt"])
        .unwrap_or_else(|| "未知".into());
    let read_only = !read_bool(meta_result, &["can_edit", "canEdit"], true);
    let revision = read_u64(content_result, &["revision"], 0);
    let conflict_detection_key = read_non_empty_string(
        content_result,
        &["conflict_detection_key", "conflictDetectionKey"],
    )
    .unwrap_or_else(|| format!("{document_id}:{revision}"));
    let (blocks, content_wrapper) = initial_runtime_shell_blocks(content_result, document_id);
    let initial_focus_id = blocks
        .first()
        .map(|node| node.id.clone())
        .unwrap_or_else(|| "block-empty".into());
    let app_state = json!({
        "workspaceId": workspace_id,
        "documentId": document_id,
        "host": host,
        "meta": {
            "title": page_title,
            "updatedAt": updated_at,
            "readOnly": read_only,
            "revision": revision,
            "conflictDetectionKey": conflict_detection_key,
        },
        "contentWrapper": content_wrapper,
        "initialFocusId": initial_focus_id,
        "blocks": blocks,
    });
    let app_state_json = serde_json::to_string(&app_state).unwrap_or_else(|_| "{}".into());

    let template = r##"<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>mnote Document Runtime Debug</title>
    <style>
      :root {
        color-scheme: light;
        --bg: #f7f4ee;
        --panel: rgba(255, 252, 247, 0.96);
        --panel-strong: #ffffff;
        --ink: #18222f;
        --muted: #667085;
        --line: rgba(148, 163, 184, 0.22);
        --accent: #0f6c84;
        --accent-soft: rgba(15, 108, 132, 0.1);
        --focus: rgba(37, 99, 235, 0.18);
        --selected: rgba(15, 108, 132, 0.14);
        --hover: rgba(15, 23, 42, 0.05);
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
        color: var(--ink);
        background:
          radial-gradient(circle at top left, rgba(15, 108, 132, 0.14), transparent 28%),
          linear-gradient(180deg, #fbf8f3 0%, var(--bg) 100%);
      }
      main {
        min-height: 100vh;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
      }
      .hero,
      .status-card,
      .editor-card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 22px;
        box-shadow: 0 18px 40px rgba(24, 34, 47, 0.08);
      }
      .hero {
        padding: 18px 20px;
        display: grid;
        gap: 8px;
      }
      .eyebrow {
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent);
      }
      h1 {
        margin: 0;
        font-size: clamp(24px, 4vw, 34px);
        line-height: 1.05;
      }
      .summary {
        margin: 0;
        color: var(--muted);
        line-height: 1.55;
      }
      .meta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
      }
      .meta-pill {
        border-radius: 14px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(148, 163, 184, 0.2);
      }
      .meta-pill strong {
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        color: var(--muted);
      }
      .status-card {
        padding: 14px 16px;
        display: grid;
        gap: 10px;
      }
      .status-line {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
        font-size: 13px;
        color: var(--muted);
      }
      .status-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(148, 163, 184, 0.18);
      }
      .editor-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        min-height: 0;
        overflow: hidden;
      }
      .editor-main {
        min-height: 0;
        overflow: auto;
        padding: 16px;
        border-right: 1px solid rgba(148, 163, 184, 0.18);
      }
      .editor-toolbar,
      .editor-slash-menu {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px;
      }
      .editor-command-button {
        border: 1px solid rgba(148, 163, 184, 0.24);
        background: rgba(255, 255, 255, 0.88);
        color: var(--ink);
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 12px;
        line-height: 1;
        cursor: pointer;
      }
      .editor-command-button[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .editor-sidebar {
        min-height: 0;
        overflow: auto;
        padding: 16px;
        background: rgba(255, 255, 255, 0.72);
      }
      .editor-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 8px;
        min-height: 88px;
        align-content: start;
      }
      .editor-row {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        border-radius: 16px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: var(--panel-strong);
        padding: 12px 12px 12px calc(12px + var(--depth-indent, 0px));
        transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
      }
      .editor-row:hover,
      .editor-row[data-hovered="true"] {
        background: var(--hover);
      }
      .editor-row[data-focused="true"] {
        border-color: rgba(37, 99, 235, 0.3);
        background: var(--focus);
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
      }
      .editor-row[data-selected="true"] {
        border-color: rgba(15, 108, 132, 0.3);
        background: var(--selected);
      }
      .editor-row[data-active="true"] .editor-row-title {
        color: var(--accent);
      }
      .editor-badge {
        min-width: 26px;
        height: 26px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 108, 132, 0.1);
        color: var(--accent);
        font-size: 11px;
        font-weight: 700;
      }
      .editor-link {
        display: grid;
        gap: 4px;
        min-width: 0;
      }
      .editor-input {
        width: 100%;
        min-height: 34px;
        resize: vertical;
        border: 0;
        background: transparent;
        color: var(--ink);
        font: inherit;
        line-height: 1.5;
        padding: 0;
        outline: none;
      }
      .editor-input[readonly] {
        color: var(--muted);
        cursor: default;
      }
      .editor-row-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
      }
      .editor-row-meta {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: var(--muted);
      }
      .editor-row[data-collapsed="true"] .editor-row-title::after {
        content: " (collapsed)";
        color: var(--accent);
        font-size: 12px;
        font-weight: 500;
      }
      .editor-state-tag {
        font-size: 11px;
        color: var(--muted);
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.04);
        padding: 6px 8px;
      }
      .editor-ref-list {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 4px;
      }
      .editor-ref-chip {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        background: rgba(15, 108, 132, 0.12);
        color: var(--accent);
        font-size: 11px;
        padding: 3px 8px;
      }
      .panel-title {
        margin: 0 0 12px;
        font-size: 14px;
        font-weight: 700;
      }
      .panel-grid {
        display: grid;
        gap: 10px;
      }
      .panel-card {
        border-radius: 16px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: rgba(255, 255, 255, 0.82);
        padding: 12px;
      }
      .panel-card strong {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        color: var(--muted);
      }
      .panel-log {
        margin: 0;
        white-space: pre-wrap;
        font-size: 12px;
        line-height: 1.55;
        color: #243447;
      }
      .editor-empty {
        border: 1px dashed rgba(148, 163, 184, 0.36);
        border-radius: 18px;
        padding: 24px 18px;
        text-align: center;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.64);
      }
      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      @media (max-width: 920px) {
        .editor-card {
          grid-template-columns: 1fr;
        }
        .editor-main {
          border-right: 0;
          border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        }
      }
    </style>
  </head>
  <body>
    <main>
      <section class="hero">
        <div class="eyebrow">Document Runtime Debug</div>
        <h1 id="block-editor-title">__PAGE_TITLE__</h1>
        <p class="summary">
          这是 mnote-web 的文档 runtime 调试页，只用于事务诊断、IME 排障、保存链回归与 bridge API 观察。
          默认文档页仍应走产品页主链，这里不再作为正式编辑器 surface。
        </p>
        <div class="meta-grid">
          <div class="meta-pill"><strong>Workspace</strong><span>__WORKSPACE_ID__</span></div>
          <div class="meta-pill"><strong>Document</strong><span>__DOCUMENT_ID__</span></div>
          <div class="meta-pill"><strong>Host</strong><span>__HOST__</span></div>
          <div class="meta-pill"><strong>ReadOnly</strong><span>__READ_ONLY__</span></div>
        </div>
      </section>

      <section class="status-card">
        <div class="status-line">
          <span class="status-chip">revision=<strong id="editor-revision">__REVISION__</strong></span>
          <span class="status-chip">updatedAt=<strong id="editor-updated-at">__UPDATED_AT__</strong></span>
          <span class="status-chip">blocks=<strong id="editor-block-count">0</strong></span>
          <span class="status-chip">save=<strong id="editor-save-status">idle</strong></span>
        </div>
        <div class="status-line">
          <span class="status-chip">focus=<strong id="editor-focus-id">-</strong></span>
          <span class="status-chip">selection=<strong id="editor-selection-id">-</strong></span>
          <span class="status-chip">hover=<strong id="editor-hover-id">-</strong></span>
        </div>
      </section>

      <section class="editor-card">
        <div class="editor-main">
          <div class="editor-toolbar" role="toolbar" aria-label="Block editor controls">
            <button type="button" class="editor-command-button" id="editor-command-slash">Slash 菜单</button>
            <button type="button" class="editor-command-button" id="editor-command-toggle-heading">折叠标题</button>
            <button type="button" class="editor-command-button" id="editor-command-indent">缩进</button>
            <button type="button" class="editor-command-button" id="editor-command-outdent">取消缩进</button>
            <button type="button" class="editor-command-button" id="editor-command-page-ref">[[page]]</button>
            <button type="button" class="editor-command-button" id="editor-command-block-ref">((block))</button>
          </div>
          <div class="editor-slash-menu" id="editor-slash-menu" hidden>
            <button type="button" class="editor-command-button" data-slash-action="paragraph">Paragraph</button>
            <button type="button" class="editor-command-button" data-slash-action="heading">Heading</button>
            <button type="button" class="editor-command-button" data-slash-action="todo">Todo</button>
          </div>
          <h2 class="visually-hidden">Block List</h2>
          <ul class="editor-list" id="block-editor-list" role="listbox" aria-label="Block list"></ul>
          <div class="editor-empty" id="block-editor-empty" hidden>当前文档没有可展示的 block。</div>
        </div>
        <aside class="editor-sidebar">
          <h2 class="panel-title">交互状态</h2>
          <div class="panel-grid">
            <div class="panel-card">
              <strong>最小状态机</strong>
              <div>focus / selection / hover / beforeinput / composition / slash / heading collapse / indent 现在直接驱动可输入 runtime，并接入保存链。</div>
            </div>
            <div class="panel-card">
              <strong>当前 block</strong>
              <div id="editor-current-title">尚未聚焦</div>
              <div id="editor-current-meta" style="margin-top: 6px; color: var(--muted); font-size: 12px;">等待交互</div>
            </div>
            <div class="panel-card">
              <strong>最近事件</strong>
              <pre class="panel-log" id="editor-event-log">block_editor_shell.ready</pre>
            </div>
          </div>
        </aside>
      </section>
    </main>

    <script id="block-editor-shell-state" type="application/json">__APP_STATE__</script>
    <script>
      (() => {
        const stateElement = document.getElementById("block-editor-shell-state");
        const listElement = document.getElementById("block-editor-list");
        const emptyElement = document.getElementById("block-editor-empty");
        const focusElement = document.getElementById("editor-focus-id");
        const selectionElement = document.getElementById("editor-selection-id");
        const hoverElement = document.getElementById("editor-hover-id");
        const blockCountElement = document.getElementById("editor-block-count");
        const saveStatusElement = document.getElementById("editor-save-status");
        const revisionElement = document.getElementById("editor-revision");
        const currentTitleElement = document.getElementById("editor-current-title");
        const currentMetaElement = document.getElementById("editor-current-meta");
        const eventLogElement = document.getElementById("editor-event-log");
        const slashButton = document.getElementById("editor-command-slash");
        const toggleHeadingButton = document.getElementById("editor-command-toggle-heading");
        const indentButton = document.getElementById("editor-command-indent");
        const outdentButton = document.getElementById("editor-command-outdent");
        const pageRefButton = document.getElementById("editor-command-page-ref");
        const blockRefButton = document.getElementById("editor-command-block-ref");
        const slashMenuElement = document.getElementById("editor-slash-menu");
        if (!stateElement || !listElement || !emptyElement) {
          return;
        }

        const parseState = () => {
          try {
            return JSON.parse(stateElement.textContent || "{}");
          } catch {
            return {};
          }
        };

        const state = parseState();
        const READ_ONLY = Boolean(state.meta && state.meta.readOnly);
        const meta = {
          revision: Number((state.meta && state.meta.revision) || 0) || 0,
          conflictDetectionKey:
            String((state.meta && state.meta.conflictDetectionKey) || "").trim() ||
            String(state.documentId || "document") + ":0",
        };
        const contentWrapper =
          state.contentWrapper && typeof state.contentWrapper === "object" && !Array.isArray(state.contentWrapper)
            ? state.contentWrapper
            : null;
        const cloneJson = (value) => {
          try {
            return JSON.parse(JSON.stringify(value));
          } catch {
            return null;
          }
        };
        const normalizeBlock = (block) => ({
          id: String(block && block.id ? block.id : "block-missing"),
          blockType: String(block && block.blockType ? block.blockType : "paragraph"),
          parentId: typeof (block && block.parentId) === "string" && block.parentId.trim() ? block.parentId.trim() : null,
          depth: Math.max(0, Number(block && block.depth ? block.depth : 0) || 0),
          text: typeof (block && block.text) === "string" ? block.text : "",
          headingLevel:
            Number(block && block.headingLevel ? block.headingLevel : 0) > 0
              ? Number(block.headingLevel)
              : null,
          checked: typeof (block && block.checked) === "boolean" ? block.checked : null,
          collapsed: Boolean(block && block.collapsed),
          editable: Boolean(block && block.editable),
          rawType: String(block && block.rawType ? block.rawType : ""),
          language: typeof (block && block.language) === "string" && block.language.trim() ? block.language.trim() : null,
          rawBlock:
            block && typeof block.rawBlock === "object" && block.rawBlock !== null ? block.rawBlock : null,
        });
        const blocks = Array.isArray(state.blocks) ? state.blocks.map(normalizeBlock) : [];
        const uiState = {
          focusedId: typeof state.initialFocusId === "string" ? state.initialFocusId : null,
          hoveredId: null,
          selection: null,
          slashMenuOpen: false,
          pendingFocus: null,
          composingId: null,
          didBootLog: false,
        };
        const MAX_INDENT = 3;
        const saveState = {
          dirty: false,
          saving: false,
          timer: 0,
          lastSerialized: "",
        };

        const log = (message) => {
          if (!eventLogElement) return;
          const previous = String(eventLogElement.textContent || "").trim();
          eventLogElement.textContent = previous ? previous + "\n" + message : message;
        };

        const focusedBlock = () => blocks.find((item) => item && item.id === uiState.focusedId) || null;
        const escapeSelector = (value) => {
          if (window.CSS && typeof window.CSS.escape === "function") {
            return window.CSS.escape(value);
          }
          return String(value).replace(/["\\]/g, "\\$&");
        };
        const getTextarea = (blockId) => {
          const selector = `textarea[data-block-input-id="${escapeSelector(blockId)}"]`;
          return listElement.querySelector(selector);
        };
        const visibleBlocks = () => {
          const items = [];
          let hiddenDepth = null;
          for (const block of blocks) {
            if (hiddenDepth !== null) {
              if (Number(block.depth || 0) > hiddenDepth) {
                continue;
              }
              hiddenDepth = null;
            }
            items.push(block);
            if (block.blockType === "heading" && block.collapsed) {
              hiddenDepth = Number(block.depth || 0);
            }
          }
          return items;
        };
        const blockTypeLabel = (block) => {
          switch (block.blockType) {
            case "heading":
              return `Heading${block.headingLevel ? ` h${block.headingLevel}` : ""}`;
            case "todo":
              return "Todo";
            case "bullet_list_item":
              return "Bullet";
            case "numbered_list_item":
              return "Numbered";
            case "quote":
              return "Quote";
            case "code_block":
              return "Code";
            case "divider":
              return "Divider";
            case "page_reference":
              return "[[page]]";
            case "block_reference":
              return "((block))";
            case "media_placeholder":
              return "Media";
            case "progress_placeholder":
              return "Progress";
            default:
              return "Paragraph";
          }
        };
        const runtimeMeta = (block) => {
          const tokens = [
            (block.rawType || block.blockType || "paragraph"),
            `depth=${Number(block.depth || 0)}`,
            `editable=${block.editable === true ? "true" : "false"}`,
          ];
          if (block.headingLevel) tokens.push(`h${block.headingLevel}`);
          if (typeof block.checked === "boolean") tokens.push(`checked=${block.checked ? "true" : "false"}`);
          if (block.collapsed) tokens.push("collapsed=true");
          return tokens.join(" · ");
        };
        const displayTitle = (block) => {
          const text = String(block.text || "").trim();
          if (text) return text;
          return blockTypeLabel(block);
        };

        const focusBlock = (blockId, position) => {
          if (!blockId) return;
          window.requestAnimationFrame(() => {
            const textarea = getTextarea(blockId);
            if (!(textarea instanceof HTMLTextAreaElement)) return;
            textarea.focus();
            const valueLength = textarea.value.length;
            if (position === "start") {
              textarea.setSelectionRange(0, 0);
            } else if (position === "end") {
              textarea.setSelectionRange(valueLength, valueLength);
            } else if (position && typeof position.start === "number" && typeof position.end === "number") {
              textarea.setSelectionRange(position.start, position.end);
            }
          });
        };

        const updateSaveStatus = (label) => {
          if (saveStatusElement) {
            saveStatusElement.textContent = label;
          }
        };

        const syncToolbarState = () => {
          const current = focusedBlock();
          const isHeading = current && current.blockType === "heading";
          const canEditCurrent = Boolean(current && current.editable && !READ_ONLY);
          if (toggleHeadingButton) toggleHeadingButton.disabled = !canEditCurrent || !isHeading;
          if (indentButton) indentButton.disabled = !canEditCurrent || Number(current.depth || 0) >= MAX_INDENT;
          if (outdentButton) outdentButton.disabled = !canEditCurrent || Number(current.depth || 0) <= 0;
          if (pageRefButton) pageRefButton.disabled = !canEditCurrent;
          if (blockRefButton) blockRefButton.disabled = !canEditCurrent;
          if (slashButton) slashButton.disabled = !canEditCurrent;
          if (slashMenuElement) slashMenuElement.hidden = !uiState.slashMenuOpen;
        };

        const updateSummary = () => {
          const current = focusedBlock();
          if (focusElement) focusElement.textContent = uiState.focusedId || "-";
          if (selectionElement) {
            if (uiState.selection && uiState.selection.blockId) {
              selectionElement.textContent =
                `${uiState.selection.blockId}:${uiState.selection.start}-${uiState.selection.end}`;
            } else {
              selectionElement.textContent = "-";
            }
          }
          if (hoverElement) hoverElement.textContent = uiState.hoveredId || "-";
          if (blockCountElement) blockCountElement.textContent = String(visibleBlocks().length);
          if (currentTitleElement) {
            currentTitleElement.textContent = current ? displayTitle(current) : "尚未聚焦";
          }
          if (currentMetaElement) {
            currentMetaElement.textContent = current ? runtimeMeta(current) : "等待交互";
          }
          syncToolbarState();
        };

        const applyRowState = () => {
          listElement.querySelectorAll("[data-block-id]").forEach((node) => {
            const id = node.getAttribute("data-block-id") || "";
            node.setAttribute("data-focused", String(id === uiState.focusedId));
            node.setAttribute(
              "data-selected",
              String(Boolean(uiState.selection && uiState.selection.blockId === id)),
            );
            node.setAttribute("data-hovered", String(id === uiState.hoveredId));
            node.setAttribute(
              "data-active",
              String(id === uiState.focusedId || Boolean(uiState.selection && uiState.selection.blockId === id)),
            );
            const block = blocks.find((item) => item && item.id === id) || null;
            node.setAttribute("data-collapsed", String(Boolean(block && block.collapsed)));
          });
          updateSummary();
        };

        const setFocused = (id, selection) => {
          uiState.focusedId = id;
          if (selection) {
            uiState.selection = selection;
          } else if (!uiState.selection || uiState.selection.blockId !== id) {
            uiState.selection = { blockId: id, start: 0, end: 0 };
          }
          applyRowState();
          log("human_editor.focus:" + id);
        };

        const setHovered = (id) => {
          uiState.hoveredId = id;
          applyRowState();
          if (id) log("human_editor.hover:" + id);
        };

        const updateSelectionFromTextarea = (blockId, textarea) => {
          if (!(textarea instanceof HTMLTextAreaElement)) return;
          uiState.selection = {
            blockId,
            start: Number(textarea.selectionStart || 0),
            end: Number(textarea.selectionEnd || 0),
          };
          applyRowState();
        };

        const buildTransformSnapshot = () => ({
          blocks: blocks.map((block) => ({
            id: block.id,
            blockType: block.blockType,
            parentId: block.parentId,
            depth: block.depth,
            text: block.text,
            headingLevel: block.headingLevel,
            checked: block.checked,
            collapsed: block.collapsed,
            editable: block.editable,
            rawType: block.rawType,
            language: block.language,
          })),
        });

        const applyTransformedBlocks = (nextBlocks) => {
          const rawById = new Map(blocks.map((block) => [block.id, block.rawBlock]));
          const rawTypeById = new Map(blocks.map((block) => [block.id, block.rawType]));
          blocks.splice(
            0,
            blocks.length,
            ...nextBlocks.map((block) => {
              const normalized = normalizeBlock(block);
              normalized.rawBlock = rawById.get(normalized.id) || null;
              if (!normalized.rawType) {
                normalized.rawType = rawTypeById.get(normalized.id) || normalized.rawType;
              }
              return normalized;
            }),
          );
        };

        const buildTextNodes = (text) =>
          text ? [{ type: "text", text }] : [];

        const materializeBlock = (block) => {
          const raw =
            block.rawBlock && typeof block.rawBlock === "object" && !Array.isArray(block.rawBlock)
              ? cloneJson(block.rawBlock) || {}
              : {};
          raw.id = block.id;
          raw.type =
            block.blockType === "paragraph"
              ? "paragraph"
              : block.blockType === "heading"
                ? "heading"
                : block.blockType === "bullet_list_item"
                  ? "bulletListItem"
                  : block.blockType === "numbered_list_item"
                    ? "numberedListItem"
                    : block.blockType === "todo"
                      ? (block.rawType || "checkListItem")
                      : block.blockType === "quote"
                        ? "quote"
                        : block.blockType === "divider"
                          ? "divider"
                          : block.blockType === "code_block"
                            ? "codeBlock"
                            : block.blockType === "page_reference"
                              ? "pageReference"
                              : block.blockType === "block_reference"
                                ? "blockReference"
                                : (block.rawType || "media");
          raw.props =
            raw.props && typeof raw.props === "object" && !Array.isArray(raw.props) ? raw.props : {};
          raw.children = [];
          if (raw.type === "heading") {
            raw.props.level = Number(block.headingLevel || 1);
            raw.props.collapsed = Boolean(block.collapsed);
          }
          if (raw.type === "checkListItem" || raw.type === "advancedTodo") {
            raw.props.checked = Boolean(block.checked);
          }
          if (raw.type === "codeBlock" && block.language) {
            raw.props.language = block.language;
          }
          if (block.editable !== false) {
            raw.content = raw.type === "divider" ? [] : buildTextNodes(String(block.text || ""));
          }
          return raw;
        };

        const buildDocumentPayload = () => {
          const roots = [];
          const stack = [];
          blocks.forEach((block) => {
            const node = materializeBlock(block);
            while (stack.length > 0 && stack[stack.length - 1].depth >= block.depth) {
              stack.pop();
            }
            if (block.depth > 0 && stack.length > 0) {
              stack[stack.length - 1].node.children.push(node);
            } else {
              roots.push(node);
            }
            stack.push({ depth: block.depth, node });
          });
          if (contentWrapper) {
            const wrapper = cloneJson(contentWrapper) || {};
            wrapper.blocks = roots;
            return wrapper;
          }
          return roots;
        };

        const queueSave = (reason, immediate) => {
          if (READ_ONLY) return;
          saveState.dirty = true;
          if (saveState.timer) {
            window.clearTimeout(saveState.timer);
            saveState.timer = 0;
          }
          if (immediate) {
            void saveNow(reason);
            return;
          }
          updateSaveStatus("dirty");
          saveState.timer = window.setTimeout(() => {
            saveState.timer = 0;
            void saveNow(reason);
          }, 450);
        };

        const saveNow = async (reason) => {
          if (READ_ONLY) return;
          const content = buildDocumentPayload();
          const serialized = JSON.stringify(content);
          if (!saveState.dirty && serialized === saveState.lastSerialized) {
            return;
          }
          saveState.saving = true;
          updateSaveStatus("saving");
          try {
            const response = await fetch("/api/documents/save", {
              method: "POST",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({
                documentId: state.documentId,
                workspaceId: state.workspaceId || null,
                revision: meta.revision,
                conflictDetectionKey: meta.conflictDetectionKey,
                content,
                blockCount: blocks.length,
              }),
            });
            const payload = await response.json().catch(() => null);
            if (!response.ok || !payload || payload.ok !== true) {
              const message =
                (payload && payload.error && payload.error.message) ||
                (payload && payload.message) ||
                `save_failed_${response.status}`;
              throw new Error(message);
            }
            const result = payload.result || {};
            meta.revision =
              typeof result.revision === "number" && Number.isInteger(result.revision)
                ? result.revision
                : meta.revision;
            meta.conflictDetectionKey =
              typeof result.conflict_detection_key === "string" && result.conflict_detection_key.trim()
                ? result.conflict_detection_key.trim()
                : typeof result.conflictDetectionKey === "string" && result.conflictDetectionKey.trim()
                  ? result.conflictDetectionKey.trim()
                  : meta.conflictDetectionKey;
            if (revisionElement) {
              revisionElement.textContent = String(meta.revision);
            }
            saveState.lastSerialized = serialized;
            saveState.dirty = false;
            updateSaveStatus("saved");
            log("human_editor.save:" + reason);
          } catch (error) {
            updateSaveStatus("error");
            log(
              "human_editor.save.error:" +
                (error instanceof Error ? error.message : String(error)),
            );
          } finally {
            saveState.saving = false;
          }
        };

        const applyRuntimeCommand = async (command, focusOptions) => {
          if (READ_ONLY) return;
          const response = await fetch("/api/documents/runtime/transform", {
            method: "POST",
            headers: { "content-type": "application/json" },
            body: JSON.stringify({
              documentId: state.documentId,
              workspaceId: state.workspaceId || null,
              snapshot: buildTransformSnapshot(),
              command,
            }),
          });
          const payload = await response.json().catch(() => null);
          if (!response.ok || !payload || payload.ok !== true) {
            const message =
              (payload && payload.error && payload.error.message) ||
              (payload && payload.message) ||
              `transform_failed_${response.status}`;
            throw new Error(message);
          }
          const nextBlocks = Array.isArray(payload.result && payload.result.blocks)
            ? payload.result.blocks
            : [];
          applyTransformedBlocks(nextBlocks);
          uiState.slashMenuOpen = false;
          render();
          applyRowState();
          if (focusOptions && focusOptions.blockId) {
            focusBlock(focusOptions.blockId, focusOptions.position || "end");
          }
          queueSave(focusOptions && focusOptions.reason ? focusOptions.reason : "transform", true);
        };

        const toggleHeadingCollapse = async () => {
          const current = focusedBlock();
          if (!current || current.blockType !== "heading" || READ_ONLY) return;
          log("human_editor.toggle_heading_collapse:" + current.id);
          await applyRuntimeCommand(
            { action: "toggle_heading_collapse", block_id: current.id },
            { blockId: current.id, position: "end", reason: "toggle_heading_collapse" },
          );
        };

        const adjustIndent = async (delta) => {
          const current = focusedBlock();
          if (!current || READ_ONLY) return;
          const action = delta > 0 ? "indent_block" : "outdent_block";
          log("human_editor." + action + ":" + current.id);
          await applyRuntimeCommand(
            { action, block_id: current.id },
            { blockId: current.id, position: "end", reason: action },
          );
        };

        const insertReferenceToken = (kind) => {
          const current = focusedBlock();
          if (!current || !current.editable || READ_ONLY) return;
          const textarea = getTextarea(current.id);
          if (!(textarea instanceof HTMLTextAreaElement)) return;
          const token = kind === "page" ? "[[page]]" : "((block))";
          const start = Number(textarea.selectionStart || 0);
          const end = Number(textarea.selectionEnd || start);
          current.text = current.text.slice(0, start) + token + current.text.slice(end);
          textarea.value = current.text;
          const nextCursor = start + token.length;
          textarea.setSelectionRange(nextCursor, nextCursor);
          updateSelectionFromTextarea(current.id, textarea);
          updateSummary();
          log("human_editor.reference:" + kind + ":" + current.id);
          queueSave("reference", false);
        };

        const applySlashAction = async (action) => {
          const current = focusedBlock();
          if (!current || !current.editable || READ_ONLY) return;
          const blockType = action === "heading" ? "heading" : action === "todo" ? "todo" : "paragraph";
          log("human_editor.slash:" + action + ":" + current.id);
          await applyRuntimeCommand(
            { action: "set_block_type", block_id: current.id, block_type: blockType },
            { blockId: current.id, position: "end", reason: "slash" },
          );
        };

        const render = () => {
          const currentBlocks = visibleBlocks();
          listElement.innerHTML = "";
          if (currentBlocks.length === 0) {
            emptyElement.hidden = false;
            updateSummary();
            log("block_editor_shell.empty");
            return;
          }
          emptyElement.hidden = true;

          currentBlocks.forEach((block, index) => {
            const row = document.createElement("li");
            row.className = "editor-row";
            row.setAttribute("data-block-id", String(block.id || ""));
            row.style.setProperty("--depth-indent", String(Number(block.depth || 0) * 18) + "px");

            const badge = document.createElement("span");
            badge.className = "editor-badge";
            badge.textContent = String(index + 1);

            const body = document.createElement("div");
            body.className = "editor-link";
            const title = document.createElement("span");
            title.className = "editor-row-title";
            title.textContent = blockTypeLabel(block);
            const meta = document.createElement("span");
            meta.className = "editor-row-meta";
            meta.textContent = runtimeMeta(block);
            const textarea = document.createElement("textarea");
            textarea.className = "editor-input";
            textarea.setAttribute("data-block-input-id", String(block.id || ""));
            textarea.value = String(block.text || "");
            textarea.placeholder = displayTitle(block);
            textarea.readOnly = READ_ONLY || block.editable !== true;
            textarea.rows = Math.max(1, String(block.text || "").split("\n").length || 1);
            body.appendChild(title);
            body.appendChild(meta);
            body.appendChild(textarea);

            const tag = document.createElement("span");
            tag.className = "editor-state-tag";
            tag.textContent = [
              block.id ? "block:" + String(block.id) : "node",
              block.blockType ? "type:" + String(block.blockType) : null,
            ]
              .filter(Boolean)
              .join(" · ");

            row.appendChild(badge);
            row.appendChild(body);
            row.appendChild(tag);

            const id = String(block.id || "");
            row.addEventListener("mouseenter", () => setHovered(id));
            row.addEventListener("mouseleave", () => setHovered(null));
            row.addEventListener("click", () => {
              if (textarea.readOnly) {
                setFocused(id);
              }
            });
            textarea.addEventListener("focus", () => {
              setFocused(id, {
                blockId: id,
                start: Number(textarea.selectionStart || 0),
                end: Number(textarea.selectionEnd || 0),
              });
            });
            textarea.addEventListener("select", () => updateSelectionFromTextarea(id, textarea));
            textarea.addEventListener("click", () => updateSelectionFromTextarea(id, textarea));
            textarea.addEventListener("keyup", () => updateSelectionFromTextarea(id, textarea));
            textarea.addEventListener("beforeinput", (event) => {
              updateSelectionFromTextarea(id, textarea);
              log(`human_editor.beforeinput:${id}:${event.inputType || "unknown"}`);
            });
            textarea.addEventListener("compositionstart", () => {
              uiState.composingId = id;
              log("human_editor.compositionstart:" + id);
            });
            textarea.addEventListener("compositionend", () => {
              uiState.composingId = null;
              updateSelectionFromTextarea(id, textarea);
              log("human_editor.compositionend:" + id);
            });
            textarea.addEventListener("input", () => {
              block.text = textarea.value;
              textarea.rows = Math.max(1, textarea.value.split("\n").length || 1);
              updateSelectionFromTextarea(id, textarea);
              updateSummary();
              queueSave("input", false);
            });
            textarea.addEventListener("keydown", async (event) => {
              if (READ_ONLY || textarea.readOnly) {
                return;
              }
              if (event.key === "Tab") {
                event.preventDefault();
                try {
                  await adjustIndent(event.shiftKey ? -1 : 1);
                } catch (error) {
                  log("human_editor.transform.error:" + (error instanceof Error ? error.message : String(error)));
                }
                return;
              }
              if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
                event.preventDefault();
                const offset = Number(textarea.selectionStart || 0);
                const newBlockId = `${id}_split_${Date.now().toString(36)}`;
                log("human_editor.split:" + id);
                try {
                  await applyRuntimeCommand(
                    {
                      action: "split_block",
                      block_id: id,
                      offset,
                      new_block_id: newBlockId,
                    },
                    { blockId: newBlockId, position: "start", reason: "split" },
                  );
                } catch (error) {
                  log("human_editor.transform.error:" + (error instanceof Error ? error.message : String(error)));
                }
                return;
              }
              if (event.key === "Backspace") {
                const start = Number(textarea.selectionStart || 0);
                const end = Number(textarea.selectionEnd || 0);
                if (start === 0 && end === 0) {
                  const currentIndex = visibleBlocks().findIndex((item) => item.id === id);
                  const previous = currentIndex > 0 ? visibleBlocks()[currentIndex - 1] : null;
                  if (previous) {
                    event.preventDefault();
                    log("human_editor.merge:" + id);
                    try {
                      await applyRuntimeCommand(
                        { action: "merge_with_previous", block_id: id },
                        { blockId: previous.id, position: "end", reason: "merge" },
                      );
                    } catch (error) {
                      log(
                        "human_editor.transform.error:" +
                          (error instanceof Error ? error.message : String(error)),
                      );
                    }
                  }
                }
              }
            });

            listElement.appendChild(row);
          });

          updateSummary();
          if (!uiState.didBootLog) {
            log("human_editor_runtime.ready");
            log("human_editor_input.beforeinput");
            log("human_editor_input.composition");
            log("human_editor_transactions.boundary");
            uiState.didBootLog = true;
          }
        };

        if (slashButton) {
          slashButton.addEventListener("click", () => {
            uiState.slashMenuOpen = !uiState.slashMenuOpen;
            syncToolbarState();
            log("human_editor.slash_menu:" + (uiState.slashMenuOpen ? "open" : "close"));
          });
        }
        if (toggleHeadingButton) {
          toggleHeadingButton.addEventListener("click", () => {
            void toggleHeadingCollapse().catch((error) => {
              log("human_editor.transform.error:" + (error instanceof Error ? error.message : String(error)));
            });
          });
        }
        if (indentButton) {
          indentButton.addEventListener("click", () => {
            void adjustIndent(1).catch((error) => {
              log("human_editor.transform.error:" + (error instanceof Error ? error.message : String(error)));
            });
          });
        }
        if (outdentButton) {
          outdentButton.addEventListener("click", () => {
            void adjustIndent(-1).catch((error) => {
              log("human_editor.transform.error:" + (error instanceof Error ? error.message : String(error)));
            });
          });
        }
        if (pageRefButton) {
          pageRefButton.addEventListener("click", () => insertReferenceToken("page"));
        }
        if (blockRefButton) {
          blockRefButton.addEventListener("click", () => insertReferenceToken("block"));
        }
        if (slashMenuElement) {
          slashMenuElement.querySelectorAll("[data-slash-action]").forEach((node) => {
            node.addEventListener("click", async () => {
              const action = node.getAttribute("data-slash-action");
              if (action) {
                try {
                  await applySlashAction(action);
                } catch (error) {
                  log("human_editor.transform.error:" + (error instanceof Error ? error.message : String(error)));
                }
              }
            });
          });
        }

        render();
        applyRowState();
        updateSaveStatus(READ_ONLY ? "read-only" : "idle");
        if (uiState.focusedId) {
          focusBlock(uiState.focusedId, "end");
        }
      })();
    </script>
  </body>
</html>"##;

    template
        .replace("__PAGE_TITLE__", &escape_html(&page_title))
        .replace(
            "__WORKSPACE_ID__",
            &escape_html(workspace_id.unwrap_or("未指定")),
        )
        .replace("__DOCUMENT_ID__", &escape_html(document_id))
        .replace("__HOST__", &escape_html(host.unwrap_or("mnote-web")))
        .replace("__READ_ONLY__", if read_only { "true" } else { "false" })
        .replace("__REVISION__", &escape_html(&revision.to_string()))
        .replace("__UPDATED_AT__", &escape_html(&updated_at))
        .replace("__APP_STATE__", &escape_inline_json(&app_state_json))
}

pub async fn document_editor_shell(
    State(state): State<AppState>,
    Extension(context): Extension<RequestContext>,
    Query(query): Query<DocumentEditorShellQuery>,
) -> Result<Response, WebError> {
    let (_, _, meta_json) = document_meta(
        State(state.clone()),
        Extension(context.clone()),
        Query(DocumentMetaQuery {
            document_id: query.document_id.clone(),
            workspace_id: query.workspace_id.clone(),
        }),
    )
    .await?;

    let (_, _, content_json) = document_content(
        State(state),
        Extension(context),
        Query(DocumentContentQuery {
            document_id: query.document_id.clone(),
            workspace_id: query.workspace_id.clone(),
        }),
    )
    .await?;

    let meta_result = meta_json.0.get("result").cloned().unwrap_or(Value::Null);
    let content_result = content_json.0.get("result").cloned().unwrap_or(Value::Null);
    let html = build_document_editor_shell_html(
        query.workspace_id.as_deref(),
        &query.document_id,
        query.host.as_deref(),
        &meta_result,
        &content_result,
    );

    let mut response = Html(html).into_response();
    response.headers_mut().insert(
        header::CONTENT_TYPE,
        HeaderValue::from_static("text/html; charset=utf-8"),
    );
    response
        .headers_mut()
        .insert(header::CACHE_CONTROL, HeaderValue::from_static("no-store"));
    response.headers_mut().insert(
        "x-mnote-shell",
        HeaderValue::from_static("document-runtime-debug"),
    );
    Ok(response)
}

pub async fn transform_runtime_snapshot(
    Extension(context): Extension<RequestContext>,
    Json(body): Json<RuntimeTransformRequest>,
) -> Result<(StatusCode, Json<Value>), WebError> {
    let document_id = body.document_id.trim();
    if document_id.is_empty() {
        return Err(
            WebError::bad_request_code("document_id_required", "缺少有效 documentId")
                .with_context(&context),
        );
    }
    let mut session = EditorSession::new(runtime_snapshot_to_document(&body.snapshot.blocks));
    let command =
        runtime_editor_command(body.command).map_err(|error| error.with_context(&context))?;
    session
        .apply_command(command)
        .map_err(|error| WebError::bad_request(error.to_string()).with_context(&context))?;
    let blocks = runtime_snapshot_from_document(session.document(), &body.snapshot.blocks);
    Ok((
        StatusCode::OK,
        Json(json!({
            "ok": true,
            "requestId": context.trace.request_id,
            "traceId": context.trace.trace_id,
            "result": {
                "documentId": document_id,
                "workspaceId": body.workspace_id,
                "blocks": blocks,
            },
        })),
    ))
}

#[cfg(test)]
mod tests {
    use crate::app::{build_app, AppConfig, AppState};
    use axum::body::{to_bytes, Body};
    use axum::http::{Request, StatusCode};
    use serde_json::{json, Value};
    use tower::util::ServiceExt;

    fn app() -> axum::Router {
        build_app(AppState::new(AppConfig {
            service_name: "mnote-web".into(),
            service_version: "0.1.0".into(),
            bind_addr: "127.0.0.1:0".into(),
            public_bind_addr: "127.0.0.1:3000".into(),
            legacy_next_base_url: Some("http://127.0.0.1:3100".into()),
            enable_legacy_next_compat: true,
            enable_debug_shell_routes: true,
            enable_editor_actor: true,
            hermes_base_path: "/api/hermes".into(),
            compat_next_base_path: "/api/compat/next".into(),
            convex_url: None,
            convex_admin_key: None,
            allow_dev_fixtures: true,
            query_fixtures_json: Some(
                r#"{
                  "documents:getMeta": {
                    "id": "doc_shell",
                    "workspace_id": "ws_demo",
                    "title": "编辑器壳页面",
                    "updated_at": "2026-04-18T11:22:33Z",
                    "can_edit": true,
                    "show_structure": true
                  },
                  "documents:getContent": {
                    "title": "编辑器壳页面",
                    "content": [
                      {
                        "id": "heading_1",
                        "type": "heading",
                        "props": { "level": 1 },
                        "content": [{ "type": "text", "text": "第一节" }]
                      }
                    ],
                    "revision": 9,
                    "conflict_detection_key": "doc_shell:9",
                    "page_subtree": {
                      "projection_id": "kernel_projection:page_tree:doc_shell",
                      "projection": "page_tree",
                      "root_node_id": "doc_shell",
                      "root_node": {
                        "id": "doc_shell",
                        "parent_node_id": null,
                        "node_type": "page",
                        "block_id": null,
                        "anchor_block_id": null,
                        "depth": 0,
                        "metadata": {
                          "title": "编辑器壳页面",
                          "text_snippet": "页面首段",
                          "block_type": null,
                          "heading_level": null,
                          "numbering": null,
                          "child_count": 2,
                          "order": 0,
                          "path": ["编辑器壳页面"]
                        }
                      },
                      "subtree": {
                        "root_node_id": "doc_shell",
                        "nodes": [
                          {
                            "id": "doc_shell",
                            "parent_node_id": null,
                            "node_type": "page",
                            "block_id": null,
                            "anchor_block_id": null,
                            "depth": 0,
                            "metadata": {
                              "title": "编辑器壳页面",
                              "text_snippet": "页面首段",
                              "block_type": null,
                              "heading_level": null,
                              "numbering": null,
                              "child_count": 2,
                              "order": 0,
                              "path": ["编辑器壳页面"]
                            }
                          },
                          {
                            "id": "node_heading_1",
                            "parent_node_id": "doc_shell",
                            "node_type": "section",
                            "block_id": "heading_1",
                            "anchor_block_id": "heading_1",
                            "depth": 1,
                            "metadata": {
                              "title": "第一节",
                              "text_snippet": "第一节 页面首段",
                              "block_type": "heading",
                              "heading_level": 1,
                              "numbering": "1",
                              "child_count": 1,
                              "order": 0,
                              "path": ["编辑器壳页面", "第一节"]
                            }
                          },
                          {
                            "id": "node_para_1",
                            "parent_node_id": "node_heading_1",
                            "node_type": "content_node",
                            "block_id": "paragraph_1",
                            "anchor_block_id": null,
                            "depth": 2,
                            "metadata": {
                              "title": null,
                              "text_snippet": "这是正文第一段",
                              "block_type": "paragraph",
                              "heading_level": null,
                              "numbering": null,
                              "child_count": 0,
                              "order": 1,
                              "path": ["编辑器壳页面", "第一节", "这是正文第一段"]
                            }
                          }
                        ]
                      },
                      "outline": [
                        {
                          "id": "outline_heading_1",
                          "node_id": "node_heading_1",
                          "anchor_block_id": "heading_1",
                          "title": "第一节",
                          "level": 1,
                          "numbering": "1"
                        }
                      ],
                      "evidence": [],
                      "stats": {
                        "block_count": 3,
                        "heading_count": 1,
                        "evidence_count": 0,
                        "max_depth": 2
                      }
                    }
                  }
                }"#
                .into(),
            ),
            mutation_fixtures_json: None,
            dev_user_id: "dev-user".into(),
            dev_user_name: "开发用户".into(),
            dev_user_email: "dev@mnote.local".into(),
        }))
    }

    #[tokio::test]
    async fn block_editor_shell_returns_interactive_html_document() {
        let response = app()
            .oneshot(
                Request::builder()
                    .uri("/document-debug?documentId=doc_shell&workspaceId=ws_demo&host=next-document-page")
                    .body(Body::empty())
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::OK);
        let content_type = response
            .headers()
            .get("content-type")
            .and_then(|value| value.to_str().ok())
            .unwrap_or_default();
        assert!(content_type.contains("text/html"));
        assert_eq!(
            response
                .headers()
                .get("x-mnote-shell")
                .and_then(|value| value.to_str().ok()),
            Some("document-runtime-debug")
        );

        let body = to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let html = String::from_utf8(body.to_vec()).expect("utf8");
        assert!(html.contains("block-editor-shell-state"));
        assert!(html.contains("block_editor_shell.ready"));
        assert!(html.contains("human_editor.focus:"));
        assert!(html.contains("data-block-id"));
        assert!(html.contains("editor-row"));
        assert!(html.contains("next-document-page"));
        assert!(html.contains("focus / selection / hover"));
        assert!(html.contains("\"blocks\":["));
        assert!(html.contains("第一节"));
        assert!(html.contains("\"id\":\"heading_1\""));
        assert!(html.contains("Document Runtime Debug"));
    }

    #[tokio::test]
    async fn editor_interactions_shell_exposes_slash_reference_and_indent_controls() {
        let response = app()
            .oneshot(
                Request::builder()
                    .uri("/document-debug?documentId=doc_shell&workspaceId=ws_demo&host=next-document-page")
                    .body(Body::empty())
                    .expect("request"),
            )
            .await
            .expect("response");

        let body = to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let html = String::from_utf8(body.to_vec()).expect("utf8");
        assert!(html.contains("editor-command-slash"));
        assert!(html.contains("editor-command-indent"));
        assert!(html.contains("editor-command-outdent"));
        assert!(html.contains("[[page]]"));
        assert!(html.contains("((block))"));
        assert!(html.contains("human_editor.slash:"));
        assert!(html.contains("human_editor.reference:"));
        assert!(html.contains("\"indent_block\""));
        assert!(html.contains("\"outdent_block\""));
    }

    #[tokio::test]
    async fn editor_interactions_shell_exposes_heading_collapse_hooks() {
        let response = app()
            .oneshot(
                Request::builder()
                    .uri("/document-debug?documentId=doc_shell&workspaceId=ws_demo")
                    .body(Body::empty())
                    .expect("request"),
            )
            .await
            .expect("response");

        let body = to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let html = String::from_utf8(body.to_vec()).expect("utf8");
        assert!(html.contains("editor-command-toggle-heading"));
        assert!(html.contains("human_editor.toggle_heading_collapse:"));
        assert!(html.contains("\"collapsed\":false"));
        assert!(html.contains("\"headingLevel\":1"));
        assert!(html.contains("\"blockType\":\"heading\""));
    }

    #[tokio::test]
    async fn human_editor_runtime_shell_includes_real_input_and_save_markers() {
        let response = app()
            .oneshot(
                Request::builder()
                    .uri("/document-debug?documentId=doc_shell&workspaceId=ws_demo")
                    .body(Body::empty())
                    .expect("request"),
            )
            .await
            .expect("response");

        let body = to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let html = String::from_utf8(body.to_vec()).expect("utf8");
        assert!(html.contains("editor-save-status"));
        assert!(html.contains("/api/documents/save"));
        assert!(html.contains("editor-input"));
        assert!(html.contains("human_editor_runtime.ready"));
    }

    #[tokio::test]
    async fn human_editor_input_shell_wires_beforeinput_and_composition_events() {
        let response = app()
            .oneshot(
                Request::builder()
                    .uri("/document-debug?documentId=doc_shell&workspaceId=ws_demo")
                    .body(Body::empty())
                    .expect("request"),
            )
            .await
            .expect("response");

        let body = to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let html = String::from_utf8(body.to_vec()).expect("utf8");
        assert!(html.contains("human_editor_input.beforeinput"));
        assert!(html.contains("human_editor_input.composition"));
        assert!(html.contains("selectionStart"));
        assert!(html.contains("compositionstart"));
    }

    #[tokio::test]
    async fn human_editor_transactions_transform_route_applies_split_command() {
        let response = app()
            .oneshot(
                Request::builder()
                    .method("POST")
                    .uri("/api/documents/runtime/transform")
                    .header("content-type", "application/json")
                    .body(Body::from(
                        json!({
                            "documentId": "doc_shell",
                            "workspaceId": "ws_demo",
                            "snapshot": {
                                "blocks": [
                                    {
                                        "id": "block_a",
                                        "blockType": "paragraph",
                                        "parentId": null,
                                        "depth": 0,
                                        "text": "AlphaBeta",
                                        "headingLevel": null,
                                        "checked": null,
                                        "collapsed": false,
                                        "editable": true,
                                        "rawType": "paragraph",
                                        "language": null
                                    }
                                ]
                            },
                            "command": {
                                "action": "split_block",
                                "block_id": "block_a",
                                "offset": 5,
                                "new_block_id": "block_b"
                            }
                        })
                        .to_string(),
                    ))
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::OK);
        let body = to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let payload: Value = serde_json::from_slice(&body).expect("json");
        let blocks = payload["result"]["blocks"].as_array().expect("blocks");
        assert_eq!(blocks.len(), 2);
        assert_eq!(blocks[0]["text"], "Alpha");
        assert_eq!(blocks[1]["text"], "Beta");
    }

    #[tokio::test]
    async fn human_editor_commands_shell_exposes_slash_and_reference_runtime_controls() {
        let response = app()
            .oneshot(
                Request::builder()
                    .uri("/document-debug?documentId=doc_shell&workspaceId=ws_demo")
                    .body(Body::empty())
                    .expect("request"),
            )
            .await
            .expect("response");

        let body = to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let html = String::from_utf8(body.to_vec()).expect("utf8");
        assert!(html.contains("human_editor.slash_menu:"));
        assert!(html.contains("human_editor.reference:"));
        assert!(html.contains("[[page]]"));
        assert!(html.contains("((block))"));
        assert!(html.contains("set_block_type"));
    }
}