signup-05

use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, icon_size_for, 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::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::input::{self, FieldIds, FieldProps, InputProps};
use fandhe_frontend_pre_styled_ui::Size;

/// 自作の単純な矩形アイコン（著作物を複製しない、`sidebar_03`/`sidebar_07`
/// と同型。モジュール doc「Apple/Google ロゴ + ラベル」節参照）。
fn geo_icon(path_d: &'static str, size: Size) -> Node {
    icon(
        &IconProps {
            size,
            ..IconProps::default()
        },
        vec![],
        vec![el("path", vec![("d", path_d)], vec![])],
    )
}

/// ブランド行（ロゴ枠 + 見出し + Sign in 導線）。
fn brand() -> Node {
    let logo = div(
        vec![("class", "blocks-signup-05-logo")],
        vec![icon(
            &IconProps {
                size: Size::Lg,
                label: Some("Acme Inc."),
                ..IconProps::default()
            },
            vec![],
            vec![el("path", vec![("d", "M4 4h16v16H4z")], vec![])],
        )],
    );
    let title = heading(
        HeadingLevel::H3,
        &HeadingProps {
            size: HeadingSize::Xl,
            weight: HeadingWeight::Bold,
        },
        vec![],
        vec![text("Welcome to Acme Inc.")],
    );
    let signin_row = div(
        vec![("class", "blocks-signup-05-signin-row")],
        vec![
            text("Already have an account? "),
            button::button(
                &ButtonProps {
                    variant: ButtonVariant::Link,
                    ..ButtonProps::default()
                },
                vec![],
                vec![text("Sign in")],
            ),
        ],
    );
    div(
        vec![("class", "blocks-signup-05-brand")],
        vec![logo, title, signin_row],
    )
}

/// `signup-05` の Demo 本体。呼び出しごとに同一の `Node` を返す純関数。
pub fn demo() -> Node {
    let email_field = FieldProps {
        id: "blocks-signup-05-email",
        ids: FieldIds::default(),
        disabled: false,
        invalid: false,
        required: true,
        readonly: false,
        has_helper_text: false,
    };
    let orientation = FieldRootProps {
        orientation: FieldOrientation::Vertical,
    };
    let link_button = ButtonProps {
        variant: ButtonVariant::Link,
        ..ButtonProps::default()
    };
    let provider_icon_size = icon_size_for(Size::Md);

    let field_group = field::group(
        vec![],
        vec![
            brand(),
            field::root(
                &orientation,
                &email_field,
                vec![("data-blocks-signup-05-field", "")],
                vec![
                    field::label(&email_field, vec![], vec![text("Email")]),
                    input::input(
                        &InputProps::default(),
                        &email_field,
                        vec![("type", "email"), ("placeholder", "m@example.com")],
                    ),
                ],
            ),
            button::button(
                &ButtonProps::default(),
                vec![("data-blocks-signup-05-submit", "")],
                vec![text("Create Account")],
            ),
            field::separator(vec![], vec![text("Or")]),
            div(
                vec![("data-blocks-signup-05-providers", "")],
                vec![
                    button::button(
                        &ButtonProps {
                            variant: ButtonVariant::Outline,
                            ..ButtonProps::default()
                        },
                        vec![("data-blocks-signup-05-provider", "")],
                        vec![
                            geo_icon("M12 3l9 8h-3v9H6v-9H3z", provider_icon_size),
                            text("Continue with provider A"),
                        ],
                    ),
                    button::button(
                        &ButtonProps {
                            variant: ButtonVariant::Outline,
                            ..ButtonProps::default()
                        },
                        vec![("data-blocks-signup-05-provider", "")],
                        vec![
                            geo_icon("M4 4h16v16H4z", provider_icon_size),
                            text("Continue with provider B"),
                        ],
                    ),
                ],
            ),
        ],
    );

    let terms = div(
        vec![("class", "blocks-signup-05-terms")],
        vec![
            text("By clicking continue, you agree to our "),
            button::button(&link_button, vec![], vec![text("Terms of Service")]),
            text(" and "),
            button::button(&link_button, vec![], vec![text("Privacy Policy")]),
            text("."),
        ],
    );

    div(
        vec![("data-blocks-signup-05-stack", "")],
        vec![field_group, terms],
    )
}