frontend/app.js

const uploadZone    = document.getElementById('uploadZone');
const fileInput     = document.getElementById('fileInput');
const chooseBtn     = document.getElementById('chooseBtn');
const fileCard      = document.getElementById('fileCard');
const fileName      = document.getElementById('fileName');
const fileDuration  = document.getElementById('fileDuration');
const deleteBtn     = document.getElementById('deleteBtn');
const attenSlider   = document.getElementById('attenSlider');
const attenValue    = document.getElementById('attenValue');
const uploadBtn     = document.getElementById('uploadBtn');
const status        = document.getElementById('status');
const emptyState    = document.getElementById('emptyState');
const playerSection = document.getElementById('playerSection');
const toggleEnhanced = document.getElementById('toggleEnhanced');
const audioPlayer   = document.getElementById('audioPlayer');
const videoPlayer   = document.getElementById('videoPlayer');
const downloadLink  = document.getElementById('downloadLink');

const attenSteps  = [null, 80, 40, 20, 10, 5];
const attenLabels = ['Off', 'High', 'Medium', 'Low', 'Minimal', 'Barely'];

let originalSrc = null;
let enhancedSrc = null;
let isVideo = false;
let selectedFile = null;

// --- File picking ---
chooseBtn.addEventListener('click', () => fileInput.click());
uploadZone.addEventListener('click', (e) => { if (e.target !== chooseBtn) fileInput.click(); });

uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.classList.add('dragover'); });
uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('dragover'));
uploadZone.addEventListener('drop', (e) => {
  e.preventDefault();
  uploadZone.classList.remove('dragover');
  const file = e.dataTransfer.files[0];
  if (file) handleFile(file);
});

fileInput.addEventListener('change', () => {
  if (fileInput.files[0]) handleFile(fileInput.files[0]);
});

function handleFile(file) {
  selectedFile = file;
  fileName.textContent = file.name;
  fileDuration.textContent = '';
  fileCard.hidden = false;
  uploadBtn.hidden = false;
  status.textContent = '';
  status.className = '';

  // Get duration via a temp media element
  const url = URL.createObjectURL(file);
  const media = file.type.startsWith('video') ? document.createElement('video') : document.createElement('audio');
  media.src = url;
  media.addEventListener('loadedmetadata', () => {
    const mins = Math.floor(media.duration / 60);
    const secs = Math.floor(media.duration % 60).toString().padStart(2, '0');
    fileDuration.textContent = `${mins}:${secs}`;
    URL.revokeObjectURL(url);
  });
}

deleteBtn.addEventListener('click', () => {
  fileInput.value = '';
  selectedFile = null;
  fileCard.hidden = true;
  uploadBtn.hidden = true;
  playerSection.hidden = true;
  emptyState.hidden = false;
  status.textContent = '';
});

// --- Slider ---
attenSlider.addEventListener('input', () => {
  attenValue.textContent = attenLabels[attenSlider.value];
});

// --- Upload & process ---
uploadBtn.addEventListener('click', async () => {
  const file = selectedFile || fileInput.files[0];
  if (!file) return;

  uploadBtn.disabled = true;
  playerSection.hidden = true;
  emptyState.hidden = false;
  status.className = '';
  status.textContent = 'Processing... this may take a few minutes.';

  try {
    const formData = new FormData();
    formData.append('file', file);
    const attenDb = attenSteps[attenSlider.value];
    if (attenDb !== null) formData.append('atten_lim_db', attenDb);

    const response = await fetch('/upload', { method: 'POST', body: formData });
    if (!response.ok) throw new Error(`Server error: ${response.status}`);

    const data = await response.json();
    isVideo = data.file_type === 'video';

    originalSrc = URL.createObjectURL(file);
    enhancedSrc = data.download_url;

    // Set up players
    if (isVideo) {
      videoPlayer.hidden = false;
      audioPlayer.hidden = true;
      videoPlayer.src = originalSrc;
    } else {
      audioPlayer.hidden = false;
      videoPlayer.hidden = true;
      audioPlayer.src = originalSrc;
    }

    toggleEnhanced.checked = false;
    downloadLink.href = enhancedSrc;
    downloadLink.download = isVideo ? 'enhanced.mp4' : 'enhanced.wav';

    emptyState.hidden = true;
    playerSection.hidden = false;
    status.textContent = 'Done!';
    status.className = 'success';

  } catch (err) {
    status.textContent = `Something went wrong: ${err.message}`;
    status.className = 'error';
  } finally {
    uploadBtn.disabled = false;
  }
});

// --- Toggle between original and enhanced ---
toggleEnhanced.addEventListener('change', () => {
  const src = toggleEnhanced.checked ? enhancedSrc : originalSrc;
  const player = isVideo ? videoPlayer : audioPlayer;
  const wasPlaying = !player.paused;
  const currentTime = player.currentTime;
  player.src = src;
  player.currentTime = currentTime;
  if (wasPlaying) player.play();
});