<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getMyCouponsApi, getReceivableCouponsApi, receiveCouponApi } from '@/api/coupon'
import { useUserStore } from '@/stores/user'
import type { Coupon, UserCoupon } from '@/types'
import {
  ArrowRight,
  Calendar,
  Check,
  Coin,
  CollectionTag,
  Discount,
  Lightning,
  Present,
  ShoppingBag,
  Ticket
} from '@element-plus/icons-vue'

type CouponTab = 'wallet' | 'center'
type WalletFilter = 'all' | 'unused' | 'used' | 'expired'

const router = useRouter()
const userStore = useUserStore()

const activeTab = ref<CouponTab>('wallet')
const walletFilter = ref<WalletFilter>('all')
const loadingWallet = ref(false)
const loadingCenter = ref(false)
const receivingIds = ref<number[]>([])
const myCoupons = ref<UserCoupon[]>([])
const receivableCoupons = ref<Coupon[]>([])

const walletFilters: Array<{ label: string; value: WalletFilter }> = [
  { label: '全部券包', value: 'all' },
  { label: '待使用', value: 'unused' },
  { label: '已使用', value: 'used' },
  { label: '已失效', value: 'expired' }
]

const walletStats = computed(() => {
  const total = myCoupons.value.length
  const unused = myCoupons.value.filter((coupon) => coupon.status === 0).length
  const used = myCoupons.value.filter((coupon) => coupon.status === 1).length
  const expired = myCoupons.value.filter((coupon) => [2, 3].includes(coupon.status)).length
  const urgent = myCoupons.value.filter((coupon) => coupon.status === 0 && isExpiringSoon(coupon.expireTime)).length
  return { total, unused, used, expired, urgent }
})

const centerStats = computed(() => {
  const total = receivableCoupons.value.length
  const limited = receivableCoupons.value.filter((coupon) => coupon.total !== -1).length
  const lowStock = receivableCoupons.value.filter((coupon) => coupon.total !== -1 && coupon.remain <= Math.max(10, coupon.total * 0.2)).length
  return { total, limited, lowStock }
})

const filteredWalletCoupons = computed(() => {
  switch (walletFilter.value) {
    case 'unused':
      return myCoupons.value.filter((coupon) => coupon.status === 0)
    case 'used':
      return myCoupons.value.filter((coupon) => coupon.status === 1)
    case 'expired':
      return myCoupons.value.filter((coupon) => [2, 3].includes(coupon.status))
    default:
      return myCoupons.value
  }
})

const featuredCoupon = computed(() => {
  return receivableCoupons.value
    .slice()
    .sort((a, b) => {
      const aRatio = a.total > 0 ? a.remain / a.total : 1
      const bRatio = b.total > 0 ? b.remain / b.total : 1
      return aRatio - bRatio
    })[0]
})

const statusMap: Record<number, { text: string; tone: string }> = {
  0: { text: '待使用', tone: 'usable' },
  1: { text: '已使用', tone: 'muted' },
  2: { text: '已过期', tone: 'expired' },
  3: { text: '已作废', tone: 'expired' }
}

onMounted(async () => {
  await Promise.all([
    loadCenter(),
    userStore.isLoggedIn ? loadWallet() : Promise.resolve()
  ])
})

async function loadWallet() {
  if (!userStore.isLoggedIn) {
    myCoupons.value = []
    return
  }
  loadingWallet.value = true
  try {
    myCoupons.value = (await getMyCouponsApi()) || []
  } finally {
    loadingWallet.value = false
  }
}

async function loadCenter() {
  loadingCenter.value = true
  try {
    receivableCoupons.value = (await getReceivableCouponsApi()) || []
  } finally {
    loadingCenter.value = false
  }
}

async function switchTab(tab: CouponTab) {
  activeTab.value = tab
  if (tab === 'wallet' && userStore.isLoggedIn && myCoupons.value.length === 0 && !loadingWallet.value) {
    await loadWallet()
  }
  if (tab === 'center' && receivableCoupons.value.length === 0 && !loadingCenter.value) {
    await loadCenter()
  }
}

