import { SubtitleCue, SubtitleTrack } from '../types'
import { state } from '../state'
import { parseVtt } from './vtt'

const proxyUrl = (token: string) => `/watch/proxy/subtitle?token=${encodeURIComponent(token)}`

const subtitlesForMode = (): SubtitleTrack[] => {
  const src = state.modeSources[state.currentMode]
  if (!src?.subtitles) return []
  return src.subtitles
    .map(t => ({ lang: (t.lang || 'unknown').toLowerCase(), label: t.lang || 'Unknown', url: proxyUrl(t.token) }))
    .filter(t => t.url !== '')
}

const hideSubtitleText = (): void => {
  const el = state.container.querySelector('[data-subtitle-text]') as HTMLElement | null
  if (!el) return
  el.textContent = ''
  el.classList.remove('block')
  el.classList.add('hidden')
}

const loadSubtitle = async (url: string): Promise<SubtitleCue[]> => {
  try {
    const res = await fetch(url)
    if (!res.ok) return []
    return parseVtt(await res.text())
  } catch { return [] }
}

export const updateSubtitleOptions = (): void => {
  const select = state.container.querySelector('[data-subtitle-select]') as HTMLSelectElement | null
  if (!select) return
  state.currentSubtitleTracks = subtitlesForMode()
  select.innerHTML = ''

  const none = document.createElement('option')
  none.value = 'none'
  none.textContent = 'Off'
  select.appendChild(none)
  select.value = 'none'

  state.currentSubtitleTracks.forEach((t, i) => {
    const opt = document.createElement('option')
    opt.value = String(i)
    opt.textContent = t.label
    select.appendChild(opt)
  })

  const wrapper = select.parentElement
  wrapper?.classList.toggle('hidden', state.currentSubtitleTracks.length === 0)
  state.activeSubtitles = []
  hideSubtitleText()
}

export const updateSubtitleRender = (time: number): void => {
  const el = state.container.querySelector('[data-subtitle-text]') as HTMLElement | null
  if (!el) return
  if (!state.activeSubtitles.length) { hideSubtitleText(); return }

  const cue = state.activeSubtitles.find(c => time >= c.start && time <= c.end)
  if (!cue) { hideSubtitleText(); return }

  el.textContent = cue.text
  el.classList.remove('hidden')
}

export const setupSubtitles = (): void => {
  const select = state.container.querySelector('[data-subtitle-select]') as HTMLSelectElement | null
  select?.addEventListener('change', async () => {
    if (select.value === 'none') { state.activeSubtitles = []; hideSubtitleText(); return }
    const track = state.currentSubtitleTracks[Number(select.value)]
    if (!track) { state.activeSubtitles = []; return }
    state.activeSubtitles = await loadSubtitle(track.url)
  })
}