<template>
  <Transition name="player-fade">
    <div v-if="isOpen" class="video-player-overlay" ref="playerOverlay">
      <div class="video-player-container" @mousemove="showControls" @mouseleave="hideControlsDelayed">
        <!-- Close Button -->
        <button @click="closePlayer" class="close-button">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>

        <!-- ── YouTube / Partner Embed ── -->
        <template v-if="embedUrl">
          <div class="video-area iframe-area">
            <iframe
              :src="embedUrl"
              class="w-full h-full"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen
            ></iframe>
          </div>

          <!-- Minimal info bar -->
          <div class="stream-info-bar">
            <div class="flex items-center gap-4 text-sm">
              <span class="text-white font-medium">{{ content?.title }}</span>
              <span v-if="content?.releaseYear" class="text-white/50">{{ content.releaseYear }}</span>
              <span v-if="content?.duration" class="text-white/50">{{ content.duration }} min</span>
            </div>
            <a
              :href="content?.streamingUrl?.replace('/embed/', '/watch?v=') ?? '#'"
              target="_blank"
              rel="noopener noreferrer"
              class="yt-link"
            >
              Open on YouTube
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
              </svg>
            </a>
          </div>
        </template>

        <!-- ── HLS Video Player ── -->
        <template v-else>
          <!-- Loading state -->
          <div v-if="isLoadingStream" class="video-area">
            <div class="flex flex-col items-center justify-center gap-4">
              <div class="spinner"></div>
              <span class="text-white/60 text-sm">Loading stream...</span>
            </div>
          </div>

          <!-- Error state -->
          <div v-else-if="streamError" class="video-area">
            <div class="flex flex-col items-center justify-center gap-4 text-center px-8">
              <svg class="w-12 h-12 text-red-400/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
              </svg>
              <p class="text-white/70 text-sm max-w-sm">{{ streamError }}</p>
              <button @click="fetchStream" class="text-sm text-orange-400 hover:text-orange-300 transition-colors">
                Try again
              </button>
            </div>
          </div>

          <!-- Video element -->
          <div v-else class="video-area" @click="togglePlay">
            <video
              ref="videoEl"
              class="w-full h-full"
              playsinline
              @timeupdate="onTimeUpdate"
              @durationchange="onDurationChange"
              @play="isPlaying = true"
              @pause="isPlaying = false"
              @ended="isPlaying = false"
              @waiting="isBuffering = true"
              @canplay="isBuffering = false"
              @volumechange="onVolumeChange"
            ></video>

            <!-- Buffering spinner -->
            <div v-if="isBuffering && isPlaying" class="video-overlay pointer-events-none">
              <div class="spinner"></div>
            </div>

            <!-- Large centre play button (visible when paused + controls shown) -->
            <Transition name="fade">
              <div v-if="!isPlaying && controlsVisible" class="video-overlay">
                <button class="play-button" @click.stop="togglePlay">
                  <svg class="w-20 h-20" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z" />
                  </svg>
                </button>
              </div>
            </Transition>
          </div>

          <!-- Video Controls -->
          <Transition name="controls-slide">
            <div v-show="controlsVisible || !isPlaying" class="video-controls" @click.stop>
              <!-- Progress Bar -->
              <div class="progress-container">
                <div
                  class="progress-bar"
                  ref="progressBarEl"
                  @click="seekTo"
                  @mousedown="startSeeking"
                >
                  <div class="progress-buffered" :style="{ width: `${buffered}%` }"></div>
                  <div class="progress-filled" :style="{ width: `${progress}%` }"></div>
                  <div class="progress-handle" :style="{ left: `${progress}%` }"></div>
                </div>
                <div class="time-display">
                  <span>{{ formatTime(currentTime) }}</span>
                  <span class="text-white/60">/</span>
                  <span class="text-white/60">{{ formatTime(duration) }}</span>
                </div>
              </div>

              <!-- Control Buttons -->
              <div class="control-buttons">
                <!-- Left Side -->
                <div class="flex items-center gap-4">
                  <button @click.stop="togglePlay" class="control-btn">
                    <svg v-if="!isPlaying" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M8 5v14l11-7z" />
                    </svg>
                    <svg v-else class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
                    </svg>
                  </button>

                  <!-- Skip back 10s -->
                  <button @click.stop="skip(-10)" class="control-btn">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
                    </svg>
                  </button>

                  <!-- Skip forward 10s -->
                  <button @click.stop="skip(10)" class="control-btn">
                    <svg class="w-6 h-6 scale-x-[-1]" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
                    </svg>
                  </button>

                  <!-- Volume -->
                  <button @click.stop="toggleMute" class="control-btn">
                    <svg v-if="volume === 0" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
                    </svg>
                    <svg v-else class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                    </svg>
                  </button>

                  <div class="text-white font-medium text-sm hidden md:block">{{ content?.title }}</div>
                </div>

                <!-- Right Side -->
                <div class="flex items-center gap-4">
                  <!-- Playback speed -->
                  <div class="relative" ref="speedMenuRef">
                    <button @click.stop="showSpeedMenu = !showSpeedMenu" class="control-btn text-sm font-semibold">
                      {{ playbackRate === 1 ? '1x' : playbackRate + 'x' }}
                    </button>
                    <Transition name="fade">
                      <div v-if="showSpeedMenu" class="speed-menu">
                        <button
                          v-for="rate in [0.5, 0.75, 1, 1.25, 1.5, 2]"
                          :key="rate"
                          @click.stop="setPlaybackRate(rate)"
                          class="speed-option"
                          :class="{ 'speed-active': playbackRate === rate }"
                        >
                          {{ rate }}x
                        </button>
                      </div>
                    </Transition>
                  </div>

                  <button class="control-btn" @click.stop="toggleFullscreen">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </Transition>

          <!-- Content Info Panel (fades on hover) -->
          <Transition name="fade">
            <div v-if="controlsVisible && !isPlaying" class="content-info-panel">
              <h2 class="text-2xl font-bold text-white mb-2">{{ content?.title }}</h2>
              <div class="flex items-center gap-4 text-sm text-white/80 mb-4">
                <span v-if="content?.releaseYear" class="bg-white/10 px-2 py-0.5 rounded">{{ content.releaseYear }}</span>
                <span v-if="content?.rating">{{ content.rating }}</span>
                <span v-if="content?.duration">{{ content.duration }}min</span>
              </div>
              <p class="text-white/70 text-sm line-clamp-3">{{ content?.description }}</p>
            </div>
          </Transition>
        </template>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ref, computed, watch, onUnmounted, nextTick } from 'vue'
