<script lang="ts" setup>
import { Link } from '@inertiajs/vue3'
import AccountLayout from '@/Layouts/AccountLayout.vue'
import { resolveInvoiceStatusColor } from '@/utils/resolvers'
import type { Invoice, PaginatedResponse } from '@/types'

interface Props {
  invoices: PaginatedResponse<Invoice>
}

defineOptions({ layout: AccountLayout })

defineProps<Props>()
</script>

<template>
  <div>
    <div class="mb-4">
      <Link href="/billing" class="text-primary text-body-2 text-decoration-none">&larr; Back to Billing</Link>
    </div>

    <div class="text-h4 font-weight-bold mb-6">Invoices</div>

    <VCard>
      <VCardText v-if="!invoices.data || invoices.data.length === 0" class="text-center py-6">
        <div class="text-medium-emphasis">No invoices found.</div>
      </VCardText>

      <template v-else>
        <VTable>
          <thead>
            <tr>
              <th>Number</th>
              <th>Date</th>
              <th>Gateway</th>
              <th>Status</th>
              <th class="text-end">Amount</th>
              <th class="text-end" />
            </tr>
          </thead>
          <tbody>
            <tr v-for="invoice in invoices.data" :key="invoice.id">
              <td>{{ invoice.number }}</td>
              <td>{{ new Date(invoice.created_at).toLocaleDateString() }}</td>
              <td class="text-capitalize">{{ invoice.gateway }}</td>
              <td>
                <VChip
                  :color="resolveInvoiceStatusColor(invoice.status)"
                  size="small"
                  class="text-capitalize"
                >
                  {{ invoice.status }}
                </VChip>
              </td>
              <td class="text-end">${{ parseFloat(invoice.total).toFixed(2) }}</td>
              <td class="text-end">
                <VBtn
                  :href="`/billing/invoices/${invoice.id}/download`"
                  color="primary"
                  variant="tonal"
                  size="small"
                >
                  <VIcon icon="tabler-download" start />
                  PDF
                </VBtn>
              </td>
            </tr>
          </tbody>
        </VTable>

        <!-- Pagination -->
        <div v-if="invoices.links && invoices.last_page > 1" class="d-flex align-center justify-space-between pa-4">
          <div class="text-body-2 text-medium-emphasis">
            Showing {{ invoices.from }} to {{ invoices.to }} of {{ invoices.total }}
          </div>
          <div class="d-flex ga-1">
            <Link
              v-for="link in invoices.links"
              :key="link.label"
              :href="link.url || '#'"
              class="text-decoration-none"
            >
              <VBtn
                size="small"
                :color="link.active ? 'primary' : undefined"
                :variant="link.active ? 'flat' : 'text'"
                :disabled="!link.url"
                v-html="link.label"
              />
            </Link>
          </div>
        </div>
      </template>
    </VCard>
  </div>
</template>
