auth-otp-verify

use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::field::{self, FieldOrientation, FieldRootProps};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::input::{FieldIds, FieldProps};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps};
use fandhe_frontend_pre_styled_ui::pin_input::{self, PinInputKind, PinInputProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};
use fandhe_frontend_pre_styled_ui::visually_hidden;
use fandhe_frontend_pre_styled_ui::Size;

/// `field` の `id` 派生元（`"{FIELD_ID}-control"`/`"{FIELD_ID}-helper-text"`
/// を [`field::label`]/[`field::helper_text`] が自動導出し、桁入力側は
/// リテラルで同じ値を明示配線する、モジュール doc「`field` との配線」節参照）。
const FIELD_ID: &str = "blocks-auth-otp-verify-code";
const CONTROL_ID: &str = "blocks-auth-otp-verify-code-control";
const HELPER_TEXT_ID: &str = "blocks-auth-otp-verify-code-helper-text";
/// `field::label` の既定 `id` 導出（`"{FIELD_ID}-label"`）と同じ値
/// （モジュール doc「各桁の `aria-labelledby`」節参照）。
const LABEL_ID: &str = "blocks-auth-otp-verify-code-label";

/// 部分入力状態（先頭 3 桁のみ値を持つ）で固定した 6 桁の pin-input 入力群。
/// 各桁 `input` の直後に、桁位置を読み上げる visually-hidden テキストを
/// 並べて出力する（`aria-labelledby` の参照先、モジュール doc 参照）。
fn pin_digits(props: &PinInputProps) -> Vec<Node> {
    let values = ["4", "2", "7", "", "", ""];
    values
        .into_iter()
        .enumerate()
        .flat_map(|(index, value)| {
            let digit_id = format!("{FIELD_ID}-digit-{}", index + 1);
            let labelledby = format!("{LABEL_ID} {digit_id}");
            let mut attrs: Vec<(&str, &str)> = vec![
                ("aria-describedby", HELPER_TEXT_ID),
                ("aria-labelledby", labelledby.as_str()),
            ];
            if index == 0 {
                attrs.push(("id", CONTROL_ID));
            }
            let input = pin_input::input(
                index,
                values.len(),
                value,
                PinInputKind::Numeric,
                false,
                true,
                props,
                false,
                attrs,
            );
            let digit_text = visually_hidden::root(
                vec![("id", digit_id.as_str())],
                vec![text(format!("digit {} of {}", index + 1, values.len()))],
            );
            vec![input, digit_text]
        })
        .collect()
}

/// `auth-otp-verify` の Demo 本体。呼び出しごとに同一の `Node` を返す純関数。
pub fn demo() -> Node {
    let field_props = FieldProps {
        id: FIELD_ID,
        ids: FieldIds::default(),
        disabled: false,
        invalid: false,
        required: true,
        readonly: false,
        has_helper_text: true,
    };
    let orientation = FieldRootProps {
        orientation: FieldOrientation::Vertical,
    };
    let pin_props = PinInputProps {
        required: true,
        ..PinInputProps::default()
    };
    let link_button = ButtonProps {
        variant: ButtonVariant::Link,
        ..ButtonProps::default()
    };

    let header = div(
        vec![("class", "blocks-auth-otp-verify-header")],
        vec![
            heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl,
                    weight: HeadingWeight::Bold,
                },
                vec![],
                vec![text("Check your inbox")],
            ),
            styled_text::text(
                &TextProps {
                    size: TextSize::Sm,
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![("data-blocks-auth-otp-verify-lead", "")],
                vec![text("Enter the 6-digit code we sent to m•••@example.com.")],
            ),
        ],
    );

    let code_field = field::root(
        &orientation,
        &field_props,
        vec![],
        vec![
            field::label(&field_props, vec![], vec![text("Verification code")]),
            pin_input::root(
                Size::Lg,
                false,
                false,
                vec![("data-blocks-auth-otp-verify-pin", "")],
                vec![pin_input::control(vec![], pin_digits(&pin_props))],
            ),
            field::helper_text(
                &field_props,
                vec![],
                vec![text("The code expires in 10 minutes.")],
            ),
        ],
    );

    let submit = button::button(
        &ButtonProps::default(),
        vec![("data-blocks-auth-otp-verify-submit", "")],
        vec![text("Verify code")],
    );

    let footer = div(
        vec![("class", "blocks-auth-otp-verify-footer")],
        vec![
            div(
                vec![("class", "blocks-auth-otp-verify-resend")],
                vec![
                    text("Didn't get the code? "),
                    button::button(&link_button, vec![], vec![text("Resend code")]),
                ],
            ),
            link::root(
                "../login-01/",
                &LinkProps::default(),
                vec![("data-blocks-auth-otp-verify-back", "")],
                vec![text("Back to sign in")],
            ),
        ],
    );

    div(
        vec![("data-blocks-auth-otp-verify-stack", "")],
        vec![header, code_field, submit, footer],
    )
}