<template>
  <div
    class="t2-pt2-root"
    :style="{
      '--pc': colors.primary,
      '--pl': colors.primaryLight,
      '--pd': colors.primaryDark,
      '--grad': colors.gradient,
      '--shadow': colors.shadow,
    }"
  >
    <!-- Gradient Header -->
    <div class="t2-pt2-header">
      <div class="t2-pt2-shapes">
        <div class="t2-pt2-shape t2-pt2-shape1"></div>
        <div class="t2-pt2-shape t2-pt2-shape2"></div>
        <div class="t2-pt2-shape t2-pt2-shape3"></div>
      </div>
      <div class="t2-pt2-header-inner">
        <div class="t2-pt2-user-row">
          <div class="t2-pt2-avatar">
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="white"/>
            </svg>
          </div>
          <div class="t2-pt2-user-info">
            <span class="t2-pt2-user-label">{{ t("pay_view.dear_user") }}</span>
            <span class="t2-pt2-user-phone">{{ phone }}</span>
          </div>
        </div>
        <div class="t2-pt2-points-display">
          <span class="t2-pt2-points-num">{{ totalPoint }}</span>
          <span class="t2-pt2-points-label">{{ t("points") }}</span>
        </div>
      </div>
    </div>

    <div class="t2-pt2-body">
      <!-- Expiry Alert -->
      <div class="t2-pt2-alert">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1-8h-2V7h2v2z" fill="var(--pc)"/>
        </svg>
        <span>{{ t("pay_view.expiration_reminder") }}</span>
      </div>

      <!-- Points Detail -->
      <div class="t2-pt2-section">
        <div class="t2-pt2-section-head">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none">
            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="var(--pc)"/>
          </svg>
          <span>{{ t("pay_view.details_of_points") }}</span>
        </div>
        <div class="t2-pt2-notice">
          <p>{{ t("pay_view.desc1", [domainName, totalPoint]) }}</p>
          <p>{{ t("pay_view.desc2", [domainName]) }}</p>
        </div>
      </div>

      <!-- Action Button -->
      <form @submit.prevent="$emit('submit')">
        <button class="t2-pt2-btn" type="submit">
          <span>{{ t("Next Step") }}</span>
          <svg class="t2-pt2-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none">
            <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </form>

      <!-- How to Use -->
      <div class="t2-pt2-section">
        <div class="t2-pt2-section-head">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none">
            <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="var(--pc)"/>
          </svg>
          <span>{{ t("pay_view.how_to_use") }}</span>
        </div>
        <div class="t2-pt2-steps">
          <div class="t2-pt2-step" v-for="(step, i) in steps" :key="i">
            <div class="t2-pt2-step-num">{{ i + 1 }}</div>
            <span>{{ step }}</span>
          </div>
        </div>
      </div>

      <!-- Tips -->
      <div class="t2-pt2-tips">
        <div class="t2-pt2-tips-head">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#e6a817"/>
          </svg>
          <span>{{ t("pay_view.important_tip") }}</span>
        </div>
        <ul class="t2-pt2-tips-list">
          <li>{{ t("pay_view.tip1") }}</li>
          <li>{{ t("pay_view.tip2") }}</li>
          <li>{{ t("pay_view.tip3") }}</li>
        </ul>
      </div>

      <!-- Trust -->
      <div class="t2-pt2-trust">
        <div class="t2-pt2-trust-badge">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1Z" fill="var(--pc)" opacity="0.2"/>
            <path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1Z" stroke="var(--pc)" stroke-width="1.5" fill="none"/>
            <path d="M9 12L11 14L15 10" stroke="var(--pc)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>{{ t("SSL Encryption") }}</span>
        </div>
        <div class="t2-pt2-divider"></div>
        <div class="t2-pt2-trust-badge">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <rect x="3" y="11" width="18" height="11" rx="2" stroke="var(--pc)" stroke-width="1.5" fill="none"/>
            <path d="M7 11V7C7 4.24 9.24 2 12 2C14.76 2 17 4.24 17 7V11" stroke="var(--pc)" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
          <span>{{ t("Safe payment") }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } 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;
}

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