async function receiveCoupon(coupon: Coupon) {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('登录后才能领取优惠券')
    router.push('/login')
    return
  }
  if (receivingIds.value.includes(coupon.id)) {
    return
  }
  receivingIds.value = [...receivingIds.value, coupon.id]
  try {
    await receiveCouponApi(coupon.id)
    ElMessage.success('领取成功，已放入券包')
    await Promise.all([loadCenter(), loadWallet()])
    activeTab.value = 'wallet'
    walletFilter.value = 'unused'
  } catch (error: any) {
    ElMessage.error(error?.message || '领取失败，请稍后再试')
  } finally {
    receivingIds.value = receivingIds.value.filter((id) => id !== coupon.id)
  }
}

function walletCount(filter: WalletFilter) {
  switch (filter) {
    case 'unused':
      return walletStats.value.unused
    case 'used':
      return walletStats.value.used
    case 'expired':
      return walletStats.value.expired
    default:
      return walletStats.value.total
  }
}

function isReceiving(couponId: number) {
  return receivingIds.value.includes(couponId)
}

function getCouponValue(coupon: Coupon | UserCoupon, fromWallet: boolean) {
  if (fromWallet) {
    const walletCoupon = coupon as UserCoupon
    if (walletCoupon.couponType === 1) {
      const matched = walletCoupon.couponName.match(/(\d+(?:\.\d+)?)\s*折/)
      return {
        prefix: '',
        value: matched?.[1] || parseDiscountFromName(walletCoupon.couponName) || '折扣',
        suffix: matched ? '折' : ''
      }
    }
    return {
      prefix: '¥',
      value: parseAmountFromName(walletCoupon.couponName) || '0',
      suffix: ''
    }
  }

  const centerCoupon = coupon as Coupon
  if (centerCoupon.type === 1) {
    return {
      prefix: '',
      value: formatDiscount(centerCoupon.amount),
      suffix: '折'
    }
  }
  return {
    prefix: '¥',
    value: trimTrailingZero(centerCoupon.amount),
    suffix: ''
  }
}

function getCouponTypeLabel(type: number) {
  return {
    0: '满减券',
    1: '折扣券',
    2: '无门槛券'
  }[type] || '优惠券'
}

function getWalletStatus(status: number) {
  return statusMap[status] || statusMap[2]
}

function getWalletStatusDescription(coupon: UserCoupon) {
  if (coupon.status === 0 && isExpiringSoon(coupon.expireTime)) {
    return '即将过期，记得尽快使用'
  }
  if (coupon.status === 1) {
    return coupon.useTime ? `已于 ${formatDateTime(coupon.useTime)} 使用` : '已完成使用'
  }
  if (coupon.status === 2) {
    return `已于 ${formatDateTime(coupon.expireTime)} 过期`
  }
  return '当前不可使用'
}

function getCouponCondition(coupon: Coupon) {
  if (coupon.type === 2 || coupon.minAmount <= 0) {
    return '全场通用，无门槛抵扣'
  }
  if (coupon.type === 1) {
    const capText = coupon.maxDiscount > 0 ? `，最高减 ${formatCurrency(coupon.maxDiscount)}` : ''
    return `满 ${formatCurrency(coupon.minAmount)} 可用${capText}`
  }
  return `满 ${formatCurrency(coupon.minAmount)} 可用`
}

function getInventoryText(coupon: Coupon) {
  if (coupon.total === -1) {
    return '不限量发放'
  }
  return `剩余 ${coupon.remain} / ${coupon.total}`
}

function getInventoryProgress(coupon: Coupon) {
  if (coupon.total <= 0) {
    return 100
  }
  return Math.max(0, Math.min(100, Math.round((coupon.remain / coupon.total) * 100)))
}

function isExpiringSoon(dateTime?: string) {
  if (!dateTime) return false
  const target = new Date(dateTime.replace(/-/g, '/')).getTime()
  if (Number.isNaN(target)) return false
  const diff = target - Date.now()
  const days = diff / (1000 * 60 * 60 * 24)
  return days > 0 && days <= 3
}

