<script lang="ts" setup>
import { Link, useForm } from '@inertiajs/vue3'
import { computed, ref } from 'vue'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { resolveInvoiceStatusColor, resolveTransactionStatusColor, formatPrice } from '@/utils/resolvers'

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

interface InvoiceLineItem {
  id: number
  description: string
  amount: string
  quantity: number
}

interface PaymentTransactionItem {
  id: number
  gateway: string
  gateway_transaction_id: string | null
  amount: string
  currency: string
  status: string
  payment_method: string | null
  description: string | null
  created_at: string
}

interface InvoiceDetail {
  id: number
  user_id: number
  number: string
  total: string
  tax: string
  currency: string
  status: string
  gateway: string | null
  gateway_invoice_id: string | null
  invoice_pdf: string | null
  notes: string | null
  due_date: string | null
  paid_at: string | null
  created_at: string
  updated_at: string
  user: InvoiceUser | null
  items: InvoiceLineItem[]
  payment_transactions: PaymentTransactionItem[]
}

interface Props {
  invoice: InvoiceDetail
}

defineOptions({ layout: AdminLayout })

const props = defineProps<Props>()

const voidDialog = ref<boolean>(false)
const voidForm = useForm({})
const resendForm = useForm({})

const isEditable = computed<boolean>(() => {
  return props.invoice.status === 'draft' || props.invoice.status === 'pending'
})

const subtotal = computed<number>(() => {
  return props.invoice.items.reduce((sum, item) => {
    return sum + (parseFloat(item.amount) * item.quantity)
  }, 0)
})

function submitVoid(): void {
  voidForm.post(`/invoices/${props.invoice.id}/void`, {
    preserveScroll: true,
    onSuccess: () => { voidDialog.value = false },
  })
}

function submitResend(): void {
  resendForm.post(`/invoices/${props.invoice.id}/resend`, {
    preserveScroll: true,
  })
}

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

