import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal_Register.js";
import { registerRequest } from "./Register_Request.js";

setupModalOk();
setupOutsideClose();

document.getElementById("registerForm").addEventListener("submit", async function (e) {
    e.preventDefault();

    const username = document.getElementById("username").value.trim();
    const password = document.getElementById("password").value.trim();
    const confirmPassword = document.getElementById("confirmPassword").value.trim();

    if (!username || !password || !confirmPassword) {
        showModal("error", "Register Failed!", "All fields are required.");
        return;
    }

    if (password !== confirmPassword) {
        showModal("error", "Password Mismatch!", "Password and Confirm Password must match.");
        setInputError("password");
        setInputError("confirmPassword");
        return;
    }

    const submitBtn = this.querySelector("button[type='submit']");
    submitBtn.disabled = true;

    try {
        const data = await registerRequest(username, password);

        if (data.status === "success") {

            showModal("success", "Register Successful!", data.message);

            const pendingScore = localStorage.getItem('lastScore'); 
            if (pendingScore && typeof saveScore === "function") {
                console.log("Menyimpan skor pending: " + pendingScore);
                saveScore(pendingScore);
            } else if (typeof score !== 'undefined') {
                saveScore(score);
            }
            
            const okBtn = document.getElementById("modalOkBtn"); 

            if (okBtn) {
                okBtn.addEventListener("click", function() {
            
                    sessionStorage.setItem("loggedInUser", username); 

                    window.location.href = "Homepage.html"; 
                }, { once: true });
                
            } else {
        
                console.warn("OK button not found, redirecting automatically.");
                setTimeout(() => {
                    
                    sessionStorage.setItem("loggedInUser", username);
                    window.location.href = "Homepage.html";
                }, 2000);
            }

        } else {
            showModal("error", "Register Failed!", data.message || "An error occurred.");
            setInputError("username");
        }

    } catch (error) {
        console.error("Register Error:", error);

        let msg = "A connection error occurred.";
        if (error.message === "Failed to fetch") {
            msg = "Unable to connect to server.";
        }
        showModal("error", "Error!", msg);

    } finally {
        submitBtn.disabled = false;
    }
});

document.getElementById("username").addEventListener("input", clearInputStyle);
document.getElementById("password").addEventListener("input", clearInputStyle);
document.getElementById("confirmPassword").addEventListener("input", clearInputStyle);

function setInputError(id) {
    const el = document.getElementById(id);
    if(el) {
        el.style.borderColor = "#ff0080";
        el.style.boxShadow = "0 0 20px rgba(255, 0, 128, 0.3)";
    }
}

function clearInputStyle() {
    this.style.borderColor = "";
    this.style.boxShadow = "";
}