function formatDateRange(startTime: string, endTime: string) {
  return `${formatDateTime(startTime)} - ${formatDateTime(endTime)}`
}

function formatDateTime(value?: string) {
  if (!value) return '--'
  const date = new Date(value.replace(/-/g, '/'))
  if (Number.isNaN(date.getTime())) {
    return value
  }
  return new Intl.DateTimeFormat('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).format(date)
}

function formatCurrency(amount: number) {
  return `¥${trimTrailingZero(amount)}`
}

function trimTrailingZero(amount: number | string) {
  const num = Number(amount)
  if (Number.isNaN(num)) {
    return String(amount)
  }
  return num % 1 === 0 ? String(num) : num.toFixed(1).replace(/\.0$/, '')
}

function formatDiscount(amount: number) {
  const discount = amount * 10
  return discount % 1 === 0 ? String(discount) : discount.toFixed(1)
}

function parseAmountFromName(name: string) {
  const matched = name.match(/减\s*(\d+(?:\.\d+)?)/) || name.match(/(\d+(?:\.\d+)?)/)
  return matched?.[1] || ''
}

function parseDiscountFromName(name: string) {
  const matched = name.match(/(\d+(?:\.\d+)?)\s*折/)
  return matched?.[1] || ''
}
</script>

<template>
  <div class="coupon-page">
    <section class="coupon-hero container">
      <div class="hero-copy">
        <div class="eyebrow">
          <el-icon><CollectionTag /></el-icon>
          <span>Coupon Center</span>
        </div>
        <h1>先领券，再下单，把每一笔零食预算都花在刀刃上</h1>
        <p>
          把新人券、满减券、折扣券集中到一个页面里管理。
          常用的券先展示，快过期的券也会第一时间提醒你。
        </p>
        <div class="hero-actions">
          <button
            class="hero-btn primary"
            type="button"
            @click="switchTab('center')"
          >
            <el-icon><Present /></el-icon>
            立即领券
          </button>
          <button
            class="hero-btn secondary"
            type="button"
            @click="switchTab('wallet')"
          >
            <el-icon><Ticket /></el-icon>
            查看我的券包
          </button>
        </div>
      </div>

      <div class="hero-panel">
        <div class="hero-panel-card highlight">
          <div class="panel-title">
            <span>今日可领</span>
            <strong>{{ centerStats.total }}</strong>
          </div>
          <p>热门券和活动券都在这里，先领再逛更划算。</p>
          <div class="panel-tags">
            <span>限量券 {{ centerStats.limited }}</span>
            <span>紧俏券 {{ centerStats.lowStock }}</span>
          </div>
        </div>
        <div class="hero-panel-card">
          <div class="panel-title">
            <span>待使用</span>
            <strong>{{ walletStats.unused }}</strong>
          </div>
          <p>
            <template v-if="userStore.isLoggedIn">
              {{ walletStats.urgent }} 张券即将到期，结算前记得先用掉。
            </template>
            <template v-else>
              登录后即可同步你的个人券包和使用状态。
            </template>
          </p>
          <div class="panel-inline-link" @click="switchTab('wallet')">
            进入券包
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
    </section>

    <section class="container coupon-overview">
      <div class="overview-card">
        <span class="overview-label">券包总数</span>
        <strong>{{ walletStats.total }}</strong>
        <small>已领取优惠券</small>
      </div>
      <div class="overview-card accent">
        <span class="overview-label">待使用</span>
        <strong>{{ walletStats.unused }}</strong>
        <small>下单可直接抵扣</small>
      </div>
      <div class="overview-card">
        <span class="overview-label">即将过期</span>
        <strong>{{ walletStats.urgent }}</strong>
        <small>3 天内到期提醒</small>
      </div>
      <div class="overview-card">
        <span class="overview-label">领券中心</span>
        <strong>{{ centerStats.total }}</strong>
        <small>当前可领取活动</small>
      </div>
    </section>

    <section class="container coupon-workspace">
      <div class="workspace-main">
        <div class="workspace-tabs" role="tablist" aria-label="优惠券场景切换">
          <button
            class="tab-chip"
            :class="{ active: activeTab === 'wallet' }"
            type="button"
            @click="switchTab('wallet')"
          >
            <el-icon><Ticket /></el-icon>
            我的券包
          </button>
          <button
            class="tab-chip"
            :class="{ active: activeTab === 'center' }"
            type="button"
            @click="switchTab('center')"
          >
            <el-icon><Present /></el-icon>
            领券中心
          </button>
        </div>

        <div v-if="activeTab === 'wallet'" class="workspace-panel">
          <div class="panel-head">
            <div>
              <h2>我的优惠券</h2>
              <p>优先展示可直接下单使用的优惠券，并标出快到期的券。</p>
            </div>
            <div class="filter-row" role="tablist" aria-label="我的优惠券筛选">
              <button
                v-for="item in walletFilters"
                :key="item.value"
                class="filter-chip"
                :class="{ active: walletFilter === item.value }"
                type="button"
                @click="walletFilter = item.value"
              >
                {{ item.label }}
                <span>{{ walletCount(item.value) }}</span>
              </button>
            </div>
          </div>

          <div v-if="!userStore.isLoggedIn" class="login-card">
            <div class="login-copy">
              <h3>登录后查看你的专属券包</h3>
              <p>系统会同步已领取优惠券、使用状态和到期提醒，结算时也能自动推荐可用券。</p>
            </div>
            <el-button type="primary" size="large" @click="router.push('/login')">
              立即登录
            </el-button>
          </div>

          <div v-else v-loading="loadingWallet" class="coupon-list">
            <article
              v-for="coupon in filteredWalletCoupons"
              :key="coupon.id"
              class="wallet-card"
              :class="[
                getWalletStatus(coupon.status).tone,
                { urgent: coupon.status === 0 && isExpiringSoon(coupon.expireTime) }
              ]"
            >
              <div class="ticket-value-block">
                <span class="ticket-kicker">{{ getCouponTypeLabel(coupon.couponType) }}</span>
                <div class="ticket-value">
                  <span class="prefix">{{ getCouponValue(coupon, true).prefix }}</span>
                  <strong>{{ getCouponValue(coupon, true).value }}</strong>
                  <span class="suffix">{{ getCouponValue(coupon, true).suffix }}</span>
                </div>
                <div class="ticket-status">
                  <span class="status-pill" :class="getWalletStatus(coupon.status).tone">
                    {{ getWalletStatus(coupon.status).text }}
                  </span>
                  <span v-if="coupon.status === 0 && isExpiringSoon(coupon.expireTime)" class="urgent-pill">
                    即将过期
                  </span>
                </div>
              </div>

              <div class="ticket-body">
                <div class="ticket-title-row">
                  <h3>{{ coupon.couponName }}</h3>
                  <span class="ticket-id">券号 #{{ coupon.couponId }}</span>
                </div>
                <p class="ticket-description">{{ getWalletStatusDescription(coupon) }}</p>
                <div class="ticket-meta">
                  <span>
                    <el-icon><Calendar /></el-icon>
                    {{ formatDateTime(coupon.receiveTime) }} 领取
                  </span>
                  <span>
                    <el-icon><Lightning /></el-icon>
                    {{ formatDateTime(coupon.expireTime) }} 到期
                  </span>
                </div>
                <div class="ticket-actions">
                  <el-button
                    v-if="coupon.status === 0"
                    type="primary"
                    plain
                    @click="router.push('/')"
                  >
                    去使用
                  </el-button>
                  <span v-else class="ticket-note">当前状态下不可继续使用</span>
                </div>
              </div>
            </article>

            <el-empty v-if="!loadingWallet && filteredWalletCoupons.length === 0" description="当前筛选下暂无优惠券">
              <el-button type="primary" @click="switchTab('center')">去领券中心</el-button>
            </el-empty>
          </div>
        </div>

        <div v-else class="workspace-panel">
          <div class="panel-head">
            <div>
              <h2>领券中心</h2>
              <p>按库存紧张度和门槛价值优先排序，先把值得拿的券收入券包。</p>
            </div>
            <el-button text type="primary" @click="loadCenter">刷新列表</el-button>
          </div>

          <div v-loading="loadingCenter" class="coupon-list center-list">
            <article
              v-for="coupon in receivableCoupons"
              :key="coupon.id"
              class="center-card"
            >
              <div class="center-value-block">
                <span class="ticket-kicker">{{ getCouponTypeLabel(coupon.type) }}</span>
                <div class="ticket-value">
                  <span class="prefix">{{ getCouponValue(coupon, false).prefix }}</span>
                  <strong>{{ getCouponValue(coupon, false).value }}</strong>
                  <span class="suffix">{{ getCouponValue(coupon, false).suffix }}</span>
                </div>
                <span class="inventory-pill">{{ getInventoryText(coupon) }}</span>
              </div>

              <div class="ticket-body">
                <div class="ticket-title-row">
                  <h3>{{ coupon.name }}</h3>
                  <span class="ticket-id">每人限领 {{ coupon.perLimit }} 张</span>
                </div>
                <p class="ticket-description">{{ getCouponCondition(coupon) }}</p>
                <div class="inventory-track" aria-hidden="true">
                  <div class="inventory-track-fill" :style="{ width: `${getInventoryProgress(coupon)}%` }"></div>
                </div>
                <div class="ticket-meta">
                  <span>
                    <el-icon><Calendar /></el-icon>
                    {{ formatDateRange(coupon.startTime, coupon.endTime) }}
                  </span>
                  <span>
                    <el-icon><Discount /></el-icon>
                    领取后 {{ coupon.validDays }} 天内有效
                  </span>
                </div>
                <div class="ticket-actions">
                  <el-button
                    type="primary"
                    size="large"
                    :loading="isReceiving(coupon.id)"
                    @click="receiveCoupon(coupon)"
                  >
                    立即领取
                  </el-button>
                  <span class="ticket-note">领到券包后，结算时可直接抵扣</span>
                </div>
              </div>
            </article>

            <el-empty v-if="!loadingCenter && receivableCoupons.length === 0" description="当前暂无可领取优惠券">
              <el-button type="primary" @click="router.push('/')">先去逛逛商品</el-button>
            </el-empty>
          </div>
        </div>
      </div>

      <aside class="workspace-side">
        <div v-if="featuredCoupon" class="side-card featured-card">
          <div class="side-card-head">
            <span>推荐先领</span>
            <el-icon><Coin /></el-icon>
          </div>
          <h3>{{ featuredCoupon.name }}</h3>
          <p>{{ getCouponCondition(featuredCoupon) }}</p>
          <div class="featured-metrics">
            <div>
              <strong>{{ getInventoryProgress(featuredCoupon) }}%</strong>
              <span>库存保有</span>
            </div>
            <div>
              <strong>{{ featuredCoupon.validDays }}</strong>
              <span>有效天数</span>
            </div>
          </div>
          <el-button type="primary" size="large" @click="switchTab('center')">
            去领取
          </el-button>
        </div>

        <div class="side-card tips-card">
          <div class="side-card-head">
            <span>使用建议</span>
            <el-icon><ShoppingBag /></el-icon>
          </div>
          <ul class="tips-list">
            <li>下单前先看券包，系统通常会先展示可立即使用的券。</li>
            <li>剩余 3 天内到期的券会被标红，建议优先消耗。</li>
            <li>折扣券如果带封顶金额，凑单过高可能并不划算。</li>
          </ul>
        </div>

        <div class="side-card rules-card">
          <div class="side-card-head">
            <span>领券规则</span>
            <el-icon><Check /></el-icon>
          </div>
          <ul class="tips-list">
            <li>同一张券按活动配置限制领取次数，超出后无法重复领取。</li>
            <li>优惠券是否可用，以订单金额、商品范围和有效期为准。</li>
            <li>已过期、已使用或已作废的券不会在结算页再次推荐。</li>
          </ul>
        </div>
      </aside>
    </section>
  </div>
