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

interface Props {
  paymentMethods: PaymentMethod[]
  invoices: Invoice[]
  transactions: Transaction[]
  intent: Record<string, unknown>
  stripeKey: string
}

defineOptions({ layout: AccountLayout })

defineProps<Props>()

const defaultForm = useForm({
  payment_method_id: '',
})

const setDefault = (id: string): void => {
  defaultForm.payment_method_id = id
  defaultForm.post('/billing/payment-methods/default')
}

const removeMethod = (id: string): void => {
  if (confirm('Are you sure you want to remove this payment method?')) {
    useForm({}).delete(`/billing/payment-methods/${id}`)
  }
}
</script>

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

    <!-- Payment Methods -->
    <VCard class="mb-6">
      <VCardTitle>Payment Methods</VCardTitle>
      <VCardText>
        <div v-if="paymentMethods.length === 0" class="text-body-2 text-medium-emphasis">
          No payment methods on file.
        </div>

        <div v-else class="d-flex flex-column ga-3">
          <VSheet
            v-for="pm in paymentMethods"
            :key="pm.id"
            rounded
            border
            class="pa-3 d-flex align-center justify-space-between"
            :class="pm.is_default ? 'border-primary' : ''"
          >
            <div class="d-flex align-center ga-3">
              <span class="text-body-2 font-weight-medium text-capitalize">{{ pm.brand }}</span>
              <span class="text-body-2 text-medium-emphasis">&bull;&bull;&bull;&bull; {{ pm.last_four }}</span>
              <span class="text-body-2 text-disabled">{{ pm.exp_month }}/{{ pm.exp_year }}</span>
              <VChip v-if="pm.is_default" color="primary" size="x-small">Default</VChip>
            </div>
            <div class="d-flex align-center ga-2">
              <VBtn
                v-if="!pm.is_default"
                variant="text"
                size="small"
                :disabled="defaultForm.processing"
                @click="setDefault(pm.id)"
              >
                Make Default
              </VBtn>
              <VBtn
                variant="text"
                color="error"
                size="small"
                @click="removeMethod(pm.id)"
              >
                Remove
              </VBtn>
            </div>
          </VSheet>
        </div>
      </VCardText>
    </VCard>

    <!-- Recent Invoices -->
    <VCard class="mb-6">
      <VCardTitle class="d-flex align-center justify-space-between">
        <span>Recent Invoices</span>
        <Link href="/billing/invoices" class="text-primary text-body-2 text-decoration-none">View All</Link>
      </VCardTitle>
      <VCardText>
        <div v-if="invoices.length === 0" class="text-body-2 text-medium-emphasis">No invoices yet.</div>

        <VTable v-else>
          <thead>
            <tr>
              <th>Number</th>
              <th>Date</th>
              <th>Status</th>
              <th class="text-end">Amount</th>
              <th class="text-end" />
            </tr>
          </thead>
          <tbody>
            <tr v-for="invoice in invoices" :key="invoice.id">
              <td>{{ invoice.number }}</td>
              <td>{{ new Date(invoice.created_at).toLocaleDateString() }}</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">
                <a :href="`/billing/invoices/${invoice.id}/download`" class="text-primary text-decoration-none">Download</a>
              </td>
            </tr>
          </tbody>
        </VTable>
      </VCardText>
    </VCard>

    <!-- Recent Transactions -->
    <VCard>
      <VCardTitle class="d-flex align-center justify-space-between">
        <span>Recent Transactions</span>
        <Link href="/billing/transactions" class="text-primary text-body-2 text-decoration-none">View All</Link>
      </VCardTitle>
      <VCardText>
        <div v-if="transactions.length === 0" class="text-body-2 text-medium-emphasis">No transactions yet.</div>

        <VTable v-else>
          <thead>
            <tr>
              <th>Date</th>
              <th>Gateway</th>
              <th>Status</th>
              <th>Description</th>
              <th class="text-end">Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="tx in transactions" :key="tx.id">
              <td>{{ new Date(tx.created_at).toLocaleDateString() }}</td>
              <td class="text-capitalize">{{ tx.gateway }}</td>
              <td>
                <VChip
                  :color="resolveTransactionStatusColor(tx.status)"
                  size="small"
                  class="text-capitalize"
                >
                  {{ tx.status }}
                </VChip>
              </td>
              <td>{{ tx.description }}</td>
              <td class="text-end">${{ parseFloat(tx.amount).toFixed(2) }}</td>
            </tr>
          </tbody>
        </VTable>
      </VCardText>
    </VCard>
  </div>
</template>
