pricing-tiers-morph

use fandhe_frontend_core::{div, li, p, span, text, ul, Node};
use fandhe_frontend_pre_styled_ui::badge::{self, BadgeProps, BadgeVariant};
use fandhe_frontend_pre_styled_ui::border_beam::BORDER_BEAM_CLASS;
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::card::{self, CardProps, CardVariant};
use fandhe_frontend_pre_styled_ui::tabs::{
    self, ActivationMode, Orientation, TabItem, TabsProps, TabsVariant,
};
use fandhe_frontend_pre_styled_ui::{ColorPalette, Size};

/// 料金ティア 1 件分の静的データ（架空のプラン名・価格・機能一覧）。
struct Tier {
    name: &'static str,
    tagline: &'static str,
    price_monthly: &'static str,
    price_yearly: &'static str,
    features: &'static [&'static str],
    cta: &'static str,
    recommended: bool,
}

/// 3 段のティア定義。中央（index 1）を `recommended: true` とする。
const TIERS: &[Tier] = &[
    Tier {
        name: "Starter",
        tagline: "個人・小規模プロジェクト向け",
        price_monthly: "$9",
        price_yearly: "$86",
        features: &[
            "プロジェクト 1 件",
            "コミュニティサポート",
            "基本アナリティクス",
        ],
        cta: "Get started",
        recommended: false,
    },
    Tier {
        name: "Growth",
        tagline: "成長中のチーム向け",
        price_monthly: "$29",
        price_yearly: "$278",
        features: &[
            "プロジェクト 10 件",
            "優先サポート",
            "詳細アナリティクス",
            "カスタムドメイン",
        ],
        cta: "Get started",
        recommended: true,
    },
    Tier {
        name: "Enterprise",
        tagline: "大規模組織向け",
        price_monthly: "$99",
        price_yearly: "$950",
        features: &[
            "プロジェクト無制限",
            "専任サポート",
            "SSO・監査ログ",
            "SLA 保証",
        ],
        cta: "Contact sales",
        recommended: false,
    },
];

/// ティア 1 件の `card` を組み立てる。`price`/`period_suffix` は呼び出し側
/// の billing 状態（月額/年額）に応じて切り替える。
fn tier_card(tier: &Tier, price: &'static str, period_suffix: &'static str) -> Node {
    let mut heading_children = vec![card::title(vec![], vec![text(tier.name)])];
    if tier.recommended {
        heading_children.push(badge::badge(
            &BadgeProps {
                variant: BadgeVariant::Solid,
                ..BadgeProps::default()
            },
            vec![],
            vec![text("おすすめ")],
        ));
    }
    let heading = div(
        vec![("class", "blocks-pricing-tiers-morph-tier-heading")],
        heading_children,
    );

    let price_row = div(
        vec![("class", "blocks-pricing-tiers-morph-price")],
        vec![
            text(price),
            span(
                vec![("class", "blocks-pricing-tiers-morph-price-period")],
                vec![text(period_suffix)],
            ),
        ],
    );

    let feature_list = ul(
        vec![("class", "blocks-pricing-tiers-morph-features")],
        tier.features
            .iter()
            .map(|feature| li(vec![], vec![text(*feature)]))
            .collect(),
    );

    let card_node = card::root(
        CardProps {
            variant: CardVariant::Outline,
            size: Size::Md,
        },
        vec![("data-blocks-pricing-tiers-morph-tier", "")],
        vec![
            card::header(
                vec![],
                vec![heading, card::description(vec![], vec![text(tier.tagline)])],
            ),
            card::body(vec![], vec![price_row, feature_list]),
            card::footer(
                vec![("data-blocks-pricing-tiers-morph-footer", "")],
                vec![button::button(
                    &ButtonProps {
                        variant: if tier.recommended {
                            ButtonVariant::Solid
                        } else {
                            ButtonVariant::Outline
                        },
                        ..ButtonProps::default()
                    },
                    vec![],
                    vec![text(tier.cta)],
                )],
            ),
        ],
    );

    if tier.recommended {
        let featured_class = format!("{BORDER_BEAM_CLASS} blocks-pricing-tiers-morph-featured");
        div(vec![("class", featured_class.as_str())], vec![card_node])
    } else {
        card_node
    }
}

/// billing 状態 1 件分（月額 or 年額）のティア群グリッドを組み立てる。
fn billing_panel(price_of: fn(&Tier) -> &'static str, period_suffix: &'static str) -> Node {
    div(
        vec![("data-blocks-pricing-tiers-morph-grid", "")],
        TIERS
            .iter()
            .map(|tier| tier_card(tier, price_of(tier), period_suffix))
            .collect(),
    )
}

/// billing 状態 1 件（月額/年額）分の `TabItem` 一覧を組み立てる。2 インス
/// タンスで同一の構成を使うため呼び出し側で複製せず都度生成する。
fn tab_items() -> Vec<TabItem<'static>> {
    vec![
        TabItem {
            value: "monthly",
            trigger: vec![text("Monthly")],
            content: vec![billing_panel(|tier| tier.price_monthly, "/mo")],
            disabled: false,
        },
        TabItem {
            value: "yearly",
            trigger: vec![text("Yearly")],
            content: vec![billing_panel(|tier| tier.price_yearly, "/yr")],
            disabled: false,
        },
    ]
}

/// `pricing-tiers-morph` の Demo 本体。呼び出しごとに同一の `Node` を返す
/// 純関数。docs サイトは JS ハイドレーションを行わないため、`selected`
/// が異なる 2 個の `tabs` インスタンス（月額選択/年額選択）を縦に並べて
/// 静的に併記する（`sidebar-07` の expanded/collapsed 2 インスタンス併記
/// と同型の対処、モジュール doc「無 JS（docs サイト）での『2 状態併記』」
/// 参照）。
pub fn demo() -> Node {
    let monthly_props = TabsProps {
        id: "blocks-pricing-tiers-morph-monthly",
        selected: "monthly",
        orientation: Orientation::Horizontal,
        activation_mode: ActivationMode::Automatic,
        loop_focus: true,
        indicator: false,
    };
    let yearly_props = TabsProps {
        id: "blocks-pricing-tiers-morph-yearly",
        selected: "yearly",
        orientation: Orientation::Horizontal,
        activation_mode: ActivationMode::Automatic,
        loop_focus: true,
        indicator: false,
    };

    let monthly_tabs = tabs::tabs(
        TabsVariant::Enclosed,
        Size::Md,
        ColorPalette::Accent,
        &monthly_props,
        tab_items(),
    );
    let yearly_tabs = tabs::tabs(
        TabsVariant::Enclosed,
        Size::Md,
        ColorPalette::Accent,
        &yearly_props,
        tab_items(),
    );

    div(
        vec![("data-blocks-pricing-tiers-morph-stack", "")],
        vec![
            p(
                vec![("data-blocks-pricing-tiers-morph-caption", "")],
                vec![text("Monthly")],
            ),
            monthly_tabs,
            p(
                vec![("data-blocks-pricing-tiers-morph-caption", "")],
                vec![text("Yearly")],
            ),
            yearly_tabs,
        ],
    )
}