</template>

<style scoped>
.coupon-page {
  padding: 28px 0 72px;
  background:
    radial-gradient(circle at top left, rgba(249, 115, 22, 0.16), transparent 30%),
    radial-gradient(circle at top right, rgba(5, 150, 105, 0.14), transparent 24%),
    linear-gradient(180deg, #fff7ed 0%, #f8fafc 22%, #f8fafc 100%);
}

.coupon-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}

.hero-copy,
.hero-panel {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-copy {
  padding: 36px;
  background:
    radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.24), transparent 34%),
    linear-gradient(135deg, #064e3b 0%, #065f46 28%, #059669 68%, #10b981 100%);
  color: #ecfdf5;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #d1fae5;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero-copy h1 {
  margin-top: 20px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.08;
  color: #ffffff;
}

.hero-copy p {
  max-width: 620px;
  margin-top: 16px;
  color: rgba(236, 253, 245, 0.9);
  font-size: 1.02rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 16px;
  font-weight: 800;
  font-size: 0.98rem;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base);
  cursor: pointer;
}

.hero-btn:focus-visible,
.tab-chip:focus-visible,
.filter-chip:focus-visible,
.panel-inline-link:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.32);
  outline-offset: 3px;
}

.hero-btn.primary {
  color: #7c2d12;
  background: #fef3c7;
  box-shadow: 0 16px 30px rgba(120, 53, 15, 0.18);
}

