faq-split-accordion

use fandhe_frontend_core::{div, el, span, text, Node};
use fandhe_frontend_pre_styled_ui::accordion::{
    self, item, item_content, item_indicator, item_trigger, AccordionProps, OpenState,
};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::heading::{heading, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};
use fandhe_frontend_pre_styled_ui::Size;

/// カテゴリ別の架空 Q&A 一覧（実在の企業名・個人情報は含まない）。
/// カテゴリ名と (質問, 回答) の組。
const GROUPS: [(&str, &[(&str, &str)]); 2] = [
    (
        "料金・契約",
        &[
            (
                "無料プランでもすべての機能を試せますか",
                "主要な機能は無料プランでもお試しいただけます。データ保持期間・連携先の上限などは有料プランで拡張されます。",
            ),
            (
                "契約期間の縛りはありますか",
                "月単位でのご契約となり、最低利用期間の縛りはありません。いつでもプラン変更・解約が可能です。",
            ),
            (
                "支払い方法は何が使えますか",
                "主要なクレジットカードに対応しています。請求書払いをご希望の場合は個別にご相談ください。",
            ),
        ],
    ),
    (
        "アカウント・サポート",
        &[
            (
                "アカウントを複数人で共有できますか",
                "メンバーを招待して同一ワークスペースを共有できます。権限はロールごとに設定可能です。",
            ),
            (
                "サポートへの問い合わせ方法を教えてください",
                "サポート窓口のメールアドレスへご連絡ください。通常 1 営業日以内にご返信します。",
            ),
            (
                "退会後にデータは削除されますか",
                "退会申請の受理後、定められた保持期間を経てすべてのデータを削除します。",
            ),
        ],
    ),
];

/// 左カラム（見出し・説明・問い合わせボタン）。
fn intro() -> Node {
    div(
        vec![("class", "blocks-faq-split-accordion-intro")],
        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("カテゴリ別によくある質問をまとめています。解決しない場合はお気軽にお問い合わせください。")],
            ),
            button::button(&ButtonProps::default(), vec![], vec![text("お問い合わせ")]),
        ],
    )
}

/// FAQ 1 件分の accordion item（トリガー + 本文）。全件を
/// [`OpenState::Open`] + `disabled: true` で固定する（モジュール doc
/// 「静的表示」節）。
fn faq_item(group: usize, index: usize, question: &str, answer: &str) -> Node {
    let state = OpenState::Open;
    let props = AccordionProps {
        disabled: true,
        ..AccordionProps::default()
    };
    let trigger_id = format!("blocks-faq-split-accordion-{group}-{index}-trigger");
    let content_id = format!("blocks-faq-split-accordion-{group}-{index}-content");

    item(
        state,
        false,
        &props,
        vec![],
        vec![
            el(
                "h5",
                vec![("class", "blocks-faq-split-accordion-trigger-heading")],
                vec![item_trigger(
                    state,
                    false,
                    &props,
                    question,
                    Some(trigger_id.as_str()),
                    Some(content_id.as_str()),
                    vec![],
                    vec![
                        span(vec![], vec![text(question)]),
                        item_indicator(state, false, &props, vec![], vec![text("▾")]),
                    ],
                )],
            ),
            item_content(
                state,
                false,
                &props,
                Some(content_id.as_str()),
                Some(trigger_id.as_str()),
                vec![],
                vec![styled_text::text(
                    &TextProps::default(),
                    vec![],
                    vec![text(answer)],
                )],
            ),
        ],
    )
}

/// カテゴリ 1 件分（小見出し + accordion）。
fn faq_group(group: usize, title: &str, items: &[(&str, &str)]) -> Node {
    let nodes: Vec<Node> = items
        .iter()
        .enumerate()
        .map(|(index, (question, answer))| faq_item(group, index, question, answer))
        .collect();

    div(
        vec![("class", "blocks-faq-split-accordion-group")],
        vec![
            heading(
                HeadingLevel::H4,
                &HeadingProps::default(),
                vec![],
                vec![text(title)],
            ),
            accordion::root(
                Size::Md,
                &AccordionProps::default(),
                vec![("data-blocks-faq-split-accordion-root", "")],
                nodes,
            ),
        ],
    )
}

/// 右カラム（カテゴリ区切りの FAQ アコーディオン一覧 + もっと見るボタン）。
fn faq_column() -> Node {
    let groups: Vec<Node> = GROUPS
        .iter()
        .enumerate()
        .map(|(group, (title, items))| faq_group(group, title, items))
        .collect();

    let mut children = groups;
    children.push(div(
        vec![("class", "blocks-faq-split-accordion-more")],
        vec![button::button(
            &ButtonProps {
                variant: ButtonVariant::Outline,
                ..ButtonProps::default()
            },
            vec![],
            vec![text("もっと見る")],
        )],
    ));

    div(vec![("class", "blocks-faq-split-accordion-faqs")], children)
}

/// `faq-split-accordion` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数（モジュール doc「静的表示」節）。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-faq-split-accordion-layout")],
        vec![intro(), faq_column()],
    )
}