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

const { t } = useI18n()
const store = useGameStore()

const props = defineProps<{
  canSkip: boolean
  currentSpeed: number
  visible: boolean
  showQuality: boolean
  hide: boolean
}>()

const emit = defineEmits<{
  skip: []
  speedChange: [rate: number]
}>()

const speedLabel = ref('')
const showSpeedMenu = ref(false)
const speedOptions = [1, 2, 4]

function updateLabel(rate: number) {
  speedLabel.value = rate + 'x'
}

function selectSpeed(rate: number) {
  updateLabel(rate)
  showSpeedMenu.value = false
  emit('speedChange', rate)
}

function onDocClick(e: MouseEvent) {
  const target = e.target as HTMLElement
  if (!target.closest('.speed-wrapper')) {
    showSpeedMenu.value = false
  }
}

watch(() => props.currentSpeed, (v) => updateLabel(v))
onMounted(() => {
  updateLabel(props.currentSpeed)
  document.addEventListener('click', onDocClick)
})
onUnmounted(() => document.removeEventListener('click', onDocClick))
</script>

<template>
  <div class="bottom-bar left" :class="{ hidden: !visible }" v-if="!hide">
    <button v-if="canSkip" class="bb-btn skip-btn" @click="emit('skip')">{{ t('ui.skip') }}</button>

    <div class="speed-wrapper">
      <button class="bb-btn" @click.stop="showSpeedMenu = !showSpeedMenu">
        {{ speedLabel }} ▾
      </button>
      <Transition name="speed-drop">
        <div v-if="showSpeedMenu" class="speed-menu">
          <button
            v-for="rate in speedOptions"
            :key="rate"
            class="speed-option"
            :class="{ active: props.currentSpeed === rate }"
            @click.stop="selectSpeed(rate)"
          >{{ rate }}x</button>
        </div>
      </Transition>
    </div>
  </div>

  <div v-if="showQuality && !hide" class="bottom-bar right" :class="{ hidden: !visible }">
    <select class="bb-select" :value="store.preferredQuality" @change="store.setPreferredQuality(($event.target as HTMLSelectElement).value)">
      <option value="">自动</option>
      <option value="超清 (1080P)">超清 (1080P)</option>
      <option value="高清 (720P)">高清 (720P)</option>
      <option value="标清 (480P)">标清 (480P)</option>
    </select>
  </div>
</template>

<style scoped>
.bottom-bar {
  position: absolute;
  bottom: 20px;
  z-index: 20;
  display: flex;
  gap: 6px;
  transition: opacity 0.3s ease;
}

.bottom-bar.left {
  left: 20px;
}

.bottom-bar.right {
  right: 20px;
}

.bottom-bar.hidden {
  opacity: 0;
  pointer-events: none;
}

.bb-btn {
  padding: 6px 14px;
  font-size: 12px;
  color: #ccc;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.bb-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

.skip-btn {
  color: #ff9800;
  border-color: rgba(255, 152, 0, 0.3);
}

.skip-btn:hover {
  background: rgba(255, 152, 0, 0.15);
}

.speed-wrapper {
  position: relative;
}

.speed-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 30, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}

.speed-option {
  padding: 6px 16px;
  font-size: 12px;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.speed-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ddd;
}

.speed-option.active {
  color: #c9a84c;
}

.bb-select {
  padding: 6px 10px;
  font-size: 12px;
  color: #ccc;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}

.speed-drop-enter-active,
.speed-drop-leave-active {
  transition: all 0.15s ease;
}

.speed-drop-enter-from,
.speed-drop-leave-to {
  opacity: 0;
  transform: translateY(4px);
}
</style>