function formatDateTime(dateStr: string | null): string {
  if (!dateStr) return '---'
  const date = new Date(dateStr)
  return date.toLocaleString('en-US', {
    month: 'short',
    day: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}
</script>

<template>
  <div>
    <!-- Header -->
    <div class="d-flex align-center justify-space-between mb-6">
      <div class="d-flex align-center gap-4">
        <Link href="/invoices">
          <VBtn variant="text" icon="tabler-arrow-left" size="small" />
        </Link>
        <div>
          <div class="d-flex align-center gap-2">
            <span class="text-h4 font-weight-bold">Invoice {{ invoice.number }}</span>
            <VChip
              :color="resolveInvoiceStatusColor(invoice.status)"
              size="small"
              class="text-capitalize"
            >
              {{ invoice.status }}
            </VChip>
          </div>
          <div class="text-body-2 text-medium-emphasis mt-1">
            {{ invoice.user?.name ?? 'Unknown Customer' }} &middot; {{ invoice.user?.email ?? '' }}
          </div>
        </div>
      </div>

      <div class="d-flex gap-2">
        <Link v-if="isEditable" :href="`/invoices/${invoice.id}/edit`">
          <VBtn
            color="warning"
            variant="tonal"
          >
            <VIcon icon="tabler-edit" start />
            Edit
          </VBtn>
        </Link>

        <VBtn
          color="info"
          variant="tonal"
          :loading="resendForm.processing"
          :disabled="resendForm.processing"
          @click="submitResend"
        >
          <VIcon icon="tabler-mail-forward" start />
          Resend Email
        </VBtn>

        <VBtn
          color="info"
          variant="tonal"
          :href="`/invoices/${invoice.id}/download`"
        >
          <VIcon icon="tabler-download" start />
          Download PDF
        </VBtn>

        <VBtn
          v-if="invoice.status !== 'void' && invoice.status !== 'paid'"
          color="error"
          variant="tonal"
          :disabled="voidForm.processing"
          @click="voidDialog = true"
        >
          <VIcon icon="tabler-ban" start />
          Void Invoice
        </VBtn>
      </div>
    </div>

    <VRow>
      <!-- Invoice Info -->
      <VCol cols="12" lg="4">
        <VCard>
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-file-invoice" size="22" />
            <span>Invoice Details</span>
          </VCardTitle>

          <VCardText>
            <VList density="compact" class="pa-0">
              <VListItem>
                <template #prepend>
                  <span class="text-body-2 text-medium-emphasis" style="min-width: 120px;">Number</span>
                </template>
                <VListItemTitle class="text-body-2 font-weight-medium">
                  {{ invoice.number }}
                </VListItemTitle>
              </VListItem>

              <VListItem>
                <template #prepend>
                  <span class="text-body-2 text-medium-emphasis" style="min-width: 120px;">Gateway</span>
                </template>
                <VListItemTitle class="text-body-2 text-capitalize">
                  {{ invoice.gateway ?? 'N/A' }}
                </VListItemTitle>
              </VListItem>

              <VListItem>
                <template #prepend>
                  <span class="text-body-2 text-medium-emphasis" style="min-width: 120px;">Currency</span>
                </template>
                <VListItemTitle class="text-body-2 text-uppercase">
                  {{ invoice.currency }}
                </VListItemTitle>
              </VListItem>

              <VListItem>
                <template #prepend>
                  <span class="text-body-2 text-medium-emphasis" style="min-width: 120px;">Created</span>
                </template>
                <VListItemTitle class="text-body-2">
                  {{ formatDate(invoice.created_at) }}
                </VListItemTitle>
              </VListItem>

              <VListItem>
                <template #prepend>
                  <span class="text-body-2 text-medium-emphasis" style="min-width: 120px;">Due Date</span>
                </template>
                <VListItemTitle class="text-body-2">
                  {{ formatDate(invoice.due_date) }}
                </VListItemTitle>
              </VListItem>

              <VListItem>
                <template #prepend>
                  <span class="text-body-2 text-medium-emphasis" style="min-width: 120px;">Paid Date</span>
                </template>
                <VListItemTitle class="text-body-2">
                  {{ formatDate(invoice.paid_at) }}
                </VListItemTitle>
              </VListItem>
            </VList>
          </VCardText>
        </VCard>

        <!-- Notes Card -->
        <VCard v-if="invoice.notes" class="mt-4">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-notes" size="22" />
            <span>Notes</span>
          </VCardTitle>
          <VCardText>
            <div class="text-body-2">
              {{ invoice.notes }}
            </div>
          </VCardText>
        </VCard>

        <!-- Customer Card -->
        <VCard class="mt-4">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-user" size="22" />
            <span>Customer</span>
          </VCardTitle>

          <VCardText v-if="invoice.user">
            <div class="d-flex align-center gap-3">
              <VAvatar color="primary" variant="tonal" size="40">
                <span class="text-body-1 font-weight-semibold">
                  {{ invoice.user.name.charAt(0).toUpperCase() }}
                </span>
              </VAvatar>
              <div>
                <div class="text-body-1 font-weight-medium">
                  {{ invoice.user.name }}
                </div>
                <div class="text-body-2 text-medium-emphasis">
                  {{ invoice.user.email }}
                </div>
              </div>
            </div>
            <div class="mt-3">
              <Link :href="`/customers/${invoice.user.id}`">
                <VBtn variant="tonal" size="small" color="primary" block>
                  View Customer
                </VBtn>
              </Link>
            </div>
          </VCardText>
        </VCard>
      </VCol>

      <!-- Invoice Items & Totals -->
      <VCol cols="12" lg="8">
        <VCard>
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-list" size="22" />
            <span>Invoice Items</span>
          </VCardTitle>

          <VCardText v-if="invoice.items.length === 0" class="text-center py-8">
            <VIcon icon="tabler-inbox" size="48" color="disabled" class="mb-2" />
            <div class="text-medium-emphasis">
              No items on this invoice.
            </div>
          </VCardText>

          <template v-else>
            <VTable density="comfortable">
              <thead>
                <tr>
                  <th>Description</th>
                  <th class="text-center">
                    Qty
                  </th>
                  <th class="text-end">
                    Unit Price
                  </th>
                  <th class="text-end">
                    Total
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in invoice.items" :key="item.id">
                  <td class="text-body-2">
                    {{ item.description }}
                  </td>
                  <td class="text-center text-body-2">
                    {{ item.quantity }}
                  </td>
                  <td class="text-end text-body-2">
                    {{ formatPrice(item.amount) }}
                  </td>
                  <td class="text-end text-body-2 font-weight-medium">
                    {{ formatPrice(parseFloat(item.amount) * item.quantity) }}
                  </td>
                </tr>
              </tbody>
            </VTable>

            <!-- Totals -->
            <VDivider />
            <VCardText>
              <div class="d-flex flex-column align-end ga-2">
                <div class="d-flex align-center ga-6" style="min-width: 200px;">
                  <span class="text-body-2 text-medium-emphasis">Subtotal</span>
                  <VSpacer />
                  <span class="text-body-2">{{ formatPrice(subtotal) }}</span>
                </div>
                <div class="d-flex align-center ga-6" style="min-width: 200px;">
                  <span class="text-body-2 text-medium-emphasis">Tax</span>
                  <VSpacer />
                  <span class="text-body-2">{{ formatPrice(invoice.tax) }}</span>
                </div>
                <VDivider class="my-1" style="min-width: 200px;" />
                <div class="d-flex align-center ga-6" style="min-width: 200px;">
                  <span class="text-body-1 font-weight-bold">Total</span>
                  <VSpacer />
                  <span class="text-body-1 font-weight-bold">{{ formatPrice(invoice.total) }}</span>
                </div>
              </div>
            </VCardText>
          </template>
        </VCard>

        <!-- Payment Transactions -->
        <VCard class="mt-4">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-credit-card" size="22" />
            <span>Payment Transactions</span>
            <VSpacer />
            <VChip size="small" color="secondary" variant="tonal">
              {{ invoice.payment_transactions.length }}
            </VChip>
          </VCardTitle>

          <VCardText v-if="invoice.payment_transactions.length === 0" class="text-center py-8">
            <VIcon icon="tabler-inbox" size="48" color="disabled" class="mb-2" />
            <div class="text-medium-emphasis">
              No payment transactions recorded.
            </div>
          </VCardText>

          <VTable v-else density="comfortable" hover>
            <thead>
              <tr>
                <th>Gateway</th>
                <th>Method</th>
                <th>Status</th>
                <th class="text-end">
                  Amount
                </th>
                <th>Date</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="txn in invoice.payment_transactions" :key="txn.id">
                <td class="text-body-2 text-capitalize">
                  {{ txn.gateway }}
                </td>
                <td class="text-body-2">
                  {{ txn.payment_method ?? '---' }}
                </td>
                <td>
                  <VChip
                    :color="resolveTransactionStatusColor(txn.status)"
                    size="small"
                    class="text-capitalize"
                  >
                    {{ txn.status }}
                  </VChip>
                </td>
                <td class="text-end text-body-2 font-weight-medium">
                  {{ formatPrice(txn.amount) }}
                </td>
                <td class="text-body-2">
                  {{ formatDateTime(txn.created_at) }}
                </td>
              </tr>
            </tbody>
          </VTable>
        </VCard>
      </VCol>
    </VRow>

    <!-- Void Confirmation Dialog -->
    <VDialog v-model="voidDialog" max-width="500" persistent>
      <VCard>
        <VCardTitle class="text-h5 pa-5">
          Void Invoice
        </VCardTitle>
        <VCardText class="px-5 pb-2">
          Are you sure you want to void invoice <strong>{{ invoice.number }}</strong>?
          This will mark the invoice as void and it can no longer be collected on.
        </VCardText>
        <VCardActions class="pa-5">
          <VSpacer />
          <VBtn variant="text" :disabled="voidForm.processing" @click="voidDialog = false">
            Cancel
          </VBtn>
          <VBtn
            color="error"
            variant="flat"
            :loading="voidForm.processing"
            @click="submitVoid"
          >
            Void Invoice
          </VBtn>
        </VCardActions>
      </VCard>
    </VDialog>
  </div>
</template>
