import { useMediaControls } from '@vueuse/core'

// Derselbe localStorage-Key wie Plyr im VideoPlayer — so teilen sich Video- und
// Audio-Player eine gemerkte Lautstärke (in beide Richtungen)
const STORAGE_KEY = '4brett-player'

interface StoredPrefs {
  volume?: number
  muted?: boolean
}

function readPrefs(): StoredPrefs {
  try {
    const raw = localStorage.getItem(STORAGE_KEY)
    return raw ? JSON.parse(raw) as StoredPrefs : {}
  }
  catch {
    return {}
  }
}

export function useMediaVolume(target: Parameters<typeof useMediaControls>[0]) {
  const controls = useMediaControls(target)

  if (import.meta.client) {
    const applyStored = () => {
      const prefs = readPrefs()
      if (typeof prefs.volume === 'number' && controls.volume.value !== prefs.volume) {
        controls.volume.value = prefs.volume
      }
      if (typeof prefs.muted === 'boolean' && controls.muted.value !== prefs.muted) {
        controls.muted.value = prefs.muted
      }
    }

    watch(toRef(target), (el) => {
      if (el) applyStored()
    }, { immediate: true })

    watch([controls.volume, controls.muted], ([v, m]) => {
      const prefs = readPrefs()
      if (prefs.volume === v && prefs.muted === m) return
      try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify({ ...prefs, volume: v, muted: m }))
      }
      catch { /* Storage deaktiviert/voll */ }
    })
  }

  return controls
}