<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 isProcessing = computed(() => {
  if (!props.task) return false
  return !['completed', 'failed'].includes(props.task.status)
})

const canExport = computed(() => {
  return props.task?.status === 'completed' && (props.task.segments?.length ?? 0) > 0
})

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 ?? $t('editor.title') }}</strong>
        <p class="panel-subtitle">
          {{ task ? $t('editor.segments', { count: segments.length }) : $t('editor.selectTask') }}
        </p>
      </div>
      <div v-if="task" class="export-actions">
        <button class="button secondary small" :disabled="!canExport" @click="emit('export', 'srt')">SRT</button>
        <button class="button secondary small" :disabled="!canExport" @click="emit('export', 'vtt')">VTT</button>
        <button class="button secondary small" :disabled="!canExport" @click="emit('export', 'ass')">ASS</button>
      </div>
    </div>

    <div v-if="!task" class="empty-state">
      <p>{{ $t('editor.empty') }}</p>
      <p style="margin-top: 6px; font-size: 11px;">{{ $t('editor.emptyHint') }}</p>
    </div>

    <div v-else-if="segments.length === 0" class="empty-state">
      <template v-if="isProcessing">{{ $t('editor.processing') }}</template>
      <template v-else-if="task?.status === 'failed'">{{ $t('editor.failed') }}</template>
      <template v-else>{{ $t('editor.noSegments') }}</template>
    </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 class="segment-id">{{ segment.id }}</span>
        </div>
        <p class="source-text">{{ segment.sourceText || $t('editor.waiting') }}</p>
        <textarea
          class="editor-input"
          :value="segment.translatedText ?? ''"
          :placeholder="task.outputMode === 'translate' ? $t('editor.translation') : $t('editor.source')"
          :disabled="task.outputMode === 'source'"
          @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>{{ $t('editor.logs') }}</span>
        <span class="subtle">{{ logs.length }}</span>
        <span class="log-chevron">{{ logsExpanded ? '−' : '+' }}</span>
      </button>
      <div v-if="logsExpanded" class="log-panel">
        <div v-if="logs.length === 0" class="empty-state">
          {{ $t('editor.noLogs') }}
        </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>
