<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useGameStore } from '@/stores/gameStore'

interface SubCue {
  start: number
  end: number
  text: string
}

const props = defineProps<{
  currentTime: number
  subtitleUrl: string | null
  subtitles?: Record<string, string> | null
  lang?: string
}>()

const store = useGameStore()
const cues = ref<SubCue[]>([])
const currentText = ref('')
const loadedUrl = ref('')

const effectiveUrl = computed(() => {
  if (props.lang && props.subtitles?.[props.lang]) return props.subtitles[props.lang]
  return props.subtitleUrl
})

watch(effectiveUrl, async (url) => {
  if (!url) {
    cues.value = []
    loadedUrl.value = ''
    return
  }
  loadedUrl.value = url
  try {
    const resp = await fetch(url)
    const text = await resp.text()
    cues.value = parseVTT(text)
  } catch {
    cues.value = []
  }
}, { immediate: true })

watch(() => props.currentTime, (t) => {
  if (cues.value.length === 0) {
    currentText.value = ''
    return
  }
  const active = cues.value.find((c) => t >= c.start && t <= c.end)
  currentText.value = active?.text ?? ''
})

function parseVTT(raw: string): SubCue[] {
  const result: SubCue[] = []
  const lines = raw.split(/\r?\n/)
  let i = 0

  while (i < lines.length && !lines[i].includes('-->')) {
    i++
  }

  for (; i < lines.length; i++) {
    const line = lines[i].trim()
    const timeMatch = line.match(
      /(\d{1,2}:)?(\d{1,2}:)?(\d{1,2}[.,]\d{1,3})\s*-->\s*(\d{1,2}:)?(\d{1,2}:)?(\d{1,2}[.,]\d{1,3})/
    )
    if (!timeMatch) continue

    const start = vttTimeToSeconds(timeMatch[0].split('-->')[0].trim())
    const end = vttTimeToSeconds(timeMatch[0].split('-->')[1].trim())

    let text = ''
    i++
    while (i < lines.length && lines[i].trim() !== '') {
      text += (text ? '\n' : '') + lines[i].trim()
      i++
    }

    if (text) {
      result.push({ start, end, text })
    }
  }

  return result
}

function vttTimeToSeconds(ts: string): number {
  const parts = ts.replace(',', '.').split(':')
  if (parts.length === 3) {
    return parseFloat(parts[0]) * 3600 + parseFloat(parts[1]) * 60 + parseFloat(parts[2])
  }
  if (parts.length === 2) {
    return parseFloat(parts[0]) * 60 + parseFloat(parts[1])
  }
  return parseFloat(parts[0])
}
</script>

<template>
  <div class="subtitles" v-if="currentText">
    <div
      class="sub-text"
      :style="{
        fontSize: store.subFontSize + 'px',
        background: `rgba(0, 0, 0, ${store.subBgAlpha})`,
      }"
    >{{ currentText }}</div>
  </div>
</template>

<style scoped>
.subtitles {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.sub-text {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 20px;
  padding: 8px 20px;
  border-radius: 4px;
  max-width: 80%;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: pre-line;
}
</style>
