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

interface TransactionUser {
  id: number
  name: string
  email: string
  status: string
}

interface TransactionInvoice {
  id: number
  number: string
  total: string
  status: string
  currency: string
}

interface TransactionSubscription {
  id: number
  type: string
  stripe_id: string
  stripe_status: string
}

interface Transaction {
  id: number
  user_id: number
  subscription_id: number | null
  invoice_id: number | null
  gateway: string
  gateway_transaction_id: string | null
  amount: string
  currency: string
  status: string
  payment_method: string | null
  description: string | null
  metadata: Record<string, unknown> | null
  created_at: string
  updated_at: string
  user: TransactionUser | null
  invoice: TransactionInvoice | null
  subscription: TransactionSubscription | null
}

interface Props {
  transaction: Transaction
}

defineOptions({ layout: AdminLayout })

const props = defineProps<Props>()

function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
  return date.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
}

function resolveGatewayColor(gw: string): StatusColor {
  const map: Record<string, StatusColor> = {
    stripe: 'info',
    paypal: 'warning',
  }
  return map[gw] ?? 'secondary'
}
</script>

<template>
  <div>
    <!-- Header -->
    <div class="d-flex align-center justify-space-between mb-6">
      <div>
        <div class="d-flex align-center gap-3 mb-1">
          <Link href="/transactions" class="text-medium-emphasis text-decoration-none">
            <VIcon icon="tabler-arrow-left" size="20" />
          </Link>
          <div class="text-h4 font-weight-bold">
            Transaction #{{ props.transaction.id }}
          </div>
          <VChip
            :color="resolveTransactionStatusColor(props.transaction.status)"
            size="small"
            class="text-capitalize"
          >
            {{ props.transaction.status }}
          </VChip>
        </div>
        <div class="text-body-2 text-medium-emphasis ms-8">
          {{ formatDate(props.transaction.created_at) }}
        </div>
      </div>
    </div>

    <VRow>
      <!-- Transaction Details -->
      <VCol cols="12" md="8">
        <VCard class="mb-6">
          <VCardTitle class="text-h6">
            Transaction Details
          </VCardTitle>
          <VCardText>
            <VTable density="comfortable">
              <tbody>
                <tr>
                  <td class="text-medium-emphasis" style="width: 200px;">
                    Gateway Transaction ID
                  </td>
                  <td class="font-weight-medium">
                    {{ props.transaction.gateway_transaction_id ?? '---' }}
                  </td>
                </tr>
                <tr>
                  <td class="text-medium-emphasis">
                    Amount
                  </td>
                  <td class="font-weight-medium text-h6">
                    {{ formatPrice(props.transaction.amount) }} {{ props.transaction.currency }}
                  </td>
                </tr>
                <tr>
                  <td class="text-medium-emphasis">
                    Gateway
                  </td>
                  <td>
                    <VChip
                      :color="resolveGatewayColor(props.transaction.gateway)"
                      size="small"
                      variant="outlined"
                      class="text-capitalize"
                    >
                      {{ props.transaction.gateway }}
                    </VChip>
                  </td>
                </tr>
                <tr>
                  <td class="text-medium-emphasis">
                    Payment Method
                  </td>
                  <td class="text-capitalize">
                    {{ props.transaction.payment_method ?? '---' }}
                  </td>
                </tr>
                <tr>
                  <td class="text-medium-emphasis">
                    Status
                  </td>
                  <td>
                    <VChip
                      :color="resolveTransactionStatusColor(props.transaction.status)"
                      size="small"
                      class="text-capitalize"
                    >
                      {{ props.transaction.status }}
                    </VChip>
                  </td>
                </tr>
                <tr v-if="props.transaction.description">
                  <td class="text-medium-emphasis">
                    Description
                  </td>
                  <td>{{ props.transaction.description }}</td>
                </tr>
                <tr>
                  <td class="text-medium-emphasis">
                    Created
                  </td>
                  <td>{{ formatDate(props.transaction.created_at) }}</td>
                </tr>
              </tbody>
            </VTable>
          </VCardText>
        </VCard>

        <!-- Metadata -->
        <VCard v-if="props.transaction.metadata && Object.keys(props.transaction.metadata).length > 0">
          <VCardTitle class="text-h6">
            Metadata
          </VCardTitle>
          <VCardText>
            <pre class="text-body-2 bg-surface-variant pa-4 rounded" style="overflow-x: auto; white-space: pre-wrap;">{{ JSON.stringify(props.transaction.metadata, null, 2) }}</pre>
          </VCardText>
        </VCard>
      </VCol>

      <!-- Sidebar -->
      <VCol cols="12" md="4">
        <!-- Customer -->
        <VCard class="mb-6">
          <VCardTitle class="text-h6">
            Customer
          </VCardTitle>
          <VCardText v-if="props.transaction.user">
            <div class="d-flex align-center gap-3 mb-2">
              <VAvatar color="primary" size="40">
                <span class="text-body-1 font-weight-medium">
                  {{ props.transaction.user.name.charAt(0).toUpperCase() }}
                </span>
              </VAvatar>
              <div>
                <div class="text-body-1 font-weight-medium">
                  {{ props.transaction.user.name }}
                </div>
                <div class="text-caption text-medium-emphasis">
                  {{ props.transaction.user.email }}
                </div>
              </div>
            </div>
            <Link :href="`/customers/${props.transaction.user.id}`">
              <VBtn variant="tonal" size="small" color="primary" block class="mt-3">
                View Customer
              </VBtn>
            </Link>
          </VCardText>
          <VCardText v-else class="text-medium-emphasis">
            No customer linked.
          </VCardText>
        </VCard>

        <!-- Invoice -->
        <VCard class="mb-6">
          <VCardTitle class="text-h6">
            Invoice
          </VCardTitle>
          <VCardText v-if="props.transaction.invoice">
            <div class="d-flex justify-space-between align-center mb-2">
              <span class="text-medium-emphasis">Number</span>
              <span class="font-weight-medium">{{ props.transaction.invoice.number }}</span>
            </div>
            <div class="d-flex justify-space-between align-center mb-2">
              <span class="text-medium-emphasis">Total</span>
              <span class="font-weight-medium">{{ formatPrice(props.transaction.invoice.total) }}</span>
            </div>
            <div class="d-flex justify-space-between align-center mb-3">
              <span class="text-medium-emphasis">Status</span>
              <VChip size="x-small" class="text-capitalize">
                {{ props.transaction.invoice.status }}
              </VChip>
            </div>
            <Link :href="`/invoices/${props.transaction.invoice.id}`">
              <VBtn variant="tonal" size="small" color="primary" block>
                View Invoice
              </VBtn>
            </Link>
          </VCardText>
          <VCardText v-else class="text-medium-emphasis">
            No invoice linked.
          </VCardText>
        </VCard>

        <!-- Subscription -->
        <VCard v-if="props.transaction.subscription">
          <VCardTitle class="text-h6">
            Subscription
          </VCardTitle>
          <VCardText>
            <div class="d-flex justify-space-between align-center mb-2">
              <span class="text-medium-emphasis">Plan</span>
              <span class="font-weight-medium text-capitalize">{{ props.transaction.subscription.type }}</span>
            </div>
            <div class="d-flex justify-space-between align-center">
              <span class="text-medium-emphasis">Status</span>
              <VChip size="x-small" class="text-capitalize">
                {{ props.transaction.subscription.stripe_status }}
              </VChip>
            </div>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </div>
</template>
