<template>
  <Transition name="workbench-ai-preview-fade">
    <div
      v-if="preview"
      class="workbench-ai-file-preview-mask"
      role="presentation"
      @click.self="runtime.closeAiModeFilePreview"
    >
      <section class="workbench-ai-file-preview-dialog" role="dialog" aria-modal="true" @click.stop>
        <header class="workbench-ai-file-preview-head">
          <div>
            <span class="workbench-ai-file-preview-badge">附件预览</span>
            <h3>{{ preview.name }}</h3>
          </div>
          <button
            type="button"
            class="workbench-ai-file-preview-close"
            aria-label="关闭附件预览"
            @click="runtime.closeAiModeFilePreview"
          >
            <i class="mdi mdi-close"></i>
          </button>
        </header>

        <div class="workbench-ai-file-preview-body">
          <div class="workbench-ai-file-preview-source">
            <img
              v-if="preview.sourceKind === 'image'"
              :src="preview.sourceUrl"
              :alt="preview.name"
              class="workbench-ai-file-preview-image"
            />
            <iframe
              v-else-if="preview.sourceKind === 'pdf'"
              :src="preview.sourceUrl"
              class="workbench-ai-file-preview-frame"
              title="附件 PDF 预览"
            ></iframe>
            <div v-else-if="preview.sourceKind === 'loading'" class="workbench-ai-file-preview-state">
              <i class="mdi mdi-loading"></i>
              <span>正在加载统一预览。</span>
            </div>
            <div v-else class="workbench-ai-file-preview-state">
              <i class="mdi mdi-file-eye-outline"></i>
              <span>当前附件暂不支持直接预览。</span>
            </div>
          </div>

          <aside class="workbench-ai-file-preview-insight">
            <div class="workbench-ai-file-preview-insight-head">
              <span>识别信息</span>
              <strong>{{ preview.documentTypeLabel }}</strong>
            </div>

            <div
              class="workbench-ai-file-preview-status"
              :class="`is-${preview.recognitionStatus}`"
              :title="preview.recognitionStatusTitle"
            >
              <i v-if="preview.recognitionStatus === 'recognizing'" class="mdi mdi-loading"></i>
              <i v-else-if="preview.recognitionStatus === 'recognized'" class="mdi mdi-text-recognition"></i>
              <i v-else-if="preview.recognitionStatus === 'failed'" class="mdi mdi-alert-circle-outline"></i>
              <i v-else class="mdi mdi-file-search-outline"></i>
              <span>{{ preview.recognitionStatusLabel }}</span>
            </div>

            <section class="workbench-ai-file-preview-section">
              <span>文件信息</span>
              <dl>
                <template v-for="row in preview.fileInfoRows" :key="row.label">
                  <dt>{{ row.label }}</dt>
                  <dd>{{ row.value }}</dd>
                </template>
              </dl>
            </section>

            <section v-if="preview.ocrFields.length" class="workbench-ai-file-preview-section">
              <span>字段结果</span>
              <dl>
                <template v-for="field in preview.ocrFields" :key="`${field.label}-${field.value}`">
                  <dt>{{ field.label }}</dt>
                  <dd>{{ field.value }}</dd>
                </template>
              </dl>
            </section>

            <section v-if="preview.ocrSummary" class="workbench-ai-file-preview-section">
              <span>识别摘要</span>
              <p>{{ preview.ocrSummary }}</p>
            </section>

            <section v-if="preview.rawText" class="workbench-ai-file-preview-section">
              <span>OCR 原文</span>
              <p>{{ preview.rawText }}</p>
            </section>
          </aside>
        </div>
      </section>
    </div>
  </Transition>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  runtime: { type: Object, required: true }
})

const preview = computed(() => props.runtime.activeAiModeFilePreview || null)
</script>

<style scoped src="../../../assets/styles/components/workbench-ai-file-preview-dialog.css"></style>
