<template>
  <div class="max-w-3xl mx-auto py-8 px-4">
    <div class="mb-6 flex justify-between items-center">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">My Tickets</h1>
      <Link :href="route('ticketing.create')" class="inline-flex items-center gap-1 bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
        + Submit Ticket
      </Link>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-700">
      <div v-if="tickets.data.length === 0" class="p-8 text-center text-gray-400 text-sm">
        You haven't submitted any tickets yet.
      </div>
      <Link
        v-for="ticket in tickets.data"
        :key="ticket.id"
        :href="route('ticketing.show', { ticket: ticket.id })"
        class="flex items-start gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition"
      >
        <span
          class="inline-block text-xs font-mono font-semibold px-2 py-1 rounded text-white flex-shrink-0 mt-0.5"
          :style="{ backgroundColor: ticket.group?.color || '#6366f1' }"
        >{{ ticket.number }}</span>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-100 truncate">{{ ticket.title }}</p>
          <p class="text-xs text-gray-400 mt-0.5">{{ ticket.group?.name }} · {{ timeAgo(ticket.created_at) }}</p>
        </div>
        <span :class="statusClass(ticket.status)" class="text-xs px-2 py-0.5 rounded-full font-medium flex-shrink-0">
          {{ statusLabel(ticket.status) }}
        </span>
      </Link>
    </div>

    <!-- Pagination -->
    <div v-if="tickets.last_page > 1" class="mt-4 flex justify-center gap-4 text-sm">
      <Link v-if="tickets.prev_page_url" :href="tickets.prev_page_url" class="text-indigo-600 hover:underline">← Previous</Link>
      <span class="text-gray-500">{{ tickets.current_page }} / {{ tickets.last_page }}</span>
      <Link v-if="tickets.next_page_url" :href="tickets.next_page_url" class="text-indigo-600 hover:underline">Next →</Link>
    </div>
  </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'

defineProps({ tickets: Object })

function statusLabel(status) {
  const map = { open: 'Open', in_progress: 'In Progress', pending: 'Pending', resolved: 'Resolved', closed: 'Closed' }
  return map[status] || status
}

function statusClass(status) {
  const map = {
    open: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200',
    in_progress: 'bg-purple-100 text-purple-700',
    pending: 'bg-yellow-100 text-yellow-700',
    resolved: 'bg-green-100 text-green-700',
    closed: 'bg-gray-100 text-gray-500',
  }
  return map[status] || 'bg-gray-100 text-gray-600'
}

function timeAgo(dateStr) {
  const date = new Date(dateStr)
  const now = new Date()
  const diff = Math.floor((now - date) / 1000)
  if (diff < 60) return `${diff}s ago`
  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
  return `${Math.floor(diff / 86400)}d ago`
}
</script>
