<template>
  <div>
    <template v-if="needPayChannel">
      <template v-if="isMengyaPendingPay">
        <p class="tag mb-3 text-[14px] sm:text-[15px] text-apptext max-w-[40rem] mx-auto sm:mx-auto text-left sm:text-center">
          请扫下方收款码支付，金额须与顶栏<strong>应付金额</strong>一致；到账后将自动完成。
        </p>
      </template>
      <template v-else>
        <p class="text-apptext text-base sm:text-lg font-bold mb-2 text-left sm:text-center">
          应付金额
          <span class="text-accent2">¥ {{ paidAmountSnapshot.toFixed(2) }}</span>
        </p>
      </template>
      <div
        v-if="showPaymentCountdown"
        class="rounded-2xl border-2 px-4 py-4 sm:px-6 sm:py-5 mb-4 text-center shadow-[0_8px_30px_rgba(21,101,192,0.12)] max-w-md mx-auto"
        :class="paymentCountdownUrgent
          ? 'border-[#e53935] bg-gradient-to-br from-[#fff5f5] to-[#ffebee]'
          : 'border-[#d4a574] bg-gradient-to-br from-white to-[#fff4ec]'"
        role="timer"
        :aria-live="paymentCountdownUrgent ? 'assertive' : 'polite'"
      >
        <p class="text-[12px] sm:text-[13px] font-bold uppercase tracking-[0.2em] text-apptext/85 mb-2 m-0">支付剩余时间</p>
        <p
          class="font-mono font-black tabular-nums leading-none tracking-tight select-none"
          :class="paymentCountdownUrgent
            ? 'text-[clamp(2.25rem,10vw,3.5rem)] text-[#b71c1c]'
            : 'text-[clamp(2rem,8vw,3rem)] text-[#7a3d2e]'"
        >{{ paymentCountdownDisplay }}</p>
        <p v-if="paymentCountdownExpired" class="mt-3 mb-0 text-[14px] sm:text-[15px] font-bold text-[#c62828]">支付窗口已结束，订单即将或已自动取消</p>
      </div>

      <div v-if="isMengyaPendingPay && mengyaQrUrls.length" class="flex flex-col gap-2 w-full max-w-md mx-auto mb-4 sm:max-w-none">
        <div
          v-if="mengyaQrUrls.length > 1"
          class="flex md:hidden flex-wrap gap-2 justify-start sm:justify-center"
          role="tablist"
          aria-label="商家收款渠道"
        >
          <button
            v-for="(url, idx) in mengyaQrUrls"
            :key="idx"
            type="button"
            role="tab"
            class="px-4 py-2 rounded-xl border text-[14px] font-semibold touch-manipulation"
            :class="mengyaQrIndex === idx
              ? 'border-accent2 bg-white/90 text-accent2 shadow-sm ring-2 ring-accent2/25'
              : 'border-white/45 bg-white/55 text-apptext'"
            :aria-selected="mengyaQrIndex === idx"
            @click="mengyaQrIndex = idx"
          >
            渠道 {{ idx + 1 }}
          </button>
        </div>
        <div
          class="flex justify-center my-3"
          :class="mengyaQrUrls.length > 1 ? 'md:hidden' : ''"
        >
          <img
            :src="mengyaQrUrls[mengyaQrIndex]"
            :alt="'商家收款码 ' + (mengyaQrIndex + 1)"
            class="max-w-[min(300px,88vw)] w-full rounded-xl border border-white/40 shadow-[0_8px_28px_rgba(33,33,40,0.12)] bg-white/50"
          />
        </div>
        <div
          v-if="mengyaQrUrls.length > 1"
          class="hidden md:flex md:flex-wrap md:justify-center md:gap-5 md:my-5"
          aria-label="商家收款渠道（全部）"
        >
          <div
            v-for="(url, idx) in mengyaQrUrls"
            :key="`desktop-${idx}`"
            class="flex flex-col items-center w-[260px] rounded-2xl overflow-hidden border border-white/60 bg-white/92 shadow-[0_6px_28px_rgba(33,33,40,0.13)]"
          >
            <div class="w-full py-2.5 px-4 text-center border-b border-black/[0.06] bg-white/60">
              <p class="text-[11px] font-bold uppercase tracking-[0.22em] text-apptext/50 m-0">渠道 {{ idx + 1 }}</p>
            </div>
            <div class="w-full p-3">
              <img
                :src="url"
                :alt="'商家收款码 ' + (idx + 1)"
                class="w-full rounded-xl"
              />
            </div>
          </div>
        </div>
      </div>

      <template v-if="orderResultQrUrl && !isMengyaPendingPay">
        <p class="tag mb-3 opacity-95">
          <span class="sr-only">系统订单凭证</span>
          <button
            type="button"
            class="text-accent2 underline-offset-2 hover:underline bg-transparent border-none cursor-pointer p-0 font-inherit text-[13px]"
            @click="showOrderTokenQr = !showOrderTokenQr"
          >{{ showOrderTokenQr ? '收起' : '展开' }}订单系统二维码（可选）</button>
        </p>
        <div v-show="showOrderTokenQr" class="flex justify-center mb-2">
          <img
            :src="orderResultQrUrl"
            alt="订单凭证二维码"
            class="max-w-[160px] w-full rounded-lg border border-white/35 opacity-90"
          />
        </div>
      </template>
    </template>

    <template v-else>
      <p class="tag mb-2">免费订单已生成，可保存下方凭证</p>
      <img
        v-if="orderResultQrUrl"
        :src="orderResultQrUrl"
        alt="订单凭证"
        class="max-w-[320px] mx-auto w-full rounded-lg border border-white/35 my-3"
      />
    </template>

    <div class="flex flex-col items-stretch gap-2.5 my-4 max-w-xl mx-auto w-full">
      <div class="flex flex-row flex-wrap justify-center gap-3 w-full">
        <button
          type="button"
          class="primary flex-1 min-w-[10rem] px-5 py-2 sm:max-w-[min(100%,240px)]"
          :disabled="confirming || cancelling"
          @click="emit('confirm')"
        >
          {{ confirming ? '确认中...' : confirmButtonLabel }}
        </button>
        <button
          v-if="isMengyaPendingPay"
          type="button"
          class="primary flex-1 min-w-[10rem] px-5 py-2 sm:max-w-[min(100%,240px)]"
          :disabled="cancelling || confirming"
          @click="emit('cancel')"
        >
          {{ cancelling ? '取消中...' : '取消订单' }}
        </button>
      </div>
      <p class="tag text-center text-[13px] sm:text-[15px]">{{ confirmHint }}</p>
    </div>
    <p class="text-[#d64848] text-[15px]" v-if="confirmError">{{ confirmError }}</p>
  </div>
