docs-layout-prev-next

use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::card::{self, CardProps, CardVariant};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps};
use fandhe_frontend_pre_styled_ui::pagination::{self, next_trigger, prev_trigger, ItemMode};
use fandhe_frontend_pre_styled_ui::recipe::{ColorPalette, Size};
use fandhe_frontend_pre_styled_ui::text::{
    self as styled_text, TextProps, TextSize, TextVariant, TextWeight,
};

/// 自作の幾何アイコン（線画。モジュール doc「アイコンは自作の単純図形」
/// 節参照）。`path` へ `fill="none"` + `stroke="currentColor"` を明示し、
/// `icon` の `<svg>` 側が固定で持つ `fill="currentColor"`（塗り面）を
/// 上書きして線画（ストローク）として描画する。
fn geo_icon(path_d: &'static str) -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![
                ("d", path_d),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linecap", "round"),
                ("stroke-linejoin", "round"),
            ],
            vec![],
        )],
    )
}

/// 左向き矢印アイコン（シェブロン）。
fn left_arrow_icon() -> Node {
    geo_icon("M15 4l-8 8 8 8")
}

/// 右向き矢印アイコン（シェブロン）。
fn right_arrow_icon() -> Node {
    geo_icon("M9 4l8 8-8 8")
}

/// 方向ラベル（`前へ`/`次へ`）+ ページタイトルの縦積み（版 A）。
fn meta_stack(direction_label: &'static str, title: &'static str) -> Node {
    div(
        vec![("class", "blocks-docs-layout-prev-next-meta")],
        vec![
            styled_text::text(
                &TextProps {
                    size: TextSize::Xs,
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text(direction_label)],
            ),
            styled_text::text(
                &TextProps {
                    size: TextSize::Sm,
                    weight: TextWeight::Medium,
                    ..TextProps::default()
                },
                vec![],
                vec![text(title)],
            ),
        ],
    )
}

/// A: 代表構成（R0083）。方向ラベル + タイトルの縦積みを矢印アイコンと
/// 併記する。
fn version_stacked_labels() -> Node {
    pagination::root(
        Size::Md,
        ColorPalette::Accent,
        "前後のページ（縦積み）",
        vec![("data-blocks-docs-layout-prev-next-nav", "")],
        vec![
            prev_trigger(
                ItemMode::Link { href: "../../" },
                false,
                vec![],
                vec![left_arrow_icon(), meta_stack("前へ", "はじめに")],
            ),
            next_trigger(
                ItemMode::Link {
                    href: "../../getting-started/quickstart/",
                },
                false,
                vec![],
                vec![meta_stack("次へ", "クイックスタート"), right_arrow_icon()],
            ),
        ],
    )
}

/// B: 前後 1 件ずつの 2 ボタン（R0081）。方向ラベルを省き、アイコン +
/// タイトルのみの 1 行にする。
fn version_two_buttons() -> Node {
    pagination::root(
        Size::Md,
        ColorPalette::Accent,
        "前後のページ（ボタン）",
        vec![("data-blocks-docs-layout-prev-next-nav", "")],
        vec![
            prev_trigger(
                ItemMode::Link {
                    href: "../../guides/",
                },
                false,
                vec![],
                vec![left_arrow_icon(), text("ガイド一覧")],
            ),
            next_trigger(
                ItemMode::Link {
                    href: "../../guides/component-authoring/",
                },
                false,
                vec![],
                vec![text("コンポーネント記述ガイド"), right_arrow_icon()],
            ),
        ],
    )
}

/// C: 淡色帯 + 次側に概要文（R0082）。帯の中へ `pagination::root` +
/// `link::root` を前後 2 件置く（`link` 部品の使用例）。次側はタイトル +
/// 矢印アイコンの行と概要文を縦積みにする（`blocks-docs-layout-prev-next-
/// next-title-row` でタイトル行だけをまとめ、概要文はその下に置く）。
fn version_band() -> Node {
    card::root(
        CardProps {
            variant: CardVariant::Subtle,
            ..CardProps::default()
        },
        vec![("data-blocks-docs-layout-prev-next-band", "")],
        vec![card::body(
            vec![],
            vec![pagination::root(
                Size::Md,
                ColorPalette::Accent,
                "前後のページ（帯）",
                vec![],
                vec![
                    link::root(
                        "../../",
                        &LinkProps::default(),
                        vec![],
                        vec![left_arrow_icon(), meta_stack("前へ", "はじめに")],
                    ),
                    link::root(
                        "../../guides/component-authoring/",
                        &LinkProps::default(),
                        vec![("data-blocks-docs-layout-prev-next-next-summary", "")],
                        vec![
                            div(
                                vec![("class", "blocks-docs-layout-prev-next-next-title-row")],
                                vec![
                                    meta_stack("次へ", "コンポーネント記述ガイド"),
                                    right_arrow_icon(),
                                ],
                            ),
                            styled_text::text(
                                &TextProps {
                                    size: TextSize::Sm,
                                    variant: TextVariant::Muted,
                                    ..TextProps::default()
                                },
                                vec![],
                                vec![text(
                                    "部品の props と anatomy の書き方をまとめたガイドです。",
                                )],
                            ),
                        ],
                    ),
                ],
            )],
        )],
    )
}

/// `docs-layout-prev-next` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-docs-layout-prev-next-stack")],
        vec![
            version_stacked_labels(),
            version_two_buttons(),
            version_band(),
        ],
    )
}