docs-layout-toc-collapsible

use fandhe_frontend_core::{div, el, li, nav, p, span, text, ul, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::collapsible::{self, OpenState};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps};
use fandhe_frontend_pre_styled_ui::Size;

/// 目次の節一覧（id スラッグ, ラベル）。単一の真実源。トリガーに出す
/// 現在の節名・`aria-current` を付けるリンク・本文見出し `id` は、
/// すべてここと [`CURRENT`] から導く。
const SECTIONS: &[(&str, &str)] = &[
    ("overview", "概要"),
    ("installation", "インストール"),
    ("configuration", "設定"),
    ("next-steps", "次のステップ"),
];

/// 現在の節（[`SECTIONS`] のインデックス）。
const CURRENT: usize = 1;

/// 本文見出し `id`（例 A のみに存在、両インスタンスの `href` が共有する）。
fn section_id(slug: &str) -> String {
    format!("blocks-docs-layout-toc-collapsible-sec-{slug}")
}

/// 下向き矢印アイコン（自作の単純な線分パス、実在アイコンセットは
/// 使わない。`action_panel_footer_bar::geo_icon` と同型）。
fn chevron_icon() -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![
                ("d", "M6 9l6 6l6 -6"),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linecap", "round"),
                ("stroke-linejoin", "round"),
            ],
            vec![],
        )],
    )
}

/// 上向き矢印アイコン（「ページの先頭へ」ボタン用）。
fn arrow_up_icon() -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![
                ("d", "M12 19V5 M6 11l6 -6l6 6"),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linecap", "round"),
                ("stroke-linejoin", "round"),
            ],
            vec![],
        )],
    )
}

/// 目次トリガー（ラベル「目次」+ 現在の節名 → indicator の 2 子構成）。
fn trigger(content_id: &str, state: OpenState) -> Node {
    let label = span(
        vec![("data-blocks-docs-layout-toc-collapsible-trigger-label", "")],
        vec![
            span(
                vec![(
                    "data-blocks-docs-layout-toc-collapsible-trigger-eyebrow",
                    "",
                )],
                vec![text("目次")],
            ),
            span(vec![], vec![text(SECTIONS[CURRENT].1)]),
        ],
    );
    collapsible::trigger(
        state,
        true,
        Some(content_id),
        vec![("data-blocks-docs-layout-toc-collapsible-trigger", "")],
        vec![
            label,
            collapsible::indicator(state, true, vec![], vec![chevron_icon()]),
        ],
    )
}

/// 目次の中身（節リンク一覧 + 「ページの先頭へ」ボタン）。
fn content(suffix: &str, content_id: &str, state: OpenState) -> Node {
    let items: Vec<Node> = SECTIONS
        .iter()
        .enumerate()
        .map(|(index, (slug, label))| {
            let href = format!("#{}", section_id(slug));
            let mut attrs: Vec<(&str, &str)> =
                vec![("data-blocks-docs-layout-toc-collapsible-link", "")];
            if index == CURRENT {
                attrs.push(("aria-current", "location"));
            }
            li(
                vec![],
                vec![link::root(
                    href.as_str(),
                    &LinkProps::default(),
                    attrs,
                    vec![text(*label)],
                )],
            )
        })
        .collect();

    let nav_label = format!("ページ内目次（例 {suffix}）");
    let toc_nav = nav(
        vec![("aria-label", nav_label.as_str())],
        vec![ul(vec![], items)],
    );

    // 「ページの先頭へ」は実際の送信先・スクロール処理を持たない静的な
    // 見本のため、トリガーと同じく `disabled: true` で固定し、押しても
    // キーボード操作でも反応しないことをネイティブ `disabled` 属性で
    // 構造的に保証する（[`trigger`] と同型の確定パターン）。既定の
    // `opacity: 0.5`/`cursor: not-allowed` は見本として読みにくくなるため
    // [`LAYOUT_CSS`] で打ち消す。
    let back_to_top = button::button(
        &ButtonProps {
            variant: ButtonVariant::Ghost,
            size: Size::Sm,
            disabled: true,
            ..ButtonProps::default()
        },
        vec![("data-blocks-docs-layout-toc-collapsible-back-to-top", "")],
        vec![arrow_up_icon(), text("ページの先頭へ")],
    );

    collapsible::content(
        state,
        false,
        Some(content_id),
        vec![("data-blocks-docs-layout-toc-collapsible-content", "")],
        vec![toc_nav, back_to_top],
    )
}

/// 目次インスタンス 1 件（`suffix` は `"a"`/`"b"` で `id` を分ける）。
fn toc(suffix: &'static str, state: OpenState) -> Node {
    let content_id = format!("blocks-docs-layout-toc-collapsible-{suffix}-content");
    collapsible::root(
        state,
        false,
        vec![("class", "blocks-docs-layout-toc-collapsible-instance")],
        vec![
            trigger(&content_id, state),
            content(suffix, &content_id, state),
        ],
    )
}

/// 本文（例 A のみに置く。目次リンクの参照先見出しを提供する）。
fn article_body() -> Node {
    let mut children: Vec<Node> = Vec::new();
    for (slug, label) in SECTIONS {
        let id = section_id(slug);
        children.push(heading(
            HeadingLevel::H3,
            &HeadingProps {
                size: HeadingSize::Md,
                weight: HeadingWeight::Semibold,
            },
            vec![("id", id.as_str())],
            vec![text(*label)],
        ));
        children.push(p(
            vec![],
            vec![text(
                "本文はプレースホルダーです。実際のページでは、ここに節ごとの \
                 解説が入ります。",
            )],
        ));
    }
    div(
        vec![("class", "blocks-docs-layout-toc-collapsible-body")],
        children,
    )
}

/// `docs-layout-toc-collapsible` の Demo 本体（例 A・B を縦に並べる。
/// 呼び出しごとに同一の `Node` を返す純関数）。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-docs-layout-toc-collapsible-layout")],
        vec![
            toc("a", OpenState::Open),
            article_body(),
            toc("b", OpenState::Closed),
        ],
    )
}