import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal Register.js";
import { registerRequest } from "./API Register.js";

// Aktifkan tombol modal
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();

    // Validasi kosong
    if (!username || !password || !confirmPassword) {
        showModal("error", "Register Gagal!", "Semua field wajib diisi.");
        return;
    }

    // Validasi password tidak sama
    if (password !== confirmPassword) {
        showModal("error", "Password Tidak Cocok!", "Password dan Confirm Password harus sama.");
        setInputError("password");
        setInputError("confirmPassword");
        return;
    }

    // Button loading state
    const submitBtn = this.querySelector("button[type='submit']");
    const originalText = submitBtn.textContent;
    submitBtn.innerHTML = "<span>Memproses...</span>";
    submitBtn.disabled = true;

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

        // API temenmu return: { status: "success", message: "..." }
        if (data.status === "success") {
            showModal("success", "Register Berhasil!", data.message);

        } else {
            showModal("error", "Register Gagal!", data.message || "Terjadi kesalahan.");
            setInputError("username");
        }

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

        let msg = "Terjadi kesalahan koneksi.";

        if (error.message === "Failed to fetch") {
            msg = "Tidak dapat terhubung ke server.";
        }

        showModal("error", "Error!", msg);

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

// Hilangkan efek error saat user mengetik
document.getElementById("username").addEventListener("input", clearInputStyle);
document.getElementById("password").addEventListener("input", clearInputStyle);
document.getElementById("confirmPassword").addEventListener("input", clearInputStyle);

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

// Hilangkan error visual
function clearInputStyle() {
    this.style.borderColor = "";
    this.style.boxShadow = "";
}