table-with-heading

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, el, span, text, Node};
use fandhe_frontend_pre_styled_ui::badge::{self, BadgeProps, BadgeVariant};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::card;
use fandhe_frontend_pre_styled_ui::heading::{heading, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps};
use fandhe_frontend_pre_styled_ui::recipe::ColorPalette;
use fandhe_frontend_pre_styled_ui::table::{self, TableProps, TableVariant};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextVariant};
use fandhe_frontend_pre_styled_ui::Size;

/// 既存 block と同じ架空リンク先（`href="#"` を使わないための定数）。
const REPO: &str = "https://github.com/Fandhe-AI/fandhe-frontend";

/// [`dummy_assets::PERSON_NAMES`] と対にした架空メールアドレス（`example.com`。
/// 実ドメイン・実クレデンシャルを含まない）。
const MEMBER_EMAILS: &[&str] = &[
    "haruto.f@example.com",
    "elena.v@example.com",
    "kwame.b@example.com",
    "mei.l@example.com",
    "noor.a@example.com",
    "ola.b@example.com",
    "priya.c@example.com",
    "theo.m@example.com",
];

/// 状態列に使う 3 状態（ラベル + palette）。行番号で周回させる。
const STATUSES: &[(&str, ColorPalette)] = &[
    ("稼働中", ColorPalette::Success),
    ("招待中", ColorPalette::Warning),
    ("停止", ColorPalette::Danger),
];

/// このインスタンスの見せ方を宣言するデータ（[`VARIANTS`] から駆動する）。
struct Variant {
    label: &'static str,
    card: bool,
    full_bleed: bool,
    content_max: bool,
    striped: bool,
    caps_header: bool,
    sticky: bool,
    rules: bool,
    size: Size,
    /// 行数（既定 5。sticky ヘッダーの実演〔G〕のみスクロールを起こすため
    /// 8 に増やす）。
    rows: usize,
}

const DEFAULT_ROWS: usize = 5;

const VARIANTS: &[Variant] = &[
    Variant {
        label: "代表構成",
        card: false,
        full_bleed: false,
        content_max: false,
        striped: false,
        caps_header: false,
        sticky: false,
        rules: false,
        size: Size::Md,
        rows: DEFAULT_ROWS,
    },
    Variant {
        label: "カード枠",
        card: true,
        full_bleed: false,
        content_max: false,
        striped: false,
        caps_header: false,
        sticky: false,
        rules: false,
        size: Size::Md,
        rows: DEFAULT_ROWS,
    },
    Variant {
        label: "全幅",
        card: false,
        full_bleed: true,
        content_max: false,
        striped: false,
        caps_header: false,
        sticky: false,
        rules: false,
        size: Size::Md,
        rows: DEFAULT_ROWS,
    },
    Variant {
        label: "全幅＋内容最大幅",
        card: false,
        full_bleed: true,
        content_max: true,
        striped: false,
        caps_header: false,
        sticky: false,
        rules: false,
        size: Size::Md,
        rows: DEFAULT_ROWS,
    },
    Variant {
        label: "縞模様",
        card: false,
        full_bleed: false,
        content_max: false,
        striped: true,
        caps_header: false,
        sticky: false,
        rules: false,
        size: Size::Md,
        rows: DEFAULT_ROWS,
    },
    Variant {
        label: "小型大文字見出し",
        card: false,
        full_bleed: false,
        content_max: false,
        striped: false,
        caps_header: true,
        sticky: false,
        rules: false,
        size: Size::Md,
        rows: DEFAULT_ROWS,
    },
    Variant {
        label: "固定ヘッダー",
        card: false,
        full_bleed: false,
        content_max: false,
        striped: false,
        caps_header: false,
        sticky: true,
        rules: false,
        size: Size::Md,
        rows: 8,
    },
    Variant {
        label: "縦罫線",
        card: false,
        full_bleed: false,
        content_max: false,
        striped: false,
        caps_header: false,
        sticky: false,
        rules: true,
        size: Size::Md,
        rows: DEFAULT_ROWS,
    },
    Variant {
        label: "詰めた行間",
        card: false,
        full_bleed: false,
        content_max: false,
        striped: false,
        caps_header: false,
        sticky: false,
        rules: false,
        size: Size::Sm,
        rows: DEFAULT_ROWS,
    },
];

