<script setup lang="ts">
import { ref, watch, onMounted } 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
}>()

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

const speedLabel = ref('1x')

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

function toggleSpeed() {
  const next = props.currentSpeed === 1 ? 2 : props.currentSpeed === 2 ? 4 : 1
  updateLabel(next)
  emit('speedChange', next)
}

watch(() => props.currentSpeed, (v) => updateLabel(v))
onMounted(() => updateLabel(props.currentSpeed))
</script>

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

  <div v-if="showQuality" 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);
}

.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;
}
</style>
