<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>üí° EnergIA: Efici√™ncia Energ√©tica </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
      </style>
    <style>
        body {
        /* Gradiente linear */
        background: linear-gradient(135deg, #26aa21, #205329);
        font-family: Arial, sans-serif;

        /* Efeito granulado */
        background-size: 400% 400%;
        animation: granular 30s ease infinite;
    }

    @keyframes granular {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
        
        .chat-container {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: 40px auto;
        }

        h2 {
            color: #4caf50;
        }

        .chat-messages {
            height: 30vh;
            overflow-y: scroll;
            margin-bottom: 20px;
            border: 1px solid #e0e0e0;
            padding: 20px;
            border-radius: 10px;
            
        }

        .chat-messages p {
            margin: 10px 0;
            padding: 10px;
            border-radius: 15px;
        }

        .chat-messages p.user {
            background-color: #4caf50;
            color: #ffffff;
            text-align: right;
        }

        .chat-messages p.bot {
            background-color: #e0e0e0;
            color: #333;
        }
        
        button.btn-primary {
            background-color: #4caf50;
            border: none;
        }

        button.btn-primary:hover {
            background-color: #45a049;
        }

        button.btn-primary:disabled{
            background-color: #666;
        }

        @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
        }

        .loader {
            border: 6px solid #f3f3f3;
            border-top: 6px solid #4caf50;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
        }

        .header {
            background-color: #ffffff;
            padding: 10px 0;
            border-bottom: 2px solid #4caf50;
        }

        .btn-group .btn {
            background-color: #4caf50;
            border-color: #4caf50;
            color: #fff;
        }

        .btn-group .btn:hover {
            background-color: #45a049;
            border-color: #45a049;
        }

        .btn-selected {
        background-color: #387c44!important;
        border-color: #387c44!important;
    }

    .group-title {
        color: #4caf50; 
        margin-bottom: 10px; /* Espa√ßamento abaixo do t√≠tulo */
        text-align: center; 
        font-size: 1rem;
    }

    h2{
        font-family: 'Lato', sans-serif;
    }

    .footer {
            background-color: #ffffff;
            color: #4caf50;
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer a {
            color: #4caf50;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        .patrocinadores {
        }

    html, body {
        height: 100%; 
        margin: 0;
        padding: 0;
    }

    .page-container {
        display: flex;
        flex-direction: column;
        height: 100vh; /* Altura total da viewport */
    }

    .content {
        flex-grow: 1; /* Ocupa o espa√ßo dispon√≠vel */
        overflow-y: auto; /* Adiciona rolagem somente se necess√°rio */
    }
    
    </style>
</head>
<body>
    <div class="page-container">
        <header class="header">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    
                    <div class="col-auto">
                        <img src="/public/LogoEnergIA.png" alt="Logo EnergIA" style="max-height: 100px;">
                    </div>
        
                    <div class="col text-center">
                        <h3 class="group-title">Escolha o Modelo de Chatbot:</h3>
                        <div class="btn-group" role="group" aria-label="Op√ß√£o">
                            <button type="button" id="gpt3" class="btn btn-secondary btn-selected">GPT 3.5 - Turbo</button>
                            <button type="button" id="claude" class="btn btn-secondary">Claude-v2</button>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        

        <div class="content container">
            <div class="chat-container">
                <h2 class="mb-4">üí° EnergIA: Efici√™ncia Energ√©tica </h2> 
                <div class="chat-messages"></div>
                <form id="chatForm"  method="POST">
                    <div class="mb-3">
                        <textarea class="form-control" name="userInput" rows="3" placeholder="Digite sua pergunta aqui..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">Enviar</button>
                </form>
            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 text-left">
                        Criado por <a href="https://github.com/PedroThiagoRoque" target="_blank">Pedro Thiago Roque</a>
                    </div>
                    <div class="col-md-6 text-right patrocinadores">
                        <!-- Espa√ßo para os logos dos patrocinadores -->
                    </div>
                </div>
            </div>
        </footer>
    </div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function(){
        $('.btn-group .btn').click(function(){
            // Remove a classe 'btn-selected' de todos os bot√µes
            $('.btn-group .btn').removeClass('btn-selected');

            // Adiciona a classe 'btn-selected' ao bot√£o clicado
            $(this).addClass('btn-selected');
        });
    });
</script>

<script>
    $(document).ready(function(){


       
        endpoint ='/chat/openai';
        let selectedModel = "gpt";

        document.getElementById('gpt3').addEventListener('click', function() {
            selectedModel = "gpt";
            endpoint = "/chat/openai";
            console.log("gpt"+ endpoint);
        });

        document.getElementById('claude').addEventListener('click', function() {
            selectedModel = "claude";
            endpoint = "/chat/bedrock";
            console.log("claude"+ endpoint);
        });    


    $('form').submit(function(event){
        const userInput = $('textarea[name="userInput"]').val();
        console.log("voc√™: "+ userInput);
        
        event.preventDefault();

        // Adicionar anima√ß√£o de carregamento
        const loadingDiv = $('<div>').addClass('loader').css('margin', '10px auto');
        $('.chat-messages').append(loadingDiv);

        $('textarea[name="userInput"]').val(''); // Limpar a textarea
        const btnSubmit = $(this).find('button[type="submit"]');//desabilita o bot√£o de enviar
        btnSubmit.prop('disabled', true);

            $.ajax({
            type: "POST",
            url: endpoint,
            data: { userInput: userInput },
            success: function(data) {
                
                if (selectedModel == "gpt") { 

                    $('.loader').remove(); // Remover anima√ß√£o de carregamento
                    
                    const messageDiv = $('<p>').addClass('user').text('Voc√™: ' + userInput);
                    $('.chat-messages').append(messageDiv);
                    
                    const botMessageDiv = $('<p>').addClass('bot').text('Bot GPT: ' + data.response);
                    $('.chat-messages').append(botMessageDiv);
                    
                    $('.chat-messages').scrollTop($('.chat-messages')[0].scrollHeight); // Scroll para a √∫ltima mensagem
                    btnSubmit.prop('disabled', false);//reativa o bot√£o

                } else if (selectedModel == "claude"){

                    $('.loader').remove(); // Remover anima√ß√£o de carregamento
                
                    const messageDiv = $('<p>').addClass('user').text('Voc√™: ' + userInput);
                    $('.chat-messages').append(messageDiv);
                    
                    const botMessageDiv = $('<p>').addClass('bot').text('Bot Claude: ' + data.claudeResponse.completion);
                    $('.chat-messages').append(botMessageDiv);
                    //console.log(data);
                    
                    $('.chat-messages').scrollTop($('.chat-messages')[0].scrollHeight); // Scroll para a √∫ltima mensagem
                    btnSubmit.prop('disabled', false);//reativa o bot√£o

                }
                
            },
            error: function(error) {
                $('.loader').remove(); // Remover anima√ß√£o de carregamento em caso de erro
                console.log('Erro:', error);
                btnSubmit.prop('disabled', false);//reativa o bot√£o
                }
            });
 
    });
});

</script>

</body>
</html>