(function () {
    const RegistryApp = (window.RegistryApp = window.RegistryApp || {});
    const { h } = RegistryApp.runtime;
    const store = RegistryApp.store;

    RegistryApp.componentFns = RegistryApp.componentFns || {};

    RegistryApp.componentFns.LoginForm = function LoginForm() {
        const bridge = RegistryApp.bridge;
        const isAuthenticating = store.getIsAuthenticating();
        const loginError = store.getLoginError();

        const handleLogin = () => {
            const data = {
                email: String(
                    document.getElementById("org-login-email")?.value || "",
                ),
                password: String(
                    document.getElementById("org-login-password")?.value || "",
                ),
            };

            if (!bridge) {
                store.failLogin("Login bridge is not available.");
                return;
            }

            bridge.requestLogin(data);
        };

        return h(
            "div",
            {
                className: "card",
                style: { maxWidth: "400px", margin: "0 auto" },
            },
            h("h2", null, "Organization Login"),
            h(
                "div",
                { className: "app-form" },
                h(
                    "div",
                    null,
                    h("label", null, "Email"),
                    h("input", {
                        id: "org-login-email",
                        type: "text",
                        placeholder: "admin@spearnet.mil",
                    }),
                ),
                h(
                    "div",
                    null,
                    h("label", null, "Password"),
                    h("input", {
                        id: "org-login-password",
                        type: "password",
                        placeholder: "********",
                        disabled: isAuthenticating,
                    }),
                ),
                loginError
                    ? h(
                          "div",
                          { className: "form-feedback is-error" },
                          loginError,
                      )
                    : null,
                h(
                    "div",
                    { className: "form-actions" },
                    h(
                        "button",
                        {
                            type: "button",
                            style: { width: "100%" },
                            onClick: handleLogin,
                            disabled: isAuthenticating,
                        },
                        isAuthenticating
                            ? "Authenticating..."
                            : "Access Authenticator",
                    ),
                    h(
                        "span",
                        {
                            className: "cancel-link",
                            onClick: () => store.setView("home"),
                        },
                        "Cancel / Return to Main",
                    ),
                ),
            ),
        );
    };
})();