// Função principal responsável por gerenciar o alinhamento dos ambientes e relatórios.
function AlinhamentoAmbientesRelatorios() {

    // Obtém o elemento HTML com o ID 'ListeRelatorios' onde os relatórios serão listados.
    const ListaAmbientesRelatorios = document.getElementById('ListeRelatorios');

    // Insere o componente de relatórios dinâmicos na área do elemento 'ListeRelatorios'.
    ListaAmbientesRelatorios.innerHTML = ComponenteAmbientesRelatorios();

    // Chama as funções que ativam, desativam e lidam com erros nos relatórios.
    Relatorios_on();  // Função que ativa a visualização de relatórios (ON).
    Relatorios_erro();  // Função que lida com os relatórios em erro.
    Relatorios_off();  // Função que desativa os relatórios (OFF).
}

// Função responsável por retornar o HTML de um componente de relatórios dinâmico.
function ComponenteAmbientesRelatorios() {

    // Retorna uma string com a estrutura HTML do componente.
    return `
            <div class="titulo_Cap">
                <!-- Título principal da seção de controle de ambiente -->
                <h2>Controle de Ambiente</h2>
            </div>

            <div class="painel_Cap">
                <div class="coluna_1">
                    <!-- Botões para controlar o estado dos relatórios (ON, OFF, ERRO) -->
                    <button class="desativado" id="Relatorios_ON">ON</button>
                    <button class="desativado" id="Relatorios_OFF">OFF</button>
                    <button class="desativado" id="Relatorios_ERRO">ERRO</button>
                </div>
                
                <div class="coluna_2">
                    <!-- Área onde os relatórios dinâmicos serão listados -->
                    <div class="opicaoAmbie dinamico" id="ListaRelatoriosDinamicos">
                        <!-- Exemplo de botão de relatório dinâmico -->
                        <button id='relatorio_1323'>Itguys</button>
                    </div>
                </div>

            </div>
        `
}

