<template>
  <div class="page-block-content">
    <div class="page-block-content__head">第 {{ page.page_idx + 1 }} 页</div>
    <article
      v-for="node in sortedNodes"
      :key="node.node_id"
      class="page-row"
      :class="{
        'page-row--page-number': isPageNumber(node),
        'page-row--selected': selectedNodeKey === node.node_id
      }"
      :data-node-id="node.node_id"
      :data-semantic-type="node.semantic_type"
      :data-node-page-idx="page.page_idx"
      @click="onNodeClick(node)"
    >
      <div class="page-row__en" :class="{ 'page-row__en--page-number': isPageNumber(node) }">
        <component :is="resolveComponent(node)" :node="node" :placeholder-src="placeholderSrc" />
      </div>
      <div class="page-row__zh" :class="{ 'page-row__zh--page-number': isPageNumber(node) }">
        <p class="page-row__zh-text" :class="{ 'page-row__zh-text--page-number': isPageNumber(node) }">{{ getZhPreview(node) }}</p>
      </div>
    </article>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import HeadingNode from './nodes/HeadingNode.vue'
import TextNode from './nodes/TextNode.vue'
import ImageNode from './nodes/ImageNode.vue'
import TableNode from './nodes/TableNode.vue'
import RichHtmlNode from './nodes/RichHtmlNode.vue'

const props = defineProps({
  page: { type: Object, default: () => ({}) },
  nodes: { type: Array, default: () => [] },
  placeholderSrc: { type: String, default: '' },
  selectedNodeKey: { type: String, default: '' }
})

const emit = defineEmits(['node-select'])

const sortedNodes = computed(() => [...props.nodes].sort((left, right) => Number(left?.layout?.reading_order || 0) - Number(right?.layout?.reading_order || 0)))

function resolveComponent(node) {
  const semanticType = String(node?.semantic_type || '')
  const payload = node?.content_payload || {}
  if (semanticType === 'heading' || payload.heading_level != null) return HeadingNode
  if (semanticType === 'table' || payload.type === 'table') return TableNode
  if (semanticType === 'image' || payload.type === 'image') return ImageNode
  if (payload.type === 'html' && payload.html) return RichHtmlNode
  return TextNode
}

function getZhPreview(node) {
  const text = String(node?.content_payload?.text || '').trim()
  if (text) return `待翻译：${text}`
  if (node?.semantic_type === 'image') return '待翻译：图片说明'
  if (node?.semantic_type === 'table') return '待翻译：表格内容'
  return '待翻译'
}

function isPageNumber(node) {
  return String(node?.semantic_type || '') === 'page_number'
}

function onNodeClick(node) {
  if (!node?.node_id) return
  emit('node-select', node)
}
</script>

<style scoped lang="scss">
.page-block-content {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.page-block-content__head {
  padding: 8px 12px;
  font-size: 13px;
  color: #667085;
  border-bottom: 1px solid #eaecf0;
}

.page-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #f2f4f7;
  cursor: pointer;
  transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.page-row:last-child { border-bottom: none; }
.page-row:hover { background: #f8fafc; }
.page-row--selected { background: #eff6ff; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12); }
.page-row--selected .page-row__zh-text { color: #1d4ed8; font-weight: 600; }
.page-row--selected .page-row__en { border-right-color: rgba(37, 99, 235, 0.18); }
.page-row--page-number { cursor: default; }
.page-row--page-number:hover { background: inherit; }
.page-row__en { padding-right: 12px; border-right: 1px solid #eaecf0; }
.page-row__zh-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.8; color: #475467; }
.page-row__en--page-number, .page-row__zh--page-number { text-align: center; }
.page-row__zh-text--page-number { text-align: center; }
@media (max-width: 1360px) {
  .page-row { grid-template-columns: 1fr; }
  .page-row__en { padding-right: 0; border-right: none; border-bottom: 1px solid #eaecf0; padding-bottom: 10px; margin-bottom: 2px; }
}
</style>
