<script setup lang="ts">
import { computed } from 'vue'
import type { TranslateResult } from '../api/request'

const result = defineModel<TranslateResult>({ required: true })

defineProps<{
  adding?: boolean
  compact?: boolean
}>()

const emit = defineEmits<{
  add: []
}>()

const langLabel = computed(() =>
  result.value.source_lang === 'zh' ? '中文 → 英文' : '英文 → 中文'
)

const targetLabel = computed(() =>
  result.value.target_lang === 'en' ? '英文译文' : '中文译文'
)

const canAdd = computed(() => result.value.target_text.trim().length > 0)

function updateField<K extends keyof TranslateResult>(key: K, value: TranslateResult[K]) {
  result.value = { ...result.value, [key]: value }
}
</script>

<template>
  <div :class="['translate-result-panel', { compact }]">
    <div class="lang-dir">{{ langLabel }}</div>

    <div v-if="result.found === false" class="message warning not-found-banner">
      词典未收录，请手动填写译文后再加入单词库
    </div>

    <div class="result-row">
      <span class="label-sm">原文</span>
      <span class="source-text">{{ result.source_text }}</span>
    </div>

    <div class="result-row" :class="{ main: !compact }">
      <span class="label-sm">{{ targetLabel }}</span>
      <input
        v-if="result.found === false"
        :value="result.target_text"
        class="input edit-target"
        :placeholder="result.target_lang === 'en' ? '输入英文' : '输入中文'"
        @input="updateField('target_text', ($event.target as HTMLInputElement).value)"
      />
      <span v-else class="target-text">{{ result.target_text }}</span>
    </div>

    <template v-if="result.found === false">
      <div class="result-row">
        <span class="label-sm">音标（可选）</span>
        <input
          :value="result.phonetic ?? ''"
          class="input edit-field"
          placeholder="/音标/"
          @input="updateField('phonetic', ($event.target as HTMLInputElement).value || undefined)"
        />
      </div>
      <div class="result-row">
        <span class="label-sm">英文例句（可选）</span>
        <input
          :value="result.example_en ?? ''"
          class="input edit-field"
          placeholder="Example sentence"
          @input="updateField('example_en', ($event.target as HTMLInputElement).value || undefined)"
        />
      </div>
      <div class="result-row">
        <span class="label-sm">中文例句（可选）</span>
        <input
          :value="result.example_cn ?? ''"
          class="input edit-field"
          placeholder="例句翻译"
          @input="updateField('example_cn', ($event.target as HTMLInputElement).value || undefined)"
        />
      </div>
    </template>

    <template v-else>
      <div v-if="result.phonetic" class="result-row">
        <span class="label-sm">音标</span>
        <span>{{ result.phonetic }}</span>
      </div>
      <div v-if="result.example_en" class="result-row">
        <span class="label-sm">英文例句</span>
        <span>{{ result.example_en }}</span>
      </div>
      <div v-if="result.example_cn" class="result-row">
        <span class="label-sm">中文例句</span>
        <span>{{ result.example_cn }}</span>
      </div>
    </template>

    <button
      class="btn btn-primary add-btn"
      :disabled="adding || !canAdd"
      @click="emit('add')"
    >
      {{ adding ? '添加中...' : '加入单词库' }}
    </button>
  </div>
</template>

<style scoped>
.translate-result-panel {
  margin-top: 10px;
}

.not-found-banner {
  margin-bottom: 10px;
  font-size: 13px;
  padding: 8px 10px;
}

.lang-dir {
  font-size: 12px;
  color: var(--primary);
  margin-bottom: 10px;
}

.compact .lang-dir {
  font-size: 11px;
  margin-bottom: 6px;
}

.result-row {
  margin-bottom: 10px;
  font-size: 15px;
}

.compact .result-row {
  margin-bottom: 8px;
  font-size: 14px;
}

.result-row.main .target-text {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.compact .result-row.main .target-text,
.compact .edit-target {
  font-size: 18px;
  font-weight: 700;
}

.label-sm {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.compact .label-sm {
  font-size: 11px;
  margin-bottom: 2px;
}

.source-text,
.target-text {
  word-break: break-word;
  line-height: 1.4;
}

.edit-target,
.edit-field {
  width: 100%;
  font-family: inherit;
}

.edit-target {
  font-size: 18px;
  font-weight: 600;
  padding: 8px 10px;
}

.edit-field {
  font-size: 14px;
  padding: 7px 10px;
}

.add-btn {
  margin-top: 4px;
}
</style>
