stats-timeline

use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::separator::{separator, SeparatorProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};

/// 出来事 1 件分のダミーデータ（架空、実企業名・PII とは無関係）。
struct EventItem {
    /// `<time datetime>` へそのまま使う ISO 8601 表記（年月）。
    date_attr: &'static str,
    /// 表示用の日付文言。
    date_label: &'static str,
    title: &'static str,
    body: &'static str,
}

/// 出来事一覧（架空、4 件、日付・題とも相異なる）。
const EVENTS: [EventItem; 4] = [
    EventItem {
        date_attr: "2023-04",
        date_label: "2023 年 4 月",
        title: "プロジェクト発足",
        body: "説明用の架空のキックオフです。最小構成の設計をまとめました。",
    },
    EventItem {
        date_attr: "2023-11",
        date_label: "2023 年 11 月",
        title: "最初の公開版",
        body: "説明用の架空の初回リリースです。中核機能を公開しました。",
    },
    EventItem {
        date_attr: "2024-07",
        date_label: "2024 年 7 月",
        title: "利用チームの拡大",
        body: "説明用の架空の拡大期です。導入チーム数が大きく伸びました。",
    },
    EventItem {
        date_attr: "2025-05",
        date_label: "2025 年 5 月",
        title: "大型刷新",
        body: "説明用の架空の刷新です。既定エスケープの製品化を完了しました。",
    },
];

/// 出来事 1 件（`<time>` + ドット/罫線 + 題 + 説明）。
fn event_item(item: &EventItem) -> Node {
    el(
        "li",
        vec![("class", "blocks-stats-timeline-item")],
        vec![
            el(
                "time",
                vec![
                    ("datetime", item.date_attr),
                    ("class", "blocks-stats-timeline-date"),
                ],
                vec![text(item.date_label)],
            ),
            div(
                vec![("class", "blocks-stats-timeline-marker")],
                vec![
                    el(
                        "span",
                        vec![
                            ("aria-hidden", "true"),
                            ("class", "blocks-stats-timeline-dot"),
                        ],
                        vec![],
                    ),
                    separator(
                        &SeparatorProps::default(),
                        vec![
                            ("aria-hidden", "true"),
                            ("data-blocks-stats-timeline-rule", ""),
                        ],
                    ),
                ],
            ),
            heading(
                HeadingLevel::H4,
                &HeadingProps {
                    size: HeadingSize::Lg,
                    weight: HeadingWeight::Semibold,
                },
                vec![],
                vec![text(item.title)],
            ),
            styled_text::text(
                &TextProps {
                    size: TextSize::Sm,
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text(item.body)],
            ),
        ],
    )
}

/// `stats-timeline` の Demo 本体（大見出し + リード文 + 出来事 4 件）。
/// 呼び出しごとに同一の `Node` を返す純関数。
pub fn demo() -> Node {
    let intro = div(
        vec![("class", "blocks-stats-timeline-intro")],
        vec![
            heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl3,
                    weight: HeadingWeight::Bold,
                },
                vec![],
                vec![text("プロジェクトの歩み")],
            ),
            styled_text::text(
                &TextProps {
                    size: TextSize::Lg,
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text("日付と出来事はすべて説明用の架空の内容です。")],
            ),
        ],
    );

    let list = el(
        "ol",
        vec![("class", "blocks-stats-timeline-list"), ("role", "list")],
        EVENTS.iter().map(event_item).collect(),
    );

    div(
        vec![("class", "blocks-stats-timeline-layout")],
        vec![intro, list],
    )
}