<script setup lang="ts">
import { computed } from 'vue'
import defaultAvatarIcon from '../../assets/images/icons/avatar.svg'
import { getLackSuitImage } from '../../config/flowerColorMap'
import type { Suit } from '../../types/tile'
import type { SeatPlayerCardModel } from './seat-player-card'

const props = defineProps<{
  seatClass: string
  player: SeatPlayerCardModel
}>()

function normalizeMissingSuit(value: string): Suit | null {
  const normalized = value.trim().toLowerCase()
  const missingSuitMap: Record<string, Suit> = {
    万: 'W',
    筒: 'T',
    条: 'B',
    w: 'W',
    t: 'T',
    b: 'B',
    wan: 'W',
    tong: 'T',
    tiao: 'B',
  }

  return missingSuitMap[normalized] ?? null
}

const missingSuitIcon = computed(() => {
  const suit = normalizeMissingSuit(props.player.missingSuitLabel)
  return suit ? getLackSuitImage(suit) : ''
})

const resolvedAvatarUrl = computed(() => {
  return props.player.avatarUrl || defaultAvatarIcon
})
</script>

<template>
  <article
      class="player-badge"
      :class="[seatClass, { 'is-turn': player.isTurn }]"
  >
    <div class="avatar-panel">
      <div class="avatar-card">
        <img :src="resolvedAvatarUrl" :alt="`${player.name}头像`" />
      </div>
      <span v-if="player.dealer" class="dealer-mark">庄</span>
    </div>

    <div class="player-meta">
      <p>{{ player.name }}</p>
      <small v-if="player.isTrustee" class="trustee-chip">托管中</small>
      <small v-if="player.isReady" class="ready-chip">已准备</small>
    </div>

    <div class="missing-mark">
      <img v-if="missingSuitIcon" :src="missingSuitIcon" alt="" />
      <span v-else>{{ player.missingSuitLabel }}</span>
    </div>
  </article>
</template>