import Hls from 'hls.js'
import { indeehubApiService } from '../services/indeehub-api.service'
import type { Content } from '../types/content'

interface Props {
  isOpen: boolean
  content: Content | null
}

interface Emits {
  (e: 'close'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// ── Refs ────────────────────────────────────────────────────────────
const playerOverlay = ref<HTMLElement | null>(null)
const videoEl = ref<HTMLVideoElement | null>(null)
const progressBarEl = ref<HTMLElement | null>(null)
const speedMenuRef = ref<HTMLElement | null>(null)

// ── Playback state ──────────────────────────────────────────────────
const isPlaying = ref(false)
const isBuffering = ref(false)
const progress = ref(0)
const buffered = ref(0)
const currentTime = ref(0)
const duration = ref(0)
const volume = ref(1)
const playbackRate = ref(1)
const showSpeedMenu = ref(false)

// ── Stream loading ──────────────────────────────────────────────────
const isLoadingStream = ref(false)
const streamError = ref<string | null>(null)
const hlsStreamUrl = ref<string | null>(null)

// ── Controls visibility ─────────────────────────────────────────────
const controlsVisible = ref(true)
let controlsTimeout: ReturnType<typeof setTimeout> | null = null

// ── HLS instance ────────────────────────────────────────────────────
let hls: Hls | null = null

/**
 * Build the YouTube embed URL for partner/YouTube content.
 * Returns null when the content has no external streamingUrl.
 */
const embedUrl = computed(() => {
  if (!props.content?.streamingUrl) return null
  const base = props.content.streamingUrl
  // Only treat it as an embed if it looks like a YouTube URL
  if (!base.includes('youtube') && !base.includes('youtu.be')) return null
  const sep = base.includes('?') ? '&' : '?'
  return `${base}${sep}autoplay=1&rel=0&modestbranding=1`
})

// ── Lifecycle ───────────────────────────────────────────────────────

watch(() => props.isOpen, async (open) => {
  if (open) {
    controlsVisible.value = true
    if (!embedUrl.value) {
      await fetchStream()
    }
  } else {
    destroyHls()
    resetState()
  }
})

onUnmounted(() => {
  destroyHls()
  if (controlsTimeout) clearTimeout(controlsTimeout)
})

// ── Stream fetching ─────────────────────────────────────────────────

async function fetchStream() {
  const contentId = props.content?.contentId || props.content?.id
  if (!contentId) {
    streamError.value = 'Content ID not available.'
    return
  }

  isLoadingStream.value = true
  streamError.value = null

  try {
    // Try the backend stream endpoint first (handles DRM, presigned URLs, etc.)
    const info = await indeehubApiService.getStreamingUrl(contentId)
    const streamFile = (info as any).file || info.url
    hlsStreamUrl.value = streamFile
    await nextTick()
    initPlayer(streamFile)
  } catch (err: any) {
    console.warn('Stream API failed, trying direct HLS URL fallback:', err?.response?.status || err?.message)

    // Fallback: construct the HLS URL directly from the public S3 bucket.
    // The transcoded HLS files live in the public bucket at a predictable path.
    // This works because the user already passed the access check before the
    // player opened (rental verified in ContentDetailModal.handlePlay).
    const directUrl = buildDirectHlsUrl()
    if (directUrl) {
      console.log('Using direct HLS URL:', directUrl)
      hlsStreamUrl.value = directUrl
      await nextTick()
      initPlayer(directUrl)
    } else {
      const status = err?.response?.status
      if (status === 403) {
        streamError.value = 'You need an active subscription or rental to watch this content.'
      } else if (status === 401) {
        streamError.value = 'Please sign in to watch this content.'
      } else {
        streamError.value = 'Unable to load the stream. Please try again.'
      }
      console.error('Failed to fetch stream info:', err)
    }
  } finally {
    isLoadingStream.value = false
  }
}

/**
 * Build a direct HLS URL from the content's API data.
 * The public bucket stores transcoded HLS at:
 *   {CDN_URL}/projects/{projectId}/file/transcoded/file.m3u8
 */
function buildDirectHlsUrl(): string | null {
  const projectId = props.content?.id
  if (!projectId) return null

  // Use the CDN/storage URL configured for the self-hosted backend
  const cdnBase = import.meta.env.VITE_INDEEHUB_CDN_URL || 'http://localhost:9000/indeedhub-public'
  return `${cdnBase}/projects/${projectId}/file/transcoded/file.m3u8`
}

function initPlayer(url: string) {
  destroyHls()
  const video = videoEl.value
  if (!video) return

  const isHls = url.includes('.m3u8')

  if (isHls && Hls.isSupported()) {
    hls = new Hls({
      enableWorker: true,
      lowLatencyMode: false,
    })
    hls.loadSource(url)
    hls.attachMedia(video)
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play().catch(() => {
        // Autoplay blocked — user needs to click play
      })
    })
    hls.on(Hls.Events.ERROR, (_event, data) => {
      if (data.fatal) {
        if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
          hls?.startLoad()
        } else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
          hls?.recoverMediaError()
        } else {
          streamError.value = 'Playback error. Please try again.'
          destroyHls()
        }
      }
    })
  } else if (isHls && video.canPlayType('application/vnd.apple.mpegurl')) {
    // Safari native HLS
    video.src = url
    video.addEventListener('loadedmetadata', () => {
      video.play().catch(() => {})
    }, { once: true })
  } else if (!isHls) {
    // Direct video file (mp4, mov, webm) — use native <video>
    video.src = url
    video.addEventListener('loadedmetadata', () => {
      video.play().catch(() => {})
    }, { once: true })
    video.addEventListener('error', () => {
      streamError.value = 'Unable to play this video format. Please try again.'
    }, { once: true })
  } else {
    streamError.value = 'Your browser does not support HLS video playback.'
  }
}

