document.addEventListener("DOMContentLoaded", function () {
    
    // toogle password
    window.togglePassword = function () {
        const input = document.getElementById("password");
        const icon = document.getElementById("eyeIcon");

        if (input && icon) {
            if (input.type === "password") {
                input.type = "text";
                icon.classList.replace("fa-eye", "fa-eye-slash");
            } else {
                input.type = "password";
                icon.classList.replace("fa-eye-slash", "fa-eye");
            }
        }
    };

    window.toggleRegisterPassword = window.togglePassword;

    // register
    const registerForm = document.querySelector("form[action*='register']");
    const passwordInput = document.getElementById("password");
    const confirmInput = document.getElementById("password_confirmation");
    const matchText = document.getElementById("password-match");
    const registerBtn = document.getElementById("registerBtn");

    if (registerForm && passwordInput && registerBtn) {
        const text = registerBtn.querySelector("#btnText");
        const spinner = registerBtn.querySelector("#btnSpinner");

        const ruleLength = document.getElementById("rule-length");
        const ruleUpper = document.getElementById("rule-uppercase");
        const ruleNumber = document.getElementById("rule-number");
        const ruleSymbol = document.getElementById("rule-symbol");

        passwordInput.addEventListener("input", function () {
            const value = passwordInput.value;
            const hasLength = value.length >= 8;
            const hasUppercase = /[A-Z]/.test(value);
            const hasNumber = /[0-9]/.test(value);
            const hasSymbol = /[^A-Za-z0-9]/.test(value);

            updateRule(ruleLength, hasLength);
            updateRule(ruleUpper, hasUppercase);
            updateRule(ruleNumber, hasNumber);
            updateRule(ruleSymbol, hasSymbol);

            checkPasswordMatch();
        });

        if (confirmInput) {
            confirmInput.addEventListener("input", checkPasswordMatch);
        }

        function checkPasswordMatch() {
            if (!confirmInput || !matchText) return;

            if (confirmInput.value === "") {
                matchText.innerHTML = "✖ Password tidak sama";
                matchText.className = "text-xs mt-1 text-red-500";
                return;
            }

            if (passwordInput.value === confirmInput.value) {
                matchText.innerHTML = "✔ Password cocok";
                matchText.className = "text-xs mt-1 text-green-600";
            } else {
                matchText.innerHTML = "✖ Password tidak sama";
                matchText.className = "text-xs mt-1 text-red-500";
            }
        }

        registerForm.addEventListener("submit", function (e) {
            const value = passwordInput.value;
            const hasLength = value.length >= 8;
            const hasUppercase = /[A-Z]/.test(value);
            const hasNumber = /[0-9]/.test(value);
            const hasSymbol = /[^A-Za-z0-9]/.test(value);
            const isMatch = confirmInput ? confirmInput.value === value : true;

            if (!(hasLength && hasUppercase && hasNumber && hasSymbol && isMatch)) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Password tidak valid',
                    text: 'Pastikan minimal 8 karakter, ada huruf besar, angka, dan simbol unik.'
                });
                return;
            }

            e.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Pendaftaran',
                html: `
                    <div class="text-left" style="font-size: 14px; color: #444; line-height: 1.6; padding: 0 10px;">
                        <p style="margin-bottom: 12px;">Dengan mendaftar pegas, Anda menyatakan setuju untuk:</p>
                        <ul style="padding-left: 20px; margin-bottom: 20px;">
                            <li style="margin-bottom: 8px;">1. Pengguna bersedia memberikan data penjualan LPG yang akurat dan relevan untuk keperluan proses prediksi dalam sistem.</li>
                            <li style="margin-bottom: 8px;">2. Pengguna memberikan izin kepada sistem untuk mengolah dan menganalisis data yang diberikan sebagai bagian dari pengembangan dan peningkatan kinerja sistem.</li>
                            <li style="margin-bottom: 8px;">3. Pengguna memahami bahwa hasil prediksi yang dihasilkan oleh sistem bersifat estimasi berbasis model machine learning dan tidak dapat dijadikan sebagai keputusan mutlak.</li>
                            <li style="margin-bottom: 8px;">4. Pengguna bertanggung jawab penuh atas penggunaan hasil prediksi dalam pengambilan keputusan operasional, dan berharap tidak disalahgunakan.</li>
                            <li style="margin-bottom: 8px;">5. Hasil prediksi yang dihasilkan sistem pegas merupakan estimasi, data dilapangan mungkin berbeda dengan hasil prediksi.</li>
                            <li style="margin-bottom: 8px;">6. Data yang diberikan oleh pengguna akan dijaga kerahasiaannya dan hanya digunakan untuk keperluan sistem.</li>
                        </ul>
                        <p style="margin-bottom: 12px;">Centang kotak saya setuju dengan ketentuan dibawah untuk melanjutkan pendaftaran.</p>
                        <div style="background-color: #f8f9fa; padding: 12px; border-radius: 8px; border: 1px solid #e9ecef; text-align: center;">
                            <label style="cursor: pointer; font-weight: bold; color: #333; margin-bottom: 0;">
                                <input type="checkbox" id="agreeCheck" style="transform: scale(1.3); margin-right: 10px; cursor: pointer;"> 
                                Saya setuju dengan ketentuan
                            </label>
                        </div>
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Daftar',
                cancelButtonText: 'Kembali',
                confirmButtonColor: '#7ebc12',
                preConfirm: () => {
                    if (!document.getElementById('agreeCheck').checked) {
                        Swal.showValidationMessage('Harus menyetujui terlebih dahulu!');
                        return false;
                    }
                    return true;
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    registerBtn.disabled = true;
                    if (text) text.innerText = "Memproses...";
                    if (spinner) spinner.classList.remove("hidden");
                    registerForm.submit();
                }
            });
        });
    }

    // login
    const loginForm = document.querySelector("form[action*='login']");
    const loginBtn = document.getElementById("loginBtn");

    if (loginForm && loginBtn) {
        loginForm.addEventListener("submit", function () {
            const lText = document.getElementById("btnText");
            const lSpinner = document.getElementById("btnSpinner");
            
            loginBtn.disabled = true;
            if (lText) lText.innerText = "Memproses...";
            if (lSpinner) lSpinner.classList.remove("hidden");
        });
    }

    // reset password
    const resetForm = document.getElementById("resetPasswordForm");
    if (resetForm) {
        const resetPwInput = document.getElementById("password");
        const resetCfInput = document.getElementById("password_confirmation");
        const resetMatchMsg = document.getElementById("password-match");

        resetPwInput.addEventListener("input", function() {
            const val = resetPwInput.value;
            updateRule(document.getElementById("rule-length"), val.length >= 8);
            updateRule(document.getElementById("rule-uppercase"), /[A-Z]/.test(val));
            updateRule(document.getElementById("rule-number"), /[0-9]/.test(val));
            updateRule(document.getElementById("rule-symbol"), /[^A-Za-z0-9]/.test(val));
            validateResetMatch();
        });

        if (resetCfInput) {
            resetCfInput.addEventListener("input", validateResetMatch);
        }

        function validateResetMatch() {
            if (!resetCfInput || !resetMatchMsg) return;

            if (resetCfInput.value === "") {
                resetMatchMsg.innerHTML = "✖ Password tidak sama";
                resetMatchMsg.className = "text-xs mt-1 text-red-500";
            } else if (resetPwInput.value === resetCfInput.value) {
                resetMatchMsg.innerHTML = "✔ Password cocok";
                resetMatchMsg.className = "text-xs mt-1 text-green-600";
            } else {
                resetMatchMsg.innerHTML = "✖ Password tidak sama";
                resetMatchMsg.className = "text-xs mt-1 text-red-500";
            }
        }
    }
});

// update rule
function updateRule(element, isValid) {
    if (!element) return;

    if (isValid) {
        element.classList.remove("text-red-500");
        element.classList.add("text-green-600");
        element.innerHTML = element.innerHTML.replace(/✖|✔/g, "✔");
    } else {
        element.classList.remove("text-green-600");
        element.classList.add("text-red-500");
        element.innerHTML = element.innerHTML.replace(/✖|✔/g, "✖");
    }
}