.hero-btn.secondary {
  color: #ecfdf5;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-btn:hover {
  transform: translateY(-2px);
}

.hero-panel {
  padding: 20px;
  display: grid;
  gap: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.98)),
    linear-gradient(135deg, #ecfdf5 0%, #fff7ed 100%);
}

.hero-panel-card {
  padding: 20px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.hero-panel-card.highlight {
  background: linear-gradient(135deg, #fff7ed 0%, #fefce8 100%);
}

.panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.panel-title span {
  color: #475569;
  font-size: 0.94rem;
}

.panel-title strong {
  font-size: 2rem;
  color: #0f172a;
}

.hero-panel-card p {
  margin-top: 10px;
  color: #475569;
}

.panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.panel-tags span,
.panel-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.panel-tags span {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #7c2d12;
  font-weight: 700;
}

.panel-inline-link {
  margin-top: 16px;
  color: #059669;
  font-weight: 700;
}

.coupon-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.overview-card {
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: var(--shadow-md);
}

.overview-card.accent {
  background: linear-gradient(135deg, #064e3b 0%, #059669 100%);
}

.overview-label,
.overview-card small {
  display: block;
}

.overview-label {
  color: #64748b;
  font-size: 0.92rem;
}

.overview-card strong {
  display: block;
  margin-top: 8px;
  font-size: 2rem;
  line-height: 1;
  color: #0f172a;
}

.overview-card small {
  margin-top: 10px;
  color: #64748b;
}

.overview-card.accent .overview-label,
.overview-card.accent strong,
.overview-card.accent small {
  color: #ecfdf5;
}

.coupon-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
  gap: 24px;
  align-items: start;
}

.workspace-main,
.side-card {
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: var(--shadow-lg);
}

.workspace-main {
  padding: 20px;
}

.workspace-tabs {
  display: inline-flex;
  gap: 10px;
  padding: 6px;
  border-radius: 18px;
  background: #f8fafc;
  margin-bottom: 18px;
}

.tab-chip,
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #475569;
  font-weight: 700;
  transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
  cursor: pointer;
}

.tab-chip {
  padding: 0 18px;
}

.tab-chip.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  box-shadow: 0 14px 26px rgba(5, 150, 105, 0.24);
}

