import type { PageProps } from "keycloakify/login/pages/PageProps";
import type { KcContext } from "../KcContext";
import type { I18n } from "../i18n";
import { Button } from "@/components/ui/button";
import { Alert, AlertTitle } from "@/components/ui/alert";

export default function QrLoginVerify(props: PageProps<Extract<KcContext, { pageId: "qr-login-verify.ftl" }>, I18n>) {
    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
    const { ua_device, ua_os, ua_agent, local_localized, tabId, approveURL, rejectURL } = kcContext;

    const { msg } = i18n;

    return (
        <Template
            kcContext={kcContext}
            i18n={i18n}
            doUseDefaultCss={doUseDefaultCss}
            classes={classes}
            displayInfo={false}
            headerNode={msg("doQrCodeVerify")}
        >
            <div id="kc-qr-verify-form" className={classes?.kcFormClass}>
                <Alert variant="destructive" className="mb-4 w-full">
                    <AlertTitle>{msg("doQrCodeWarning")}</AlertTitle>
                </Alert>

                <p className="kcQrDeviceInfoClass">
                    You are authorizing a session on a <b>{ua_device}</b> running <b>{ua_os}</b> / <b>{ua_agent}</b> in locale{" "}
                    <b>{local_localized}</b>.
                </p>

                {tabId && (
                    <p className="kcQrSessionClass">
                        Session: <b>{tabId}</b>
                    </p>
                )}

                <div className="kcQrVerifyButtonsClass">
                    <Button asChild size="lg">
                        <a href={approveURL}>{msg("doAccept")}</a>
                    </Button>
                    <Button variant="secondary" asChild size="lg">
                        <a href={rejectURL}>{msg("doDecline")}</a>
                    </Button>
                </div>
            </div>
        </Template>
    );
}