<script setup>
import Button from '@/components/ui/Button.vue'

defineProps({
  alerts: { type: Array, default: () => [] },
  isPaused: { type: Boolean, required: true },
  progress: { type: Number, required: true },
  formattedTime: { type: String, required: true },
  speed: { type: Number, required: true },
})

const emit = defineEmits(['jump-to-alert', 'pause', 'resume', 'set-speed'])

const speedPresets = [
  { label: '1×', value: 1 },
  { label: '60×', value: 60 },
  { label: '360×', value: 360 },
  { label: 'Instant', value: 0 },
]
</script>

<template>
  <div class="flex w-full min-w-0 flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900 sm:flex-row sm:items-center">
    <Button
      variant="ghost"
      size="sm"
      :aria-label="isPaused ? 'Resume replay' : 'Pause replay'"
      @click="isPaused ? emit('resume') : emit('pause')"
    >
      <span class="sr-only">{{ isPaused ? 'Resume' : 'Pause' }}</span>
      {{ isPaused ? '▶' : '⏸' }}
    </Button>

    <div class="min-w-0 flex-1" role="progressbar" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100" :aria-label="`Replay progress ${progress}%`">
      <div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
        <div
          class="h-full rounded-full bg-blue-500 transition-all duration-300"
          :style="{ width: `${progress}%` }"
        />
      </div>
    </div>

    <span class="min-w-16 text-center text-sm font-mono text-gray-600 dark:text-gray-400">
      {{ formattedTime }}
    </span>

    <div class="flex flex-wrap gap-2">
      <button
        v-for="preset in speedPresets"
        :key="preset.value"
        type="button"
        class="min-h-11 min-w-11 rounded px-3 py-2 text-xs transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
        :class="speed === preset.value
          ? 'bg-blue-500 text-white'
          : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400'"
        :aria-pressed="speed === preset.value"
        :aria-label="`Set replay speed to ${preset.label}`"
        @click="emit('set-speed', preset.value)"
      >
        {{ preset.label }}
      </button>
    </div>

    <div v-if="alerts.length" class="border-t border-gray-200 pt-4 sm:border-t-0 sm:border-l sm:pl-4 sm:pt-0 dark:border-gray-700">
      <Button variant="ghost" size="sm" aria-label="Jump to next alert" @click="emit('jump-to-alert')">
        Next Alert &rarr;
      </Button>
    </div>
  </div>
</template>
