<template>
  <div class="page-container">
    <h1>Monthly Leaderboard</h1>
    <div v-if="pending" class="loading">Loading leaderboard...</div>
    <div v-else-if="error" class="error-container">
      <p>An error occurred while fetching the leaderboard. Please try again.</p>
    </div>
    <div v-else class="table-container">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>Rank</th>
            <th>Nickname</th>
            <th>EXP</th>
          </tr>
        </thead>
        <tbody>
          <tr 
            v-for="entry in leaderboard" 
            :key="entry.rank + entry.nickname"
            :class="{ 'current-user-row': currentUser && currentUser.nickname === entry.nickname }"
          >
            <td>{{ entry.rank }}</td>
            <td>{{ entry.nickname }}</td>
            <td>{{ entry.exp }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
const { user: currentUser } = useAuth(); // Get current authenticated user

const { data, pending, error } = await useFetch('/api/leaderboard', {
  lazy: true,
  server: false,
});

const leaderboard = computed(() => data.value?.leaderboard || []);

</script>

<style scoped>
.table-container {
  overflow-x: auto;
}
.current-user-row > * {
  background-color: #e0e7ff; /* A light blue/indigo for highlighting */
  font-weight: 600;
  color: var(--primary-color-hover);
}

.table-hover > tbody > tr.current-user-row:hover > * {
  background-color: #c7d2fe; /* A slightly darker shade for hover */
}
</style>
