document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('uploadForm');
  const imageInput = document.getElementById('imageInput');
  const submitBtn = document.getElementById('submitBtn');
  const loading = document.getElementById('loading');
  const results = document.getElementById('results');

  if (!form) return;

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

    const file = imageInput.files[0];
    if (!file) {
      alert('Please select an image file first.');
      return;
    }

    const formData = new FormData();
    formData.append('image', file);

    submitBtn.disabled = true;
    loading.classList.remove('hidden');
    results.classList.add('hidden');

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

      const data = await response.json();

      if (response.ok) {
        const labelOut = document.getElementById('labelOut');
        labelOut.innerText = data.label;
        labelOut.className = `text-3xl font-black ${
          data.label.includes('AI') || data.label === 'FAKE' ? 'text-red-600' : 'text-green-600'
        }`;

        document.getElementById('confOut').innerText = data.confidence;
        document.getElementById('explanationOut').innerText = data.explanation;

        // Pipeline Status Banner Setup
        const statusBanner = document.getElementById('pipelineStatusBanner');
        const statusText = document.getElementById('pipelineStatusText');
        const badge = document.getElementById('pipelineBadge');

        if (data.early_exit) {
          statusBanner.className = "p-3 rounded border border-amber-300 bg-amber-50 text-amber-900 text-xs font-bold flex items-center justify-between";
          statusText.innerText = "Early Exit Triggered: AI Metadata marker matched. ViT pipeline bypassed.";
          badge.className = "px-2.5 py-1 rounded bg-amber-600 text-white text-[10px] tracking-wider uppercase font-black";
          badge.innerText = "Early Exit (YES Branch)";
        } else {
          statusBanner.className = "p-3 rounded border border-blue-300 bg-blue-50 text-blue-900 text-xs font-bold flex items-center justify-between";
          statusText.innerText = "Full Pipeline Executed: No Metadata markers found . Passed through ViT Encoder.";
          badge.className = "px-2.5 py-1 rounded bg-blue-600 text-white text-[10px] tracking-wider uppercase font-black";
          badge.innerText = "Full ViT Execution ";
        }

        results.classList.remove('hidden');
      } else {
        alert('Error: ' + (data.error || 'Failed to analyze the image.'));
      }
    } catch (err) {
      alert('Server request failed: ' + err.message);
    } finally {
      submitBtn.disabled = false;
      loading.classList.add('hidden');
    }
  });
});