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

interface Props {
  tickets: PaginatedResponse<SupportTicket>
}

defineOptions({ layout: AccountLayout })

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' })
}

function formatStatus(status: string): string {
  return status.replace(/_/g, ' ')
}
</script>

<template>
  <div>
    <div class="d-flex align-center justify-space-between mb-6">
      <div>
        <div class="text-h4 font-weight-bold">
          Support Tickets
        </div>
        <div class="text-body-2 text-medium-emphasis">
          View and manage your support requests
        </div>
      </div>
      <Link href="/tickets/create" class="text-decoration-none">
        <VBtn color="primary">
          <VIcon icon="tabler-plus" start />
          Create Ticket
        </VBtn>
      </Link>
    </div>

    <VCard v-if="tickets.data.length === 0">
      <VCardText class="text-center py-12">
        <VIcon icon="tabler-ticket-off" size="48" color="disabled" class="mb-2" />
        <div class="text-medium-emphasis mb-4">
          You don't have any support tickets yet.
        </div>
        <Link href="/tickets/create" class="text-decoration-none">
          <VBtn color="primary" variant="tonal">
            Create Your First Ticket
          </VBtn>
        </Link>
      </VCardText>
    </VCard>

    <VCard v-else>
      <VTable density="comfortable" hover>
        <thead>
          <tr>
            <th>Subject</th>
            <th>Status</th>
            <th>Priority</th>
            <th>Department</th>
            <th>Last Updated</th>
            <th class="text-center">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="ticket in tickets.data" :key="ticket.id">
            <td class="text-body-2 font-weight-medium">
              {{ ticket.subject }}
              <VChip
                v-if="ticket.ticket_reference"
                size="x-small"
                color="secondary"
                variant="tonal"
                class="ms-2"
              >
                {{ ticket.ticket_reference }}
              </VChip>
            </td>
            <td>
              <VChip
                :color="resolveTicketStatusColor(ticket.status)"
                size="small"
                class="text-capitalize"
              >
                {{ formatStatus(ticket.status) }}
              </VChip>
            </td>
            <td>
              <VChip
                :color="resolveTicketPriorityColor(ticket.priority)"
                size="small"
                class="text-capitalize"
              >
                {{ ticket.priority }}
              </VChip>
            </td>
            <td class="text-body-2 text-capitalize">
              {{ ticket.department }}
            </td>
            <td class="text-body-2">
              {{ formatDate(ticket.updated_at) }}
            </td>
            <td class="text-center">
              <Link :href="`/tickets/${ticket.id}`">
                <VBtn variant="text" size="small" color="primary">
                  <VIcon icon="tabler-eye" size="18" />
                </VBtn>
              </Link>
            </td>
          </tr>
        </tbody>
      </VTable>

      <!-- Pagination -->
      <VCardText v-if="tickets.last_page > 1" class="d-flex align-center justify-center pt-2">
        <VPagination
          :model-value="tickets.data.length > 0 ? Math.ceil((tickets.from ?? 1) / 15) : 1"
          :length="tickets.last_page"
          :total-visible="7"
          @update:model-value="(page: number) => router.get('/tickets', { page }, { preserveState: true, preserveScroll: true })"
        />
      </VCardText>

      <VCardText v-if="tickets.total > 0" class="text-center text-caption text-medium-emphasis">
        Showing {{ tickets.from }} to {{ tickets.to }} of {{ tickets.total }} tickets
      </VCardText>
    </VCard>
  </div>
</template>