// Função que é ativada quando o botão "ON" é clicado, permitindo visualizar os relatórios.
function Relatorios_on() {

    // Obtém o botão "ON" e adiciona um evento de clique.
    const ButtonON = document.getElementById('Relatorios_ON');
    ButtonON.addEventListener('click', ApresentarPainelON);

    // Função que exibe os relatórios quando o botão "ON" é clicado.
    function ApresentarPainelON() {

        // Dados dos relatórios que serão exibidos
        const DataRelatorios_ON = {
            Registro_1: {
                id_Registro: '543514',
                Ambiente: "Itguys",
                DatadoEvento: "(18:02 - 20/10/24)",
                Evento: "Um Relatório foi emitido, do gráfico da 104"
            },
            Registro_2: {
                id_Registro: '123214',
                Ambiente: "Enseg",
                DatadoEvento: "(12:02 - 21/08/24)",
                Evento: "Usuário Alan resetou sua senha"
            },
            Registro_3: {
                id_Registro: '3213214',
                Ambiente: "Itguys",
                DatadoEvento: "(14:02 - 21/12/24)",
                Evento: "Usuário João realizou modificações no Ramal do Dev"
            },
            Registro_4: {
                id_Registro: '4213214',
                Ambiente: "Prolog",
                DatadoEvento: "(12:02 - 10/06/24)",
                Evento: "Usuário Francisco puxou um relatório sobre a Starlink"
            },
            Registro_5: {
                id_Registro: '1230214',
                Ambiente: "Oest Pan",
                DatadoEvento: "(14:02 - 21/12/24)",
                Evento: "Usuário Ricardo realizou um reset em sua senha"
            }
        }

        // Obtém o elemento onde os relatórios dinâmicos serão exibidos.
        const ListadeRelatorios = document.getElementById('ListaRelatoriosDinamicos');

        // Altera as classes CSS para ativar a exibição dos relatórios.
        ListadeRelatorios.classList.add('RelatoriosON');
        ListadeRelatorios.classList.remove('RelatoriosERRO');
        ListadeRelatorios.classList.remove('RelatoriosOFF');
        ListadeRelatorios.classList.remove('dinamico');

        // Ativa o botão "ON" e desativa os outros botões.
        const BotaoReferencial = document.getElementById('Relatorios_ON');
        BotaoReferencial.classList.add('Ativo');
        BotaoReferencial.classList.remove('desativado');

        const RegrasaoExtra_1 = document.getElementById('Relatorios_ERRO');
        RegrasaoExtra_1.classList.remove('Ativo');
        RegrasaoExtra_1.classList.add('desativado');

        const RegrasaoExtra_2 = document.getElementById('Relatorios_OFF');
        RegrasaoExtra_2.classList.remove('Ativo');
        RegrasaoExtra_2.classList.add('desativado');

        // Gatilho para renderizar os relatórios na interface.
        ListadeRelatorios.innerHTML = GatilhodeRelatorios();

        // Após um pequeno delay, exibe os relatórios, associando os eventos de clique.
        setTimeout(() => {
            for (let registrosOn in DataRelatorios_ON) {
                const code = DataRelatorios_ON[registrosOn].id_Registro;
                const ambiente = DataRelatorios_ON[registrosOn].Ambiente;
                const data = DataRelatorios_ON[registrosOn].DatadoEvento;
                const Evento = DataRelatorios_ON[registrosOn].Evento;

                // Chama a função para associar o evento de clique em cada relatório.
                ViusalizadorRelatorioAmbiente(code, ambiente, data, Evento);
            }
        }, 0);

        // Função que gera o HTML dos botões de relatórios.
        function GatilhodeRelatorios() {
            let htmlContent = '';

            // Itera sobre os registros de relatório e gera um botão para cada um.
            for (let registrosOn in DataRelatorios_ON) {
                const code = DataRelatorios_ON[registrosOn].id_Registro;
                const ambiente = DataRelatorios_ON[registrosOn].Ambiente;
                const data = DataRelatorios_ON[registrosOn].DatadoEvento;

                // Cria um botão para cada relatório.
                htmlContent += ` <button id='relatorio_ON_${ambiente}_${code}'>${ambiente} - ${data}</button>`;
            }

            return htmlContent; // Retorna o HTML gerado com os botões.
        }

        // Função que é chamada quando um relatório específico é clicado.
        function ViusalizadorRelatorioAmbiente(Id, Empresa, Data, Ocorrido) {
            const ItemAmbiente = document.getElementById(`relatorio_ON_${Empresa}_${Id}`);

            // Adiciona um evento de clique para abrir a visualização do relatório.
            ItemAmbiente.addEventListener('click', PaineldeVisualizacao);

            // Função que exibe o painel de visualização do relatório.
            function PaineldeVisualizacao() {
                const PainelVisualizacao = document.getElementById('PopPainel');

                // Exibe o painel e ajusta suas classes para o modo de visualização.
                PainelVisualizacao.style.display = 'flex';
                PainelVisualizacao.classList.remove('CriacaoAmbientes');
                PainelVisualizacao.classList.remove('EdicaoAmbientes');
                PainelVisualizacao.classList.add('VisualizacaoRelaotirio');
                PainelVisualizacao.innerHTML = PainelRelatorio();

                // Função para adicionar o botão de fechamento e lógica extra.
                Extras();

                function PainelRelatorio() {
                    return `
                        <div class='fecharPainel'>
                            <button id='FecharPainel'>X</button>
                        </div>
                        <div class='Titulo_Relatorio'>
                            <h2>Relatório de Número - ${Id}</h2>
                        </div>
                        <div class='Evento'>
                            <p>No Ambiente ${Empresa} - ${Ocorrido} às ${Data}<p>
                        </div>
                    `;
                }

                // Função para adicionar a funcionalidade de fechar o painel.
                function Extras() {
                    fechar();

                    function fechar() {
                        const FecharPainelEdicao = document.getElementById('FecharPainel');
                        FecharPainelEdicao.addEventListener('click', EncerrarTarefa);

                        function EncerrarTarefa() {
                            PainelVisualizacao.style.display = 'none'; // Fecha o painel.
                            PainelVisualizacao.classList.remove('VisualizacaoRelaotirio');
                            PainelVisualizacao.innerHTML = ''; // Limpa o conteúdo do painel.
                        }
                    }
                }
            }
        }
    }
}

