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

@section Styles {
    <link href="~/css/chat_index.css" rel="stylesheet" />
    <style>
        .file-upload-button {
            position: relative;
            overflow: hidden;
        }

            .file-upload-button input[type=file] {
                position: absolute;
                top: 0;
                right: 0;
                min-width: 100%;
                min-height: 100%;
                font-size: 100px;
                text-align: right;
                filter: alpha(opacity=0);
                opacity: 0;
                outline: none;
                cursor: pointer;
                display: block;
            }

        .selected-files {
            font-size: 0.8rem;
            margin-top: 0.5rem;
            color: #666;
        }

        .message-input {
            resize: none;
            transition: all 0.3s ease;
            min-height: 40px;
            max-height: 200px;
        }

            .message-input:focus {
                min-height: 60px;
            }
    </style>
}

<div class="container-fluid bg-light main-content">
    <div class="row h-100">
        <div class="col-md-12 mx-auto">
            <div class="card shadow-sm my-4" style="background-color: #f8fff8;">
                <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="selected-files" id="selected-files-info"></div>
                        <div class="input-group">
                            <textarea id="message-input" class="form-control"
                                      placeholder="Digite sua mensagem... Use **texto** para negrito"
                                      rows="1" required></textarea>
                            <button type="button" class="btn btn-outline-secondary file-upload-button">
                                <i class="bi bi-paperclip"></i>
                                <input type="file" id="file-input" accept="application/pdf,image/png" multiple>
                            </button>
                            <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 = '@ViewBag.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');
            const fileInput = $('#file-input');
            const selectedFilesInfo = $('#selected-files-info');
            let selectedFiles = [];

            //token = await autenticar(id, company, name);
            //token = '@ViewBag.Token';

            // // 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);

            // Arquivo handling
            fileInput.on('change', function (e) {
                const files = Array.from(e.target.files);

                if (files.length > 2) {
                    alert('Por favor, selecione no máximo 2 arquivos PDF/PNG.');
                    fileInput.val('');
                    selectedFiles = [];
                    selectedFilesInfo.html('');
                    return;
                }

                if (files.some(file => file.type !== 'application/pdf' && file.type !== 'image/png')) {
                    alert('Por favor, selecione apenas arquivos PDF/PNG.');
                    fileInput.val('');
                    selectedFiles = [];
                    selectedFilesInfo.html('');
                    return;
                }

                selectedFiles = files;
                selectedFilesInfo.html(
                    files.map(file => `<div>${file.name}</div>`).join('')
                );
            });

            $("#message-input").keypress(function (e) {
                if (e.which === 13) {
                    $("#send-message").click();
                }
            });

            $('#send-message').on('click', async function (e) {
                e.preventDefault();
                const message = messageInput.val().trim();
                if (!message) return;

                const formData = new FormData();
                formData.append('message', message);
                formData.append('sessionId', id);

                selectedFiles.forEach((file, index) => {
                    formData.append(`file${index + 1}`, file);
                });

                appendMessage(message);
                messageInput.val('');
                fileInput.val('');
                selectedFiles = [];
                selectedFilesInfo.html('');

                try {
                    const response = await fetch(baseUrl + '/chat/proxy-response', {
                        method: 'POST',
                        headers: {
                            "X-CSRF-TOKEN": $('input[name="__RequestVerificationToken"]').val(),
                            'Authorization': 'Bearer ' + token,
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: formData
                    });

                    if (!response.ok) {
                        throw new Error('Erro na requisição');
                    }

                    const responseText = await response.text();
                    appendMessage(responseText, false);
                } catch (error) {
                    console.error('Erro na requisição:', error);
                    appendMessage('Erro ao processar mensagem: ' + error, false);
                }
            });
            
        });

    </script>
}