<!-- src/pages/customer/profile/profile/CreditCards.vue -->
<template>
  <div class="card-glass">
    <div class="card-body p-4 sm:p-6">
      <div class="card-title flex justify-between items-center">
        <h2 class="flex items-center gap-2">
          <div class="w-8 h-8 rounded-lg bg-success/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-success">
              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
            </svg>
          </div>
          Credit Cards
        </h2>
        <router-link :to="{ name: 'cardadd', params: { id: user_id } }">
          <button class="btn btn-xs btn-outline btn-success">Add New</button>
        </router-link>
      </div>

      <div class="mt-2 text-sm">
        <div v-if="count === 0" class="text-warning font-semibold">
          No cards on file. This is a Cash/Check customer until a card is added.
        </div>
        <div v-else class="text-success font-semibold">
          {{ count }} card(s) on file.
        </div>
        <div class="text-sm mt-2">
          <span class="font-semibold">Authorize.net Profile ID:</span> {{ auth_net_profile_id || 'No Authorize.net account' }}
        </div>
      </div>

      <div class="mt-4 space-y-4">
        <div v-for="card in cards" :key="card.id" 
             class="p-4 rounded-lg border" 
             :class="card.main_card ? 'bg-primary/10 border-primary' : 'bg-base-200 border-base-300'">
          
          <div class="flex justify-between items-start">
            <div>
              <div class="font-bold">{{ card.name_on_card }}</div>
              <div class="text-xs opacity-70">{{ card.type_of_card }}</div>
            </div>
            <div v-if="card.main_card" class="badge badge-primary badge-sm">Primary</div>
          </div>
          
          <div class="mt-3 text-sm font-mono tracking-wider">
            <p>{{ card.card_number }}</p>
            <p>
              Exp:
              <span v-if="card.expiration_month < 10">0</span>{{ card.expiration_month }} / {{ card.expiration_year }}
            </p>
            <p>CVV: {{ card.security_number }}</p>
          </div>

          <div class="divider my-2"></div>
          
          <div class="flex justify-end gap-2">
            <a @click.prevent="$emit('edit-card', card.id)" class="link link-hover text-xs">Edit</a>
            <a @click.prevent="$emit('remove-card', card.id)" class="link link-hover text-error text-xs">Remove</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 1. Define the interface for a single credit card object
interface CreditCard {
  id: number;
  main_card: boolean;
  type_of_card: string;
  name_on_card: string;
  card_number: string;
  expiration_month: number;
  expiration_year: string | number;
  zip_code: string;
  security_number: string;
}

// 2. Define the interface for the component's props
interface Props {
  cards: CreditCard[];
  count: number;
  user_id: number;
  auth_net_profile_id: string | null;
}

// 3. Use the generic defineProps to apply the types
defineProps<Props>();

defineEmits(['edit-card', 'remove-card']);
</script>
