script.js

document.addEventListener("DOMContentLoaded", function() {
  loadCSVFile();
});

function loadCSVFile() {
  fetch('data.csv') 
    .then(response => response.text())
    .then(contents => {
      const rows = contents.split("\n").slice(1); 
      const users = [];

      rows.forEach((row) => {
        if (row.trim() === "") return;
        const [email, username, profileUrl, skillBadges, arcadeGames, triviaBadges, points] = row.split(",");
        
       
        users.push({
          email: email.trim(),
          username: username.trim(),
          profileUrl: profileUrl.trim(),
          skillBadges: parseInt(skillBadges.trim(), 10),
          arcadeGames: parseInt(arcadeGames.trim(), 10),
          triviaBadges: parseInt(triviaBadges.trim(), 10),
          points: parseInt(points.trim(), 10),
        });
      });

 
      window.users = users;
      showLeaderboard();
    })
    .catch(error => {
      console.error("Error loading CSV file:", error);
    });
}

function getMilestone(skill, arcade, trivia, points) {
  if (arcade >= 10 && trivia >= 8 && skill >= 44 && points >= 85) return "Milestone 5 🏆 ";
  if (arcade >= 10 && trivia >= 8 && skill >= 44 && points >= 75) return "Milestone 4 🎯";
  if (arcade >= 8 && trivia >= 7 && skill >= 30 && points >= 65) return "Milestone 3 🥉";
  if (arcade >= 6 && trivia >= 6 && skill >= 20 && points >= 40) return "Milestone 2 🥈 ";
  if (arcade >= 4 && trivia >= 4 && skill >= 10 && points >= 20) return "Milestone 1 🥇 ";
  return "No Milestone Yet 🚧";
}

function displayUser() {
  const emailInput = document.getElementById("email-input").value.trim();
  const container = document.getElementById("result");
  container.innerHTML = ""; 

  if (!window.users) {
    container.innerHTML = "<p>No user data available. Please reload the page or check the file.</p>";
    return;
  }

  const user = window.users.find(u => u.email.toLowerCase() === emailInput.toLowerCase());

  if (user) {
    const { email, username, profileUrl, skillBadges, arcadeGames, triviaBadges, points } = user;
    const milestone = getMilestone(skillBadges, arcadeGames, triviaBadges, points);

    const card = document.createElement("div");
    card.classList.add("user-card");

    card.innerHTML = `
      <h3>${username}</h3>
      <p><strong>Email:</strong> ${email}</p>
      <p><strong>Points:</strong> ${points}</p>
      <p><strong>Milestone:</strong> ${milestone}</p>
      <p><a href="${profileUrl}" target="_blank">Skill Profile 🔗</a></p>
    `;

    container.appendChild(card);
  } else {
    container.innerHTML = "<p>User not found. Please check the email address.</p>";
  }
}
function showLeaderboard() {
  const leaderboardContainer = document.getElementById("leaderboard");
  leaderboardContainer.innerHTML = ""; 

  if (!window.users || window.users.length === 0) {
    leaderboardContainer.innerHTML = "<p>No user data available. Please reload the page or check the file.</p>";
    return;
  }

  const sortedUsers = [...window.users].sort((a, b) => {
    if (b.points !== a.points) {
      return b.points - a.points;
    }
    return a.username.localeCompare(b.username); // Alphabetical order if points are equal
  });

  const table = document.createElement("table");
  table.classList.add("leaderboard-table");

  table.innerHTML = `
    <thead>
      <tr>
        <th>Rank</th>
        <th>Username</th>
        <th>Email</th>
        <th>Skill Badges</th>
        <th>Arcade Games</th>
        <th>Trivia Badges</th>
        <th>Points</th>
        <th>Milestone</th>
        <th>Profile</th>
      </tr>
    </thead>
    <tbody></tbody>
  `;

  const tbody = table.querySelector("tbody");

  sortedUsers.forEach((user, index) => {
    const milestone = getMilestone(user.skillBadges, user.arcadeGames, user.triviaBadges, user.points);

    const row = document.createElement("tr");
    row.innerHTML = `
      <td>#${index + 1}</td>
      <td>${user.username}</td>
      <td>${user.email}</td>
      <td>${user.skillBadges}</td>
      <td>${user.arcadeGames}</td>
      <td>${user.triviaBadges}</td>
      <td>${user.points}</td>
      <td>${milestone}</td>
      <td><a href="${user.profileUrl}" target="_blank">View 🔗</a></td>
    `;

    tbody.appendChild(row);
  });

  leaderboardContainer.appendChild(table);
}