<script setup lang="ts">
interface Props {
  src: string
  type?: 'mp4' | 'webm'
  play?: boolean
  autoplay?: boolean
  muted?: boolean
  loop?: boolean
  playsinline?: boolean
  class?: ClassType
}

const props = withDefaults(defineProps<Props>(), {
  type: 'mp4',
  play: false,
  muted: true,
  loop: true,
  playsinline: true,
})

const videoRef = ref<HTMLVideoElement | null>(null)
let pauseTimeoutId: ReturnType<typeof setTimeout> | null = null

// autoplay prop 변경 시 재생/정지 제어
watch(
  () => props.play,
  shouldPlay => {
    if (!videoRef.value) return

    // 이전 타이머 정리
    if (pauseTimeoutId) {
      clearTimeout(pauseTimeoutId)
      pauseTimeoutId = null
    }

    if (shouldPlay) {
      videoRef.value.play().catch(err => {
        console.warn('Video play failed:', err)
      })
    } else {
      pauseTimeoutId = setTimeout(() => {
        if (videoRef.value) {
          videoRef.value.pause()
          videoRef.value.currentTime = 0
        }
        pauseTimeoutId = null
      }, 200)
    }
  }
)

onBeforeUnmount(() => {
  // 타이머 정리
  if (pauseTimeoutId) {
    clearTimeout(pauseTimeoutId)
    pauseTimeoutId = null
  }
})

// src 변경 시 비디오 다시 로드
watch(
  () => props.src,
  () => {
    if (!videoRef.value) return

    // 비디오 시간 초기화 및 새 소스 로드
    videoRef.value.currentTime = 0
    videoRef.value.load()

    // 재생 중이었다면 다시 재생
    if (props.play) {
      nextTick(() => {
        videoRef.value?.play().catch(err => {
          console.warn('Video play failed:', err)
        })
      })
    }
  }
)
</script>

<template>
  <div v-if="props.src" :class="['video-box', props.class]">
    <video
      ref="videoRef"
      :autoplay="props.autoplay"
      :muted="props.muted"
      :loop="props.loop"
      :playsinline="props.playsinline"
    >
      <source :src="props.src" :type="`video/${props.type}`" />
    </video>
  </div>
</template>

<style scoped>
.video-box {
  @apply overflow-hidden relative rounded-[4px] md:rounded-[8px]
  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:border-white after:opacity-10 after:rounded-[4px] after:md:rounded-[8px];
}
.video-box video {
  @apply absolute top-0 left-0 w-full h-full object-cover;
}
</style>
