<template>
  <div class="date" v-html="dateDisplay"></div>
  <div class="time" :class="{ 'hourly-glow': glowing }">{{ timeStr }}</div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onUnmounted } from 'vue'
import { state } from '../composables/useOverlayState'
import { useTime } from '../composables/useTime'

const { timeStr, dateStr, holidayStr } = useTime()
const glowing = ref(false)
let glowTimer: number | null = null

const dateDisplay = computed(() => {
  return holidayStr.value
    ? `${dateStr.value}  <span style="opacity:0.5;font-size:12px">「${holidayStr.value}」</span>`
    : dateStr.value
})

watch(timeStr, (val) => {
  if (val.endsWith(':00:00') || val.endsWith(':00')) {
    glowing.value = false
    requestAnimationFrame(() => {
      glowing.value = true
    })
    if (glowTimer) clearTimeout(glowTimer)
    glowTimer = window.setTimeout(() => { glowing.value = false }, 6000)
  }
})

onUnmounted(() => {
  if (glowTimer) clearTimeout(glowTimer)
})
</script>

<style scoped>
.time {
  font-size: 66px;
  font-weight: 200;
  text-shadow: 0 3px 28px rgba(0,0,0,0.42);
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.96);
}
.time.hourly-glow {
  animation: hourlyGlow 6s ease-out forwards;
}
.date {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 8px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  letter-spacing: 0;
}
@media (max-width: 1500px) {
  .time { font-size: 64px; }
}
</style>
