<template>
  <div v-if="playing" class="pb-bar">
    <div class="pb-file" :title="fileName">{{ fileName || '回放中' }}</div>
    <div class="pb-controls">
      <button type="button" class="pb-btn" title="-5s" @click="seekRel(-5000)">⏪</button>
      <button type="button" class="pb-btn" title="上一帧" @click="step(-1)">⏮</button>
      <button type="button" class="pb-btn pb-play" @click="togglePlay">
        {{ autoPlaying ? '⏸' : '▶' }}
      </button>
      <button type="button" class="pb-btn" title="下一帧" @click="step(1)">⏭</button>
      <button type="button" class="pb-btn" title="+5s" @click="seekRel(5000)">⏩</button>
    </div>
    <input
      class="pb-slider"
      type="range"
      min="0"
      :max="Math.max(durationMs, 1)"
      :value="elapsedMs"
      @input="onSlider"
    />
    <div class="pb-time">{{ formatMs(elapsedMs) }} / {{ formatMs(durationMs) }}</div>
    <select class="pb-speed" :value="speed" @change="onSpeed">
      <option v-for="s in speeds" :key="s" :value="s">{{ s }}x</option>
    </select>
    <button type="button" class="pb-btn pb-stop" @click="stop">停止</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { workspaceToolbarApi } from '@/api/workspaceToolbar'

const speeds = [0.25, 0.5, 1, 2, 4, 8]
const playing = ref(false)
const autoPlaying = ref(false)
const elapsedMs = ref(0)
const durationMs = ref(0)
const speed = ref(1)
const fileName = ref('')
let timer: ReturnType<typeof setInterval> | null = null
let seeking = false

function formatMs(ms: number) {
  const s = Math.floor(ms / 1000)
  const m = Math.floor(s / 60)
  const h = Math.floor(m / 60)
  const ss = String(s % 60).padStart(2, '0')
  const mm = String(m % 60).padStart(2, '0')
  return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`
}

async function refresh() {
  try {
    const st = await workspaceToolbarApi.getState()
    const rec = st.recording as typeof st.recording & {
      isAutoPlaying?: boolean
      speed?: number
      durationMs?: number
      currentPlaybackFile?: string | null
    }
    playing.value = !!rec.isPlaying
    autoPlaying.value = !!rec.isAutoPlaying
    if (!seeking) elapsedMs.value = rec.elapsedMs ?? 0
    durationMs.value = rec.durationMs ?? 0
    speed.value = rec.speed ?? 1
    fileName.value = rec.currentPlaybackFile ?? ''
  } catch {
    // 后端未就绪时静默
  }
}

async function togglePlay() {
  await workspaceToolbarApi.playPause()
  await refresh()
}

async function stop() {
  await workspaceToolbarApi.stopPlayback()
  await refresh()
}

async function step(delta: number) {
  await workspaceToolbarApi.step(delta)
  await refresh()
}

async function seekRel(deltaMs: number) {
  const target = Math.max(0, Math.min(durationMs.value, elapsedMs.value + deltaMs))
  await workspaceToolbarApi.seekElapsed(target)
  await refresh()
}

async function onSlider(e: Event) {
  const v = Number((e.target as HTMLInputElement).value)
  seeking = true
  elapsedMs.value = v
  try {
    await workspaceToolbarApi.seekElapsed(v)
  } finally {
    seeking = false
  }
}

async function onSpeed(e: Event) {
  const v = Number((e.target as HTMLSelectElement).value)
  await workspaceToolbarApi.setSpeed(v)
  await refresh()
}

onMounted(() => {
  void refresh()
  timer = setInterval(() => void refresh(), 250)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})

defineExpose({ refresh })
</script>

<style scoped>
.pb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(20, 24, 30, 0.92);
  border-top: 1px solid #2a303c;
  color: #eceff1;
  font-size: 12px;
}
.pb-file {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #90a4ae;
}
.pb-controls { display: flex; gap: 2px; }
.pb-btn {
  background: #2a303c;
  border: 1px solid #3a4150;
  color: #eceff1;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.pb-btn:hover { background: #3a4150; }
.pb-play { min-width: 36px; }
.pb-stop { color: #ef9a9a; }
.pb-slider { flex: 1; min-width: 80px; }
.pb-time { font-variant-numeric: tabular-nums; color: #b0bec5; }
.pb-speed {
  background: #2a303c;
  border: 1px solid #3a4150;
  color: #eceff1;
  border-radius: 4px;
  padding: 2px 4px;
}
</style>
