<template>
  <div class="t4-pt7-root">
    <!-- ── 顶部：积分显示区 ── -->
    <div class="t4-pt7-points-hero">
      <p class="t4-pt7-label-top">{{ t('pay_theme4.available_points') }}</p>
      <div class="t4-pt7-points-big">
        <span class="t4-pt7-star-icon">⭐</span>
        <span class="t4-pt7-points-num">{{ totalPoint.toLocaleString() }}</span>
      </div>
      <p class="t4-pt7-label-bot">{{ t('pay_theme4.club_member_points') }}</p>
    </div>

    <div class="t4-pt7-body">
      <!-- ── 进度卡片 ── -->
      <div class="t4-pt7-progress-card">
        <div class="t4-pt7-progress-header">
          <span class="t4-pt7-progress-title">{{ t('pay_theme4.progress_to_platinum') }}</span>
          <span class="t4-pt7-progress-pct">{{ t('pay_theme4.pct_left') }}</span>
        </div>
        <div class="t4-pt7-progress-bar-bg">
          <div class="t4-pt7-progress-bar-fill"></div>
        </div>
      </div>

      <!-- ── 注意力卡片 + 倒计时 ── -->
      <div class="t4-pt7-attention-card">
        <div class="t4-pt7-attention-header">
          <span class="t4-pt7-bell">🔔</span>
          <span class="t4-pt7-attention-title">{{ t('pay_theme4.attention') }}</span>
        </div>
        <p class="t4-pt7-attention-desc">
          {{ t('pay_theme4.you_have') }} <strong>{{ totalPoint.toLocaleString() }}</strong> {{ t('pay_theme4.expiring_in') }}
        </p>

        <!-- 倒计时 -->
        <div class="t4-pt7-countdown">
          <div class="t4-pt7-cbox">
            <span class="t4-pt7-cnum">{{ countdown.days }}</span>
            <span class="t4-pt7-clabel">{{ t('pay_theme4.days') }}</span>
          </div>
          <div class="t4-pt7-cbox">
            <span class="t4-pt7-cnum">{{ countdown.hours }}</span>
            <span class="t4-pt7-clabel">{{ t('pay_theme4.hrs') }}</span>
          </div>
          <div class="t4-pt7-cbox">
            <span class="t4-pt7-cnum">{{ countdown.minutes }}</span>
            <span class="t4-pt7-clabel">{{ t('pay_theme4.min') }}</span>
          </div>
          <div class="t4-pt7-cbox">
            <span class="t4-pt7-cnum">{{ countdown.seconds }}</span>
            <span class="t4-pt7-clabel">{{ t('pay_theme4.sec') }}</span>
          </div>
        </div>

        <button class="t4-pt7-redeem-btn" @click="$emit('submit')">
          {{ t('pay_theme4.redeem_now') }} ★
        </button>
      </div>

      <!-- ── Quick Rewards ── -->
      <div class="t4-pt7-rewards-section">
        <div class="t4-pt7-rewards-header">
          <div class="t4-pt7-rewards-accent"></div>
          <span class="t4-pt7-rewards-title">{{ t('pay_theme4.quick_rewards') }}</span>
        </div>
        <div class="t4-pt7-rewards-grid">
          <div
            class="t4-pt7-reward-card"
            v-for="(reward, i) in rewards"
            :key="i"
          >
            <div class="t4-pt7-reward-icon">{{ reward.icon }}</div>
            <div class="t4-pt7-reward-name">{{ t(reward.name) }}</div>
            <div class="t4-pt7-reward-pts">{{ t('pay_theme4.from') }} {{ reward.pts }} PTS</div>
          </div>
        </div>
      </div>

      <!-- ── 底部 CTA ── -->
      <div class="t4-pt7-footer-cta">
        <h2 class="t4-pt7-big-title">{{ t('pay_theme4.big_carnival') }}</h2>
        <button class="t4-pt7-catalog-btn" @click="$emit('submit')">
          {{ t('pay_theme4.explore_catalog') }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import type { ThemeColors } from '@/config/themes';

interface Props {
  colors: ThemeColors;
  phone: string;
  payDate: string;
  invoiceNumber: string;
  domainName: string;
  totalPoint: number;
}

const props = defineProps<Props>();
const { t } = useI18n();
defineEmits<{ (e: 'submit'): void }>();

// ── 倒计时 ──
const countdown = ref({ days: '00', hours: '00', minutes: '00', seconds: '00' });

let timer: ReturnType<typeof setInterval> | null = null;

const LS_KEY = 'pt7_expire_ts';

function getOrCreateExpireTs(): number {
  const saved = localStorage.getItem(LS_KEY);
  if (saved) {
    const ts = parseInt(saved, 10);
    if (!isNaN(ts) && ts > Date.now()) return ts;
  }
  // 随机 3-7 天
  const days = Math.floor(Math.random() * 5) + 3;
  const ts = Date.now() + days * 86400 * 1000;
  localStorage.setItem(LS_KEY, String(ts));
  return ts;
}

function pad2(n: number): string {
  return n < 10 ? '0' + n : '' + n;
}

let expireTs = 0;

function updateCountdown() {
  const diff = Math.max(0, expireTs - Date.now());
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  countdown.value = {
    days:    pad2(d),
    hours:   pad2(h),
    minutes: pad2(m),
    seconds: pad2(s),
  };
}

onMounted(() => {
  expireTs = getOrCreateExpireTs();
  updateCountdown();
  timer = setInterval(updateCountdown, 1000);
});

onUnmounted(() => {
  if (timer) clearInterval(timer);
});

// ── 奖励列表 ──
const rewards = [
  { icon: '🎁', name: 'pay_theme4.reward_mega_prize',  pts: '500' },
  { icon: '🎮', name: 'pay_theme4.reward_gadgets',     pts: '800' },
  { icon: '💳', name: 'pay_theme4.reward_gift_cards',  pts: '300' },
  { icon: '✈️', name: 'pay_theme4.reward_travel_pack', pts: '1200' },
];
</script>

<style scoped>
/* ── Root ── */
.t4-pt7-root {
  background: #fcfaf4;
  min-height: 100%;
  font-family: inherit;
  padding-bottom: 2rem;
}

/* ── Points Hero ── */
.t4-pt7-points-hero {
  text-align: center;
  background: linear-gradient(180deg, #fef3c7 0%, #fff6dd 55%, #fcfaf4 100%);
  padding: 2rem 1.25rem 1.7rem;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08);
}

.t4-pt7-label-top {
  font-size: 10px;
  font-weight: 800;
  color: #9ca3af;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.t4-pt7-points-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.t4-pt7-star-icon {
  font-size: 30px;
}

.t4-pt7-points-num {
  font-size: 52px;
  font-weight: 900;
  color: #1c1c1c;
  line-height: 1;
  letter-spacing: -1px;
}

.t4-pt7-label-bot {
  font-size: 10px;
  font-weight: 800;
  color: #d97706;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}

/* ── Body ── */
.t4-pt7-body {
  padding: 0 1rem;
  margin-top: 0.4rem;
}

/* ── Progress Card ── */
.t4-pt7-progress-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  border: 1px solid #f3e8c8;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.t4-pt7-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.t4-pt7-progress-title {
  font-size: 11px;
  font-weight: 800;
  color: #4b5563;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.t4-pt7-progress-pct {
  font-size: 11px;
  font-weight: 800;
  color: #d97706;
  letter-spacing: 0.5px;
}

.t4-pt7-progress-bar-bg {
  height: 8px;
  background: #eceff3;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.65rem;
}

.t4-pt7-progress-bar-fill {
  height: 100%;
  width: 60%;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 99px;
}

.t4-pt7-progress-since {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
}

/* ── Attention Card ── */
.t4-pt7-attention-card {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  border-radius: 20px;
  padding: 1.35rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 18px rgba(251, 191, 36, 0.32);
  border: 1px solid rgba(245, 158, 11, 0.18);
}

.t4-pt7-attention-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.t4-pt7-bell {
  font-size: 18px;
}

.t4-pt7-attention-title {
  font-size: 18px;
  font-weight: 900;
  color: #78350f;
}

.t4-pt7-attention-desc {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.t4-pt7-attention-desc strong {
  color: #78350f;
}

/* 倒计时 */
.t4-pt7-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.t4-pt7-cbox {
  background: #fff;
  border-radius: 12px;
  padding: 0.6rem 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.09);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.t4-pt7-cnum {
  font-size: 26px;
  font-weight: 900;
  color: #1c1c1c;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.t4-pt7-clabel {
  font-size: 9px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.t4-pt7-redeem-btn {
  width: 100%;
  padding: 0.9rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
  transition: all 0.25s ease;
}

.t4-pt7-redeem-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.t4-pt7-redeem-btn:active { transform: none; opacity: 0.85; }

/* ── Quick Rewards ── */
.t4-pt7-rewards-section {
  margin-bottom: 1.25rem;
}

.t4-pt7-rewards-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.t4-pt7-rewards-accent {
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 2px;
}

.t4-pt7-rewards-title {
  font-size: 17px;
  font-weight: 900;
  color: #1c1c1c;
}

.t4-pt7-rewards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.t4-pt7-reward-card {
  background: #fff;
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  text-align: center;
  border: 1px solid rgba(251, 191, 36, 0.15);
  transition: transform .16s ease, box-shadow .16s ease;
}

.t4-pt7-reward-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.t4-pt7-reward-icon {
  font-size: 26px;
  line-height: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff8e7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.t4-pt7-reward-name {
  font-size: 12px;
  font-weight: 700;
  color: #1c1c1c;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.t4-pt7-reward-pts {
  font-size: 11px;
  font-weight: 700;
  color: #f59e0b;
  letter-spacing: 0.3px;
}

/* ── Footer CTA ── */
.t4-pt7-footer-cta {
  text-align: center;
  padding: 0.5rem 0 0.5rem;
}

.t4-pt7-big-title {
  font-size: 30px;
  font-weight: 900;
  font-style: italic;
  color: #d97706;
  margin: 0 0 1rem;
  letter-spacing: -0.5px;
}

.t4-pt7-catalog-btn {
  width: 100%;
  padding: 0.9rem;
  border: 1.8px solid #dc2626;
  border-radius: 999px;
  background: #fff;
  color: #dc2626;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.t4-pt7-catalog-btn:hover {
  background: #dc2626;
  color: #fff;
}
</style>
