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

import { GUOCHAO_ICONS } from '../utils/svgIcons';

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,
    svg: GUOCHAO_ICONS[type as keyof typeof GUOCHAO_ICONS],
  }));
});

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">
            <div class="medal-svg-wrapper" v-html="medal.svg"></div>
          </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-md $spacing-md $spacing-lg;
  // Red Glassmorphism
  background: $color-surface-glass;
  backdrop-filter: $backdrop-blur;
  -webkit-backdrop-filter: $backdrop-blur;
  border-top: 1px solid rgba($color-gold, 0.3);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
  border-radius: $radius-xl $radius-xl 0 0;
}

.medal-slot {
  position: relative;
  transform: rotate(var(--angle)) translateY(0);
  transform-origin: bottom center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  margin: 0 -2px;

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

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

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

    .medal-face {
      background: linear-gradient(135deg, $color-gold 0%, #fff 50%, $color-gold 100%);
      color: $color-primary;
      box-shadow: 
        0 8px 24px rgba($color-gold, 0.6),
        0 0 0 2px rgba($color-gold, 0.4);
      animation: selected-glow 1.5s ease-in-out infinite;
    }
  }
}

.medal-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $spacing-sm;
}

.medal-face {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, $color-primary-dark 0%, $color-primary 50%, $color-primary-dark 100%);
  color: $color-gold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba($color-gold, 0.4);
  transition: all 0.3s ease;
}

.medal-svg-wrapper {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  :deep(svg) {
    width: 100%;
    height: 100%;
  }
}

@keyframes selected-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba($color-gold, 0.5)); }
  50% { filter: drop-shadow(0 0 15px rgba($color-gold, 0.8)); }
}

.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>
