<template>
  <div class="coupon-manager">
    <div class="manager-header">
      <h3>🎟️ 쿠폰 관리</h3>
      <span class="active-count">{{ activeCoupons }}개</span>
    </div>

    <div class="add-form">
      <input v-model="newCode" type="text" placeholder="쿠폰 코드" class="input code-input" />
      <button class="btn btn-add" @click="add" :disabled="!newCode">추가</button>
    </div>

    <div class="coupon-list" v-if="store.coupons.length > 0">
      <div
        v-for="c in store.coupons"
        :key="c.id"
        class="coupon-item"
        :class="{ expired: c.is_expired }"
      >
        <div class="coupon-info">
          <span class="coupon-code">{{ c.code }}</span>
        </div>
        <div class="coupon-actions">
          <span v-if="c.is_expired" class="badge badge-expired">만료</span>
          <span v-else class="badge badge-active">활성</span>
        </div>
      </div>
    </div>
    <p class="empty" v-else>등록된 쿠폰이 없습니다.</p>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useWosStore } from '../stores/wos.store';

const store = useWosStore();
const newCode = ref('');

const activeCoupons = computed(() => store.coupons.filter((c) => !c.is_expired).length);

async function add() {
  if (!newCode.value.trim()) return;
  const code = newCode.value.trim();
  await store.addCoupon(code, code);
  newCode.value = '';
}
</script>

<style scoped>
.coupon-manager { display: flex; flex-direction: column; gap: 14px; }
.manager-header { display: flex; align-items: center; justify-content: space-between; }
.manager-header h3 { margin: 0; color: #1e293b; font-size: 1rem; }
.active-count { background: #eff6ff; color: #3b82f6; padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.add-form { display: flex; gap: 8px; flex-wrap: wrap; }
.input {
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #1e293b;
  font-size: 0.9rem;
  flex: 1;
  min-width: 120px;
}
.input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.code-input { font-family: monospace; }
.btn-add {
  padding: 8px 16px;
  background: #22c55e;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}
.btn-add:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-add:hover:not(:disabled) { background: #16a34a; }
.coupon-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.coupon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  border-left: 3px solid #22c55e;
  gap: 8px;
}
.coupon-item.expired { border-left-color: #a855f7; opacity: 0.6; }
.coupon-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.coupon-code { color: #3b82f6; font-family: monospace; font-size: 0.9rem; }
.coupon-actions { display: flex; gap: 6px; align-items: center; }
.btn-toggle {
  padding: 3px 10px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}
.btn-toggle.on { background: #dcfce7; color: #16a34a; }
.btn-toggle.off { background: #f1f5f9; color: #64748b; }
.badge { padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.badge-active { background: #dcfce7; color: #16a34a; }
.badge-expired { background: #f3e8ff; color: #9333ea; }
.empty { color: #94a3b8; font-size: 0.9rem; margin: 0; text-align: center; }
</style>
