Update templates/index.html

templates/index.html

@@ -17,10 +17,8 @@
             --background-card: #ffffff;
             --border-color: #e0e0e0;
             --highlight-color: #fffde7;
-            /* ##### INÍCIO DA MUDANÇA DE ESTILO ##### */
             /* Cor única para todas as sugestões da IA */
             --ai-suggestion-color: #8e44ad;
-            /* ##### FIM DA MUDANÇA DE ESTILO ##### */
         }
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -57,18 +55,25 @@
             margin-bottom: 30px;
         }
         .search-box { display: flex; gap: 10px; }
-        input[type="text"] {
+        input[type="text"], textarea {
             flex: 1;
             padding: 12px 15px;
             border: 1px solid var(--border-color);
             border-radius: 4px;
             font-size: 16px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        /* ##### INÍCIO DA MUDANÇA DE ESTILO ##### */
+        textarea {
+            resize: vertical;
+            min-height: 60px;
         }
-        input[type="text"]:focus {
+        input[type="text"]:focus, textarea:focus {
             border-color: var(--accent-green);
             box-shadow: 0 0 0 2px rgba(90, 130, 79, 0.2);
             outline: none;
         }
+        /* ##### FIM DA MUDANÇA DE ESTILO ##### */
         button {
             background-color: var(--accent-green);
             color: white;
@@ -259,14 +264,14 @@
             position: relative;
         }
         #manual-feedback-area h3 { color: var(--primary-green); margin-top: 0; margin-bottom: 15px; font-size: 1.2rem; }
-        .manual-feedback-box { display: flex; gap: 10px; align-items: center; position: relative; }
-        .manual-feedback-box input[type="text"] { flex: 1; }
-        #tuss-suggestions { position: absolute; top: calc(100% + 5px); left: 0; right: 0; background-color: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 1000; max-height: 250px; overflow-y: auto; list-style: none; padding: 0; margin: 0; display: none; }
-        #tuss-suggestions li { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
-        #tuss-suggestions li:hover { background-color: var(--light-green-bg); }
-        #tuss-suggestions li .suggestion-code { font-weight: bold; color: var(--accent-green); }
-        #tuss-suggestions li .suggestion-desc { font-size: 0.85em; color: var(--text-light); margin-left: 5px; }
-        #tuss-suggestions li .suggestion-rol { font-size: 0.8em; color: #888; display: block; margin-top: 3px; }
+        /* ##### INÍCIO DA MUDANÇA DE ESTILO ##### */
+        .manual-feedback-box { 
+            display: flex; 
+            flex-direction: column; 
+            align-items: stretch;
+            gap: 10px; 
+        }
+        /* ##### FIM DA MUDANÇA DE ESTILO ##### */
 
         /* Estilos da IA */
         .ai-suggestion-container { background-color: var(--light-green-bg); border: 1px solid var(--accent-green); border-radius: 8px; padding: 20px; margin-top: 20px; margin-bottom: 20px; text-align: center; display: none; }
@@ -274,20 +279,16 @@
         #ai-suggestion-button:hover:not(:disabled) { background-color: #71368a; }
         #ai-suggestion-status { margin-top: 15px; font-size: 0.9em; color: var(--text-light); font-weight: 500; }
 
-        /* ##### INÍCIO DA MUDANÇA DE ESTILO ##### */
-        /* Destaque para todos os rankings da IA */
         .result-item[class*="ai-highlight-"] {
             border-left-color: var(--ai-suggestion-color) !important;
             box-shadow: 0 0 15px rgba(142, 68, 173, 0.2);
             overflow: visible; /* Garante que a tag não seja cortada */
         }
         
-        /* Adiciona padding no topo do header para dar espaço para a tag */
         .result-item[class*="ai-highlight-"] .result-header {
             padding-top: 2.5em;
         }
 
-        /* Tag ::before para todos os rankings */
         .result-item[class*="ai-highlight-"]::before {
             position: absolute; top: 0; right: 0; color: white;
             padding: 5px 15px; font-size: 0.8em; font-weight: bold;
@@ -295,11 +296,9 @@
             background-color: var(--ai-suggestion-color); /* Cor única */
         }
         
-        /* Texto específico para cada ranking */
         .ai-highlight-1::before { content: "1ª Sugestão da IA"; }
         .ai-highlight-2::before { content: "2ª Sugestão da IA"; }
         .ai-highlight-3::before { content: "3ª Sugestão da IA"; }
-        /* ##### FIM DA MUDANÇA DE ESTILO ##### */
     </style>
 </head>
 <body>
@@ -326,15 +325,17 @@
 
                 <div id="results-container"></div>
                 
+                <!-- ##### INÍCIO DA MUDANÇA DE HTML ##### -->
                 <div id="manual-feedback-area">
-                    <h3>Se não localizou o procedimento na lista, digite a melhor correspondência segundo o código TUSS:</h3>
+                    <h3>Se você não encontrou seu procedimento, digite o nome e uma breve explicação. Não utilize dados pessoais.</h3>
                     <div class="manual-feedback-box">
-                        <input type="text" id="manual-tuss-input" placeholder="Ex: 40101010 (apenas números)">
-                        <button id="submit-manual-feedback-button">Enviar Código TUSS</button>
-                        <ul id="tuss-suggestions"></ul>
+                        <input type="text" id="procedure-name-input" placeholder="Nome do procedimento">
+                        <textarea id="procedure-explanation-input" rows="3" maxlength="150" placeholder="Breve explicação (máximo 150 caracteres)"></textarea>
+                        <button id="submit-suggestion-button">Enviar Sugestão</button>
                     </div>
                     <div id="manual-feedback-status" style="margin-top: 10px; font-size: 0.9em; font-weight: bold;"></div>
                 </div>
+                <!-- ##### FIM DA MUDANÇA DE HTML ##### -->
 
                 <div id="log-container"></div>
             </div>
@@ -343,6 +344,7 @@
     <div class="footer"><p>Ferramenta de busca abrangente para o Rol de Procedimentos com reordenação semântica de resultados e sugestão de IA- Versão Beta, não oficial.</p></div>
 
     <script>
+        // ##### INÍCIO DA MUDANÇA DE JAVASCRIPT #####
         const searchInput = document.getElementById('search-input');
         const searchButton = document.getElementById('search-button');
         const loader = document.getElementById('loader');
@@ -352,27 +354,32 @@
         const correctionInfoDiv = document.getElementById('correction-info');
         const logContainer = document.getElementById('log-container');
         const manualFeedbackArea = document.getElementById('manual-feedback-area');
-        const manualTussInput = document.getElementById('manual-tuss-input');
-        const submitManualFeedbackButton = document.getElementById('submit-manual-feedback-button');
+        const procedureNameInput = document.getElementById('procedure-name-input');
+        const procedureExplanationInput = document.getElementById('procedure-explanation-input');
+        const submitSuggestionButton = document.getElementById('submit-suggestion-button');
         const manualFeedbackStatus = document.getElementById('manual-feedback-status');
-        const tussSuggestionsList = document.getElementById('tuss-suggestions');
         const aiSuggestionContainer = document.getElementById('ai-suggestion-container');
         const aiSuggestionButton = document.getElementById('ai-suggestion-button');
         const aiSuggestionStatus = document.getElementById('ai-suggestion-status');
 
         let lastSearchQuery = ''; 
         let feedbackAlreadySentForCurrentSearch = false; 
-        let debounceTimeout; 
-        let currentRawTussInput = ''; 
         let currentResultsForAI = [];
 
         function resetState() {
             feedbackAlreadySentForCurrentSearch = false; 
-            document.querySelectorAll('.feedback-button').forEach(b => { b.disabled = false; b.textContent = 'Marcar como Melhor Correspondência'; b.classList.remove('success', 'error'); });
-            submitManualFeedbackButton.disabled = false;
-            submitManualFeedbackButton.textContent = 'Enviar Código TUSS';
-            submitManualFeedbackButton.classList.remove('success', 'error');
-            manualTussInput.value = ''; manualTussInput.disabled = false;
+            document.querySelectorAll('.feedback-button').forEach(b => { 
+                b.disabled = false; 
+                b.textContent = 'Confirmar este como o procedimento correto'; 
+                b.classList.remove('success', 'error'); 
+            });
+            
+            // Resetar novo formulário de sugestão
+            procedureNameInput.value = ''; procedureNameInput.disabled = false;
+            procedureExplanationInput.value = ''; procedureExplanationInput.disabled = false;
+            submitSuggestionButton.disabled = false;
+            submitSuggestionButton.textContent = 'Enviar Sugestão';
+            submitSuggestionButton.classList.remove('success', 'error');
             manualFeedbackStatus.textContent = '';
             
             aiSuggestionContainer.style.display = 'none';
@@ -392,11 +399,13 @@
         }
 
         function disableAllFeedbackButtons() {
-            document.querySelectorAll('.feedback-button').forEach(b => { b.disabled = true; if (!b.classList.contains('success')) b.textContent = 'Feedback Enviado'; });
-            submitManualFeedbackButton.disabled = true;
-            if (!submitManualFeedbackButton.classList.contains('success')) submitManualFeedbackButton.textContent = 'Feedback Enviado';
-            manualTussInput.disabled = true;
+            document.querySelectorAll('.feedback-button').forEach(b => { 
+                b.disabled = true; 
+                if (!b.classList.contains('success')) b.textContent = 'Confirmação Enviada'; 
+            });
+            // Não desabilitar o botão de sugestão, pois é uma ação diferente
         }
+        // ##### FIM DA MUDANÇA DE JAVASCRIPT #####
 
         async function performSearch() {
             const query = searchInput.value.trim();
@@ -550,40 +559,48 @@
             }
             itemDiv.appendChild(bodyDiv);
 
+            // ##### INÍCIO DA MUDANÇA DE JAVASCRIPT #####
             const feedbackButton = document.createElement('button');
             feedbackButton.className = 'feedback-button';
-            feedbackButton.textContent = 'Marcar como Melhor Correspondência';
-            feedbackButton.onclick = () => submitFeedback(originalQuery, result.Codigo_TUSS, feedbackButton, false, 'click_result');
+            feedbackButton.textContent = 'Confirmar este como o procedimento correto';
+            feedbackButton.onclick = () => submitFeedback(originalQuery, result.Codigo_TUSS, feedbackButton);
             itemDiv.appendChild(feedbackButton);
+            // ##### FIM DA MUDANÇA DE JAVASCRIPT #####
 
             return itemDiv;
         }
 
-        async function submitFeedback(originalQuery, tussCodeSubmitted, buttonElement, isManual = false, typeOfFeedback = 'manual_input', tussCodeRawInput = '') {
-            const statusDiv = isManual ? manualFeedbackStatus : null;
+        // ##### INÍCIO DA MUDANÇA DE JAVASCRIPT #####
+        async function submitFeedback(originalQuery, tussCodeSubmitted, buttonElement) {
             if (feedbackAlreadySentForCurrentSearch) return;
-            if (!confirm(`Confirma que "${tussCodeSubmitted}" é a melhor correspondência para "${originalQuery}"?`)) return;
+            if (!confirm("Você confirma que este é o procedimento que estava procurando? Sua confirmação ajuda a melhorar a busca para todos.")) return;
             
-            if(buttonElement) buttonElement.disabled = true;
-            if(statusDiv) statusDiv.textContent = 'Enviando...';
+            buttonElement.disabled = true;
 
             try {
                 const response = await fetch('/submit_feedback', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ query: originalQuery, tuss_code: tussCodeSubmitted, feedback_type: typeOfFeedback, tuss_code_raw_input: tussCodeRawInput })
+                    body: JSON.stringify({ 
+                        query: originalQuery, 
+                        tuss_code: tussCodeSubmitted, 
+                        feedback_type: 'confirm_result',
+                        tuss_code_raw_input: '' 
+                    })
                 });
-                if (!response.ok) throw new Error('Falha no envio do feedback.');
+                if (!response.ok) throw new Error('Falha no envio da confirmação.');
                 
                 feedbackAlreadySentForCurrentSearch = true;
-                if (buttonElement) { buttonElement.textContent = 'Enviado!'; buttonElement.classList.add('success'); }
-                if (statusDiv) { statusDiv.textContent = 'Feedback recebido!'; statusDiv.style.color = '#28a745'; }
+                buttonElement.textContent = 'Confirmação Enviada!';
+                buttonElement.classList.add('success');
                 disableAllFeedbackButtons();
             } catch (error) {
-                if (buttonElement) { buttonElement.textContent = 'Erro!'; buttonElement.classList.add('error'); buttonElement.disabled = false; }
-                if (statusDiv) { statusDiv.textContent = 'Erro ao enviar.'; statusDiv.style.color = '#dc3545'; }
+                buttonElement.textContent = 'Erro no Envio';
+                buttonElement.classList.add('error');
+                buttonElement.disabled = false;
             }
         }
