frontend/script.js

// Constante pour l'URL de base
const BASE_URL = window.location.origin;  // Utiliser l'URL complète pour éviter les erreurs CORS

// Gestion des onglets
function openTab(tabName) {
  // Liste des onglets disponibles
  const tabs = ['summarize', 'answer-question', 'interpret-image', 'generate-visualization', 'translate-document'];
  
  // Cacher/montrer les sections appropriées
  tabs.forEach(tab => {
    const element = document.getElementById(tab);
    if (element) {
      element.classList.toggle('hidden', tab !== tabName);
    }
  });
  
  // Marquer l'onglet actif
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.classList.toggle('active', btn.getAttribute('data-tab') === tabName);
    btn.setAttribute('aria-selected', btn.getAttribute('data-tab') === tabName);
  });
}

// Gestion optimisée des uploads de fichiers
function setupFileUpload(inputId) {
  const input = document.getElementById(inputId);
  if (!input) return;
  
  const filenameDisplay = document.getElementById(`${inputId}-filename`);
  
  input.addEventListener('change', function() {
    if (this.files && this.files[0]) {
      // Afficher le nom du fichier
      const fileName = this.files[0].name;
      if (filenameDisplay) {
        filenameDisplay.textContent = fileName;
        filenameDisplay.title = fileName;
      }
      
      // Changer le texte du label
      const label = this.nextElementSibling;
      const fileLabel = label?.querySelector('.file-label');
      if (fileLabel) {
        fileLabel.textContent = "Fichier sélectionné";
      }
    } else {
      // Réinitialiser
      if (filenameDisplay) {
        filenameDisplay.textContent = "";
      }
      
      const label = this.nextElementSibling;
      const fileLabel = label?.querySelector('.file-label');
      if (fileLabel) {
        fileLabel.textContent = "Sélectionner un fichier";
      }
    }
  });
}

// Indicateur de chargement
function showLoading(resultDiv) {
  resultDiv.innerHTML = `
    <div class="loading-container">
      <div class="loading-spinner"></div>
      <p>Traitement en cours...</p>
    </div>
  `;
}

// Gestion des erreurs
function showError(resultDiv, message) {
  resultDiv.innerHTML = `
    <div class="error-message">
      <span class="error-icon">⚠️</span>
      <p>${message}</p>
    </div>
  `;
}

// Initialisation du document
document.addEventListener('DOMContentLoaded', () => {
  try {
    // Activer le premier onglet par défaut
    openTab('summarize');
    
    // Configurer les uploads de fichiers
    setupFileUpload('summarize-file');
    setupFileUpload('answer-question-file');
    setupFileUpload('interpret-image-file');
    setupFileUpload('visualization-file');
    setupFileUpload('translate-file');
    
    // Configurer les onglets
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const tabName = btn.getAttribute('data-tab');
        if (tabName) openTab(tabName);
      });
    });
    
    // Configurer le formulaire de résumé
    const summarizeForm = document.getElementById('summarize-form');
    if (summarizeForm) {
      summarizeForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        handleSummarizeSubmit();
      });
    }
    
    // Configurer le formulaire de question-réponse
    const qaForm = document.getElementById('answer-question-form');
    if (qaForm) {
      qaForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        handleQASubmit();
      });
    }

    // Désactiver temporairement les onglets non implémentés
    document.querySelectorAll('.tab-btn').forEach(btn => {
      const tabName = btn.getAttribute('data-tab');
      if (tabName !== 'summarize' && tabName !== 'answer-question') {
        btn.addEventListener('click', (e) => {
          e.preventDefault();
          alert("Cette fonctionnalité n'est pas encore implémentée.");
          // Ne pas changer d'onglet
          return false;
        });
      }
    });
    
  } catch (error) {
    console.error('Erreur d\'initialisation:', error);
  }
});

