<script setup lang="ts">
import { ref } from 'vue'
import { backImageUrl } from '../logic/roles'

const props = defineProps<{
  playerId: number
  isDead: boolean
  isRevealed: boolean
  confirmed: boolean
}>()

const emit = defineEmits<{
  reveal: [playerId: number]
  confirm: [playerId: number]
}>()

interface SwipeState {
  startX: number
  startY: number
  currentX: number
  currentY: number
  isSwiping: boolean
}

const swipe = ref<SwipeState>({ startX: 0, startY: 0, currentX: 0, currentY: 0, isSwiping: false })

function onTouchStart(e: TouchEvent) {
  const t = e.touches[0]
  swipe.value = { startX: t.clientX, startY: t.clientY, currentX: t.clientX, currentY: t.clientY, isSwiping: false }
}
function onTouchMove(e: TouchEvent) {
  const t = e.touches[0]
  swipe.value.currentX = t.clientX
  swipe.value.currentY = t.clientY
  const dx = swipe.value.currentX - swipe.value.startX
  const dy = Math.abs(swipe.value.currentY - swipe.value.startY)
  if (Math.abs(dx) > 10 && Math.abs(dx) > dy) {
    swipe.value.isSwiping = true
    e.preventDefault()
  }
}
function onTouchEnd(e: TouchEvent) {
  const dx = swipe.value.currentX - swipe.value.startX
  const dy = Math.abs(swipe.value.currentY - swipe.value.startY)
  if (swipe.value.isSwiping && dx > 50 && Math.abs(dx) > dy) {
    if (!props.isRevealed) emit('reveal', props.playerId)
    e.preventDefault()
    e.stopPropagation()
  }
}

function onMouseDown(e: MouseEvent) {
  swipe.value = { startX: e.clientX, startY: e.clientY, currentX: e.clientX, currentY: e.clientY, isSwiping: false }
}
function onMouseMove(e: MouseEvent) {
  swipe.value.currentX = e.clientX
  swipe.value.currentY = e.clientY
  const dx = swipe.value.currentX - swipe.value.startX
  const dy = Math.abs(swipe.value.currentY - swipe.value.startY)
  if (Math.abs(dx) > 10 && Math.abs(dx) > dy) {
    swipe.value.isSwiping = true
  }
}
function onMouseUp(e: MouseEvent) {
  const dx = swipe.value.currentX - swipe.value.startX
  const dy = Math.abs(swipe.value.currentY - swipe.value.startY)
  if (swipe.value.isSwiping && dx > 50 && Math.abs(dx) > dy) {
    if (!props.isRevealed) emit('reveal', props.playerId)
    e.preventDefault()
    e.stopPropagation()
  }
}

function onClick() {
  if (props.isRevealed) emit('confirm', props.playerId)
}
</script>

<template>
  <div
    :class="['card', { dead: isDead, revealed: isRevealed, confirmed }]"
    @touchstart="onTouchStart"
    @touchmove="onTouchMove"
    @touchend="onTouchEnd"
    @mousedown="onMouseDown"
    @mousemove="onMouseMove"
    @mouseup="onMouseUp"
    @click="onClick"
  >
    <img :src="backImageUrl()" alt="back" class="back-img" />
    <div class="overlay">
      <span class="player-num">玩家 {{ playerId }}</span>
      <svg v-if="!isRevealed" class="hint swipe" viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="rgba(255,255,255,.95)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M5 12h14M12 5l7 7-7 7" />
      </svg>
      <svg v-else-if="!confirmed" class="hint tap" viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="rgba(255,255,255,.95)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 5v14M5 12l7-7 7 7" />
      </svg>
    </div>
  </div>
</template>

<style scoped>
.card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background: #000;
}
.card.dead { filter: grayscale(100%); }
.card.confirmed { opacity: 0.55; }

.back-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.75);
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.player-num { font-size: 2rem; line-height: 1; }
.hint.swipe { animation: swipe-move 1.5s ease-in-out infinite; }
.hint.tap { animation: tap-pulse 1.5s ease-in-out infinite; }

@keyframes swipe-move {
  0%, 100% { transform: translateX(-14px); opacity: 0.8; }
  50%      { transform: translateX(14px); opacity: 1; }
}
@keyframes tap-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.15); opacity: 1; }
}
</style>