// Função que é ativada quando o botão "ERRO" é clicado, permitindo visualizar os relatórios de erro.
function Relatorios_erro() {

    // Obtém o botão "ERRO" e adiciona um evento de clique.
    const ButtonERRO = document.getElementById('Relatorios_ERRO');
    ButtonERRO.addEventListener('click', ApresentarPainelERRO);

    // Função que exibe os relatórios de erro quando o botão "ERRO" é clicado.
    function ApresentarPainelERRO() {

        // Dados dos relatórios de erro que serão exibidos
        const DataRelatorios_ERRO = {
            Registro_1: {
                id_Registro: '0913214',
                Ambiente: "Itguys",
                DatadoEvento: "(18:02 - 20/10/24)",
                Evento: "Houve um erro 2130, ao puxar o relatorio do grafico 1"
            },
            Registro_2: {
                id_Registro: '045314',
                Ambiente: "Prolog",
                DatadoEvento: "(11:02 - 01/08/24)",
                Evento: "Houve um erro sobre o resete de senha, do usuário/a Sonya"
            },
            Registro_3: {
                id_Registro: '3901214',
                Ambiente: "Oest Pan",
                DatadoEvento: "(18:02 - 02/11/24)",
                Evento: "Dashboard de máquina está com gráficos vazios"
            },
            Registro_4: {
                id_Registro: '91230214',
                Ambiente: "Anatram",
                DatadoEvento: "(16:02 - 11/06/24)",
                Evento: "Usuário Francisco originou erro 500 durante o reset de senha"
            },
            Registro_5: {
                id_Registro: '2130123',
                Ambiente: "Enseg",
                DatadoEvento: "(17:02 - 21/12/24)",
                Evento: "Usuário Ricardo originou um erro ao puxar o relatório dos ramais."
            }
        }

        // Obtém o elemento onde os relatórios de erro serão exibidos.
        const ListadeRelatorios = document.getElementById('ListaRelatoriosDinamicos');

        // Altera as classes CSS para ativar a exibição dos relatórios de erro.
        ListadeRelatorios.classList.add('RelatoriosERRO');
        ListadeRelatorios.classList.remove('RelatoriosON');
        ListadeRelatorios.classList.remove('RelatoriosOFF');
        ListadeRelatorios.classList.remove('dinamico');

        // Ativa o botão "ERRO" e desativa os outros botões.
        const BotaoReferencial = document.getElementById('Relatorios_ERRO');
        BotaoReferencial.classList.add('Ativo');
        BotaoReferencial.classList.remove('desativado');

        const RegrasaoExtra_1 = document.getElementById('Relatorios_ON');
        RegrasaoExtra_1.classList.remove('Ativo');
        RegrasaoExtra_1.classList.add('desativado');

        const RegrasaoExtra_2 = document.getElementById('Relatorios_OFF');
        RegrasaoExtra_2.classList.remove('Ativo');
        RegrasaoExtra_2.classList.add('desativado');

        // Gatilho para renderizar os relatórios na interface.
        ListadeRelatorios.innerHTML = GatilhodeRelatorios();

        // Após um pequeno delay, exibe os relatórios de erro, associando os eventos de clique.
        setTimeout(() => {
            for (let registrosERRO in DataRelatorios_ERRO) {
                const code = DataRelatorios_ERRO[registrosERRO].id_Registro;
                const ambiente = DataRelatorios_ERRO[registrosERRO].Ambiente;
                const data = DataRelatorios_ERRO[registrosERRO].DatadoEvento;
                const Evento = DataRelatorios_ERRO[registrosERRO].Evento;

                // Chama a função para associar o evento de clique em cada relatório.
                ViusalizadorRelatorioAmbiente(code, ambiente, data, Evento);
            }
        }, 0);

        // Função que gera o HTML dos botões de relatórios de erro.
        function GatilhodeRelatorios() {
            let htmlContent = '';

            // Itera sobre os registros de erro e gera um botão para cada um.
            for (let registrosERRO in DataRelatorios_ERRO) {
                const code = DataRelatorios_ERRO[registrosERRO].id_Registro;
                const ambiente = DataRelatorios_ERRO[registrosERRO].Ambiente;
                const data = DataRelatorios_ERRO[registrosERRO].DatadoEvento;

                // Cria um botão para cada relatório de erro.
                htmlContent += ` <button id='relatorio_ERRO_${ambiente}_${code}'>${ambiente} - ${data}</button>`;
            }

            return htmlContent; // Retorna o HTML gerado com os botões.
        }

        // Função que é chamada quando um relatório específico de erro é clicado.
        function ViusalizadorRelatorioAmbiente(Id, Empresa, Data, Ocorrido) {
            const ItemAmbiente = document.getElementById(`relatorio_ERRO_${Empresa}_${Id}`);

            // Adiciona um evento de clique para abrir a visualização do relatório de erro.
            ItemAmbiente.addEventListener('click', PaineldeVisualizacao);

            // Função que exibe o painel de visualização do relatório de erro.
            function PaineldeVisualizacao() {
                const PainelVisualizacao = document.getElementById('PopPainel');

                // Exibe o painel e ajusta suas classes para o modo de visualização.
                PainelVisualizacao.style.display = 'flex';
                PainelVisualizacao.classList.remove('CriacaoAmbientes');
                PainelVisualizacao.classList.remove('EdicaoAmbientes');
                PainelVisualizacao.classList.add('VisualizacaoRelaotirio');
                PainelVisualizacao.innerHTML = PainelRelatorio();

                // Função para adicionar o botão de fechamento e lógica extra.
                Extras();

                function PainelRelatorio() {
                    return `
                        <div class='fecharPainel'>
                            <button id='FecharPainel'>X</button>
                        </div>
                        <div class='Titulo_Relatorio'>
                            <h2>Relatório de Número - ${Id}</h2>
                        </div>
                        <div class='Evento'>
                            <p>No Ambiente ${Empresa} - ${Ocorrido} às ${Data}<p>
                        </div>
                    `;
                }

                // Função para adicionar a funcionalidade de fechar o painel.
                function Extras() {
                    fechar();

                    function fechar() {
                        const FecharPainelEdicao = document.getElementById('FecharPainel');
                        FecharPainelEdicao.addEventListener('click', EncerrarTarefa);

                        function EncerrarTarefa() {
                            PainelVisualizacao.style.display = 'none'; // Fecha o painel.
                            PainelVisualizacao.classList.remove('VisualizacaoRelaotirio');
                            PainelVisualizacao.innerHTML = ''; // Limpa o conteúdo do painel.
                        }
                    }
                }
            }
        }
    }
}

