<script setup lang="ts">
import { computed, ref } from 'vue'
import type { SubtitleSegment, SubtitleTask } from '../lib/types'

const props = defineProps<{
  task: SubtitleTask | null
  logs: string[]
}>()

const emit = defineEmits<{
  save: [segment: SubtitleSegment]
  export: [format: 'srt' | 'vtt' | 'ass']
}>()

const segments = computed(() =>
  [...(props.task?.segments ?? [])].sort((left, right) => {
    if (left.start !== right.start) return left.start - right.start
    if (left.end !== right.end) return left.end - right.end
    return left.id.localeCompare(right.id)
  }),
)
const logsExpanded = ref(false)

function formatTime(seconds: number) {
  const ms = Math.round(seconds * 1000)
  const h = Math.floor(ms / 3600000)
  const m = Math.floor((ms % 3600000) / 60000)
  const s = Math.floor((ms % 60000) / 1000)
  const milli = ms % 1000
  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}.${String(milli).padStart(3, '0')}`
}

function updateTranslatedText(segment: SubtitleSegment, value: string) {
  emit('save', { ...segment, translatedText: value })
}
</script>

<template>
  <section class="panel workspace-panel">
    <div class="workspace-header">
      <div>
        <strong>{{ task?.fileName ?? '字幕工作区' }}</strong>
        <p class="panel-subtitle">
          {{ task ? `${segments.length} 条片段` : '选择左侧任务后开始查看' }}
        </p>
      </div>
      <div class="export-actions">
        <button class="button secondary small" @click="emit('export', 'srt')">SRT</button>
        <button class="button secondary small" @click="emit('export', 'vtt')">VTT</button>
        <button class="button secondary small" @click="emit('export', 'ass')">ASS</button>
      </div>
    </div>

    <div v-if="!task" class="empty-state">
      选择任务后显示字幕
    </div>

    <div v-else-if="segments.length === 0" class="empty-state">
      暂无字幕片段
    </div>

    <div v-else class="segment-list">
      <article
        v-for="segment in segments"
        :key="segment.id"
        class="segment-item"
      >
        <div class="task-row subtle">
          <span>{{ formatTime(segment.start) }} - {{ formatTime(segment.end) }}</span>
          <span>{{ segment.id }}</span>
        </div>
        <p class="source-text">{{ segment.sourceText || '等待识别结果...' }}</p>
        <textarea
          class="editor-input"
          :value="segment.translatedText ?? ''"
          placeholder="译文"
          @change="updateTranslatedText(segment, ($event.target as HTMLTextAreaElement).value)"
        />
      </article>
    </div>

    <div class="log-drawer" :class="{ expanded: logsExpanded }">
      <button class="log-toggle" type="button" @click="logsExpanded = !logsExpanded">
        <span>运行日志</span>
        <span class="subtle">{{ logs.length }} 条</span>
        <span>{{ logsExpanded ? '收起' : '展开' }}</span>
      </button>
      <div v-if="logsExpanded" class="log-panel">
        <div v-if="logs.length === 0" class="empty-state">
          暂无日志
        </div>
        <div v-else class="log-list">
          <pre v-for="(line, index) in logs" :key="`${index}-${line}`" class="log-line">{{ line }}</pre>
        </div>
      </div>
    </div>
  </section>
</template>
