faq-tabbed-accordion

use fandhe_frontend_core::{div, el, el_owned, 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::badge::{self, BadgeProps, BadgeVariant};
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;

/// カテゴリ 1 件分の型（value, label, その 3 件の Q&A）。
type Category = (
    &'static str,
    &'static str,
    [(&'static str, &'static str); 3],
);

/// カテゴリ別の架空 Q&A。実在の企業名・個人情報は含まない。
const CATEGORIES: [Category; 3] = [
    (
        "billing",
        "料金・契約",
        [
            (
                "無料プランでも試せますか",
                "主要な機能は無料プランでもお試しいただけます。",
            ),
            (
                "契約期間の縛りはありますか",
                "月単位でのご契約で、最低利用期間の縛りはありません。",
            ),
            (
                "支払い方法は何が使えますか",
                "主要なクレジットカードに対応しています。",
            ),
        ],
    ),
    (
        "features",
        "機能",
        [
            (
                "他ツールからデータを移行できますか",
                "主要なフォーマットでの書き出し・取り込みに対応しています。",
            ),
            (
                "API 連携はありますか",
                "REST API 経由で主要な操作を自動化できます。",
            ),
            (
                "利用人数の上限はありますか",
                "プランごとに上限が異なります。詳細はプラン一覧をご確認ください。",
            ),
        ],
    ),
    (
        "support",
        "サポート",
        [
            (
                "サポートへの問い合わせ方法を教えてください",
                "サポート窓口へメールでご連絡ください。通常 1 営業日以内に返信します。",
            ),
            (
                "障害情報はどこで確認できますか",
                "ステータスページで稼働状況を確認できます。",
            ),
            (
                "導入支援はありますか",
                "有償の導入支援プランをご用意しています。",
            ),
        ],
    ),
];

/// 見出しエリア（アイブロウ badge + 中央寄せ見出し + 説明文）。
fn header() -> Node {
    div(
        vec![("class", "blocks-faq-tabbed-accordion-header")],
        vec![
            badge::badge(
                &BadgeProps {
                    variant: BadgeVariant::Subtle,
                    ..BadgeProps::default()
                },
                vec![],
                vec![text("よくある質問")],
            ),
            heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl2,
                    ..HeadingProps::default()
                },
                vec![],
                vec![text("カテゴリ別によくあるご質問")],
            ),
            styled_text::text(
                &TextProps {
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text(
                    "カテゴリ別によくある質問と回答をまとめて掲載しています。",
                )],
            ),
        ],
    )
}

