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

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

const props = withDefaults(defineProps<Props>(), {
  awardIcon: '🏅',
  userName: '',
  color: 'red',
});

// 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' ? '#D4A84B' : '#C21F30';
});

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="{
      transform: `rotate(${rotation}deg)`,
      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 (Mobile characteristic) -->
      <circle cx="50" cy="50" r="48" fill="none" :stroke="inkColor" stroke-width="2" />
      <circle cx="50" cy="50" r="42" fill="none" :stroke="inkColor" stroke-width="1" />

      <!-- Text paths consistent with Big Screen -->
      <defs>
        <path id="path-top" d="M 20,50 A 30,30 0 1,1 80,50" />
        <path id="path-bottom" d="M 80,50 A 30,30 0 0,1 20,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 Text: Date -->
      <text x="50" y="50" 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: 70px;
  height: 70px;
  // Multiply blend mode for realism
  mix-blend-mode: multiply;
  animation: stamp-reveal 0.3s ease-out 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: 11px; }
  &.date { font-size: 10px; letter-spacing: 0.5px; }
  &.bottom { font-size: 10px; }
}

.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.08'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: 50%;
}

@keyframes stamp-reveal {
  0% {
    opacity: 0;
    transform: scale(1.2) rotate(var(--rotation, 0deg));
  }
  50% {
    opacity: 1;
    transform: scale(0.95) rotate(var(--rotation, 0deg));
  }
  100% {
    opacity: var(--ink-opacity, 0.9);
    transform: scale(1) rotate(var(--rotation, 0deg));
  }
}
</style>
