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

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 input kosong
    if (!username || !password || !confirmPassword) {
        showModal('error', 'Register Gagal!', 'Semua field harus diisi.');
        return;
    }

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

    // Loading state button
    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);

        // FORMAT API TEMENMU:
        // { status: "success", message: "..."}
        // { status: "error", message: "..." }

        if (data.status === "success") {
            showModal('success', 'Register Berhasil!', data.message || "Akun berhasil dibuat!");

            // Setelah klik OK → ke login
            document.getElementById("modalOkBtn").onclick = () => {
                closeModal();
                window.location.href = "Login.html";
            };

        } else {
            // Jika error dari API
            showModal('error', 'Register Gagal!', data.message || 'Terjadi kesalahan.');
            setInputError('username');
        }

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

        let errorMessage = 'Terjadi kesalahan koneksi.';

        if (error.message === 'Failed to fetch') {
            errorMessage = 'Tidak dapat terhubung ke server.';
        } else if (error.message.includes('timeout')) {
            errorMessage = 'Server tidak merespons (timeout).';
        }

        showModal('error', 'Error!', errorMessage);
    } finally {
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
    }
});

// Clear error saat 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(inputId) {
    const input = document.getElementById(inputId);
    input.style.borderColor = '#ff0080';
    input.style.boxShadow = '0 0 20px rgba(255, 0, 128, 0.3)';
}

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