/// カテゴリラベルのみを装飾として示す非対話タブ列（モジュール doc「実物の
/// `tabs::tabs` を使わない」節）。`role`/`tabindex`/`<button>` を一切持たず、
/// クリック・キーボード操作が可能に見えるトリガーを残さない。各ラベルは
/// `aria-hidden` で支援技術のツリーから除外する（内容は下の見出し付き
/// accordion 群が別途提供するため、情報が欠落しない）。
fn static_tab_list(selected: &str) -> Node {
    el_owned(
        "div",
        vec![
            (
                "class".to_string(),
                "blocks-faq-tabbed-accordion-tablist".to_string(),
            ),
            (
                "id".to_string(),
                "blocks-faq-tabbed-accordion-tablist".to_string(),
            ),
        ],
        CATEGORIES
            .iter()
            .map(|(value, label, _)| {
                let state = if *value == selected {
                    "active"
                } else {
                    "inactive"
                };
                el_owned(
                    "div",
                    vec![
                        (
                            "class".to_string(),
                            "blocks-faq-tabbed-accordion-tab".to_string(),
                        ),
                        ("data-state".to_string(), state.to_string()),
                        ("aria-hidden".to_string(), "true".to_string()),
                    ],
                    vec![text(*label)],
                )
            })
            .collect(),
    )
}

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

    item(
        state,
        false,
        &props,
        vec![],
        vec![
            el(
                "h5",
                vec![("class", "blocks-faq-tabbed-accordion-trigger-heading")],
                vec![item_trigger(
                    state,
                    false,
                    &props,
                    question,
                    Some(trigger_id.as_str()),
                    Some(content_id.as_str()),
                    vec![],
                    vec![
                        span(
                            vec![("class", "blocks-faq-tabbed-accordion-trigger-label")],
                            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（そのカテゴリの FAQ 全件を包む）。
fn category_accordion(category: &str, faqs: &[(&str, &str); 3]) -> Node {
    let items: Vec<Node> = faqs
        .iter()
        .enumerate()
        .map(|(index, (question, answer))| faq_item(category, index, question, answer))
        .collect();

    accordion::root(
        Size::Md,
        &AccordionProps::default(),
        vec![("data-blocks-faq-tabbed-accordion-root", "")],
        items,
    )
}

/// カテゴリキャプション見出し（PR #3268 レビュー是正 4 件目、Codex P2）。
/// [`category_preview`]/[`category_current`] のキャプションを
/// `styled_text::text` の段落のままにすると、支援技術の見出し一覧から
/// カテゴリ名の所在が把握できない（`faq_item` 内の h5 は各質問文であり
/// カテゴリ名を持たない）。`HeadingLevel::H4` + `HeadingSize::Sm` で
/// 見出し化し、視覚サイズは既存のキャプション（`TextSize::Sm` +
/// `TextVariant::Muted` 相当）を保ったまま見出しツリーへ載せる。
fn category_caption(text_content: String) -> Node {
    // `heading()` は呼び出し側 `class` を `drop_class_attr` で除去するため
    // （PR #3268 レビュー是正、Codex P2 + Bugbot Medium）、ミュート色付与用の
    // class は `heading()` へ直接渡さず、包む `div` へ付けて子孫セレクタで
    // 適用する（`LAYOUT_CSS` の `.blocks-faq-tabbed-accordion-caption`
    // セレクタ参照）。`heading()` 自体は色を明示しないため継承で反映される。
    div(
        vec![("class", "blocks-faq-tabbed-accordion-caption")],
        vec![heading(
            HeadingLevel::H4,
            &HeadingProps {
                size: HeadingSize::Sm,
                ..HeadingProps::default()
            },
            vec![],
            vec![text(text_content)],
        )],
    )
}

/// 非選択カテゴリの「選択した場合のプレビュー」キャプション付き accordion
/// （モジュール doc「実物の `tabs::tabs` を使わない」節、
/// `feature_tabs_panel::panel_state_preview` と同型）。
fn category_preview(label: &str, category: &str, faqs: &[(&str, &str); 3]) -> Node {
    div(
        vec![("class", "blocks-faq-tabbed-accordion-preview")],
        vec![
            category_caption(format!("「{label}」タブを選択した場合のプレビュー")),
            category_accordion(category, faqs),
        ],
    )
}

/// 先頭（選択中）カテゴリのキャプション付き accordion（PR #3268 レビュー
/// 是正 2 件目・3 件目、Codex P1 + Bugbot Medium）。[`static_tab_list`] の
/// ラベルは `aria-hidden` で装飾扱いにしているため、先頭カテゴリの本文を
/// [`category_accordion`] のみで描画すると「料金・契約」の名称がどこにも
/// 支援技術から読める形で存在しなくなる（後続 2 カテゴリは
/// [`category_preview`] のキャプションが同じ役割を担っていた）。
/// [`category_preview`] と対になる可視キャプションを付け、全カテゴリで
/// 「カテゴリ名がどこかに可視テキストとして存在する」構成を揃える。
fn category_current(label: &str, category: &str, faqs: &[(&str, &str); 3]) -> Node {
    div(
        vec![("class", "blocks-faq-tabbed-accordion-preview")],
        vec![
            category_caption(format!("「{label}」の質問と回答")),
            category_accordion(category, faqs),
        ],
    )
}

/// `faq-tabbed-accordion` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数。先頭カテゴリを [`static_tab_list`] の選択状態として示し
/// [`category_current`] でキャプション付きの本文を描画したあと、残り
/// 2 カテゴリを [`category_preview`] で併記する（3 カテゴリ全件が常に
/// 可視、かつ全カテゴリ名が可視キャプションとして存在する）。
pub fn demo() -> Node {
    let (first_value, first_label, first_faqs) = CATEGORIES[0];
    let mut children = vec![
        header(),
        static_tab_list(first_value),
        category_current(first_label, first_value, &first_faqs),
    ];
    for (value, label, faqs) in &CATEGORIES[1..] {
        children.push(category_preview(label, value, faqs));
    }
    div(
        vec![("class", "blocks-faq-tabbed-accordion-layout")],
        children,
    )
}