// 🌌 Three.js background setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
const material = new THREE.MeshStandardMaterial({ color: 0x0077ff, metalness: 0.6, roughness: 0.2 });
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);

const light = new THREE.PointLight(0xffffff, 1);
light.position.set(20, 20, 20);
scene.add(light);

camera.position.z = 30;

function animate() {
  requestAnimationFrame(animate);
  torusKnot.rotation.x += 0.01;
  torusKnot.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

// 📤 Upload logic
const form = document.getElementById('uploadForm');
const resultDiv = document.getElementById('result');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const file = document.getElementById('fileInput').files[0];
  if (!file) {
    resultDiv.innerHTML = `<p style="color:red;">Please select a file first.</p>`;
    return;
  }

  const formData = new FormData();
  formData.append('file', file);
  resultDiv.innerHTML = "<p>⏳ Processing...</p>";

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

    const data = await res.json();
    if (data.error) {
      resultDiv.innerHTML = `<p style="color:red;">${data.error}</p>`;
    } else {
      let html = `<h3>📄 Grading Report</h3>`;
      html += `<p><strong>Student ID:</strong> ${data.student_id || 'N/A'}</p>`;
      html += `<p><strong>Extracted Text:</strong> ${data.extracted_text}</p>`;
      html += `<p><strong>Total Marks:</strong> ${data.total_marks_awarded} / ${data.total_possible_marks}</p>`;
      html += `<img src="${data.processed_image_path}" class="preview" alt="Processed Image" />`;

      for (const [point, info] of Object.entries(data.grading_report)) {
        const rowClass = info.status === "Found" ? "found" : "not-found";
        html += `<p class="${rowClass}"><strong>${point}</strong>: ${info.status} (${info.score_percentage}%) → ${info.marks_awarded} marks</p>`;
      }

      resultDiv.innerHTML = html;
    }
  } catch (err) {
    resultDiv.innerHTML = `<p style="color:red;">❌ Upload failed. Please try again.</p>`;
    console.error(err);
  }
});