function destroyHls() {
  if (hls) {
    hls.destroy()
    hls = null
  }
  if (videoEl.value) {
    videoEl.value.pause()
    videoEl.value.removeAttribute('src')
    videoEl.value.load()
  }
}

function resetState() {
  isPlaying.value = false
  isBuffering.value = false
  progress.value = 0
  buffered.value = 0
  currentTime.value = 0
  duration.value = 0
  hlsStreamUrl.value = null
  streamError.value = null
  isLoadingStream.value = false
  showSpeedMenu.value = false
  playbackRate.value = 1
}

// ── Controls ────────────────────────────────────────────────────────

function togglePlay() {
  const video = videoEl.value
  if (!video) return
  if (video.paused) {
    video.play().catch(() => {})
  } else {
    video.pause()
  }
}

function skip(seconds: number) {
  const video = videoEl.value
  if (!video) return
  video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds))
}

function toggleMute() {
  const video = videoEl.value
  if (!video) return
  if (video.volume > 0) {
    video.volume = 0
  } else {
    video.volume = 1
  }
}

function setPlaybackRate(rate: number) {
  const video = videoEl.value
  if (!video) return
  video.playbackRate = rate
  playbackRate.value = rate
  showSpeedMenu.value = false
}

function seekTo(e: MouseEvent) {
  const video = videoEl.value
  const bar = progressBarEl.value
  if (!video || !bar) return
  const rect = bar.getBoundingClientRect()
  const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
  video.currentTime = pct * video.duration
}