.workspace-panel {
  min-height: 540px;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.panel-head h2 {
  font-size: 1.6rem;
}

.panel-head p {
  margin-top: 6px;
  color: #64748b;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chip {
  padding: 0 14px;
  background: #fff7ed;
}

.filter-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.12);
  color: #9a3412;
  font-size: 0.82rem;
}

.filter-chip.active {
  background: #0f172a;
  color: #ffffff;
}

.filter-chip.active span {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.login-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
}

.login-copy h3 {
  font-size: 1.35rem;
}

.login-copy p {
  margin-top: 8px;
  color: #57534e;
}

.coupon-list {
  display: grid;
  gap: 16px;
}

.wallet-card,
.center-card {
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
}

.ticket-value-block {
  position: relative;
  padding: 22px 20px;
  color: #ffffff;
}

.wallet-card .ticket-value-block {
  background: linear-gradient(160deg, #ea580c 0%, #f97316 100%);
}

.wallet-card.usable .ticket-value-block {
  background: linear-gradient(160deg, #059669 0%, #10b981 100%);
}

.wallet-card.urgent .ticket-value-block {
  background: linear-gradient(160deg, #b91c1c 0%, #ef4444 100%);
}

.wallet-card.muted .ticket-value-block,
.wallet-card.expired .ticket-value-block {
  background: linear-gradient(160deg, #64748b 0%, #94a3b8 100%);
}

.center-card .center-value-block {
  padding: 22px 20px;
  background: linear-gradient(160deg, #064e3b 0%, #059669 100%);
  color: #ffffff;
}

.ticket-kicker {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.85rem;
  font-weight: 700;
}

.ticket-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 18px;
}

.ticket-value strong {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  color: currentColor;
}

.prefix,
.suffix {
  font-size: 1rem;
  font-weight: 700;
}

.ticket-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.status-pill,
.urgent-pill,
.inventory-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.status-pill.usable {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.status-pill.muted,
.status-pill.expired {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.urgent-pill {
  background: #fef3c7;
  color: #9a3412;
}

.inventory-pill {
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.16);
  color: #d1fae5;
}

.ticket-body {
  padding: 22px 22px 20px;
}

.ticket-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ticket-title-row h3 {
  font-size: 1.3rem;
  color: #0f172a;
}

.ticket-id {
  color: #94a3b8;
  font-size: 0.88rem;
  white-space: nowrap;
}

.ticket-description {
  margin-top: 10px;
  color: #475569;
}

.ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 14px;
  color: #64748b;
  font-size: 0.92rem;
}

.ticket-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ticket-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.ticket-note {
  color: #94a3b8;
  font-size: 0.92rem;
}

.inventory-track {
  height: 10px;
  margin-top: 16px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.inventory-track-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f97316 0%, #fb7185 100%);
}

.workspace-side {
  display: grid;
  gap: 16px;
}

.side-card {
  padding: 20px;
}

.featured-card {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.side-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #475569;
  font-weight: 700;
}

.side-card h3 {
  margin-top: 14px;
  font-size: 1.35rem;
}

.side-card p {
  margin-top: 10px;
  color: #475569;
}

.featured-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.featured-metrics div {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.featured-metrics strong {
  display: block;
  font-size: 1.4rem;
  color: #0f172a;
}

.featured-metrics span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 0.88rem;
}

.tips-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-left: 18px;
  color: #475569;
}

.tips-list li::marker {
  color: #f97316;
}

@media (max-width: 1100px) {
  .coupon-hero,
  .coupon-workspace {
    grid-template-columns: 1fr;
  }

  .coupon-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .coupon-page {
    padding-top: 16px;
  }

  .coupon-hero {
    gap: 16px;
  }

  .hero-copy,
  .hero-panel,
  .workspace-main,
  .side-card {
    border-radius: 24px;
  }

  .hero-copy {
    padding: 24px;
  }

  .hero-copy h1 {
    font-size: 2.2rem;
  }

  .coupon-overview {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .panel-head,
  .login-card,
  .ticket-title-row,
  .ticket-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wallet-card,
  .center-card {
    grid-template-columns: 1fr;
  }

  .workspace-tabs {
    width: 100%;
  }

  .tab-chip {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .coupon-overview {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .filter-row {
    flex-direction: column;
  }

  .hero-btn,
  .filter-chip {
    width: 100%;
    justify-content: center;
  }

  .ticket-meta {
    flex-direction: column;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-btn,
  .tab-chip,
  .filter-chip {
    transition: none;
  }

  .hero-btn:hover {
    transform: none;
  }
}
</style>
