<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

import TencentAuthCard from '@/components/tencent/TencentAuthCard.vue'
import TencentRedeemPanel from '@/components/tencent/TencentRedeemPanel.vue'
import TencentResultPanel from '@/components/tencent/TencentResultPanel.vue'
import { useClaimPage } from '@/composables/useClaimPage'

const route = useRoute()
const token = computed(() => String(route.params.token || '').trim())

const {
  detailLoading,
  roleConfirmLoading,
  sessionLoading,
  redeemLoading,
  loginType,
  loginTypeLabel,
  loginTabs,
  task,
  order,
  orderItem,
  hasSession,
  qrImage,
  qrFigureStyle,
  qrPreviewWidth,
  statusLabel,
  session,
  sessionNotice,
  roleFacts,
  resultFacts,
  roleConfirmed,
  roleReady,
  canConfirmRole,
  canRedeem,
  redeemBlockedReason,
  redeemButtonLabel,
  initButtonLabel,
  scanInstruction,
  screenshotEmptyTitle,
  screenshotEmptyMessage,
  screenshotUrl,
  showScreenshot,
  createSessionFlow,
  reloadSessionPage,
  closeSessionFlow,
  switchLoginType,
  confirmRoleNow,
  redeemNow,
  handleQrImageLoad,
} = useClaimPage(token.value)

const qrPreviewVisible = ref(false)
const screenshotPreviewVisible = ref(false)

const currentLoginTabLabel = computed(
  () => loginTabs.find((tab) => tab.value === loginType.value)?.label ?? loginTabs[0].label,
)

const helperText = computed(() => {
  if (!task.value) {
    return '正在加载领取任务'
  }

  if (task.value.requiresSupportReview) {
    return `订单 ${order.value?.platformOrderId || '-'} · 登录后请联系人工客服继续确认和兑换`
  }

  return `订单 ${order.value?.platformOrderId || '-'} · 任务 ${task.value.taskNo}`
})
</script>

<template>
  <main class="claim-page">
    <section class="workspace">
      <div class="page-toolbar">
        <div>
          <div class="brand-chip">订单领取</div>
          <p class="helper-copy">{{ helperText }}</p>
        </div>
        <div class="toolbar-actions">
          <div class="status-badge">{{ statusLabel }}</div>
          <RouterLink class="back-link" to="/tx/browser">调试页</RouterLink>
        </div>
      </div>

      <section class="order-card">
        <div class="order-meta">
          <article>
            <span>订单号</span>
            <strong>{{ order?.platformOrderId || '-' }}</strong>
          </article>
          <article>
            <span>商品</span>
            <strong>{{ orderItem?.skuName || '-' }}</strong>
          </article>
          <article>
            <span>数量</span>
            <strong>{{ orderItem?.quantity || 0 }}</strong>
          </article>
          <article>
            <span>任务号</span>
            <strong>{{ task?.taskNo || '-' }}</strong>
          </article>
        </div>
      </section>

      <div v-if="detailLoading" class="empty-block loading-block">
        <strong>领取信息加载中</strong>
        <p>正在校验链接并同步任务状态。</p>
      </div>

      <template v-else>
        <div class="layout-grid">
          <TencentAuthCard
            :current-login-tab-label="currentLoginTabLabel"
            :has-session="hasSession"
            :init-button-label="initButtonLabel"
            :login-tabs="loginTabs"
            :login-type="loginType"
            :login-type-label="loginTypeLabel"
            :qr-figure-style="qrFigureStyle"
            :qr-image="qrImage"
            :scan-instruction="scanInstruction"
            :session-status="session?.status || ''"
            :session-id="session?.sessionId || ''"
            :session-loading="sessionLoading"
            :session-notice="sessionNotice"
            @create-session="createSessionFlow"
            @close-session="closeSessionFlow"
            @open-qr-preview="qrPreviewVisible = true"
            @qr-image-load="handleQrImageLoad"
            @reload-session="reloadSessionPage"
            @switch-login-type="switchLoginType"
          />

          <div class="control-column">
            <TencentRedeemPanel
              :can-redeem="canRedeem"
              :can-confirm-role="canConfirmRole"
              confirm-action-label="确认当前角色并继续"
              :confirm-action-loading="roleConfirmLoading"
              :confirm-action-visible="!roleConfirmed && !task?.requiresSupportReview"
              :confirm-readonly="true"
              :hide-redeem-form="true"
              :login-type-label="loginTypeLabel"
              :max-attempts="6"
              :redeem-blocked-reason="redeemBlockedReason"
              :redeem-button-label="redeemButtonLabel"
              :redeem-code="''"
              :redeem-loading="redeemLoading"
              :role-confirmed="roleConfirmed"
              :role-facts="roleFacts"
              :role-ready="roleReady"
              :status-label="statusLabel"
              @confirm-role="confirmRoleNow"
              @redeem="redeemNow"
              @update:max-attempts="() => undefined"
              @update:redeem-code="() => undefined"
              @update:role-confirmed="() => undefined"
            />
          </div>
        </div>

        <TencentResultPanel
          :result-facts="resultFacts"
          :screenshot-empty-message="screenshotEmptyMessage"
          :screenshot-empty-title="screenshotEmptyTitle"
          :screenshot-url="screenshotUrl"
          :show-screenshot="showScreenshot"
          @open-screenshot-preview="screenshotPreviewVisible = true"
        />
      </template>
    </section>

    <el-dialog
      v-model="qrPreviewVisible"
      align-center
      class="preview-dialog"
      :width="qrPreviewWidth"
    >
      <div class="qr-preview-body">
        <img
          class="preview-image qr-preview-image"
          :src="qrImage"
          :alt="`Claim ${loginTypeLabel} QR Preview`"
        />
      </div>
    </el-dialog>

    <el-dialog
      v-model="screenshotPreviewVisible"
      align-center
      class="preview-dialog"
      width="1080px"
    >
      <img class="preview-image" :src="screenshotUrl" alt="Claim Screenshot Preview" />
    </el-dialog>
  </main>
</template>

<style scoped>
.claim-page {
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(73, 136, 255, 0.12), transparent 32%),
    radial-gradient(circle at top right, rgba(87, 194, 150, 0.12), transparent 28%),
    linear-gradient(180deg, #f4f8fc 0%, #eef4fb 100%);
}

.workspace {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.page-toolbar,
.toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-chip,
.status-badge,
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(86, 108, 138, 0.12);
  color: #27405e;
  box-shadow: 0 12px 32px rgba(30, 49, 78, 0.08);
}

.brand-chip {
  font-weight: 800;
}

.status-badge {
  font-weight: 700;
}

.back-link {
  text-decoration: none;
}

.helper-copy {
  margin: 8px 0 0;
  color: #64748b;
}

.order-card {
  padding: 18px 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 22px 60px rgba(30, 41, 59, 0.08);
}

.order-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.order-meta article {
  padding: 14px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.order-meta span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #64748b;
}

.order-meta strong {
  font-size: 16px;
  color: #0f172a;
}

.layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.control-column {
  display: grid;
  gap: 18px;
}

.empty-block {
  padding: 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #475569;
}

.loading-block strong {
  display: block;
  margin-bottom: 6px;
  color: #0f172a;
}

.preview-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.preview-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.qr-preview-body {
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.qr-preview-image {
  max-width: 100%;
  max-height: min(78vh, 920px);
}

@media (max-width: 980px) {
  .claim-page {
    padding: 16px;
  }

  .page-toolbar,
  .toolbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .order-meta,
  .layout-grid {
    grid-template-columns: 1fr;
  }
}
</style>