function startSeeking(e: MouseEvent) {
  const video = videoEl.value
  const bar = progressBarEl.value
  if (!video || !bar) return
  const wasPaused = video.paused

  const onMove = (ev: MouseEvent) => {
    const rect = bar.getBoundingClientRect()
    const pct = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width))
    video.currentTime = pct * video.duration
  }

  const onUp = () => {
    document.removeEventListener('mousemove', onMove)
    document.removeEventListener('mouseup', onUp)
    if (!wasPaused) video.play().catch(() => {})
  }

  video.pause()
  document.addEventListener('mousemove', onMove)
  document.addEventListener('mouseup', onUp)
}

function toggleFullscreen() {
  const el = playerOverlay.value
  if (!el) return
  if (document.fullscreenElement) {
    document.exitFullscreen()
  } else {
    el.requestFullscreen()
  }
}

// ── Video events ────────────────────────────────────────────────────

function onTimeUpdate() {
  const video = videoEl.value
  if (!video || !video.duration) return
  currentTime.value = video.currentTime
  progress.value = (video.currentTime / video.duration) * 100
  updateBuffered()
}

function onDurationChange() {
  if (videoEl.value) {
    duration.value = videoEl.value.duration
  }
}

function onVolumeChange() {
  if (videoEl.value) {
    volume.value = videoEl.value.volume
  }
}

function updateBuffered() {
  const video = videoEl.value
  if (!video || !video.duration) return
  if (video.buffered.length > 0) {
    buffered.value = (video.buffered.end(video.buffered.length - 1) / video.duration) * 100
  }
}

// ── Controls auto-hide ──────────────────────────────────────────────

function showControls() {
  controlsVisible.value = true
  if (controlsTimeout) clearTimeout(controlsTimeout)
  if (isPlaying.value) {
    controlsTimeout = setTimeout(() => {
      controlsVisible.value = false
    }, 3000)
  }
}

function hideControlsDelayed() {
  if (isPlaying.value) {
    controlsTimeout = setTimeout(() => {
      controlsVisible.value = false
    }, 1500)
  }
}

function closePlayer() {
  destroyHls()
  emit('close')
}

// ── Helpers ─────────────────────────────────────────────────────────

function formatTime(seconds: number): string {
  if (!seconds || !isFinite(seconds)) return '0:00'
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = Math.floor(seconds % 60)
  if (h > 0) {
    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
  }
  return `${m}:${s.toString().padStart(2, '0')}`
}
</script>

<style scoped>
.video-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
}

.video-player-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: none;
}

.video-player-container:hover {
  cursor: default;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-button:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.video-area {
  flex: 1;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-area video {
  object-fit: contain;
}

/* YouTube iframe fills the entire area */
.iframe-area iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Minimal info bar for YouTube embed mode */
.stream-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.yt-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.yt-link:hover {
  color: white;
}

/* Overlays */
.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}

.play-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.play-button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #F7931A;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Controls */
.video-controls {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  padding: 40px 24px 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.progress-container {
  margin-bottom: 12px;
}

.progress-bar {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: height 0.15s ease;
}

.progress-bar:hover {
  height: 8px;
}

.progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.progress-filled {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #F7931A;
  border-radius: 3px;
}

.progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}

.progress-bar:hover .progress-handle {
  transform: translate(-50%, -50%) scale(1);
}

.time-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: white;
  font-variant-numeric: tabular-nums;
}

.control-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.control-btn {
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

/* Speed menu */
.speed-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 80px;
}

.speed-option {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.speed-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.speed-active {
  color: #F7931A;
  font-weight: 700;
}

/* Content info panel */
.content-info-panel {
  position: absolute;
  bottom: 120px;
  left: 24px;
  max-width: 600px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  z-index: 10;
}

/* Transitions */
.player-fade-enter-active,
.player-fade-leave-active {
  transition: opacity 0.3s ease;
}

.player-fade-enter-from,
.player-fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.controls-slide-enter-active,
.controls-slide-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.controls-slide-enter-from,
.controls-slide-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.pointer-events-none {
  pointer-events: none;
}

@media (max-width: 768px) {
  .content-info-panel {
    display: none;
  }

  .stream-info-bar {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .video-controls {
    padding: 30px 16px 12px;
  }
}
</style>
