<script setup lang="ts">
import { computed } from "vue";
import { Document } from "@element-plus/icons-vue";

const props = defineProps<{
  expertProfileView: Record<string, any>;
  canReject: boolean;
  isHigherReview: boolean;
  toReviewTagType: (
    itemKey: string | string[],
  ) => "success" | "danger" | "info";
  toReviewResultText: (itemKey: string | string[]) => string;
  getFileUrl: (ossKey: unknown) => string;
  isImageAttachment: (name: unknown, ossKey: unknown) => boolean;
  isPdfAttachment: (name: unknown, ossKey: unknown) => boolean;
  openFileUrl: (ossKey: unknown) => void;
  previewOssDocument: (
    ossKey: string,
    fileNameHint?: string,
  ) => void | Promise<void>;
  handleRejectMaterialItem: (itemKey: string, itemLabel: string) => void;
}>();

const fileKey = computed(() =>
  String(props.expertProfileView?.ossKey ?? "").trim(),
);

const fileName = computed(() => {
  const name = String(props.expertProfileView?.fileName ?? "").trim();
  if (name) {
    return name;
  }
  const key = fileKey.value;
  const tail = key.split("/").pop() || key;
  return tail || "未上传文件";
});

const previewProfileFile = () => {
  if (!fileKey.value) {
    return;
  }
  if (props.isPdfAttachment(props.expertProfileView?.fileName, fileKey.value)) {
    void props.previewOssDocument(fileKey.value, fileName.value);
    return;
  }
  props.openFileUrl(fileKey.value);
};
</script>

<template>
  <section class="audit-section-card">
    <header class="audit-section-card__header">
      <div>
        <div class="audit-section-card__title">专家简介 / 串场文件</div>
        <div class="audit-section-card__subtitle">
          核对专家演讲资料、串场稿或其他现场展示文件。
        </div>
      </div>
      <div class="audit-section-card__actions">
        <el-tag
          v-if="!isHigherReview"
          size="small"
          :type="toReviewTagType(['expert_profile_file', 'profileFile'])"
        >
          {{ toReviewResultText(["expert_profile_file", "profileFile"]) }}
        </el-tag>
        <el-button
          v-if="canReject && !isHigherReview"
          size="small"
          type="danger"
          plain
          @click="
            handleRejectMaterialItem(
              'expert_profile_file',
              '专家简介/串场文件',
            )
          "
        >
          不通过
        </el-button>
      </div>
    </header>

    <div class="audit-profile-body">
      <div class="audit-profile-preview">
        <div v-if="!fileKey" class="audit-profile-empty">未上传文件</div>
        <el-image
          v-else-if="
            isImageAttachment(expertProfileView.fileName, fileKey) &&
            getFileUrl(fileKey)
          "
          :src="getFileUrl(fileKey)"
          fit="cover"
          :preview-src-list="[getFileUrl(fileKey)]"
          :preview-teleported="true"
          class="audit-profile-image"
        />
        <button
          v-else-if="isPdfAttachment(expertProfileView.fileName, fileKey)"
          class="audit-profile-pdf"
          type="button"
          :title="fileName"
          @click="previewProfileFile"
        >
          <el-icon class="audit-profile-pdf__icon"><Document /></el-icon>
          <span class="audit-profile-pdf__label">PDF</span>
        </button>
        <div v-else class="audit-profile-file">FILE</div>
      </div>

      <div class="audit-profile-info">
        <div class="audit-profile-info__name" :title="fileName">
          {{ fileName }}
        </div>
        <div class="audit-profile-info__hint">
          支持 PDF、PPT、PPTX，审核端可直接查看已上传文件。
        </div>
        <div class="audit-profile-info__actions">
          <el-button
            size="small"
            type="primary"
            :disabled="!fileKey"
            @click="previewProfileFile"
          >
            查看文件
          </el-button>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.audit-section-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.audit-section-card__header {
  padding: 18px 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.audit-section-card__title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.audit-section-card__subtitle {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}

.audit-section-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audit-profile-body {
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.audit-profile-preview {
  min-height: 220px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.audit-profile-image {
  width: 100%;
  height: 220px;
  display: block;
}

.audit-profile-empty,
.audit-profile-file {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 14px;
}

.audit-profile-pdf {
  width: 100%;
  height: 220px;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #475569;
  cursor: pointer;
}

.audit-profile-pdf__icon {
  font-size: 36px;
}

.audit-profile-pdf__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.audit-profile-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.audit-profile-info__name {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: #1e293b;
  word-break: break-word;
}

.audit-profile-info__hint {
  font-size: 14px;
  line-height: 1.7;
  color: #64748b;
}

.audit-profile-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 900px) {
  .audit-profile-body {
    grid-template-columns: 1fr;
  }
}
</style>
