<script setup lang="ts">
type Props = {
  reviewCardTitle: string
  reviewReady: boolean
  resultReady: boolean
  screenshotEmptyTitle: string
  screenshotEmptyMessage: string
  screenshotUrl: string
  screenshotLoading: boolean
  copyScreenshot: () => void
  downloadScreenshot: () => void
  openPreview: () => void
}

defineProps<Props>()
</script>

<template>
  <section class="review-card">
    <div class="card-head">
      <div>
        <h2>2. {{ reviewCardTitle }}</h2>
        <p v-if="reviewReady">
          客户登录后，系统会把当前角色截图回传到这里。客服复制后可直接发给客户做二次确认。
        </p>
        <p v-else-if="resultReady">最终兑换完成后，客服可以把结果截图直接发给客户确认。</p>
        <p v-else>
          {{ screenshotEmptyMessage }}
        </p>
      </div>
      <div class="header-actions">
        <el-button :disabled="!screenshotUrl || screenshotLoading" plain @click="copyScreenshot">
          复制图片
        </el-button>
        <el-button
          :disabled="!screenshotUrl || screenshotLoading"
          plain
          @click="downloadScreenshot"
        >
          下载图片
        </el-button>
      </div>
    </div>

    <div v-if="screenshotUrl" class="review-stage">
      <button class="screenshot-button" type="button" @click="openPreview">
        <img :src="screenshotUrl" alt="manual redeem screenshot" />
      </button>
    </div>

    <div v-else class="empty-block">
      <strong>{{ screenshotEmptyTitle || '' }}</strong>
      <p>{{ screenshotEmptyMessage }}</p>
    </div>
  </section>
</template>

<style scoped>
.review-card {
  padding: 22px var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.card-head h2 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.card-head p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.header-actions {
  flex-wrap: wrap;
}

.review-stage {
  margin-top: 18px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: var(--bg-page);
}

.screenshot-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.screenshot-button img {
  display: block;
  width: 100%;
  height: auto;
}

.empty-block {
  min-height: 180px;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border-default);
  color: var(--text-secondary);
}

.empty-block strong {
  color: var(--text-primary);
  font-size: var(--text-lg);
}

.empty-block p {
  margin: var(--space-2) 0 0;
  line-height: 1.7;
}
</style>