/// 列見出し（副次列は `data-blocks-table-with-heading-secondary` を持つ）。
/// 縦罫線（`rule`）は列間の区切りを表すため先頭列には付けない
/// （先頭列に付けると存在しない左端の区切り線が描画されてしまう）。
fn column_headers(caps: bool, rules: bool) -> Node {
    let attrs_for = |secondary: bool, rule: bool| -> Vec<(&'static str, &'static str)> {
        let mut a = Vec::new();
        if secondary {
            a.push(("data-blocks-table-with-heading-secondary", ""));
        }
        if caps {
            a.push(("data-blocks-table-with-heading-caps", ""));
        }
        if rule {
            a.push(("data-blocks-table-with-heading-rule", ""));
        }
        a
    };
    table::row(
        vec![],
        vec![
            table::column_header(attrs_for(false, false), vec![text("名前")]),
            table::column_header(attrs_for(true, rules), vec![text("役職")]),
            table::column_header(attrs_for(true, rules), vec![text("メール")]),
            table::column_header(attrs_for(false, rules), vec![text("状態")]),
            table::column_header(
                attrs_for(false, rules),
                vec![span(
                    vec![("data-blocks-table-with-heading-sr-only", "")],
                    vec![text("編集")],
                )],
            ),
        ],
    )
}

/// 本文 1 行（`row_index` で氏名・メール・状態を周回させる）。
/// 縦罫線（`rule_attr`）は列間の区切りを表すため先頭列（名前）には付けない
/// （`column_headers` と同じ理由）。
fn body_row(row_index: usize, rules: bool) -> Node {
    let name_index = row_index % dummy_assets::PERSON_NAMES.len();
    let job_index = row_index % dummy_assets::JOB_TITLES.len();
    let (status_label, status_palette) = STATUSES[row_index % STATUSES.len()];
    let rule_attr: Vec<(&str, &str)> = if rules {
        vec![("data-blocks-table-with-heading-rule", "")]
    } else {
        vec![]
    };
    let mut role_attr = rule_attr.clone();
    role_attr.push(("data-blocks-table-with-heading-secondary", ""));
    let mut email_attr = rule_attr.clone();
    email_attr.push(("data-blocks-table-with-heading-secondary", ""));
    table::row(
        vec![],
        vec![
            table::cell(vec![], vec![text(dummy_assets::PERSON_NAMES[name_index])]),
            table::cell(role_attr, vec![text(dummy_assets::JOB_TITLES[job_index])]),
            table::cell(email_attr, vec![text(MEMBER_EMAILS[name_index])]),
            table::cell(
                rule_attr.clone(),
                vec![badge::badge(
                    &BadgeProps {
                        variant: BadgeVariant::Subtle,
                        palette: status_palette,
                        ..BadgeProps::default()
                    },
                    vec![],
                    vec![text(status_label)],
                )],
            ),
            table::cell(
                rule_attr,
                vec![link::root(
                    REPO,
                    &LinkProps::default(),
                    vec![],
                    vec![text("編集")],
                )],
            ),
        ],
    )
}

/// A〜I の 1 インスタンス（表題 + 「追加」ボタン + 表）。
fn instance(v: &Variant) -> Node {
    let heading_row = div(
        vec![("data-blocks-table-with-heading-header", "")],
        vec![
            div(
                vec![],
                vec![
                    heading(
                        HeadingLevel::H4,
                        &HeadingProps {
                            size: HeadingSize::Lg,
                            ..HeadingProps::default()
                        },
                        vec![],
                        vec![text("メンバー一覧")],
                    ),
                    styled_text::text(
                        &fandhe_frontend_pre_styled_ui::text::TextProps {
                            variant: TextVariant::Muted,
                            ..Default::default()
                        },
                        vec![],
                        vec![text("チームに参加しているメンバーの一覧です。")],
                    ),
                ],
            ),
            button::button(
                &ButtonProps::default(),
                vec![],
                vec![text("メンバーを追加")],
            ),
        ],
    );
    let heading_row = if v.content_max {
        div(
            vec![("data-blocks-table-with-heading-content-max", "")],
            vec![heading_row],
        )
    } else {
        heading_row
    };

    let rows: Vec<Node> = (0..v.rows).map(|i| body_row(i, v.rules)).collect();
    let table_node = table::root(
        TableProps {
            variant: TableVariant::Line,
            size: v.size,
            striped: v.striped,
            sticky_header: v.sticky,
            ..TableProps::default()
        },
        vec![],
        vec![
            table::header(vec![], vec![column_headers(v.caps_header, v.rules)]),
            table::body(vec![], rows),
        ],
    );
    let mut scroll_attrs: Vec<(&str, &str)> = vec![
        ("role", "region"),
        ("aria-label", "メンバー一覧テーブル"),
        ("tabindex", "0"),
    ];
    if v.sticky {
        scroll_attrs.push(("data-blocks-table-with-heading-scroll", "sticky"));
    }
    let scroll = table::scroll_area(scroll_attrs, vec![table_node]);

    let body = if v.card {
        card::root(
            card::CardProps::default(),
            vec![],
            vec![
                card::header(vec![], vec![heading_row]),
                card::body(vec![], vec![scroll]),
            ],
        )
    } else {
        div(
            vec![("data-blocks-table-with-heading-body", "")],
            vec![heading_row, scroll],
        )
    };

    let mut frame_attrs: Vec<(&str, &str)> = vec![("data-blocks-table-with-heading-frame", "")];
    if v.full_bleed {
        frame_attrs.push(("data-blocks-table-with-heading-full-bleed", ""));
    }

    div(
        vec![("data-blocks-table-with-heading-instance", "")],
        vec![
            el(
                "h3",
                vec![("data-blocks-table-with-heading-section-title", "")],
                vec![text(v.label)],
            ),
            div(frame_attrs, vec![body]),
        ],
    )
}

