category-mosaic-featured

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::image::{image, ImageFit, ImageProps};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps};
use fandhe_frontend_pre_styled_ui::link_overlay::{self, overlay};

/// リンク先の固定外部 URL（`category_carousel::REPO` と同じ方針。
/// `Block::demo` は `base_path` を受け取れないため、サイト内リンクではなく
/// 固定の外部 URL を使う）。
const REPO: &str = "https://github.com/Fandhe-AI/fandhe-frontend";

/// 架空のカテゴリ 3 件（実在の企業・商標とは無関係）。`CATEGORIES[0]` を
/// 常に先頭（featured）タイルとして扱う。
const CATEGORIES: [(&str, &str); 3] = [
    ("季節の器", dummy_assets::PRODUCT_SRC),
    ("旅の道具", dummy_assets::BACKGROUND_SRC),
    ("書斎の小物", dummy_assets::SCREENSHOT_SRC),
];

/// 各形の直前に置く短い形ラベル（`text` 部品を使わない素の `p`。
/// `category_carousel::variant_label` の `text` 版と同型の役割）。
fn variant_label(label: &'static str) -> Node {
    div(
        vec![("class", "blocks-category-mosaic-featured-variant-label")],
        vec![text(label)],
    )
}

/// 見出し行（R0821/R0605）。左にセクション見出し、右に `link`（全件
/// リンク）または `button`（一覧ボタン）を置き、狭幅では折り返す。
/// `right` が `None`（B 形）のときは見出しだけになる。
fn header(title: &'static str, right: Option<Node>) -> Node {
    let mut children = vec![heading(
        HeadingLevel::H3,
        &HeadingProps {
            size: HeadingSize::Xl2,
            weight: HeadingWeight::Bold,
        },
        vec![],
        vec![text(title)],
    )];
    if let Some(node) = right {
        children.push(node);
    }
    div(
        vec![("class", "blocks-category-mosaic-featured-header")],
        children,
    )
}

/// カテゴリタイル 1 件。`featured` が `true`（先頭タイル）のときだけ
/// `data-…-featured` を付け、モザイク配置（§「モザイクグリッドの配置」）の
/// フックにする。`per_tile_button` が `true`（B 形）のとき、行動ラベルの
/// `span` の代わりに常時 `disabled` の `button` を添える。`heading_level`
/// はタイル名見出しのレベル（モジュール doc「B 形タイル見出しのレベル」節
/// 参照、A/C 形は `H4`・B 形は `H3`）。
fn tile(
    name: &'static str,
    src: &'static str,
    featured: bool,
    per_tile_button: bool,
    heading_level: HeadingLevel,
) -> Node {
    let mut root_attrs = vec![("data-blocks-category-mosaic-featured-tile", "")];
    if featured {
        root_attrs.push(("data-blocks-category-mosaic-featured-featured", ""));
    }

    let action: Node = if per_tile_button {
        button::button(
            &ButtonProps {
                variant: ButtonVariant::Plain,
                disabled: true,
                ..ButtonProps::default()
            },
            vec![("data-blocks-category-mosaic-featured-tile-button", "")],
            vec![text("見てみる")],
        )
    } else {
        div(
            vec![
                ("class", "blocks-category-mosaic-featured-action"),
                ("aria-hidden", "true"),
            ],
            vec![text("見てみる")],
        )
    };

    link_overlay::root(
        root_attrs,
        vec![
            image(
                &ImageProps {
                    fit: ImageFit::Cover,
                    ..ImageProps::new(src, "")
                },
                vec![("data-blocks-category-mosaic-featured-image", "")],
            ),
            div(
                vec![
                    ("class", "blocks-category-mosaic-featured-scrim"),
                    ("aria-hidden", "true"),
                ],
                vec![],
            ),
            div(
                vec![("class", "blocks-category-mosaic-featured-content")],
                vec![
                    heading(
                        heading_level,
                        &HeadingProps::default(),
                        vec![("data-blocks-category-mosaic-featured-name", "")],
                        vec![text(name)],
                    ),
                    action,
                ],
            ),
            overlay(
                REPO,
                vec![
                    ("aria-label", name),
                    ("data-blocks-category-mosaic-featured-overlay", ""),
                ],
                vec![],
            ),
        ],
    )
}

/// 3 枚のタイルを並べたグリッド（1 枚目のみ `featured`）。`tall` が
/// `true`（C 形）のとき行高を広げる修飾 class を添える。
fn grid(tall: bool, per_tile_button: bool) -> Node {
    let mut class = "blocks-category-mosaic-featured-grid".to_string();
    if tall {
        class.push_str(" blocks-category-mosaic-featured-grid--tall");
    }
    // B 形（`per_tile_button`）はヘッダー行（`H3`）を持たないため、タイル
    // 名見出しを `H3` に上げて見出しレベルスキップを避ける（モジュール doc
    // 「B 形タイル見出しのレベル」節参照）。A/C 形は `H3` ヘッダーの下に
    // 並ぶため `H4` のまま。
    let heading_level = if per_tile_button {
        HeadingLevel::H3
    } else {
        HeadingLevel::H4
    };
    let tiles: Vec<Node> = CATEGORIES
        .iter()
        .enumerate()
        .map(|(i, (name, src))| tile(name, src, i == 0, per_tile_button, heading_level))
        .collect();
    div(vec![("class", &class)], tiles)
}

/// A 基準形（対応表 ID R0821）。見出し + 全件リンク + 行動ラベルが `span`
/// のグリッド。
fn variant_a() -> Node {
    div(
        vec![("class", "blocks-category-mosaic-featured-section")],
        vec![
            header(
                "カテゴリから選ぶ",
                Some(link::root(
                    REPO,
                    &LinkProps::default(),
                    vec![],
                    vec![text("すべてのカテゴリ")],
                )),
            ),
            grid(false, false),
        ],
    )
}

/// B 見出しなし・タイルごとのボタン（対応表 ID R0037）。
fn variant_b() -> Node {
    div(
        vec![("class", "blocks-category-mosaic-featured-section")],
        vec![grid(false, true)],
    )
}

/// C 見出しと一覧ボタン・縦長（対応表 ID R0605）。
fn variant_c() -> Node {
    div(
        vec![("class", "blocks-category-mosaic-featured-section")],
        vec![
            header(
                "カテゴリから選ぶ",
                Some(button::button(
                    &ButtonProps {
                        variant: ButtonVariant::Plain,
                        disabled: true,
                        ..ButtonProps::default()
                    },
                    vec![("data-blocks-category-mosaic-featured-header-button", "")],
                    vec![text("一覧を見る")],
                )),
            ),
            grid(true, false),
        ],
    )
}

/// `category-mosaic-featured` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数（`crate::blocks` モジュール doc「静的表示」節）。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-category-mosaic-featured-layout")],
        vec![
            variant_label("基準形（対応表 ID R0821。見出し + 全件リンク）"),
            variant_a(),
            variant_label("見出しなし・タイルごとのボタン（対応表 ID R0037）"),
            variant_b(),
            variant_label("見出しと一覧ボタン・縦長（対応表 ID R0605）"),
            variant_c(),
        ],
    )
}