function show_alert(text, mode = "alert-warning") {
    close_alert();
    let alert = document.querySelector("#alert")
    alert.classList.add(mode)
    alert.classList.remove("d-none")
    alert.innerText = text;
}

function close_alert() {
    let alert = document.querySelector("#alert")
    alert.classList.remove("alert-danger");
    alert.classList.remove("alert-warning");
    alert.classList.remove("alert-success");
    alert.classList.remove("alert-info");
    alert.classList.add("d-none")
    alert.innerText = "";
}

var LOGIN = {
    "state": "NEW_USER",
    "phone": null
}

async function login_button(self) {
    close_alert();
    self.classList.add("disabled");

    if (LOGIN.state === "NEW_USER") {
        let user_number_input = document.getElementById("user-number-input").value
        LOGIN["phone"] = user_number_input;
        if (user_number_input.length < 11 || !user_number_input.startsWith("09")) {
            let alert_text = "شماره تلفن نامعتبر است. لطفاً یک شماره تلفن معتبر وارد کنید که با 09 شروع شود و دارای 11 رقم باشد.";
            show_alert(alert_text, "alert-danger");
            self.classList.remove("disabled")
            return
        }
        let login_response = await login_api(user_number_input, "login")
        if (login_response.status === "sent" || login_response.status === "wait") {
            LOGIN["state"] = "ENTER_CODE";
            document.getElementById("login-area").innerHTML = `
        <span class="text-muted small">کد تایید برای شماره ${user_number_input} ارسال شده.</span>
        <div class="col-12 row">
                <label>کد تایید:</label>
                <div class="col-9">
                    <input placeholder="12345" type="tel" class="form-control form-control-lg" maxlength="5" id="user-code-input">

                </div>
                <div class="col-3">
                    <button class="btn bg-dark bg-gradient text-white col-12 mt-1 pe-0" onclick="resend_code(this)">دوباره</button>

                </div>

        </div>
       
        <div class="col-12 text-center mt-3">
            <button class="btn bg-dark bg-gradient py-3 col-12 text-white" onclick="login_button(this)">تایید</button>
        </div>
        `;
            self.classList.remove("disabled");
        }
    } else if (LOGIN.state === "ENTER_CODE") {
        let user_code_input = document.getElementById("user-code-input").value
        let verify_code_response = await login_api(LOGIN.phone, "verify-code", user_code_input)
        if (verify_code_response.status === "login-success") {
            const urlParams = new URLSearchParams(window.location.search);
            const nextUrl = urlParams.get('next');

            if (nextUrl) {
                window.location.href = nextUrl;
            } else if (document.referrer) {
                window.location.href = document.referrer;
            } else {
                location.reload();
            }
        } else if (verify_code_response.status === "wrong-code") {
            let alert_text = "کد تایید وارد شده اشتباه است، به دقت وارد کنید یا ارسال مجدد را بزنید.";
            show_alert(alert_text, "alert-danger");
            self.classList.remove("disabled")
            return
        }
    }

}

async function resend_code(self) {
    self.classList.add("disabled");

    let login_response = await login_api(LOGIN.phone, "resend")
    if (login_response.status === "sent") {
        let alert_text = "کد تایید مجددا به تلفن شما ارسال شد.";
        show_alert(alert_text, "alert-info");
        self.classList.remove("disabled");

    } else {
        let alert_text = "برای ارسال مجدد 5 دقیقه منتظر بمانید.";
        show_alert(alert_text);
        self.classList.remove("disabled");

    }
}

async function login_api(phone_number, status, code = null) {
    LOGIN_DATA = {
        "status": status,
        "phone_number": phone_number,
        "verify_code": code
    }
    let csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    let _data = "initial";
    try {
        const response = await fetch('/profile/api/login', {
            method: 'POST', headers: {
                'Content-Type': 'application/json', 'X-CSRFToken': csrfToken
                // Include other headers as needed
            }, body: JSON.stringify(LOGIN_DATA),
        });
        // تبدیل پاسخ به JSON
        _data = await response.json();
    } catch (error) {
        let alert_text = "خطای مهلکی در ارتباط با مرکز رخ داده است، اینترنت خود را بررسی یا با توسعه دهنده تماس بگیرید.";
        show_alert(alert_text, "alert-danger");
        _data = "fail";
    }
    return _data;
}