// Gestion du formulaire de résumé
async function handleSummarizeSubmit() {
  const fileInput = document.getElementById('summarize-file');
  const resultDiv = document.getElementById('summarize-result');
  
  if (!fileInput || !resultDiv) return;
  
  if (!fileInput.files || fileInput.files.length === 0) {
    showError(resultDiv, "Veuillez sélectionner un fichier à résumer.");
    return;
  }
  
  showLoading(resultDiv);
  
  try {
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    
    // Utiliser fetch avec timeout et gestion d'erreur améliorée
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 60000); // 60s timeout
    
    const response = await fetch(`${BASE_URL}/summarize`, {
      method: 'POST',
      body: formData,
      signal: controller.signal
    }).finally(() => clearTimeout(timeoutId));
    
    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`Erreur: ${response.status} ${response.statusText}\n${errorText}`);
    }
    
    const data = await response.json();
    
    if (data.warning) {
      // Afficher l'avertissement
      resultDiv.innerHTML = `
        <div class="warning-message">
          <h3>Problème détecté</h3>
          <p>${data.summary}</p>
        </div>
      `;
    } else {
      // Afficher le résumé
      resultDiv.innerHTML = `
        <div class="result-content">
          <h3>Résumé de: ${data.filename}</h3>
          <div class="summary-text">${data.summary}</div>
          <p class="text-meta">Longueur du texte original: ${data.text_length} caractères</p>
        </div>
      `;
    }
  } catch (error) {
    console.error('Erreur lors du résumé:', error);
    
    // Message d'erreur plus descriptif
    let errorMessage = error.message;
    if (error.name === 'AbortError') {
      errorMessage = "La requête a pris trop de temps. Veuillez réessayer avec un fichier plus petit.";
    } else if (error.message.includes("Failed to fetch")) {
      errorMessage = "Impossible de contacter le serveur. Veuillez vérifier votre connexion ou contactez l'administrateur.";
    }
    
    showError(resultDiv, `Erreur: ${errorMessage}`);
  }
}

// Gestion du formulaire de question-réponse
async function handleQASubmit() {
  const questionInput = document.getElementById('question-input');
  const fileInput = document.getElementById('answer-question-file');
  const resultDiv = document.getElementById('answer-question-result');
  
  if (!questionInput || !resultDiv) return;
  
  if (!questionInput.value.trim()) {
    showError(resultDiv, "Veuillez entrer une question.");
    return;
  }
  
  showLoading(resultDiv);
  
  try {
    const formData = new FormData();
    formData.append('question', questionInput.value);
    
    if (fileInput && fileInput.files && fileInput.files.length > 0) {
      formData.append('file', fileInput.files[0]);
    }
    
    // Utiliser fetch avec timeout et gestion d'erreur améliorée
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 60000); // 60s timeout
    
    const response = await fetch(`${BASE_URL}/answer-question`, {
      method: 'POST',
      body: formData,
      signal: controller.signal
    }).finally(() => clearTimeout(timeoutId));
    
    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`Erreur: ${response.status} ${response.statusText}\n${errorText}`);
    }
    
    const data = await response.json();
    
    if (data.warning) {
      // Afficher l'avertissement
      resultDiv.innerHTML = `
        <div class="warning-message">
          <h3>Problème détecté</h3>
          <p>${data.answer}</p>
        </div>
      `;
    } else {
      // Afficher la réponse
      resultDiv.innerHTML = `
        <div class="result-content">
          <h3>Réponse</h3>
          <div class="question-text"><strong>Question:</strong> ${data.question}</div>
          <div class="answer-text"><strong>Réponse:</strong> ${data.answer}</div>
        </div>
      `;
    }
  } catch (error) {
    console.error('Erreur de question-réponse:', error);
    
    // Message d'erreur plus descriptif
    let errorMessage = error.message;
    if (error.name === 'AbortError') {
      errorMessage = "La requête a pris trop de temps. Veuillez réessayer avec une question plus courte ou un fichier plus petit.";
    } else if (error.message.includes("Failed to fetch")) {
      errorMessage = "Impossible de contacter le serveur. Veuillez vérifier votre connexion ou contactez l'administrateur.";
    }
    
    showError(resultDiv, `Erreur: ${errorMessage}`);
  }
}