comparison-feature-rows

use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::badge::{self, BadgeProps, BadgeVariant};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::separator::{self, SeparatorProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};
use fandhe_frontend_pre_styled_ui::ColorPalette;

/// 円のみの抽象アイコン（`stroke` のみで塗り面を持たない、`feature_expand::
/// geo_icon` と同型の対処）。
fn glyph_circle() -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "circle",
            vec![
                ("cx", "12"),
                ("cy", "12"),
                ("r", "8"),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
            ],
            vec![],
        )],
    )
}

/// 四角の輪郭のみの抽象アイコン。
fn glyph_square() -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![
                ("d", "M5 5h14v14H5z"),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linejoin", "round"),
            ],
            vec![],
        )],
    )
}

/// 水平線 3 本の抽象アイコン（一覧・段階性を示す図形）。
fn glyph_lines() -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![
                ("d", "M4 6h16M4 12h16M4 18h16"),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linecap", "round"),
            ],
            vec![],
        )],
    )
}

/// 機能 1 行分のダミーデータ（架空、実在の製品・企業とは無関係）。
struct FeatureRow {
    glyph: fn() -> Node,
    name: &'static str,
    ours: &'static str,
    theirs: &'static str,
}

/// 比較行一覧（架空、3 行固定。検索インデックスの肥大を抑えるため件数を
/// 増やさない）。
const ROWS: [FeatureRow; 3] = [
    FeatureRow {
        glyph: glyph_circle,
        name: "同時編集",
        ours: "何人でも同時に編集でき、変更はリアルタイムに反映されます。",
        theirs: "同時編集は上位プランのみで、人数に上限があります。",
    },
    FeatureRow {
        glyph: glyph_square,
        name: "オフライン対応",
        ours: "オフラインでも編集を続けられ、復帰時に自動で同期します。",
        theirs: "オフライン編集には対応していません。",
    },
    FeatureRow {
        glyph: glyph_lines,
        name: "変更履歴",
        ours: "すべての変更履歴を無期限に保持し、いつでも復元できます。",
        theirs: "変更履歴の保持期間は 30 日間に限られます。",
    },
];

/// 見出しブロック（タグライン `badge` + セクション見出し + リード文）。
fn intro() -> Node {
    div(
        vec![("class", "blocks-comparison-feature-rows-intro")],
        vec![
            badge::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("主要な機能を自社・他社で並べて確認できます。")],
            ),
        ],
    )
}

/// 機能名セル（アイコン + `heading H4`）。
fn feature_cell(row: &FeatureRow) -> Node {
    div(
        vec![("data-blocks-comparison-feature-rows-feature", "")],
        vec![
            (row.glyph)(),
            heading(
                HeadingLevel::H4,
                &HeadingProps {
                    size: HeadingSize::Md,
                    weight: HeadingWeight::Semibold,
                },
                vec![],
                vec![text(row.name)],
            ),
        ],
    )
}

/// 自社/他社の説明セル（列ラベル `badge` + 説明 `text`）。
fn party_cell(
    hook: &'static str,
    label: &'static str,
    variant: BadgeVariant,
    description: &str,
) -> Node {
    div(
        vec![(hook, "")],
        vec![
            badge::badge(
                &BadgeProps {
                    variant,
                    palette: if hook.ends_with("ours") {
                        ColorPalette::Accent
                    } else {
                        ColorPalette::Neutral
                    },
                    ..BadgeProps::default()
                },
                vec![],
                vec![text(label)],
            ),
            styled_text::text(&TextProps::default(), vec![], vec![text(description)]),
        ],
    )
}

/// 機能 1 行分（機能名・自社・他社の 3 要素）。
fn feature_row(row: &FeatureRow) -> Node {
    div(
        vec![("data-blocks-comparison-feature-rows-row", "")],
        vec![
            feature_cell(row),
            party_cell(
                "data-blocks-comparison-feature-rows-ours",
                "自社",
                BadgeVariant::Solid,
                row.ours,
            ),
            party_cell(
                "data-blocks-comparison-feature-rows-theirs",
                "他社",
                BadgeVariant::Outline,
                row.theirs,
            ),
        ],
    )
}

/// `comparison-feature-rows` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数（[`crate::blocks`] モジュール doc「静的表示」節）。
pub fn demo() -> Node {
    let last_index = ROWS.len().saturating_sub(1);
    let mut list_children: Vec<Node> = Vec::new();
    for (index, row) in ROWS.iter().enumerate() {
        list_children.push(feature_row(row));
        if index != last_index {
            list_children.push(separator::separator(
                &SeparatorProps::default(),
                vec![("data-blocks-comparison-feature-rows-separator", "")],
            ));
        }
    }

    div(
        vec![("data-blocks-comparison-feature-rows-root", "")],
        vec![
            intro(),
            div(
                vec![("data-blocks-comparison-feature-rows-list", "")],
                list_children,
            ),
        ],
    )
}