error-page-split-image

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::empty_state::{self, EmptyStateProps, EmptyStateVariant};
use fandhe_frontend_pre_styled_ui::heading::{self, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::image::{self, ImageProps};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps};
use fandhe_frontend_pre_styled_ui::text::{
    self as styled_text, TextProps, TextVariant, TextWeight,
};

/// 「Contact support」の遷移先（モジュール doc「補助リンクのリンク先は
/// ラベルの意味に対応した実在 URL」節参照。`error_page_centered` の
/// `ISSUES` と同じ URL・同じ判断）。
const ISSUES: &str = "https://github.com/Fandhe-AI/fandhe-frontend/issues";

/// 「CI status」（表示ラベルを「System status」から変更、同節参照）の
/// 遷移先。GitHub Actions 実行状況ページ。
const CI_STATUS_URL: &str = "https://github.com/Fandhe-AI/fandhe-frontend/actions";

const LAYOUT_CLASS: &str = "blocks-error-page-split-image-layout";
const MAIN_CLASS: &str = "blocks-error-page-split-image-main";
const BRAND_CLASS: &str = "blocks-error-page-split-image-brand";
const HELPER_CLASS: &str = "blocks-error-page-split-image-helper";
const MEDIA_CLASS: &str = "blocks-error-page-split-image-media";

const LOGO_ATTR: &str = "data-blocks-error-page-split-image-logo";
const BRAND_NAME_ATTR: &str = "data-blocks-error-page-split-image-brand-name";
const MESSAGE_ATTR: &str = "data-blocks-error-page-split-image-message";
const CONTENT_ATTR: &str = "data-blocks-error-page-split-image-content";
const CODE_ATTR: &str = "data-blocks-error-page-split-image-code";
const TITLE_ATTR: &str = "data-blocks-error-page-split-image-title";
const DESCRIPTION_ATTR: &str = "data-blocks-error-page-split-image-description";
const ACTIONS_ATTR: &str = "data-blocks-error-page-split-image-actions";
const BACK_ATTR: &str = "data-blocks-error-page-split-image-back";
const CTA_ATTR: &str = "data-blocks-error-page-split-image-cta";
const HELPER_LINK_ATTR: &str = "data-blocks-error-page-split-image-helper-link";
const IMAGE_ATTR: &str = "data-blocks-error-page-split-image-image";

/// 装飾用の抽象六角形ロゴ（実ブランドロゴを複製しない、モジュール doc
/// 「ロゴ・戻る矢印は自作の単純幾何図形」参照）。
fn logo_icon() -> Node {
    icon(
        &IconProps::default(),
        vec![(LOGO_ATTR, "")],
        vec![el(
            "path",
            vec![("d", "M12 2 21 7v10l-9 5-9-5V7l9-5Z")],
            vec![],
        )],
    )
}

/// 戻るリンクの左向き矢印（同上）。
fn back_arrow_icon() -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el("path", vec![("d", "M14 4 6 12l8 8V4Z")], vec![])],
    )
}

/// `error-page-split-image` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数。
pub fn demo() -> Node {
    let brand = div(
        vec![("class", BRAND_CLASS)],
        vec![
            logo_icon(),
            styled_text::text(
                &TextProps {
                    weight: TextWeight::Semibold,
                    ..TextProps::default()
                },
                vec![(BRAND_NAME_ATTR, "")],
                vec![text(dummy_assets::COMPANY_NAMES[0])],
            ),
        ],
    );

    let code = styled_text::text(
        &TextProps {
            weight: TextWeight::Semibold,
            ..TextProps::default()
        },
        vec![(CODE_ATTR, "")],
        vec![text("404")],
    );

    let title = empty_state::title(
        vec![(TITLE_ATTR, "")],
        vec![heading::heading(
            HeadingLevel::H3,
            &HeadingProps {
                size: HeadingSize::Xl3,
                ..HeadingProps::default()
            },
            vec![],
            vec![text("This page took a wrong turn")],
        )],
    );

    let description = empty_state::description(
        vec![(DESCRIPTION_ATTR, "")],
        vec![styled_text::text(
            &TextProps {
                variant: TextVariant::Muted,
                ..TextProps::default()
            },
            vec![],
            vec![text(
                "We could not find the page you were looking for. It may have moved, been renamed, or never existed.",
            )],
        )],
    );

    let actions = empty_state::actions(
        vec![(ACTIONS_ATTR, "")],
        vec![
            link::root(
                "../../",
                &LinkProps::default(),
                vec![(BACK_ATTR, "")],
                vec![back_arrow_icon(), text(" Back to home")],
            ),
            link::root(
                ISSUES,
                &LinkProps {
                    external: true,
                    ..LinkProps::default()
                },
                vec![(CTA_ATTR, "")],
                vec![text("Contact support")],
            ),
        ],
    );

    let message = empty_state::root(
        &EmptyStateProps {
            variant: EmptyStateVariant::Plain,
            ..EmptyStateProps::default()
        },
        vec![(MESSAGE_ATTR, "")],
        vec![empty_state::content(
            vec![(CONTENT_ATTR, "")],
            vec![code, title, description, actions],
        )],
    );

    let helper = div(
        vec![("class", HELPER_CLASS)],
        vec![
            link::root(
                "../../guides/",
                &LinkProps::default(),
                vec![(HELPER_LINK_ATTR, "")],
                vec![text("Help center")],
            ),
            link::root(
                CI_STATUS_URL,
                &LinkProps {
                    external: true,
                    ..LinkProps::default()
                },
                vec![(HELPER_LINK_ATTR, "")],
                vec![text("CI status")],
            ),
        ],
    );

    let main_column = div(vec![("class", MAIN_CLASS)], vec![brand, message, helper]);

    let media_column = div(
        vec![("class", MEDIA_CLASS)],
        vec![image::image(
            &ImageProps::new(dummy_assets::SCREENSHOT_SRC, ""),
            vec![(IMAGE_ATTR, "")],
        )],
    );

    div(
        vec![("class", LAYOUT_CLASS)],
        vec![main_column, media_column],
    )
}