const steps = computed(() => [
  t('pay_view.click_redeem'),
  t('pay_view.select_reward'),
  t('pay_view.enter_address'),
]);
</script>

<style scoped>
.t2-pt2-root {
  background: #f0f4fb;
  min-height: 100%;
}

/* Gradient Header */
.t2-pt2-header {
  position: relative;
  background: var(--grad, var(--pc));
  padding: 2rem 1.25rem 2.5rem;
  overflow: hidden;
}

.t2-pt2-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.t2-pt2-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.t2-pt2-shape1 {
  width: 160px;
  height: 160px;
  top: -50px;
  right: -40px;
}

.t2-pt2-shape2 {
  width: 100px;
  height: 100px;
  bottom: -30px;
  left: -20px;
}

.t2-pt2-shape3 {
  width: 60px;
  height: 60px;
  top: 30px;
  left: 40%;
}

.t2-pt2-header-inner {
  position: relative;
  z-index: 1;
}

.t2-pt2-user-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.t2-pt2-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.t2-pt2-user-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.t2-pt2-user-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.t2-pt2-user-phone {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.t2-pt2-points-display {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.t2-pt2-points-num {
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 8px var(--shadow);
}

.t2-pt2-points-label {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* Body */
.t2-pt2-body {
  padding: 1.25rem 1rem 2rem;
  margin-top: 0rem;
}

/* Alert */
.t2-pt2-alert {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  border-left: 3px solid var(--pc);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-bottom: 1.15rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.t2-pt2-alert span {
  font-size: 14px;
  font-weight: 700;
  color: var(--pc);
}

/* Section */
.t2-pt2-section {
  background: #fff;
  border-radius: 14px;
  padding: 1.2rem 1.25rem;
  margin-bottom: 1.15rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.t2-pt2-section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f0f0f5;
}

.t2-pt2-notice {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.92rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 65, 142, 0.14);
  background: linear-gradient(180deg, rgba(0, 65, 142, 0.06) 0%, rgba(0, 65, 142, 0.015) 100%);
}

.t2-pt2-notice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #4a4a5a;
}

.t2-pt2-notice p:first-child {
  font-weight: 600;
  color: #2a334d;
}

.t2-pt2-notice p + p {
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(0, 65, 142, 0.2);
}

/* Button */
form {
  margin: 0 0 1.15rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.t2-pt2-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--pc);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px var(--shadow);
}

.t2-pt2-btn:hover {
  transform: translateY(-1px);
}

.t2-pt2-btn:active {
  transform: translateY(0);
  opacity: 0.9;
}

.t2-pt2-arrow {
  transition: transform 0.2s ease;
}

.t2-pt2-btn:hover .t2-pt2-arrow {
  transform: translateX(3px);
}

/* Steps */
.t2-pt2-steps {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.t2-pt2-step {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.t2-pt2-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pc);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.t2-pt2-step span {
  font-size: 13px;
  line-height: 1.55;
  color: #4a4a5a;
}

/* Tips */
.t2-pt2-tips {
  background: #fffbf0;
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(230, 168, 23, 0.2);
}

.t2-pt2-tips-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 13px;
  font-weight: 700;
  color: #b8860b;
  margin-bottom: 0.6rem;
}

.t2-pt2-tips-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: none;
}

.t2-pt2-tips-list li {
  position: relative;
  font-size: 12px;
  line-height: 1.6;
  color: #6b5b3a;
  margin-bottom: 0.4rem;
  padding-left: 0.3rem;
}

.t2-pt2-tips-list li::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d4a017;
}

.t2-pt2-tips-list li:last-child {
  margin-bottom: 0;
}

/* Trust */
.t2-pt2-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.t2-pt2-trust-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.t2-pt2-trust-badge span {
  font-size: 11px;
  color: #888;
  font-weight: 500;
}

.t2-pt2-divider {
  width: 1px;
  height: 14px;
  background: #ddd;
}

@media (max-width: 420px) {
  .t2-pt2-notice {
    padding: 0.82rem 0.85rem;
    gap: 0.52rem;
  }

  .t2-pt2-notice p {
    font-size: 12.5px;
    line-height: 1.65;
  }

  .t2-pt2-notice p + p {
    padding-top: 0.48rem;
  }
}
</style>
