<script setup lang="ts">
defineProps<{
  show: boolean
  isLastRound: boolean
  currentRound: number
  totalRounds: number
  settlementPlayers: Array<{
    playerId: string
    displayName: string
    score: number
    isWinner: boolean
    seatIndex: number
  }>
  loggedInUserId: string
  nextRoundPending: boolean
  settlementCountdown: number | null
}>()

const emit = defineEmits<{
  nextRound: []
  backHall: []
}>()
</script>

<template>
  <div v-if="show" class="settlement-overlay">
    <div class="settlement-panel">
      <h2 class="settlement-title">
        {{ isLastRound ? '最终结算' : `第 ${currentRound} 局结算` }}
      </h2>
      <p v-if="totalRounds > 0" class="settlement-round-info">{{ currentRound }} / {{ totalRounds }} 局</p>
      <div class="settlement-list">
        <div
          v-for="(item, index) in settlementPlayers"
          :key="item.playerId"
          class="settlement-row"
          :class="{ 'is-winner': item.isWinner, 'is-self': item.playerId === loggedInUserId }"
        >
          <span class="settlement-rank">{{ index + 1 }}</span>
          <span class="settlement-name">
            {{ item.displayName }}
            <span v-if="item.isWinner" class="settlement-winner-badge">胡</span>
          </span>
          <span class="settlement-score" :class="{ 'is-positive': item.score > 0, 'is-negative': item.score < 0 }">
            {{ item.score > 0 ? '+' : '' }}{{ item.score }}
          </span>
        </div>
      </div>
      <div class="settlement-actions">
        <button
          v-if="!isLastRound"
          class="ready-toggle ready-toggle-inline settlement-btn"
          type="button"
          :disabled="nextRoundPending"
          @click="emit('nextRound')"
        >
          <span class="ready-toggle-label">
            {{
              nextRoundPending
                ? '准备中...'
                : settlementCountdown != null && settlementCountdown > 0
                  ? `下一局 (${settlementCountdown}s)`
                  : '下一局'
            }}
          </span>
        </button>
        <button v-else class="ready-toggle ready-toggle-inline settlement-btn" type="button" @click="emit('backHall')">
          <span class="ready-toggle-label">返回大厅</span>
        </button>
      </div>
    </div>
  </div>
</template>
