const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const resultsPanel = document.getElementById('results-panel');
const statusText = document.getElementById('result-status');
const detailText = document.getElementById('result-detail');
const confidenceValue = document.getElementById('confidence-value');
const confidenceFill = document.getElementById('confidence-fill');

// Production Backend URL
// Production Backend URL
// Backend URL (SWITCH BETWEEN LOCAL AND CLOUD)
// const BACKEND_URL = "http://localhost:8001/evaluate/upload"; 
const BACKEND_URL = "https://rhamprassath-mtdnet-alzheimer-detector.hf.space/evaluate/upload";

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

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

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

['dragleave', 'drop'].forEach(eventName => {
  dropZone.addEventListener(eventName, () => dropZone.classList.remove('highlight'), false);
});

dropZone.addEventListener('drop', handleDrop, false);
fileInput.addEventListener('change', (e) => handleFiles(e.target.files), false);

function handleDrop(e) {
  const dt = e.dataTransfer;
  const files = dt.files;
  handleFiles(files);
}

function handleFiles(files) {
  if (files.length > 0) {
    analyzeEEG(files[0]);
  }
}

async function analyzeEEG(file) {
  // UI Loading State
  dropZone.style.display = 'none';
  resultsPanel.style.display = 'block';
  statusText.innerText = "Analyzing Neural Patterns...";
  detailText.innerText = `File: ${file.name} | Processing V5 Spatial Features...`;
  
  const formData = new FormData();
  formData.append('file', file);

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

    if (!response.ok) throw new Error("Cloud Diagnostic Hub Unavailable");

    const result = await response.json();
    displayResults(result);
  } catch (error) {
    statusText.innerText = "Diagnostic Interrupted";
    detailText.innerText = "Error: " + error.message;
    statusText.style.color = "#EF4444";
  }
}

function displayResults(result) {
  const confidence = (result.confidence || 0.95) * 100;
  
  // Update UI with Clinical Accuracy
  statusText.innerText = `Diagnosis: ${result.prediction}`;
  statusText.style.color = "#06B6D4";
  detailText.innerText = `Master V5 Model Analysis Complete. Pattern matches identified.`;
  
  // Animate the Confidence Gauge
  confidenceValue.innerText = `${Math.round(confidence)}%`;
  confidenceFill.style.width = `${confidence}%`;
  
  // Custom coloring for clinical severity
  if (result.prediction.includes("Alzheimer")) {
    statusText.style.color = "#F43F5E";
  } else if (result.prediction.includes("Cognitive")) {
    statusText.style.color = "#F59E0B";
  }
}