+        // ##### FIM DA MUDANÇA DE JAVASCRIPT #####
         
         async function getAiSuggestions() {
             if (!lastSearchQuery || currentResultsForAI.length === 0) return;
@@ -642,56 +659,54 @@
         searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') performSearch(); });
         aiSuggestionButton.addEventListener('click', getAiSuggestions);
         
-        submitManualFeedbackButton.addEventListener('click', () => {
-            const tussCodeSubmitted = manualTussInput.value.trim();
-            submitFeedback(lastSearchQuery, tussCodeSubmitted, submitManualFeedbackButton, true, 'manual_input', currentRawTussInput);
-        });
-
-        manualTussInput.addEventListener('input', () => {
-            clearTimeout(debounceTimeout);
-            currentRawTussInput = manualTussInput.value.trim();
-            if (currentRawTussInput.length >= 2) {
-                debounceTimeout = setTimeout(() => fetchTussSuggestions(currentRawTussInput), 300);
-            } else {
-                tussSuggestionsList.innerHTML = '';
-                tussSuggestionsList.style.display = 'none';
+        // ##### INÍCIO DA MUDANÇA DE JAVASCRIPT #####
+        // Listener para o novo botão de sugestão
+        submitSuggestionButton.addEventListener('click', async () => {
+            const name = procedureNameInput.value.trim();
+            const explanation = procedureExplanationInput.value.trim();
+
+            if (!name || !explanation) {
+                manualFeedbackStatus.textContent = 'Por favor, preencha o nome e a explicação.';
+                manualFeedbackStatus.style.color = '#dc3545';
+                return;
             }
-        });
 
-        document.addEventListener('click', (event) => {
-            if (!manualFeedbackArea.contains(event.target)) {
-                tussSuggestionsList.style.display = 'none';
-            }
-        });
+            submitSuggestionButton.disabled = true;
+            manualFeedbackStatus.textContent = 'Enviando...';
+            manualFeedbackStatus.style.color = 'var(--text-light)';
 
-        async function fetchTussSuggestions(tussPrefix) {
             try {
-                const response = await fetch(`/get_tuss_info?tuss_prefix=${tussPrefix}`);
-                if (!response.ok) throw new Error('Erro ao buscar sugestões.');
-                const suggestions = await response.json();
-                displayTussSuggestions(suggestions);
+                const response = await fetch('/submit_suggestion', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ 
+                        query: lastSearchQuery, 
+                        name: name, 
+                        explanation: explanation 
+                    })
+                });
+
+                const data = await response.json();
+                if (!response.ok) throw new Error(data.message || 'Falha no envio da sugestão.');
+
+                manualFeedbackStatus.textContent = 'Sugestão recebida. Obrigado!';
+                manualFeedbackStatus.style.color = '#28a745';
+                submitSuggestionButton.textContent = 'Enviado!';
+                submitSuggestionButton.classList.add('success');
+                procedureNameInput.disabled = true;
+                procedureExplanationInput.disabled = true;
+
             } catch (error) {
-                console.error("Erro ao buscar sugestões TUSS:", error);
+                manualFeedbackStatus.textContent = `Erro: ${error.message}`;
+                manualFeedbackStatus.style.color = '#dc3545';
+                submitSuggestionButton.disabled = false;
+                submitSuggestionButton.textContent = 'Enviar Sugestão';
+                submitSuggestionButton.classList.remove('success', 'error');
             }
-        }
+        });
 
-        function displayTussSuggestions(suggestions) {
-            tussSuggestionsList.innerHTML = '';
-            if (suggestions.length > 0) {
-                suggestions.forEach(item => {
-                    const li = document.createElement('li');
-                    li.innerHTML = `<span class="suggestion-code">${item.tuss_code}</span> <span class="suggestion-desc">${item.tuss_description}</span> <span class="suggestion-rol">${item.rol_name}</span>`;
-                    li.addEventListener('click', () => {
-                        manualTussInput.value = item.tuss_code;
-                        tussSuggestionsList.style.display = 'none';
-                    });
-                    tussSuggestionsList.appendChild(li);
-                });
-                tussSuggestionsList.style.display = 'block';
-            } else {
-                tussSuggestionsList.style.display = 'none';
-            }
-        }
+        // Lógicas antigas de autocompletar TUSS foram removidas
+        // ##### FIM DA MUDANÇA DE JAVASCRIPT #####
 
         searchInput.focus();
     </script>