/* Base de comunicação com mid -abertura- */
// Função para obter a URL base do servidor
async function getApiUrl() {
    try {
        const response = await fetch('../../../php/config_url.php'); // Solicita a URL base do PHP
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        return data.apiUrl; // Retorna a URL base
    } catch (error) {
        console.error('Error fetching API URL:', error);
        throw error;
    }
}
/* -fechamento- */

/* Frontend - abertura -  - envio da ação - */

// Adiciona um ouvinte de evento ao formulário de login para tratar o evento de submissão
document.getElementById("formLogin").addEventListener("submit", async function (event) {
    event.preventDefault(); // Previne o comportamento padrão do formulário

    // Obtém os elementos do DOM correspondentes ao nome de usuário, senha e mensagem de erro
    const usernameElement = document.getElementById("username");
    const passwordElement = document.getElementById("password");
    const errorMessageElement = document.getElementById("errorMessage");
    const erro5003 = document.getElementById("erro_503");


    // Limpa qualquer mensagem de erro anterior e bordas de campo
    errorMessageElement.innerHTML = '';
    erro5003.innerHTML = '';
    usernameElement.style.borderColor = '';
    passwordElement.style.borderColor = '';

    // Verifica se os elementos do nome de usuário e senha existem
    if (!usernameElement || !passwordElement) {
        console.error('Username or password element not found');
        return;
    }

    // Obtém os valores inseridos pelo usuário nos campos de nome de usuário e senha
    const username = usernameElement.value.trim();
    const password = passwordElement.value.trim();


    /*Caso em que o usuario não preenche os dois campos inputs, ou um deles*/
    if (!username || !password) {
        errorMessageElement.innerHTML = `<p>Preencha ambos os campos</p>`;
        usernameElement.style.borderColor = 'red';
        passwordElement.style.borderColor = 'red';

        errorMessageElement.style.height = '10vh';
        errorMessageElement.style.opacity = '1';
        errorMessageElement.style.transition = ' 1s ease';

        const tempoDeExibicao = 5000;
        setTimeout(() => {

            errorMessageElement.style.height = '0vh'; // Oculta a mensagem
            usernameElement.style.borderColor = '#1478cf';
            passwordElement.style.borderColor = '#1478cf';

            errorMessageElement.style.opacity = '0';
            errorMessageElement.style.transition = ' 1s ease';
        }, tempoDeExibicao);

        return;


    }

    /* Frontend - fechamento -  - envio da ação - */

    /* Nesse caso seria uma dupla utilização pois ele enviaria para o mid*/
    try {
        // Obtém a URL base do servidor
        const apiUrl = await getApiUrl();

        // Envia uma requisição POST para o servidor de login com os dados de usuário e senha
        const response = await fetch(`${apiUrl}/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json' // Define o tipo de conteúdo como JSON
            },
            body: JSON.stringify({ username, password }) // Converte os dados para JSON antes de enviar

        });
        /* - fechamento -*/


        /*Frontend - Abertura -  - Reação á resposta - */
        /*Caso de sucesso*/
        if (response.ok) {

            const data = await response.json(); // Extrai os dados JSON da resposta
            localStorage.setItem('x-access-token', data.token); // Armazena o token de autenticação no localStorage
            // Redireciona o usuário para a página do ambiente do usuário
            window.location.href = "./Ambiente_Usuario_copy.html";
        }

        /* Caso de erro*/
        else {

            /*Variavel que recebe os status de resposta do servidor, sendo respose uma variavel enquanto status uma tag especial do javascript*/
            const comunica = response.status

            /*Caso erro, onde o email usado é invalido*/
            if (comunica === 400) {

                errorMessageElement.innerHTML = `<p>O E-mail usado é invalido, o formato esperado é "usuario@domino.com.br"</p>`;


                errorMessageElement.style.height = '10vh';
                errorMessageElement.style.opacity = '1';

                usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
                errorMessageElement.style.transition = ' 1s ease';

                const tempoDeExibicao = 5000;
                setTimeout(() => {

                    usernameElement.style.borderColor = '#1478cf'; // Marca o campo do usuário com erro
                    errorMessageElement.style.height = '0vh'; // Oculta a mensagem
                    errorMessageElement.style.opacity = '0';
                    errorMessageElement.style.transition = ' 1s ease';
                }, tempoDeExibicao);

            }

            /*Caso erro, quando há um erro na autenticação com o banco de dados*/
            if (comunica === 401) {

                errorMessageElement.innerHTML = `<p>Erro na autenticação, informe seu o usuário, ao suporte@itguys.com.br</p>`;


                errorMessageElement.style.height = '10vh';
                errorMessageElement.style.opacity = '1';
                errorMessageElement.style.transition = ' 1s ease';

                const tempoDeExibicao = 5000;
                setTimeout(() => {

                    errorMessageElement.style.height = '0vh'; // Oculta a mensagem
                    errorMessageElement.style.opacity = '0';
                    errorMessageElement.style.transition = ' 1s ease';
                }, tempoDeExibicao);

            }

            /*Caso erro, onde o usuário ou senha podem estar incorretos*/
            if (comunica === 404) {

                errorMessageElement.innerHTML = `<p>Usuário ou Senha, estão incorretos</p>`;


                errorMessageElement.style.height = '10vh';
                errorMessageElement.style.opacity = '1';

                usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
                passwordElement.style.borderColor = 'red'; // Marca o campo da senha com erro
                errorMessageElement.style.transition = ' 1s ease';

                const tempoDeExibicao = 5000;
                setTimeout(() => {

                    usernameElement.style.borderColor = '#1478cf'; // Marca o campo do usuário com erro
                    passwordElement.style.borderColor = '#1478cf'; // Marca o campo da senha com erro
                    errorMessageElement.style.height = '0vh'; // Oculta a mensagem
                    errorMessageElement.style.opacity = '0';
                    errorMessageElement.style.transition = ' 1s ease';
                }, tempoDeExibicao);

            }

            /*Caso de erro especial, que é apresentado em um pop up, essa estrutura pega a informações da resposta em json e os apresenta sobre o pop up na tela*/
            if (comunica === 500) {

                const erro_500 = await response.json();
                const erroMessage = JSON.stringify(erro_500, null, 2); // O segundo argumento é para substituição, e o terceiro é para a indentação

                erro5003.innerHTML = `<p> Contate o suporte suporte@itguys.com.br e informe esse erro ${erroMessage} </p>
                <button class='X' id='x'>X</button>`;
                erro5003.style.height = '45vh'; // Oculta a mensagem
                erro5003.style.opacity = '1';
                erro5003.style.transition = ' 1s ease';

                //função para fechar o pop up de erro.
                var botao = window.document.getElementById('x');

                botao.addEventListener('click', clicou);

                function clicou() {
                    erro5003.style.height = '0vh'; // Oculta a mensagem
                    erro5003.style.opacity = '0';
                    erro5003.style.transition = ' 1s ease';
                }

            }

            /*Caso de erro, onde acontece um problema na comunicação com o proprio servidor*/
            if (comunica === 503) {

                errorMessageElement.innerHTML = `<p>Não foi possivel se conectar ao servidor, informe ao suporte@itguys.com.br</p>`;

                errorMessageElement.style.height = '15vh';
                errorMessageElement.style.opacity = '1';

                errorMessageElement.style.transition = ' 1s ease';

                const tempoDeExibicao = 5000;
                setTimeout(() => {

                    errorMessageElement.style.height = '0vh'; // Oculta a mensagem
                    errorMessageElement.style.opacity = '0';
                    errorMessageElement.style.transition = ' 1s ease';
                }, tempoDeExibicao);

            }

            /*Caso de erro, onde acontece um problema na comunicação com o proprio servidor*/
            if (comunica === 502) {

                errorMessageElement.innerHTML = `<p> Ocorreu um erro, ao tentar se comunicar com o servidor. Por favor, tente novamente mais tarde, entre contato </p>`;

                errorMessageElement.style.height = '15vh';
                errorMessageElement.style.opacity = '1';

                errorMessageElement.style.transition = ' 1s ease';

                const tempoDeExibicao = 5000;
                setTimeout(() => {

                    errorMessageElement.style.height = '0vh'; // Oculta a mensagem
                    errorMessageElement.style.opacity = '0';
                    errorMessageElement.style.transition = ' 1s ease';
                }, tempoDeExibicao);

            }

        }



        /*Caso de erro onde nem mesmo acontece uma comunicação com o servidor*/
    } catch (error) {
        console.error('Error:', error); // Loga qualquer erro ocorrido

        errorMessageElement.innerHTML = '<p>  Ocorreu um erro, ao tentar se comunicar com o servidor. Por favor, tente novamente mais tarde, entre contato </p>';
        errorMessageElement.style.height = '15vh';
        errorMessageElement.style.opacity = '1';
        errorMessageElement.style.transition = ' 1s ease';


        const tempoDeExibicao = 5000;
        setTimeout(() => {
            errorMessageElement.style.height = '1vh';
            errorMessageElement.style.opacity = '0';
            errorMessageElement.style.transition = ' 1s ease';
        }, tempoDeExibicao);

    }

    /* Frontend - fechamento -  - Reação á resposta - */

});