import { Typography, Button, Space } from "antd";
import type { PageProps } from "keycloakify/login/pages/PageProps";
import type { KcContext } from "../KcContext";
import type { I18n } from "../i18n";

const { Text } = Typography;

export default function Info(props: PageProps<Extract<KcContext, { pageId: "info.ftl" }>, I18n>) {
    const { kcContext, i18n, Template } = props;
    const { advancedMsgStr, msg } = i18n;
    const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;

    // Prepare the message content with required actions if present
    const getMessageContent = () => {
        let html = message.summary;
        if (requiredActions) {
            html += "<b>";
            html += requiredActions.map(requiredAction => advancedMsgStr(`requiredAction.${requiredAction}`)).join(", ");
            html += "</b>";
        }
        return html;
    };

    // Determine which action link to show
    const renderActionLink = () => {
        if (skipLink) {
            return null;
        }

        if (pageRedirectUri) {
            return (
                <Button type="primary" block size={"large"} href={pageRedirectUri} style={{ marginTop: 24 }}>
                    {msg("backToApplication")}
                </Button>
            );
        }

        if (actionUri) {
            return (
                <>
                    <Button type="primary" block size={"large"} href={actionUri} style={{ marginTop: 24 }}>
                        {msg("proceedWithAction")}
                    </Button>
                </>
            );
        }

        if (client.baseUrl) {
            return (
                <>
                    <Button type="primary" block size={"large"} href={client.baseUrl} style={{ marginTop: 24 }}>
                        {msg("backToApplication")}
                    </Button>
                </>
            );
        }

        return null;
    };

    return (
        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={false} displayMessage={false} headerNode={messageHeader}>
            <div style={{ padding: "0 15px" }}>
                <Space direction="vertical" size="middle">
                    <Text className="instruction">
                        <span dangerouslySetInnerHTML={{ __html: getMessageContent() }}></span>
                    </Text>
                </Space>

                {renderActionLink()}
            </div>
        </Template>
    );
}