<template>
    <div>
        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
            <div class="flex items-center justify-between gap-3">
                <div class="min-w-0">
                    <NuxtLink
                        to="/portal"
                        class="text-sm text-neutral-400 hover:text-primary-500"
                    >
                        {{ $t('portal.backToProject') }}
                    </NuxtLink>
                    <h1 class="mt-1 text-xl font-bold text-primary-500 sm:text-2xl">{{ projectName }}</h1>
                </div>
                <NuxtLink
                    v-if="isClient"
                    :to="`/portal/projects/${projectId}/new-ticket`"
                    class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-secondary-500 sm:px-4 sm:text-sm"
                >
                    <span class="hidden sm:inline">+ {{ $t('portal.newTicket') }}</span>
                    <span class="sm:hidden">+ Ticket</span>
                </NuxtLink>
            </div>
        </div>

        <div v-if="isLoading" class="py-8 text-center text-sm text-neutral-400">
            {{ $t('common.loading') }}
        </div>

        <div v-else-if="tickets.length === 0" class="py-8 text-center text-sm text-neutral-400">
            {{ $t('clientTicket.noTickets') }}
        </div>

        <div v-else class="mt-4 space-y-3">
            <div
                v-for="ticket in tickets"
                :key="ticket.id"
                class="flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-neutral-200 bg-white p-4 shadow-sm transition hover:shadow-md"
                @click="openDetail(ticket)"
            >
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2">
                        <span class="text-sm font-bold text-primary-500">CT-{{ String(ticket.number).padStart(3, '0') }}</span>
                        <span
                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
                            :class="typeBadgeClass(ticket.type)"
                        >
                            {{ $t(`clientTicket.type.${ticket.type}`) }}
                        </span>
                    </div>
                    <h4 class="mt-1 text-sm font-semibold text-neutral-900">{{ ticket.title }}</h4>
                    <p class="mt-1 text-xs text-neutral-400">
                        {{ formatDate(ticket.createdAt) }}
                    </p>
                </div>
                <span
                    class="shrink-0 rounded-full px-3 py-1 text-xs font-semibold"
                    :class="statusBadgeClass(ticket.status)"
                >
                    {{ $t(`clientTicket.status.${ticket.status}`) }}
                </span>
            </div>
        </div>

        <!-- Ticket detail modal -->
        <ClientTicketDetailModal
            v-model="detailOpen"
            :ticket="selectedTicket"
        />
    </div>
</template>

<script setup lang="ts">
import type { ClientTicket } from '~/services/dto/client-ticket'
import { useClientTicketService } from '~/services/client-tickets'

definePageMeta({
    layout: 'portal',
})

const route = useRoute()
const { t } = useI18n()
const projectId = computed(() => Number(route.params.id))

useHead({ title: t('portal.title') })

const clientTicketService = useClientTicketService()
const auth = useAuthStore()

const tickets = ref<ClientTicket[]>([])
const isLoading = ref(true)
const detailOpen = ref(false)
const selectedTicket = ref<ClientTicket | null>(null)

const projectName = computed(() => {
    const me = auth.user as any
    if (me?.allowedProjects) {
        const project = me.allowedProjects.find((p: any) => p.id === projectId.value)
        return project?.name ?? ''
    }
    return ''
})

const isClient = computed(() => auth.user?.roles?.includes('ROLE_CLIENT') ?? false)
const { typeBadgeClass, statusBadgeClass, formatDate } = useClientTicketHelpers()

function openDetail(ticket: ClientTicket) {
    selectedTicket.value = ticket
    detailOpen.value = true
}

async function loadTickets() {
    isLoading.value = true
    try {
        tickets.value = await clientTicketService.getAll({ project: projectId.value })
    } finally {
        isLoading.value = false
    }
}

onMounted(() => {
    loadTickets()
})
</script>
