@{
    ViewData["Title"] = "Chat";
}

@section Styles{
<link href="~/css/chat_index.css" rel="stylesheet" />
}

<div class="container-fluid bg-light">
    <div class="row h-100">
        <div class="col-md-10 mx-auto">
            <div class="card shadow-sm my-4" style="background-color: #f8fff8;">
@*              
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">Chat</h5>
                </div>
 *@
                <div class="card-body">
                    <div id="chat-messages" class="mb-4" style="height: 350px; overflow-y: auto;">
                        <!-- Mensagens serão inseridas aqui -->
                    </div>
                    <form id="chat-form" class="mt-3">
                        @Html.AntiForgeryToken()
                        <div class="input-group">
                            <textarea id="message-input" class="form-control"
                                      placeholder="Digite sua mensagem... Use **texto** para negrito"
                                      rows="3" required></textarea>
                            <button type="button" class="btn btn-success" id="send-message">
                                Enviar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        const firstName = '@User.FindFirst("FirstName")';
        const name = firstName.split(':')[1];
        const id = name + '_Web';
        const company = 'Domvs iT';
        const baseUrl = window.location.origin;

        var token = '';

        // Aguarda todos os recursos serem carregados
        window.addEventListener('load', async function () {
            const userId = 1;
            const chatMessages = $('#chat-messages');
            const messageInput = $('#message-input');
            const chatForm = $('#chat-form');

            token = await autenticar(id, company, name);

            // Configuração do Marked
            marked.setOptions({
                breaks: true,
                gfm: true
            });

            const msgInit = `Olá! Eu sou uma IA desenvolvida para atuar internamente na Domvs iT. Você pode:
        - Fazer perguntas sobre os serviços da Domvs iT
        - Abrir uma solicitação ao RH no Pipefy 
        - Ou simplesmente perguntar qualquer coisa.

Use **negrito** para destacar texto importante.
Para código, use \\\`\\\`\\\`linguagem
seu código
\\\`\\\`\\\``;

            function appendMessage(message, isUser = true) {
                const messageDiv = $('<div>').addClass('chat-message ' + (isUser ? 'user-message' : 'bot-message'));
                const messageContent = $('<div>').addClass('message-bubble');

                try {
                    const htmlContent = marked(message);
                    const cleanHtml = DOMPurify.sanitize(htmlContent);
                    messageContent.html(cleanHtml);
                } catch (error) {
                    console.error('Erro ao processar mensagem:', error);
                    messageContent.text(message);
                }

                messageDiv.append(messageContent);
                chatMessages.append(messageDiv);
                chatMessages.scrollTop(chatMessages[0].scrollHeight);

                // Highlight de código
                Prism.highlightAllUnder(messageDiv[0]);
            }

            function appendMessageX(message, isUser = true) {
                const messageDiv = $('<div>').addClass('mb-3');
                const messageContent = $('<div>')
                    .addClass('p-3 rounded-3')
                    .css({
                        'max-width': '90%',
                        'display': 'inline-block',
                        'white-space': 'pre-wrap',
                        'word-wrap': 'break-word'
                    });

                if (isUser) {
                    messageDiv.addClass('text-end');
                    messageContent
                        .addClass('bg-success text-white')
                        .css('float', 'right');
                } else {
                    messageContent
                        .addClass('bg-light border')
                        .css('float', 'left');
                }

                try {
                    const htmlContent = marked(message);
                    const cleanHtml = DOMPurify.sanitize(htmlContent);
                    messageContent.html(cleanHtml);
                } catch (error) {
                    console.error('Erro ao processar mensagem:', error);
                    messageContent.text(message);
                }

                messageDiv.append(messageContent);
                chatMessages.append(messageDiv);
                chatMessages.scrollTop(chatMessages[0].scrollHeight);

                // Highlight de código
                Prism.highlightAllUnder(messageDiv[0]);
            }

            // Exibe mensagem inicial
            appendMessage(msgInit, false);

            $('#send-message').on('click', function (e) {
                e.preventDefault();
                const message = messageInput.val().trim();
                if (!message) return;
                appendMessage(message);
                messageInput.val('');
                $.ajax({
                    url: baseUrl + '/chat/proxy-response', // Novo endpoint no controller
                    type: 'GET',
                    headers: {
                        "X-CSRF-TOKEN": $('input[name="__RequestVerificationToken"]').val(),
                        'Authorization': 'Bearer ' + token
                    },
                    data: {
                        sessionId: id,
                        message: message
                    },
                    success: function (response) {
                        appendMessage(response, false);
                    },
                    error: function (xhr, status, error) {
                        console.error('Erro na requisição do cliente:', error);
                        console.error('Status:', xhr.status);
                        console.error('Response:', xhr.responseText);
                        appendMessage('Erro ao processar cliente: ' + error, false);
                    }
                });
            });

            async function autenticar(userId, company, name) {
                try {
                    // Agora fazemos apenas uma requisição para o novo endpoint
                    const response = await $.ajax({
                        url: baseUrl + '/chat/authenticate',
                        type: 'POST',
                        headers: {
                            "X-CSRF-TOKEN": $('input[name="__RequestVerificationToken"]').val()
                        }, 
                        contentType: 'application/json',
                        data: JSON.stringify({
                            userId: userId,
                            company: company,
                            name: name
                        })
                    });
                    return response.token;
                } catch (error) {
                    appendMessage('Erro ao processar mensagem: ' + error, false);
                    throw error;
                }
            }

        });

    </script>
}