<script setup lang="ts">
type FactItem = {
  label: string
  value: string
  accent?: boolean
}

const props = defineProps<{
  canRedeem: boolean
  canConfirmRole?: boolean
  confirmActionLabel?: string
  confirmActionLoading?: boolean
  confirmActionVisible?: boolean
  confirmReadonly?: boolean
  hideRedeemForm?: boolean
  loginTypeLabel: string
  maxAttempts: number
  redeemBlockedReason: string
  redeemButtonLabel: string
  redeemCode: string
  redeemLoading: boolean
  roleConfirmed: boolean
  roleFacts: FactItem[]
  roleReady: boolean
  statusLabel: string
}>()

const emit = defineEmits<{
  confirmRole: []
  redeem: []
  'update:maxAttempts': [value: number]
  'update:redeemCode': [value: string]
  'update:roleConfirmed': [value: boolean]
}>()
</script>

<template>
  <section class="panel-card">
    <div class="section-head">
      <strong>角色与兑换</strong>
    </div>

    <div class="inline-summary">
      <div class="inline-summary-item">
        <span>会话状态</span>
        <strong>{{ props.statusLabel }}</strong>
      </div>
      <div class="inline-summary-item">
        <span>登录方式</span>
        <strong>{{ props.loginTypeLabel }}</strong>
      </div>
    </div>

    <div class="fact-grid role-grid">
      <article
        v-for="fact in props.roleFacts"
        :key="fact.label"
        :class="['fact-card', { accent: fact.accent }]"
      >
        <span>{{ fact.label }}</span>
        <strong>{{ fact.value }}</strong>
      </article>
    </div>

    <div v-if="props.confirmActionVisible" class="warning-action-box">
      <div class="warning-copy">
        <strong>请先确认当前角色与大区准确无误</strong>
        <p>确认后将按当前识别到的角色继续兑换，选错角色可能导致发放错误。</p>
      </div>
      <el-button
        :disabled="!props.canConfirmRole"
        :loading="props.confirmActionLoading"
        class="warning-action-button"
        round
        size="large"
        type="danger"
        @click="emit('confirmRole')"
      >
        {{ props.confirmActionLabel || '确认当前角色' }}
      </el-button>
    </div>

    <div v-else-if="props.confirmReadonly && !props.roleConfirmed" class="confirm-box">
      当前商品需要客服复核，完成扫码登录后请联系人工继续。
    </div>

    <div v-else class="confirm-box">
      <el-checkbox
        :model-value="props.roleConfirmed"
        :disabled="props.confirmReadonly || !props.roleReady"
        @update:model-value="emit('update:roleConfirmed', Boolean($event))"
      >
        我已确认当前角色与大区无误
      </el-checkbox>
    </div>

    <el-form v-if="!props.hideRedeemForm" label-position="top" class="redeem-form">
      <el-form-item label="兑换码">
        <el-input
          :model-value="props.redeemCode"
          placeholder="请输入兑换码"
          @update:model-value="emit('update:redeemCode', String($event))"
        />
      </el-form-item>

      <div class="field-row compact">
        <el-form-item label="验证码重试次数">
          <el-input-number
            :max="12"
            :min="1"
            :model-value="props.maxAttempts"
            @update:model-value="emit('update:maxAttempts', Number($event || 1))"
          />
        </el-form-item>
      </div>
    </el-form>

    <div class="redeem-actions">
      <el-button
        :disabled="!props.canRedeem"
        :loading="props.redeemLoading"
        class="redeem-button"
        round
        size="large"
        type="success"
        @click="emit('redeem')"
      >
        {{ props.redeemButtonLabel }}
      </el-button>
    </div>

    <p class="helper-copy">
      {{ props.redeemBlockedReason || '当前状态允许直接发起兑换' }}
    </p>
  </section>
</template>

<style scoped>
.panel-card {
  height: 100%;
  padding: 22px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(86, 108, 138, 0.1);
  box-shadow: 0 22px 70px rgba(30, 49, 78, 0.08);
  backdrop-filter: blur(18px);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head strong {
  display: block;
  font-size: 16px;
  color: #22354e;
}

.inline-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.inline-summary-item {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f7f9fc;
}

.inline-summary-item span,
.fact-card span {
  display: block;
  font-size: 12px;
  color: #708096;
  letter-spacing: 0.02em;
}

.inline-summary-item strong,
.fact-card strong {
  display: block;
  margin-top: 6px;
  color: #1f324a;
  line-height: 1.5;
  word-break: break-word;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.role-grid {
  margin-top: 12px;
}

.fact-card {
  padding: 14px;
  border-radius: 14px;
  background: #f7f9fc;
}

.fact-card.accent {
  background: linear-gradient(180deg, rgba(86, 143, 244, 0.14), rgba(86, 143, 244, 0.08));
}

.confirm-box {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(95, 150, 245, 0.08);
  border: 1px solid rgba(95, 150, 245, 0.14);
}

.warning-action-box {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.92), rgba(254, 242, 242, 0.96));
  border: 1px solid rgba(248, 113, 113, 0.3);
  display: grid;
  gap: 12px;
}

.warning-copy strong {
  display: block;
  color: #991b1b;
  font-size: 15px;
}

.warning-copy p {
  margin: 6px 0 0;
  color: #b91c1c;
  line-height: 1.7;
  font-size: 13px;
}

.warning-action-button {
  min-width: 220px;
  justify-self: start;
}

.redeem-form {
  margin-top: 14px;
}

.field-row.compact {
  display: grid;
  grid-template-columns: 220px;
  gap: 12px;
}

.redeem-actions {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.redeem-button {
  min-width: 220px;
}

.helper-copy {
  margin: 12px 0 0;
  color: #64748b;
  line-height: 1.7;
}

@media (max-width: 1140px) {
  .inline-summary,
  .fact-grid,
  .role-grid,
  .field-row.compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .panel-card {
    padding: 18px;
  }
}
</style>
