<script setup lang="ts">
/**
 * 文件职责：优惠券卡片项。
 * 1. 还原券面、规则、进度与状态操作布局。
 */
import type { CouponCardViewModel } from '../types';

import { IconifyIcon } from '@vben/icons';

import {
  COUPON_STATUS_TAG_CLASS_MAP,
  COUPON_STATUS_TEXT_MAP,
} from '../composables/coupon-page/constants';
import {
  formatInteger,
  resolveClaimedProgressPercent,
  resolveCouponFaceConditionText,
  resolveCouponFaceValueText,
  resolveCouponRuleText,
  resolveCouponStoreTagText,
  resolveCouponTypeClass,
  resolveCouponTypeLabel,
  resolveCouponValidityText,
  resolveProgressClass,
} from '../composables/coupon-page/helpers';

defineProps<{
  item: CouponCardViewModel;
  storeNameMap: Record<string, string>;
}>();

const emit = defineEmits<{
  disable: [item: CouponCardViewModel];
  edit: [item: CouponCardViewModel];
  enable: [item: CouponCardViewModel];
  remove: [item: CouponCardViewModel];
  view: [item: CouponCardViewModel];
}>();

function resolveClaimedText(item: CouponCardViewModel) {
  return `已领 ${formatInteger(item.claimedQuantity)}/${formatInteger(item.totalQuantity)}`;
}
</script>

<template>
  <div class="mcp-coupon" :class="{ 'mcp-dimmed': item.isDimmed }">
    <div class="mcp-left" :class="resolveCouponTypeClass(item.couponType)">
      <div class="mcp-face-value">
        {{ resolveCouponFaceValueText(item) }}
      </div>
      <div class="mcp-face-cond">
        {{ resolveCouponFaceConditionText(item) }}
      </div>
    </div>

    <div class="mcp-right">
      <div class="mcp-title-row">
        <span class="mcp-name">{{ item.name }}</span>
        <span class="mcp-type-pill">
          {{ resolveCouponTypeLabel(item.couponType) }}
        </span>
      </div>

      <div class="mcp-validity">
        <IconifyIcon icon="lucide:calendar" />
        <span>{{ resolveCouponValidityText(item) }}</span>
      </div>

      <div class="mcp-rules">{{ resolveCouponRuleText(item) }}</div>

      <div class="mcp-progress-row">
        <span>{{ resolveClaimedText(item) }}</span>
        <div class="mcp-progress-wrap">
          <div class="mcp-progress-bar">
            <span
              class="mcp-progress-fill"
              :class="resolveProgressClass(item.couponType)"
              :style="{
                width: `${resolveClaimedProgressPercent(item.claimedQuantity, item.totalQuantity)}%`,
              }"
            ></span>
          </div>
        </div>
        <span>已用 {{ formatInteger(item.redeemedQuantity) }}</span>
      </div>

      <div class="mcp-bottom">
        <div class="mcp-meta-tags">
          <span
            class="mcp-status-tag"
            :class="COUPON_STATUS_TAG_CLASS_MAP[item.displayStatus]"
          >
            {{ COUPON_STATUS_TEXT_MAP[item.displayStatus] }}
          </span>
          <span class="mcp-store-tag">
            {{ resolveCouponStoreTagText(item, storeNameMap) }}
          </span>
        </div>

        <div class="mcp-actions">
          <template v-if="item.displayStatus === 'ended'">
            <button type="button" class="g-action" @click="emit('view', item)">
              查看
            </button>
            <button
              type="button"
              class="g-action g-action-danger"
              @click="emit('remove', item)"
            >
              删除
            </button>
          </template>

          <template v-else-if="item.displayStatus === 'disabled'">
            <button
              type="button"
              class="g-action"
              @click="emit('enable', item)"
            >
              开放领取
            </button>
            <button
              type="button"
              class="g-action g-action-danger"
              @click="emit('remove', item)"
            >
              删除
            </button>
          </template>

          <template v-else>
            <button type="button" class="g-action" @click="emit('edit', item)">
              编辑
            </button>
            <button
              type="button"
              class="g-action"
              @click="emit('disable', item)"
            >
              暂停领取
            </button>
            <button
              type="button"
              class="g-action g-action-danger"
              @click="emit('remove', item)"
            >
              删除
            </button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