// Função que é ativada quando o botão "OFF" é clicado, permitindo visualizar os relatórios de desligamento.
function Relatorios_off() {

    // Obtém o botão "OFF" e adiciona um evento de clique.
    const ButtonOFF = document.getElementById('Relatorios_OFF');
    ButtonOFF.addEventListener('click', ApresentarPainelOFF);

    // Função que exibe os relatórios de desligamento quando o botão "OFF" é clicado.
    function ApresentarPainelOFF() {

        // Dados dos relatórios de desligamento que serão exibidos
        const DataRelatorios_OFF = {
            Registro_1: {
                id_Registro: '21984',
                Ambiente: "ItGuys",
                DatadoEvento: "(17:02 - 20/10/24)",
                Evento: "Ambiente foi desligado, pelo ADM Daivid, para realizar ajustes"
            },
            Registro_2: {
                id_Registro: '218784',
                Ambiente: "Enseg",
                DatadoEvento: "(13:02 - 01/08/24)",
                Evento: "Ambiente foi desligado, por conta de um erro interno, no reset de senhas."
            },
            Registro_3: {
                id_Registro: '25464514',
                Ambiente: "Prolog",
                DatadoEvento: "(15:02 - 02/11/24)",
                Evento: "Ambiente foi desligado temporariamente, por conta da invasão de usuário Rodrigo, sobre uma tela que ele não deveria acessar."
            },
            Registro_4: {
                id_Registro: '21334',
                Ambiente: "Enseg",
                DatadoEvento: "(11:02 - 11/06/24)",
                Evento: "Ambiente passou por desligamento para passar por uma atualização das suas dashboards"
            },
            Registro_5: {
                id_Registro: '213214',
                Ambiente: "Enseg",
                DatadoEvento: "(15:02 - 21/12/24)",
                Evento: "Ambiente foi desligado por conta de um erro no reset de senha do usuário, causando um travamento geral."
            }
        }

        // Obtém o elemento onde os relatórios de desligamento serão exibidos.
        const ListadeRelatorios = document.getElementById('ListaRelatoriosDinamicos');

        // Altera as classes CSS para ativar a exibição dos relatórios de desligamento.
        ListadeRelatorios.classList.add('RelatoriosOFF');
        ListadeRelatorios.classList.remove('RelatoriosERRO');
        ListadeRelatorios.classList.remove('RelatoriosON');
        ListadeRelatorios.classList.remove('dinamico');

        // Ativa o botão "OFF" e desativa os outros botões.
        const BotaoReferencial = document.getElementById('Relatorios_OFF');
        BotaoReferencial.classList.add('Ativo');
        BotaoReferencial.classList.remove('desativado');

        const RegrasaoExtra_1 = document.getElementById('Relatorios_ON');
        RegrasaoExtra_1.classList.remove('Ativo');
        RegrasaoExtra_1.classList.add('desativado');

        const RegrasaoExtra_2 = document.getElementById('Relatorios_ERRO');
        RegrasaoExtra_2.classList.remove('Ativo');
        RegrasaoExtra_2.classList.add('desativado');

        // Gatilho para renderizar os relatórios na interface.
        ListadeRelatorios.innerHTML = GatilhodeRelatorios();

        // Após um pequeno delay, exibe os relatórios de desligamento e associa os eventos de clique.
        setTimeout(() => {
            for (let registrosOFF in DataRelatorios_OFF) {
                const code = DataRelatorios_OFF[registrosOFF].id_Registro;
                const ambiente = DataRelatorios_OFF[registrosOFF].Ambiente;
                const data = DataRelatorios_OFF[registrosOFF].DatadoEvento;
                const Evento = DataRelatorios_OFF[registrosOFF].Evento;

                // Chama a função para associar o evento de clique em cada relatório.
                ViusalizadorRelatorioAmbiente(code, ambiente, data, Evento);
            }
        }, 0);

        // Função que gera o HTML dos botões de relatórios de desligamento.
        function GatilhodeRelatorios() {
            let htmlContent = '';

            // Itera sobre os registros de desligamento e gera um botão para cada um.
            for (let registrosOFF in DataRelatorios_OFF) {
                const code = DataRelatorios_OFF[registrosOFF].id_Registro;
                const ambiente = DataRelatorios_OFF[registrosOFF].Ambiente;
                const data = DataRelatorios_OFF[registrosOFF].DatadoEvento;

                // Cria um botão para cada relatório de desligamento.
                htmlContent += ` <button id='relatorio_OFF_${ambiente}_${code}'> ${ambiente} - ${data}</button>`;
            }

            return htmlContent; // Retorna o HTML gerado com os botões.
        }

        // Função que é chamada quando um relatório específico de desligamento é clicado.
        function ViusalizadorRelatorioAmbiente(Id, Empresa, Data, Ocorrido) {
            const ItemAmbiente = document.getElementById(`relatorio_OFF_${Empresa}_${Id}`);

            // Adiciona um evento de clique para abrir a visualização do relatório de desligamento.
            ItemAmbiente.addEventListener('click', PaineldeVisualizacao);

            // Função que exibe o painel de visualização do relatório de desligamento.
            function PaineldeVisualizacao() {
                const PainelVisualizacao = document.getElementById('PopPainel');

                // Exibe o painel e ajusta suas classes para o modo de visualização.
                PainelVisualizacao.style.display = 'flex';
                PainelVisualizacao.classList.remove('CriacaoAmbientes');
                PainelVisualizacao.classList.remove('EdicaoAmbientes');
                PainelVisualizacao.classList.add('VisualizacaoRelaotirio');
                PainelVisualizacao.innerHTML = PainelRelatorio();

                // Função para adicionar o botão de fechamento e lógica extra.
                Extras();

                function PainelRelatorio() {
                    return `
                        <div class='fecharPainel'>
                            <button id='FecharPainel'>X</button>
                        </div>
                        <div class='Titulo_Relatorio'>
                            <h2>Relatório de Número - ${Id}</h2>
                        </div>
                        <div class='Evento'>
                            <p>No Ambiente ${Empresa} - ${Ocorrido} às ${Data}<p>
                        </div>
                    `;
                }

                // Função para adicionar a funcionalidade de fechar o painel.
                function Extras() {
                    fechar();

                    function fechar() {
                        const FecharPainelEdicao = document.getElementById('FecharPainel');
                        FecharPainelEdicao.addEventListener('click', EncerrarTarefa);

                        function EncerrarTarefa() {
                            PainelVisualizacao.style.display = 'none'; // Fecha o painel.
                            PainelVisualizacao.classList.remove('VisualizacaoRelaotirio');
                            PainelVisualizacao.innerHTML = ''; // Limpa o conteúdo do painel.
                        }
                    }
                }
            }
        }
    }
}