<script setup lang="ts">
import type {Round} from "@/types/GameSubTypes.ts";
import {computed, type ComputedRef} from "vue";

interface PlayerScore { name: string; tricks: number }
const props = defineProps<{ currentRound: Round }>()
const playerScores: ComputedRef<PlayerScore[]> = computed(() => {
  return props.currentRound.playersIn.map(player => {
    return {
      name: player.name,
      tricks: props.currentRound.trickList.filter(trick => {
        return trick.winner?.id === player.id
      }).length
    }
  })
})
</script>

<template>
  <q-card class="score-card q-mt-md" id="score-table-container">
    <q-card-section class="row items-center q-px-md q-pt-md">
      <div class="col">
        <div class="text-h6 fw-bold">Tricks Won</div>
      </div>
    </q-card-section>

    <q-separator />

    <q-list dense class="q-pa-sm">
      <q-item class="score-header">
        <q-item-section style="width:50%">PLAYER</q-item-section>
        <q-item-section side style="width:50%" class="text-right">TRICKS</q-item-section>
      </q-item>

      <q-separator inset />

      <div v-if="playerScores.length">
        <q-item v-for="player in playerScores" :key="player.name" class="score-row">
          <q-item-section style="width:50%" class="text-truncate">{{ player.name }}</q-item-section>
          <q-item-section side style="width:50%" class="text-right">{{ player.tricks }}</q-item-section>
        </q-item>
      </div>

      <div v-else>
        <q-item>
          <q-item-section class="text-grey">No scores yet</q-item-section>
        </q-item>
      </div>
    </q-list>
  </q-card>
</template>

<style scoped>
.score-card {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
}

.score-header {
  font-weight: 700;
  color: #000000;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.score-row {
  color: #000000;
}

.text-right { text-align: right; }
</style>
