<!-- src/pages/card/home.vue -->
<template>
  <div class="flex">
    <div class="w-full px-4 md:px-10 py-4">
      <!-- Breadcrumbs & Title -->
      <div class="text-sm breadcrumbs">
        <ul>
          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
          <li>Cards</li>
        </ul>
      </div>

      <!-- Page Header with Stats -->
      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mt-4 mb-6">
        <div>
          <h1 class="text-2xl md:text-3xl font-bold flex items-center gap-3">
            <div
              class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" class="w-5 h-5 text-primary-content">
                <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>
            Payment Cards
          </h1>
          <p class="text-base-content/60 mt-1 ml-13">Manage customer payment cards</p>
        </div>

        <!-- Quick Stats -->
        <div class="flex flex-wrap gap-3 items-center">
          <div class="stat-pill">
            <span class="stat-pill-value">{{ cards.length }}</span>
            <span class="stat-pill-label">Total Cards</span>
          </div>
        </div>
      </div>

      <!-- Main Content Card -->
      <div class="modern-table-card">
        <!-- DESKTOP VIEW: Table -->
        <div class="overflow-x-auto hidden xl:block">
          <table class="modern-table">
            <thead>
              <tr>
                <th>Card ID</th>
                <th>Customer</th>
                <th>Type</th>
                <th>Last 4</th>
                <th>Expiration</th>
                <th>Main Card</th>
                <th class="text-right">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="card in cards" :key="card.id" class="table-row-hover">
                <td>{{ card.id }}</td>
                <td>{{ card.customer_name || 'N/A' }}</td>
                <td><span class="badge badge-ghost badge-sm">{{ card.type_of_card }}</span></td>
                <td>{{ card.card_number ? card.card_number.slice(-4) : 'XXXX' }}</td>
                <td>{{ card.expiration_month }}/{{ card.expiration_year }}</td>
                <td>
                  <span v-if="card.main_card" class="badge badge-primary badge-sm">Main</span>
                  <span v-else class="badge badge-ghost badge-sm">-</span>
                </td>
                <td class="text-right">
                  <div class="flex items-center justify-end gap-2">
                    <router-link :to="{ name: 'editCard', params: { id: card.id } }"
                      class="btn btn-sm btn-secondary">Edit</router-link>
                    <button @click.prevent="deleteCard(card.id)"
                      class="btn btn-sm btn-error btn-outline">Delete</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- MOBILE VIEW: Cards -->
        <div class="xl:hidden space-y-4 px-4 pb-4">
          <div v-for="card in cards" :key="card.id" class="mobile-card">
            <div class="p-3">
              <div class="flex justify-between items-start">
                <div>
                  <h2 class="text-base font-bold">{{ card.type_of_card }}</h2>
                  <p class="text-xs text-base-content/60">ID: #{{ card.id }}</p>
                </div>
                <span v-if="card.main_card" class="badge badge-primary badge-sm">Main</span>
              </div>
              <div class="text-sm mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
                <div>
                  <p class="text-xs text-base-content/50">Last 4</p>
                  <p>{{ card.card_number ? card.card_number.slice(-4) : 'XXXX' }}</p>
                </div>
                <div>
                  <p class="text-xs text-base-content/50">Expires</p>
                  <p>{{ card.expiration_month }}/{{ card.expiration_year }}</p>
                </div>
              </div>
              <div class="flex gap-2 pt-3 mt-3 border-t border-base-content/10 flex-wrap">
                <router-link :to="{ name: 'editCard', params: { id: card.id } }"
                  class="btn btn-sm btn-secondary flex-1">Edit</router-link>
                <button @click.prevent="deleteCard(card.id)"
                  class="btn btn-sm btn-error btn-outline flex-1">Delete</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { notify } from "@kyvg/vue3-notification"
import { paymentService } from '../../services/paymentService'

// Types
interface Card {
  id: number
  customer_name?: string
  type_of_card: string
  card_number: string
  expiration_month: string
  expiration_year: string
  main_card: boolean
}

// State
const cards = ref<Card[]>([])

// Methods
async function getCards() {
  try {
    const response = await paymentService.getAllCards(1)
    if ((response.data as any).cards) {
      cards.value = (response.data as any).cards
    } else if (Array.isArray(response.data)) {
      cards.value = response.data as Card[]
    } else {
      cards.value = []
    }
  } catch (error) {
    console.error('Failed to fetch cards:', error)
    cards.value = []
  }
}

async function deleteCard(cardId: number) {
  try {
    const response = await paymentService.removeCard(cardId)
    if ((response.data as any).ok) {
      notify({
        title: "Success",
        text: "Card removed successfully",
        type: "success",
      })
      getCards()
    } else {
      notify({
        title: "Failure",
        text: "Error removing card",
        type: "error",
      })
    }
  } catch (error) {
    notify({
      title: "Failure",
      text: "Error removing card",
      type: "error",
    })
  }
}

// Lifecycle
onMounted(() => {
  getCards()
})
</script>