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

interface AccountCreditItem {
  id: number
  amount: string
  currency: string
  type: string
  description: string | null
  created_at: string
}

interface Props {
  credits: PaginatedResponse<AccountCreditItem>
  creditBalance: number
}

defineOptions({ layout: AccountLayout })

defineProps<Props>()

function resolveTypeColor(type: string): StatusColor {
  const map: Record<string, StatusColor> = {
    credit_note: 'success',
    admin_adjustment: 'info',
    refund: 'warning',
    referral: 'secondary',
  }
  return map[type] ?? 'secondary'
}

function resolveTypeLabel(type: string): string {
  const map: Record<string, string> = {
    credit_note: 'Credit Note',
    admin_adjustment: 'Adjustment',
    refund: 'Refund',
    referral: 'Referral',
  }
  return map[type] ?? type
}

function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
  return date.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' })
}
</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="d-flex align-center justify-space-between mb-6">
      <div class="text-h4 font-weight-bold">
        Account Credits
      </div>
      <VChip color="primary" size="large" variant="tonal">
        <span class="text-body-1 font-weight-bold">
          Balance: {{ formatPrice(creditBalance) }}
        </span>
      </VChip>
    </div>

    <!-- Balance Card -->
    <VCard class="mb-6">
      <VCardText class="d-flex align-center gap-4 pa-6">
        <VAvatar color="primary" variant="tonal" size="56">
          <VIcon icon="tabler-wallet" size="28" />
        </VAvatar>
        <div>
          <div class="text-h5 font-weight-bold">
            {{ formatPrice(creditBalance) }}
          </div>
          <div class="text-body-2 text-medium-emphasis">
            Available account credit balance
          </div>
        </div>
      </VCardText>
    </VCard>

    <!-- Credit History -->
    <VCard>
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-history" size="22" />
        <span>Credit History</span>
      </VCardTitle>

      <VCardText v-if="!credits.data || credits.data.length === 0" class="text-center py-6">
        <VIcon icon="tabler-wallet-off" size="48" color="disabled" class="mb-2" />
        <div class="text-medium-emphasis">
          No credit history found.
        </div>
      </VCardText>

      <template v-else>
        <VTable density="comfortable" hover>
          <thead>
            <tr>
              <th>Date</th>
              <th>Type</th>
              <th>Description</th>
              <th class="text-end">
                Amount
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="credit in credits.data" :key="credit.id">
              <td class="text-body-2">
                {{ formatDate(credit.created_at) }}
              </td>
              <td>
                <VChip
                  :color="resolveTypeColor(credit.type)"
                  size="small"
                >
                  {{ resolveTypeLabel(credit.type) }}
                </VChip>
              </td>
              <td class="text-body-2">
                {{ credit.description ?? '---' }}
              </td>
              <td
                class="text-end text-body-2 font-weight-medium"
                :class="parseFloat(credit.amount) >= 0 ? 'text-success' : 'text-error'"
              >
                {{ parseFloat(credit.amount) >= 0 ? '+' : '' }}{{ formatPrice(credit.amount) }}
              </td>
            </tr>
          </tbody>
        </VTable>

        <!-- Pagination -->
        <div v-if="credits.links && credits.last_page > 1" class="d-flex align-center justify-space-between pa-4">
          <div class="text-body-2 text-medium-emphasis">
            Showing {{ credits.from }} to {{ credits.to }} of {{ credits.total }}
          </div>
          <div class="d-flex ga-1">
            <Link
              v-for="link in credits.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>
