static/js/main.js

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('form');
  const fileInput = document.getElementById('file-input');
  const fileLabel = document.querySelector('.file-label');
  const uploadArea = document.querySelector('.upload-area');
  const fileName = document.getElementById('file-name');
  const submitBtn = document.querySelector('.btn');
  const loading = document.querySelector('.loading');
  const successMessage = document.querySelector('.success-message');
  const progressBar = document.querySelector('.progress-bar');

  // File input change handler
  fileInput.addEventListener('change', function(e) {
    if (e.target.files.length) {
      const file = e.target.files[0];
      fileName.textContent = file.name;
      uploadArea.classList.add('active');
      
      // Animate progress bar
      let progress = 0;
      const interval = setInterval(() => {
        progress += 10;
        progressBar.style.width = `${progress}%`;
        if (progress >= 100) clearInterval(interval);
      }, 100);
    }
  });

  // Drag and drop functionality
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    uploadArea.addEventListener(eventName, preventDefaults, false);
  });

  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  ['dragenter', 'dragover'].forEach(eventName => {
    uploadArea.addEventListener(eventName, highlight, false);
  });

  ['dragleave', 'drop'].forEach(eventName => {
    uploadArea.addEventListener(eventName, unhighlight, false);
  });

  function highlight() {
    uploadArea.classList.add('highlight');
  }

  function unhighlight() {
    uploadArea.classList.remove('highlight');
  }

  uploadArea.addEventListener('drop', handleDrop, false);

  function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    fileInput.files = files;
    const event = new Event('change');
    fileInput.dispatchEvent(event);
  }

  // Form submission
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    if (!fileInput.files.length) return;
    
    loading.style.display = 'block';
    submitBtn.disabled = true;
    
    // Simulate processing delay (remove in production)
    setTimeout(() => {
      const formData = new FormData(form);
      
      fetch('/translate', {
        method: 'POST',
        body: formData
      })
      .then(response => {
        if (!response.ok) throw new Error('Translation failed');
        return response.blob();
      })
      .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `translated_${fileInput.files[0].name.split('.')[0]}.txt`;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        
        loading.style.display = 'none';
        successMessage.style.display = 'block';
        submitBtn.disabled = false;
      })
      .catch(error => {
        console.error('Error:', error);
        loading.style.display = 'none';
        submitBtn.disabled = false;
        alert('Translation failed: ' + error.message);
      });
    }, 1500);
  });
});