<template>
  <template v-if="state.photoFrameMode">
    <img id="photo-frame-bg" :src="state.photo?.src" alt="" :style="{ opacity: visible ? 1 : 0 }" />
    <img id="photo-frame-img" :src="state.photo?.src" alt="" :style="{ opacity: visible ? 1 : 0 }" />
    <div class="photo-frame-clock">{{ timeStr }}</div>
    <div class="photo-frame-date">{{ dateStr }}</div>
  </template>
</template>

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

const { timeStr, dateStr } = useTime()
const visible = ref(false)

watch(() => state.photo?.src, () => {
  if (!state.photoFrameMode || !state.photo?.src) return
  visible.value = false
  setTimeout(() => { visible.value = true }, 400)
})
</script>

<style scoped>
#photo-frame-bg, #photo-frame-img {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5; object-fit: contain;
  transition: opacity 0.8s ease;
}
#photo-frame-bg {
  z-index: 4; object-fit: cover;
  filter: blur(30px) brightness(0.5);
  transform: scale(1.1);
}
.photo-frame-clock {
  position: fixed; top: 28px; right: 36px; z-index: 10;
  font-family: -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 52px; font-weight: 200; letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.9);
  pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}
.photo-frame-date {
  position: fixed; top: 86px; right: 38px; z-index: 10;
  font-family: -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 15px; font-weight: 400;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 0 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.8);
  pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}
</style>
