action-panel-stacked

use fandhe_frontend_core::{div, span, text, Node};
use fandhe_frontend_pre_styled_ui::button::{button, ButtonProps};
use fandhe_frontend_pre_styled_ui::card::{self, CardProps, CardVariant};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};

/// リンク操作版の遷移先（外部の実在 URL、`href="#"` は使わない、他 block と
/// 同型の判断。モジュール doc「リンク操作のラベルと遷移先」参照）。
const REPO: &str = "https://github.com/Fandhe-AI/fandhe-frontend";

/// 3 インスタンスが共有するカード骨格（見出し・説明・主操作を縦に積む）。
/// `variant` でカードの見せ方（影付き/面色のみ）を切り替え、`action` に
/// 呼び出し側が組み立てたボタン or リンクを渡す。
fn panel(
    variant: CardVariant,
    instance: &'static str,
    title: &str,
    description: &str,
    action: Node,
) -> Node {
    card::root(
        CardProps {
            variant,
            ..CardProps::default()
        },
        vec![("data-blocks-action-panel-stacked-panel", instance)],
        vec![
            card::header(
                vec![],
                vec![heading(
                    HeadingLevel::H3,
                    &HeadingProps {
                        size: HeadingSize::Lg,
                        weight: HeadingWeight::Semibold,
                    },
                    vec![],
                    vec![text(title)],
                )],
            ),
            card::body(
                vec![("class", "blocks-action-panel-stacked-body")],
                vec![styled_text::text(
                    &TextProps {
                        variant: TextVariant::Muted,
                        ..TextProps::default()
                    },
                    vec![],
                    vec![text(description)],
                )],
            ),
            card::footer(
                vec![("class", "blocks-action-panel-stacked-footer")],
                vec![action],
            ),
        ],
    )
}

/// (1) 主参照: ボタン操作・影付きカード。
fn button_elevated_panel() -> Node {
    panel(
        CardVariant::Elevated,
        "button-elevated",
        "通知設定を見直す",
        "メール・アプリ内通知の頻度をまとめて見直せます。設定は後からいつでも変更できます。",
        button(
            &ButtonProps::default(),
            vec![("data-blocks-action-panel-stacked-action", "")],
            vec![text("設定を見直す")],
        ),
    )
}

/// (2) 矢印付きリンク操作・影付きカード。
fn link_elevated_panel() -> Node {
    let action = link::root(
        REPO,
        &LinkProps {
            external: true,
            ..LinkProps::default()
        },
        vec![("data-blocks-action-panel-stacked-action", "")],
        vec![
            text("GitHub で見る"),
            span(vec![("aria-hidden", "true")], vec![text(" \u{2192}")]),
        ],
    );
    panel(
        CardVariant::Elevated,
        "link-elevated",
        "リポジトリを見る",
        "ソースコードや Issue をリポジトリでまとめて確認できます。",
        action,
    )
}

/// (3) ボタン操作・面色のみの枠（影なし）。
fn button_subtle_panel() -> Node {
    panel(
        CardVariant::Subtle,
        "button-subtle",
        "ワークスペースをアーカイブする",
        "アーカイブ後もデータは保持され、必要になれば復元できます。",
        button(
            &ButtonProps::default(),
            vec![("data-blocks-action-panel-stacked-action", "")],
            vec![text("アーカイブする")],
        ),
    )
}

/// `action-panel-stacked` の Demo 本体（3 インスタンスを縦に並べる。
/// [`LAYOUT_CSS`] 参照）。
#[must_use]
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-action-panel-stacked-layout")],
        vec![
            button_elevated_panel(),
            link_elevated_panel(),
            button_subtle_panel(),
        ],
    )
}