empty-state-setup-steps

use fandhe_frontend_core::{div, el, strong, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps};
use fandhe_frontend_pre_styled_ui::empty_state::{
    self, EmptyStateIndicatorVariant, EmptyStateProps,
};
use fandhe_frontend_pre_styled_ui::fandhe_frontend_headless_ui::steps::Steps;
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::recipe::ColorPalette;
use fandhe_frontend_pre_styled_ui::steps;
use fandhe_frontend_pre_styled_ui::{Orientation, Size};

/// 自作の幾何アイコン（角丸の四角に「+」を重ねた単純な折れ線、
/// `page_heading_meta::geo_icon` と同型で [`icon::icon`] へ独自の `path`/
/// `rect` を渡すのみ）。`aria-hidden="true"` の装飾用 SVG で、実在
/// ブランドのロゴ・商標は模さない。
fn folder_icon() -> Node {
    icon(
        &IconProps::default(),
        // `empty_state::indicator` は `font-size` を Size 連動（Lg で拡大）
        // させ、子アイコンが `1em` で追従する設計（`empty_state.rs` モジュール
        // doc「`_icon: { boxSize: 1em }`」節）。`icon::icon` の `Size` variant
        // は固定 rem 実寸のため、インライン style で上書きして追従させる
        // （インライン style は recipe が発行するクラスより詳細度で勝つ、
        // `empty_state_card_header::folder_plus_icon` と同型の判断）。
        vec![("style", "width: 1em; height: 1em;")],
        vec![
            el(
                "rect",
                vec![
                    ("x", "3"),
                    ("y", "5"),
                    ("width", "18"),
                    ("height", "14"),
                    ("rx", "2"),
                    ("fill", "none"),
                    ("stroke", "currentColor"),
                    ("stroke-width", "1.5"),
                ],
                vec![],
            ),
            el(
                "path",
                vec![
                    ("d", "M12 10v6M9 13h6"),
                    ("fill", "none"),
                    ("stroke", "currentColor"),
                    ("stroke-width", "1.5"),
                    ("stroke-linecap", "round"),
                ],
                vec![],
            ),
        ],
    )
}

/// 導入手順 1 段分（番号インジケータ + 見出し + 説明）を組み立てる内部
/// ヘルパ。`steps::trigger`/`content` を使わず `item` 直下へ静的な構造を
/// 置く（モジュール冒頭「`steps::trigger`/`content`/`separator` を置かない
/// 理由」節参照）。
fn step<'a>(s: &Steps, index: usize, heading: &'a str, description: &'a str) -> Node {
    // `aria-current="step"` は本来 `trigger` のみに付与される
    // （`steps.rs` モジュール doc）が、本 Demo は `trigger` を置かないため
    // （モジュール冒頭「`steps::trigger`/`content`/`separator` を置かない
    // 理由」節）現在地が支援技術へ一切伝わらない。`item` は同属性を
    // 予約しないため、current な段にのみ明示付与して代替する。
    let item_attrs = if index == s.step() {
        vec![("aria-current", "step")]
    } else {
        vec![]
    };
    steps::item(
        s,
        index,
        item_attrs,
        vec![
            steps::indicator(s, index, vec![], vec![text((index + 1).to_string())]),
            div(
                vec![("data-blocks-empty-state-setup-steps-step-body", "")],
                vec![
                    div(
                        vec![("data-blocks-empty-state-setup-steps-step-title", "")],
                        vec![strong(vec![], vec![text(heading)])],
                    ),
                    div(vec![], vec![text(description)]),
                ],
            ),
        ],
    )
}

/// `empty-state-setup-steps` の Demo 本体（大きめの空状態 + 導入手順 3 段。
/// 最初の手順を current・残りを incomplete で固定する）。呼び出しごとに
/// 同一の `Node` を返す純関数。
pub fn demo() -> Node {
    let s = Steps::new(3, 0, Orientation::Horizontal);

    let message = empty_state::root(
        &EmptyStateProps {
            size: Size::Lg,
            ..EmptyStateProps::default()
        },
        vec![("data-blocks-empty-state-setup-steps-message", "")],
        vec![empty_state::content(
            vec![],
            vec![
                empty_state::indicator_with(
                    EmptyStateIndicatorVariant::Boxed,
                    vec![],
                    vec![folder_icon()],
                ),
                empty_state::title(vec![], vec![text("まだプロジェクトがありません")]),
                empty_state::description(
                    vec![],
                    vec![text(
                        "最初のプロジェクトを作成すると、ここに一覧が表示されます。",
                    )],
                ),
                empty_state::actions(
                    vec![],
                    vec![button::button(
                        &ButtonProps::default(),
                        vec![],
                        vec![text("最初のプロジェクトを作成")],
                    )],
                ),
            ],
        )],
    );

    let steps_root = steps::root(
        Size::Md,
        ColorPalette::Accent,
        &s,
        vec![("data-blocks-empty-state-setup-steps-steps", "")],
        vec![steps::list(
            &s,
            vec![],
            vec![
                step(
                    &s,
                    0,
                    "プロジェクトを作成",
                    "名前と説明を入力して、新しいプロジェクトを作ります。",
                ),
                step(
                    &s,
                    1,
                    "メンバーを招待",
                    "メールアドレスでチームメンバーを招待します。",
                ),
                step(
                    &s,
                    2,
                    "最初のタスクを登録",
                    "着手するタスクを追加して作業を始めます。",
                ),
            ],
        )],
    );

    div(
        vec![("class", "blocks-empty-state-setup-steps-root")],
        vec![message, steps_root],
    )
}