<script setup lang="ts">
import { computed } from 'vue';
import { useVotingStore, TICKET_INFO } from '../stores/voting';
import { TICKET_TYPES, type TicketType } from '@gala/shared/constants';

const emit = defineEmits<{
  select: [ticketType: TicketType];
}>();

const votingStore = useVotingStore();

const medals = computed(() => {
  return TICKET_TYPES.map((type, index) => ({
    type,
    ...TICKET_INFO[type],
    isUsed: votingStore.tickets[type] !== null,
    isSelected: votingStore.selectedStamp === type,
    // Fan layout angle
    angle: (index - 3) * 8,
  }));
});

function handleMedalClick(type: TicketType) {
  if (votingStore.tickets[type] !== null) return;

  if (votingStore.selectedStamp === type) {
    votingStore.deselectStamp();
  } else {
    votingStore.selectStamp(type);
    emit('select', type);
  }
}
</script>

<template>
  <div class="voting-dock">
    <div class="dock-tray">
      <div
        v-for="medal in medals"
        :key="medal.type"
        class="medal-slot"
        :class="{
          'is-used': medal.isUsed,
          'is-selected': medal.isSelected,
        }"
        :style="{ '--angle': `${medal.angle}deg` }"
        @click="handleMedalClick(medal.type)"
      >
        <div class="medal-icon">
          <div class="medal-face">
            <span class="medal-emoji">🏅</span>
          </div>
          <span class="medal-label">{{ medal.name.slice(2) }}</span>
        </div>
      </div>
    </div>

    <div v-if="votingStore.isStampSelected" class="dock-hint">
      <span class="hint-arrow">👆</span>
      <span>选择节目出牌</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '../assets/styles/variables.scss' as *;

.voting-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: $z-index-fixed;
  padding-bottom: env(safe-area-inset-bottom);
}

.dock-tray {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: $spacing-sm $spacing-md $spacing-md;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.95) 0%,
    rgba(26, 26, 26, 0.8) 70%,
    transparent 100%
  );
}

.medal-slot {
  position: relative;
  transform: rotate(var(--angle)) translateY(0);
  transform-origin: bottom center;
  transition: transform 0.2s ease;
  cursor: pointer;
  margin: 0 -4px;

  &:active {
    transform: rotate(var(--angle)) translateY(-4px) scale(0.95);
  }

  &.is-used {
    opacity: 0.3;
    filter: grayscale(1);
    pointer-events: none;
  }

  &.is-selected {
    transform: rotate(0deg) translateY(-20px) scale(1.15);
    z-index: 10;

    .medal-icon {
      filter: drop-shadow(0 8px 16px rgba($color-gold, 0.6));
    }
  }
}

.medal-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $spacing-xs;
  transition: filter 0.2s ease;
}

.medal-face {
  width: 48px;
  height: 48px;
  background: linear-gradient(
    135deg,
    $color-gold 0%,
    #ffd700 50%,
    $color-gold 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.medal-emoji {
  font-size: 24px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.medal-label {
  font-size: $font-size-xs;
  color: $color-gold;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.dock-hint {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: $spacing-xs;
  background: rgba($color-gold, 0.9);
  color: $color-bg-primary;
  padding: $spacing-xs $spacing-md;
  border-radius: $radius-full;
  font-size: $font-size-sm;
  font-weight: 600;
  animation: hint-bounce 1s ease-in-out infinite;
}

.hint-arrow {
  animation: arrow-bounce 0.6s ease-in-out infinite;
}

@keyframes hint-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}

@keyframes arrow-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
</style>
