<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

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

interface Props {
  awardName: string;
  awardIconKey: string; // Changed from awardIcon
  userName?: string;
  color?: 'red' | 'gold';
}

const props = withDefaults(defineProps<Props>(), {
  awardIconKey: 'creative',
  userName: '',
  color: 'gold', // Changed default to gold for mobile "applied" state
});

// Random imperfections for realism
const rotation = ref(0);
const inkOpacity = ref(0.9);

onMounted(() => {
  // Random rotation between -15 and +15 degrees
  rotation.value = (Math.random() - 0.5) * 30;
  // Random opacity between 0.85 and 0.95
  inkOpacity.value = 0.85 + Math.random() * 0.1;
});

const inkColor = computed(() => {
  return props.color === 'gold' ? '#F0C239' : '#C21F30';
});

const svgIcon = computed(() => GUOCHAO_ICONS[props.awardIconKey as keyof typeof GUOCHAO_ICONS] || '');

const currentDate = computed(() => {
  const now = new Date();
  return `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`;
});
</script>

<template>
  <div
    class="postmark"
    :class="[`postmark--${color}`]"
    :style="{
      '--rotation': `${rotation}deg`,
      '--ink-opacity': inkOpacity,
    }"
  >
    <!-- Simplified SVG with award name on top and nickname on bottom -->
    <svg
      viewBox="0 0 100 100"
      class="postmark-svg"
      xmlns="http://www.w3.org/2000/svg"
    >
      <!-- Double Ring Design -->
      <circle cx="50" cy="50" r="46" fill="none" :stroke="inkColor" stroke-width="2" />
      <circle cx="50" cy="50" r="40" fill="none" :stroke="inkColor" stroke-width="1.2" />

      <!-- Text paths -->
      <defs>
        <path id="path-top" d="M 22,50 A 28,28 0 1,1 78,50" />
        <path id="path-bottom" d="M 78,50 A 28,28 0 0,1 22,50" />
      </defs>

      <!-- Top Text: Award Name -->
      <text class="postmark-text top" :fill="inkColor">
        <textPath xlink:href="#path-top" startOffset="50%" text-anchor="middle">
          {{ awardName }}
        </textPath>
      </text>
      
      <!-- Middle: SVG Icon -->
      <g transform="translate(35, 35) scale(0.3)" :style="{ color: inkColor }">
        <g v-html="svgIcon"></g>
      </g>
      
      <!-- Date: slightly below center -->
      <text x="50" y="65" class="postmark-text date" text-anchor="middle" dominant-baseline="central" :fill="inkColor">
        {{ currentDate }}
      </text>
      
      <!-- Bottom Text: Nickname -->
      <text class="postmark-text bottom" :fill="inkColor">
        <textPath xlink:href="#path-bottom" startOffset="50%" text-anchor="middle">
          {{ userName || '访客' }}
        </textPath>
      </text>
    </svg>

    <!-- Grunge Texture Overlay -->
    <div class="grunge-overlay"></div>
  </div>
</template>

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

.postmark {
  position: relative;
  width: 76px;
  height: 76px;
  // Multiply blend mode for realism
  mix-blend-mode: multiply;
  animation: stamp-reveal 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards;
  transform-origin: center center;
}

.postmark-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.postmark-text {
  font-family: 'Kaiti', 'STKaiti', serif;
  font-weight: bold;
  
  &.top { font-size: 10px; letter-spacing: 1px; }
  &.date { font-size: 8px; letter-spacing: 0.5px; opacity: 0.8; }
  &.bottom { font-size: 9px; }
}

.grunge-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: 50%;
}

@keyframes stamp-reveal {
  0% {
    opacity: 0;
    transform: scale(1.6) rotate(var(--rotation));
  }
  100% {
    opacity: var(--ink-opacity);
    transform: scale(1) rotate(var(--rotation));
  }
}
</style>