/// J: 外枠 + 現在プラン + 選択ボタン（R1334）。他インスタンスと骨格が
/// 異なるため専用に組み立てる（モジュール doc「J」節参照）。
fn plans_instance() -> Node {
    const PLANS: &[(&str, &str, &str, bool)] = &[
        ("Starter", "¥0 / 月", "3 プロジェクト", false),
        ("Pro", "¥2,980 / 月", "無制限", true),
        ("Business", "¥9,800 / 月", "無制限 + 監査ログ", false),
    ];
    let heading_row = div(
        vec![("data-blocks-table-with-heading-header", "")],
        vec![div(
            vec![],
            vec![
                heading(
                    HeadingLevel::H4,
                    &HeadingProps {
                        size: HeadingSize::Lg,
                        ..HeadingProps::default()
                    },
                    vec![],
                    vec![text("プラン一覧")],
                ),
                styled_text::text(
                    &fandhe_frontend_pre_styled_ui::text::TextProps {
                        variant: TextVariant::Muted,
                        ..Default::default()
                    },
                    vec![],
                    vec![text("チームの利用状況に合わせてプランを選べます。")],
                ),
            ],
        )],
    );
    let rows: Vec<Node> = PLANS
        .iter()
        .map(|(name, price, limit, current)| {
            let status_cell = if *current {
                table::cell(
                    vec![],
                    vec![badge::badge(
                        &BadgeProps {
                            variant: BadgeVariant::Solid,
                            palette: ColorPalette::Accent,
                            ..BadgeProps::default()
                        },
                        vec![],
                        vec![text("現在のプラン")],
                    )],
                )
            } else {
                table::cell(vec![], vec![])
            };
            table::row(
                vec![],
                vec![
                    table::cell(vec![], vec![text(*name)]),
                    table::cell(vec![], vec![text(*price)]),
                    table::cell(vec![], vec![text(*limit)]),
                    status_cell,
                    table::cell(
                        vec![],
                        vec![button::button(
                            &ButtonProps {
                                variant: ButtonVariant::Outline,
                                size: Size::Sm,
                                disabled: *current,
                                ..ButtonProps::default()
                            },
                            vec![],
                            vec![text("選択")],
                        )],
                    ),
                ],
            )
        })
        .collect();
    let table_node = table::root(
        TableProps {
            variant: TableVariant::Outline,
            ..TableProps::default()
        },
        vec![],
        vec![
            table::header(
                vec![],
                vec![table::row(
                    vec![],
                    vec![
                        table::column_header(vec![], vec![text("プラン")]),
                        table::column_header(vec![], vec![text("月額")]),
                        table::column_header(vec![], vec![text("上限")]),
                        table::column_header(vec![], vec![text("状態")]),
                        table::column_header(
                            vec![],
                            vec![span(
                                vec![("data-blocks-table-with-heading-sr-only", "")],
                                vec![text("操作")],
                            )],
                        ),
                    ],
                )],
            ),
            table::body(vec![], rows),
        ],
    );
    let scroll = table::scroll_area(
        vec![
            ("role", "region"),
            ("aria-label", "プラン一覧テーブル"),
            ("tabindex", "0"),
        ],
        vec![table_node],
    );
    div(
        vec![("data-blocks-table-with-heading-instance", "")],
        vec![
            el(
                "h3",
                vec![("data-blocks-table-with-heading-section-title", "")],
                vec![text("外枠＋現在プラン＋選択ボタン")],
            ),
            div(
                vec![("data-blocks-table-with-heading-frame", "")],
                vec![div(
                    vec![("data-blocks-table-with-heading-body", "")],
                    vec![heading_row, scroll],
                )],
            ),
        ],
    )
}

/// `table-with-heading` の Demo 本体（A〜I + J の 10 インスタンスを縦積みで
/// 並記する。呼び出しごとに同一の `Node` を返す純関数）。
pub fn demo() -> Node {
    let mut children: Vec<Node> = VARIANTS.iter().map(instance).collect();
    children.push(plans_instance());
    div(
        vec![("class", "blocks-table-with-heading-layout")],
        children,
    )
}