stats-split

use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::badge::{badge, BadgeProps};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::recipe::Size;
use fandhe_frontend_pre_styled_ui::separator::{self, SeparatorProps};
use fandhe_frontend_pre_styled_ui::stat;
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};
use fandhe_frontend_pre_styled_ui::Orientation;

/// 数値指標 1 件分（`stat::root` + `label`/`value_text`/`value_unit`）。
/// `bordered_attr` は罫線バリアント区別用の `data-*` 属性 1 件
/// （下罫線・左罫線のいずれかを [`LAYOUT_CSS`] のセレクタで切り替える）。
fn stat_item(label: &str, value: &str, unit: &str, bordered_attr: (&str, &str)) -> Node {
    stat::root(
        Size::Md,
        vec![bordered_attr],
        vec![
            stat::label(vec![], vec![text(label)]),
            stat::value_text(
                vec![],
                vec![text(value), stat::value_unit(vec![], vec![text(unit)])],
            ),
        ],
    )
}

/// 基準形（R0337 主参照）: 左に `badge`/`heading`/`text`、右に 2 列 6 指標
/// （下罫線）。
fn base_variant() -> Node {
    let left = div(
        vec![("class", "blocks-stats-split-left")],
        vec![
            badge(&BadgeProps::default(), vec![], vec![text("実績")]),
            heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl2,
                    weight: HeadingWeight::Bold,
                },
                vec![],
                vec![text("数字で見る導入実績")],
            ),
            styled_text::text(
                &TextProps {
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text(
                    "架空のダミー指標です。導入企業数・稼働率・処理件数などの傾向を\
                     まとめて示す想定の Demo です。",
                )],
            ),
        ],
    );

    let items = [
        ("導入企業数", "1,240", "社"),
        ("稼働率", "99.9", "%"),
        ("月間処理件数", "3.6", "M件"),
        ("平均応答時間", "48", "ms"),
        ("継続利用率", "96", "%"),
        ("サポート満足度", "4.8", "/5"),
    ];
    let grid = div(
        vec![("class", "blocks-stats-split-grid")],
        items
            .iter()
            .map(|(label, value, unit)| {
                stat_item(
                    label,
                    value,
                    unit,
                    ("data-blocks-stats-split-stat-bottom", ""),
                )
            })
            .collect(),
    );

    div(
        vec![
            ("data-blocks-stats-split-row", ""),
            ("data-blocks-stats-split-variant", "base"),
        ],
        vec![left, grid],
    )
}

/// 導入行 + 左罫線（R0339）: `heading`/`text` の横並び導入行 + `separator`
/// + 4 指標（左罫線）。
fn intro_row_variant() -> Node {
    let intro = div(
        vec![("class", "blocks-stats-split-intro")],
        vec![
            heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl2,
                    weight: HeadingWeight::Bold,
                },
                vec![],
                vec![text("プラットフォーム全体の状況")],
            ),
            styled_text::text(
                &TextProps {
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text("直近期間の架空サマリーです。")],
            ),
        ],
    );

    let items = [
        ("アクティブ組織", "820", "社"),
        ("新規登録", "154", "件/月"),
        ("平均処理速度", "1.2", "秒"),
        ("障害件数", "0", "件"),
    ];
    let grid = div(
        vec![("class", "blocks-stats-split-grid-intro")],
        items
            .iter()
            .map(|(label, value, unit)| {
                stat_item(
                    label,
                    value,
                    unit,
                    ("data-blocks-stats-split-stat-left", ""),
                )
            })
            .collect(),
    );

    div(
        vec![
            ("class", "blocks-stats-split-intro-row"),
            ("data-blocks-stats-split-variant", "intro-row"),
        ],
        vec![
            intro,
            separator::separator(
                &SeparatorProps {
                    orientation: Orientation::Horizontal,
                    ..SeparatorProps::default()
                },
                vec![],
            ),
            grid,
        ],
    )
}

/// `stats-split` の Demo 本体（基準形 + 導入行の 2 インスタンスを縦に
/// 並べる）。呼び出しごとに同一の `Node` を返す純関数。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-stats-split-layout")],
        vec![base_variant(), intro_row_variant()],
    )
}