<script lang="ts" setup>
import { router } from '@inertiajs/vue3'
import { computed } from 'vue'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import type { AffiliateCommission, PaginatedResponse } from '@/types'

interface Props {
  commissions: PaginatedResponse<AffiliateCommission>
}

defineOptions({ layout: AdminLayout })

const props = defineProps<Props>()

const tableHeaders = computed(() => [
  { title: 'Affiliate', key: 'affiliate', sortable: false },
  { title: 'Referred User', key: 'referral', sortable: false },
  { title: 'Amount', key: 'amount', sortable: true },
  { title: 'Type', key: 'type', sortable: true },
  { title: 'Date', key: 'created_at', sortable: true },
  { title: 'Actions', key: 'actions', sortable: false, align: 'center' as const },
])

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  })
}

function approveCommission(id: number): void {
  router.post(`/affiliate-commissions/${id}/approve`, {}, { preserveScroll: true })
}
</script>

<template>
  <div>
    <div class="text-h4 font-weight-bold mb-2">
      Commission Approval Queue
    </div>
    <div class="text-body-2 text-medium-emphasis mb-6">
      Review and approve pending affiliate commissions
    </div>

    <VCard>
      <VDataTable
        :headers="tableHeaders"
        :items="commissions.data"
        :items-per-page="25"
        hover
        class="text-no-wrap"
      >
        <template #item.affiliate="{ item }">
          <div v-if="item.affiliate?.user">
            <div class="font-weight-medium">
              {{ item.affiliate.user.name }}
            </div>
            <div class="text-body-2 text-medium-emphasis">
              {{ item.affiliate.user.email }}
            </div>
          </div>
        </template>

        <template #item.referral="{ item }">
          <div v-if="item.referral?.referred_user">
            <span>{{ item.referral.referred_user.name }}</span>
          </div>
          <span v-else class="text-medium-emphasis">--</span>
        </template>

        <template #item.amount="{ item }">
          <span class="font-weight-medium">${{ parseFloat(item.amount).toFixed(2) }}</span>
          <span class="text-medium-emphasis ms-1">{{ item.currency }}</span>
        </template>

        <template #item.type="{ item }">
          <VChip
            :color="item.type === 'signup' ? 'primary' : 'info'"
            size="small"
            variant="tonal"
            class="text-capitalize"
          >
            {{ item.type }}
          </VChip>
        </template>

        <template #item.created_at="{ item }">
          {{ formatDate(item.created_at) }}
        </template>

        <template #item.actions="{ item }">
          <VBtn
            color="success"
            size="small"
            variant="tonal"
            prepend-icon="tabler-check"
            @click="approveCommission(item.id)"
          >
            Approve
          </VBtn>
        </template>

        <template #no-data>
          <div class="text-center py-8">
            <VIcon icon="tabler-coins" size="48" color="disabled" class="mb-2" />
            <div class="text-medium-emphasis">
              No pending commissions to approve.
            </div>
          </div>
        </template>
      </VDataTable>
    </VCard>
  </div>
</template>
