stats-with-image

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::badge::{self, BadgeProps};
use fandhe_frontend_pre_styled_ui::heading::{self, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::image::{self, AspectRatio, ImageFit, ImageProps};
use fandhe_frontend_pre_styled_ui::stat;
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};
use fandhe_frontend_pre_styled_ui::Size;

const IMAGE_ATTR: &str = "data-blocks-stats-with-image-image";
const STAT_ATTR: &str = "data-blocks-stats-with-image-stat";
const STAT_LABEL_ATTR: &str = "data-blocks-stats-with-image-stat-label";
const REVERSE_ATTR: &str = "data-blocks-stats-with-image-reverse";
const BLEED_ATTR: &str = "data-blocks-stats-with-image-bleed";

/// 各形の直前に置く短い形ラベル（`styled_text::text` の `Sm`/`Muted`、
/// `hero_split_image::variant_label` と同型）。
fn variant_label(label: &'static str) -> Node {
    styled_text::text(
        &TextProps {
            size: TextSize::Sm,
            variant: TextVariant::Muted,
            ..TextProps::default()
        },
        vec![],
        vec![text(label)],
    )
}

/// 数値指標 1 件分（`stat::root` + `label`/`value_text`、
/// `stats_background_image::stat_item` と同じ合成方法）。
fn stat_item(label: &str, value: &str) -> Node {
    stat::root(
        Size::Lg,
        vec![(STAT_ATTR, "")],
        vec![
            stat::label(vec![(STAT_LABEL_ATTR, "")], vec![text(label)]),
            stat::value_text(vec![], vec![text(value)]),
        ],
    )
}

/// コピー列（badge → 見出し → リード文 → 指標グリッド）。3 形共通の構成。
fn copy(
    tagline: &'static str,
    title: &'static str,
    description: &'static str,
    stats: Vec<Node>,
) -> Node {
    div(
        vec![("class", "blocks-stats-with-image-copy")],
        vec![
            badge::badge(&BadgeProps::default(), vec![], vec![text(tagline)]),
            heading::heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl3,
                    ..HeadingProps::default()
                },
                vec![],
                vec![text(title)],
            ),
            styled_text::text(
                &TextProps {
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text(description)],
            ),
            div(vec![("class", "blocks-stats-with-image-grid")], stats),
        ],
    )
}

/// 形 A（R0702 基準形）: コピー列（指標 2 件）+ 画像。`lg` 以上で画像を右へ
/// 置く（`grid-column` のみで見た目を入れ替え、DOM 順は「画像 →
/// コピー列」のまま）。
fn variant_basic() -> Node {
    let media = image::image(
        &ImageProps::new(dummy_assets::PRODUCT_SRC, ""),
        vec![(IMAGE_ATTR, "")],
    );
    let content = copy(
        "Growth at a glance",
        "The numbers behind every release",
        "A quick look at how teams rely on our platform day to day.",
        vec![
            stat_item("Customers", "8,000+"),
            stat_item("Uptime", "99.95%"),
        ],
    );
    div(
        vec![("class", "blocks-stats-with-image-row")],
        vec![media, content],
    )
}

/// 形 B（R0704 反転）: 画像を左に置く。指標は 4 件（2×2 グリッド）。DOM 順
/// どおり画像が左のままになる。
fn variant_reverse() -> Node {
    let media = image::image(
        &ImageProps::new(dummy_assets::PRODUCT_SRC, ""),
        vec![(IMAGE_ATTR, "")],
    );
    let content = copy(
        "Built to scale",
        "One dashboard, every metric that matters",
        "From onboarding to renewal, the same view keeps every team aligned.",
        vec![
            stat_item("Active teams", "1,200+"),
            stat_item("Avg. setup time", "6m"),
            stat_item("Countries", "40"),
            stat_item("Support rating", "4.9/5"),
        ],
    );
    div(
        vec![("class", "blocks-stats-with-image-row"), (REVERSE_ATTR, "")],
        vec![media, content],
    )
}

/// 形 C（R1302 上部全幅 → `lg` で左半分）: `lg` 未満は画像が横幅いっぱいで
/// 上、`lg` 以上は画像がセルいっぱいの高さで左半分を占める。指標は 3 件。
fn variant_bleed() -> Node {
    let media = image::image(
        &ImageProps {
            fit: ImageFit::Cover,
            aspect_ratio: AspectRatio::Video,
            ..ImageProps::new(dummy_assets::SCREENSHOT_SRC, "")
        },
        vec![(IMAGE_ATTR, "")],
    );
    let content = copy(
        "Always in sync",
        "See the impact before you ship it",
        "Preview usage trends alongside the change that produced them.",
        vec![
            stat_item("Requests / day", "2.4M"),
            stat_item("p95 latency", "180ms"),
            stat_item("Error budget", "99.9%"),
        ],
    );
    div(
        vec![("class", "blocks-stats-with-image-row"), (BLEED_ATTR, "")],
        vec![media, content],
    )
}

/// `stats-with-image` の Demo 本体。呼び出しごとに同一の `Node` を返す純
/// 関数（モジュール doc「3 形を 1 つの Demo に並記する」節）。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-stats-with-image-layout")],
        vec![
            variant_label("Image right (R0702)"),
            variant_basic(),
            variant_label("Image left (R0704)"),
            variant_reverse(),
            variant_label("Full-width image → left half on lg (R1302)"),
            variant_bleed(),
        ],
    )
}