const fileInput = document.getElementById('fileInput');
const fileInfo = document.getElementById('fileInfo');
const form = document.getElementById('uploadForm');
const result = document.getElementById('result');
const uploadBtn = document.getElementById('uploadBtn');

fileInput.addEventListener('change', (e) => {
  const files = e.target.files;
  if (files.length > 0) {
    const names = Array.from(files).map(f => f.name).join(', ');
    fileInfo.textContent = `Selected: ${files.length} file(s) - ${names}`;
  }
});

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const files = fileInput.files;

  if (files.length === 0) {
    showResult('Please select at least one file', 'error');
    return;
  }

  uploadBtn.disabled = true;
  uploadBtn.textContent = 'Uploading...';

  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append('files', files[i]);
  }

  try {
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });

    const data = await response.json();

    if (response.ok) {
      const links = data.files.map(f =>
        `<a href="/download/${f}" target="_blank" style="display: block; margin: 5px 0;">${window.location.origin}/download/${f}</a>`
      ).join('');
      showResult('Upload successful!<br>' + links, 'success');
      form.reset();
      fileInfo.textContent = 'Max size: {{max-size}}MB per file';
    } else {
      showResult('Error: ' + data.error, 'error');
    }
  } catch (error) {
    showResult('Upload failed: ' + error.message, 'error');
  } finally {
    uploadBtn.disabled = false;
    uploadBtn.textContent = 'Upload';
  }
});

function showResult(message, type) {
  result.innerHTML = message;
  result.style.display = 'block';
  if (type === 'success') {
    result.style.background = '#d4edda';
    result.style.color = '#155724';
    result.style.border = '1px solid #c3e6cb';
  } else {
    result.style.background = '#f8d7da';
    result.style.color = '#721c24';
    result.style.border = '1px solid #f5c6cb';
  }
}