pricing-single-split

use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps};
use fandhe_frontend_pre_styled_ui::card::{self, CardProps, CardVariant};
use fandhe_frontend_pre_styled_ui::heading::{heading, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::list::{self, ListType, ListVariant};
use fandhe_frontend_pre_styled_ui::radio_card::{self, Orientation};
use fandhe_frontend_pre_styled_ui::separator::{self, SeparatorProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};
use fandhe_frontend_pre_styled_ui::{ColorPalette, Size};

/// 支払周期選択の見出し [`radio_card::label`] の id（モジュール doc「id /
/// ARIA の方針」節）。
const BILLING_LABEL_ID: &str = "blocks-pricing-single-split-billing-label";

/// 支払周期選択のネイティブ `<input>` の共通 `name`。
const BILLING_NAME: &str = "blocks-pricing-single-split-billing";

/// 含まれる機能の一覧（架空の文言、実在の企業名・個人情報は含まない）。
const FEATURES: [&str; 8] = [
    "無制限のプロジェクト作成",
    "チームメンバー招待（上限なし）",
    "権限管理・監査ログ",
    "優先サポート窓口",
    "外部連携 API アクセス",
    "月次利用状況レポート",
    "シングルサインオン対応",
    "99.9% の稼働率 SLA",
];

/// 含まれる機能を表す装飾用のチェック図形（意味を持たないため `label` は
/// `None`〔既定〕のまま。参照元のアイコン形状・内部識別子は持ち込まない）。
fn check_icon() -> Node {
    icon(
        &IconProps {
            size: Size::Sm,
            ..IconProps::default()
        },
        vec![],
        vec![el(
            "path",
            vec![
                ("d", "M5 12.5l4 4L19 7"),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linecap", "round"),
                ("stroke-linejoin", "round"),
            ],
            vec![],
        )],
    )
}

/// 機能一覧 1 行分（`list::item`）。
fn feature_item(label: &'static str) -> Node {
    list::item(
        vec![],
        vec![
            list::indicator(vec![], vec![check_icon()]),
            styled_text::text(&TextProps::default(), vec![], vec![text(label)]),
        ],
    )
}

/// 含まれる機能の一覧本体（2 列 grid は [`LAYOUT_CSS`] 側で担う）。
fn feature_list() -> Node {
    list::root(
        ListType::Unordered,
        ListVariant::Plain,
        vec![("data-blocks-pricing-single-split-features", "")],
        FEATURES.iter().copied().map(feature_item).collect(),
    )
}

/// 支払周期 radio card 1 件（`item`/`item_hidden_input`/`item_control`/
/// `item_indicator` の組み立て、モジュール doc「id / ARIA の方針」節）。
/// ネイティブ操作不能にするため常に `disabled: true` で描く（モジュール
/// doc「支払周期 radio card をネイティブ disabled にする理由」節）。
fn billing_item(checked: bool, value: &'static str, label: &'static str) -> Node {
    radio_card::item(
        checked,
        true,
        value,
        vec![],
        vec![
            radio_card::item_hidden_input(checked, true, Some(BILLING_NAME), value, vec![]),
            radio_card::item_control(
                checked,
                true,
                vec![],
                vec![
                    radio_card::item_indicator(checked, true, false, vec![]),
                    radio_card::item_content(
                        vec![],
                        vec![radio_card::item_text(vec![], vec![text(label)])],
                    ),
                ],
            ),
        ],
    )
}

/// 支払周期選択欄（見出し + radio card 2 択。狭幅は縦積み・`48rem` 以上は
/// 横並び、モジュール doc「ブレークポイント」節）。年額を選んだ状態
/// （`checked: true`）で固定する静的表示。
///
/// `root` へ `aria-disabled="true"` を明示付与し（モジュール doc「支払周期
/// radio card をネイティブ disabled にする理由」節、`radio_card::root` は
/// `radio_group::root` と異なり `disabled` から自動付与しない）、さらに
/// radio の checked 状態に依存しない [`styled_text::text`] で現在の選択を
/// 明文化する。ネイティブ disabled な radio は支援技術のフォームモード
/// 走査から除外され得るため、選択肢の伝達は `billing_item` の可視テキスト
/// （フォームモードの影響を受けない）に、現在状態の伝達はこの文へ委ねる。
fn billing_toggle() -> Node {
    div(
        vec![("class", "blocks-pricing-single-split-billing")],
        vec![
            radio_card::label(Some(BILLING_LABEL_ID), vec![], vec![text("お支払い周期")]),
            radio_card::root(
                Size::Sm,
                ColorPalette::Accent,
                true,
                None::<Orientation>,
                Some(BILLING_LABEL_ID),
                vec![("aria-disabled", "true")],
                vec![
                    billing_item(false, "monthly", "月額払い"),
                    billing_item(true, "yearly", "年額払い（2 か月分お得）"),
                ],
            ),
            styled_text::text(
                &TextProps {
                    size: TextSize::Sm,
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text("現在の選択: 年額払い（2 か月分お得）")],
            ),
        ],
    )
}

/// 左カラム（プラン名・説明・機能一覧。`with_billing` のときのみ末尾へ
/// 支払周期選択を追加する）。
fn main_column(with_billing: bool) -> Node {
    let mut children = vec![
        heading(
            HeadingLevel::H3,
            &HeadingProps {
                size: HeadingSize::Xl2,
                ..HeadingProps::default()
            },
            vec![],
            vec![text("スタンダードプラン")],
        ),
        styled_text::text(
            &TextProps {
                variant: TextVariant::Muted,
                ..TextProps::default()
            },
            vec![],
            vec![text(
                "必要な機能を過不足なく揃えた、成長中のチーム向けの単一プランです。",
            )],
        ),
        separator::separator(&SeparatorProps::default(), vec![]),
        heading(
            HeadingLevel::H4,
            &HeadingProps::default(),
            vec![],
            vec![text("含まれる機能")],
        ),
        feature_list(),
    ];
    if with_billing {
        children.push(billing_toggle());
    }
    div(
        vec![("class", "blocks-pricing-single-split-main")],
        children,
    )
}

/// 右カラム（価格パネル）。`with_billing` の値に応じて年額表示へ切り替える
/// （支払周期選択の固定状態〔年額選択済み〕と一致させる）。
fn price_panel(with_billing: bool) -> Node {
    let (period_label, price_value, note) = if with_billing {
        (
            "年額払い",
            "¥320,000 / 年",
            "月あたり ¥26,667 相当（2 か月分お得な価格です）。",
        )
    } else {
        ("月額払い", "¥32,000 / 月", "契約期間の縛りはありません。")
    };
    card::root(
        CardProps {
            variant: CardVariant::Subtle,
            ..CardProps::default()
        },
        vec![("data-blocks-pricing-single-split-panel", "")],
        vec![card::body(
            vec![],
            vec![
                styled_text::text(
                    &TextProps {
                        variant: TextVariant::Muted,
                        ..TextProps::default()
                    },
                    vec![],
                    vec![text(period_label)],
                ),
                heading(
                    HeadingLevel::H3,
                    &HeadingProps {
                        size: HeadingSize::Xl4,
                        ..HeadingProps::default()
                    },
                    vec![],
                    vec![text(price_value)],
                ),
                styled_text::text(
                    &TextProps {
                        variant: TextVariant::Muted,
                        ..TextProps::default()
                    },
                    vec![],
                    vec![text("税込表示です。")],
                ),
                button::button(
                    &ButtonProps::default(),
                    vec![("data-blocks-pricing-single-split-cta", "")],
                    vec![text("このプランで始める")],
                ),
                styled_text::text(
                    &TextProps {
                        size: TextSize::Sm,
                        variant: TextVariant::Muted,
                        ..TextProps::default()
                    },
                    vec![],
                    vec![text(note)],
                ),
            ],
        )],
    )
}

/// Demo 1 インスタンス分（本文カラム + 価格パネルの行、モジュール doc
/// 「Demo を 2 インスタンス並べる理由」節）。
fn plan_split(with_billing: bool) -> Node {
    let variant = if with_billing { "billing" } else { "standard" };
    div(
        vec![
            ("class", "blocks-pricing-single-split-row"),
            ("data-blocks-pricing-single-split-variant", variant),
        ],
        vec![main_column(with_billing), price_panel(with_billing)],
    )
}

/// `pricing-single-split` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数。標準形（R1144）と支払周期選択付き（R0200）の 2 インスタンス
/// を縦に並べる。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-pricing-single-split-layout")],
        vec![plan_split(false), plan_split(true)],
    )
}