</template>

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

const props = defineProps({
  orderResult: { type: Object, required: true },
  needPayChannel: { type: Boolean, required: true },
  isMengyaPendingPay: { type: Boolean, required: true },
  paidAmountSnapshot: { type: Number, required: true },
  mengyaQrUrls: { type: Array, default: () => [] },
  mengyaQrIndex: { type: Number, default: 0 },
  showPaymentCountdown: { type: Boolean, default: false },
  paymentCountdownUrgent: { type: Boolean, default: false },
  paymentCountdownDisplay: { type: String, default: '--:--' },
  paymentCountdownExpired: { type: Boolean, default: false },
  /** v-model:showOrderTokenQr — optional system QR when not mengya-pending */
  showOrderTokenQr: { type: Boolean, default: false },
  confirming: { type: Boolean, default: false },
  cancelling: { type: Boolean, default: false },
  confirmButtonLabel: { type: String, required: true },
  confirmHint: { type: String, required: true },
  confirmError: { type: String, default: '' }
})

const emit = defineEmits(['confirm', 'cancel', 'update:mengyaQrIndex', 'update:showOrderTokenQr'])

const orderResultQrUrl = computed(() => props.orderResult?.qrCodeUrl || '')

const showOrderTokenQr = computed({
  get: () => props.showOrderTokenQr,
  set: (v) => emit('update:showOrderTokenQr', v)
})

const mengyaQrIndex = computed({
  get: () => props.mengyaQrIndex,
  set: (v) => emit('update:mengyaQrIndex', v)
})
</script>
