<template>
    <div>
        <!-- Trigger button -->
        <MalioButton
            variant="tertiary"
            icon-name="mdi:ticket-outline"
            icon-position="left"
            button-class="w-auto px-3 sm:px-4 shrink-0"
            @click="open"
        >
            <span class="hidden sm:inline">{{ $t('clientTicket.adminTab') }}</span>
            <span
                v-if="totalCount > 0"
                class="flex h-5 min-w-5 items-center justify-center rounded-full bg-primary-500 px-1 text-xs font-bold text-white"
            >
                {{ totalCount }}
            </span>
        </MalioButton>

        <!-- Panel -->
        <Teleport v-if="isOpen" to="body">
            <Transition name="ct-panel" appear>
                <div class="fixed inset-0 z-50 flex justify-end">
                    <!-- Backdrop -->
                    <div
                        class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
                        @click="close"
                    />

                    <!-- Slide panel -->
                    <div class="relative z-10 flex h-full w-full max-w-lg flex-col bg-white shadow-2xl">
                        <!-- Header -->
                        <div class="flex items-center justify-between border-b border-neutral-200 px-5 py-4">
                            <div>
                                <h2 class="text-base font-bold text-neutral-900">{{ $t('clientTicket.adminTab') }}</h2>
                                <p class="mt-0.5 text-xs text-neutral-400">{{ projectName }}</p>
                            </div>
                            <MalioButtonIcon
                                icon="mdi:close"
                                aria-label="Fermer"
                                variant="ghost"
                                icon-size="20"
                                @click="close"
                            />
                        </div>

                        <!-- Filters -->
                        <div class="flex items-center gap-3 border-b border-neutral-100 px-5 py-3">
                            <select
                                v-model="filterStatus"
                                class="rounded-lg border border-neutral-300 px-3 py-1.5 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                            >
                                <option :value="null">{{ $t('clientTicket.allStatuses') }}</option>
                                <option value="new">{{ $t('clientTicket.status.new') }}</option>
                                <option value="in_progress">{{ $t('clientTicket.status.in_progress') }}</option>
                                <option value="done">{{ $t('clientTicket.status.done') }}</option>
                                <option value="rejected">{{ $t('clientTicket.status.rejected') }}</option>
                            </select>
                        </div>

                        <!-- Content -->
                        <div class="flex-1 overflow-y-auto px-5 py-4">
                            <div v-if="isLoading" class="py-8 text-center text-sm text-neutral-400">
                                {{ $t('common.loading') }}
                            </div>

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

                            <div v-else class="space-y-2">
                                <div
                                    v-for="ticket in filteredTickets"
                                    :key="ticket.id"
                                    class="rounded-lg border border-neutral-200 bg-white"
                                >
                                    <!-- Ticket row -->
                                    <div
                                        class="flex cursor-pointer items-start justify-between gap-3 p-3 transition-colors hover:bg-neutral-50"
                                        @click="toggleExpand(ticket.id)"
                                    >
                                        <div class="min-w-0 flex-1">
                                            <div class="flex items-center gap-2">
                                                <span class="text-xs 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>
                                                <span
                                                    class="rounded-full px-2 py-0.5 text-xs font-semibold"
                                                    :class="statusBadgeClass(ticket.status)"
                                                >
                                                    {{ $t(`clientTicket.status.${ticket.status}`) }}
                                                </span>
                                            </div>
                                            <p class="mt-1 text-sm font-semibold text-neutral-900 leading-snug">{{ ticket.title }}</p>
                                            <p class="mt-0.5 text-xs text-neutral-400">{{ formatDate(ticket.createdAt) }}</p>
                                        </div>
                                        <div class="flex items-center gap-1">
                                            <MalioButtonIcon
                                                icon="mdi:swap-horizontal"
                                                :aria-label="$t('clientTicket.changeStatus')"
                                                variant="ghost"
                                                icon-size="16"
                                                @click.stop="openStatusChange(ticket)"
                                            />
                                            <Icon
                                                :name="expandedId === ticket.id ? 'mdi:chevron-up' : 'mdi:chevron-down'"
                                                size="18"
                                                class="text-neutral-400"
                                            />
                                        </div>
                                    </div>

                                    <!-- Expanded details -->
                                    <div v-if="expandedId === ticket.id" class="border-t border-neutral-100 px-3 py-3">
                                        <p class="text-sm text-neutral-600 whitespace-pre-wrap">{{ ticket.description }}</p>
                                        <div v-if="ticket.url" class="mt-2">
                                            <a
                                                :href="ticket.url"
                                                target="_blank"
                                                class="text-xs text-primary-500 underline hover:text-primary-600"
                                            >
                                                {{ ticket.url }}
                                            </a>
                                        </div>
                                        <div v-if="ticket.statusComment" class="mt-2 rounded-lg bg-neutral-50 p-2 text-xs text-neutral-500">
                                            {{ ticket.statusComment }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Transition>
        </Teleport>

        <!-- Status change modal -->
        <Teleport v-if="statusModalOpen" to="body">
            <Transition name="ct-modal" appear>
                <div class="fixed inset-0 z-[60] flex items-center justify-center p-4">
                    <div
                        class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
                        @click="statusModalOpen = false"
                    />
                    <div class="relative z-10 w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl">
                        <h3 class="text-lg font-bold text-neutral-900">{{ $t('clientTicket.changeStatus') }}</h3>
                        <p v-if="statusTarget" class="mt-1 text-sm text-neutral-500">
                            CT-{{ String(statusTarget.number).padStart(3, '0') }} — {{ statusTarget.title }}
                        </p>

                        <div class="mt-4">
                            <label class="mb-1 block text-sm font-medium text-neutral-700">Nouveau statut</label>
                            <select
                                v-model="newStatus"
                                class="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                            >
                                <option :value="null" disabled>—</option>
                                <option
                                    v-for="s in availableStatusTransitions"
                                    :key="s.value"
                                    :value="s.value"
                                >
                                    {{ s.label }}
                                </option>
                            </select>
                        </div>

                        <div v-if="newStatus === 'rejected'" class="mt-4">
                            <MalioInputTextArea
                                v-model="statusComment"
                                :label="$t('clientTicket.statusComment')"
                                :size="3"
                            />
                            <p v-if="rejectionError" class="mt-1 text-xs text-red-500">
                                {{ $t('clientTicket.rejectionRequired') }}
                            </p>
                        </div>

                        <div class="mt-6 flex justify-end gap-3">
                            <MalioButton
                                variant="tertiary"
                                :label="$t('common.cancel')"
                                button-class="w-auto px-4"
                                @click="statusModalOpen = false"
                            />
                            <MalioButton
                                label="Confirmer"
                                button-class="w-auto px-6"
                                :disabled="isUpdatingStatus"
                                @click="confirmStatusChange"
                            />
                        </div>
                    </div>
                </div>
            </Transition>
        </Teleport>
    </div>
</template>

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

const props = defineProps<{
    projectId: number
    projectName: string
}>()

const { t } = useI18n()
const clientTicketService = useClientTicketService()
const { typeBadgeClass, statusBadgeClass, formatDate, getAvailableStatusTransitions } = useClientTicketHelpers()

const isOpen = ref(false)
const isLoading = ref(false)
const tickets = ref<ClientTicket[]>([])
const filterStatus = ref<string | null>(null)
const expandedId = ref<number | null>(null)

const totalCount = computed(() =>
    tickets.value.filter(t => t.status === 'new' || t.status === 'in_progress').length
)

const filteredTickets = computed(() => {
    if (!filterStatus.value) return tickets.value
    return tickets.value.filter(t => t.status === filterStatus.value)
})

// Status change
const statusModalOpen = ref(false)
const statusTarget = ref<ClientTicket | null>(null)
const newStatus = ref<string | null>(null)
const statusComment = ref('')
const rejectionError = ref(false)
const isUpdatingStatus = ref(false)

const availableStatusTransitions = computed(() => {
    if (!statusTarget.value) return []
    return getAvailableStatusTransitions(statusTarget.value.status, t)
})

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

function open() {
    isOpen.value = true
    loadTickets()
}

function close() {
    isOpen.value = false
    expandedId.value = null
}

function toggleExpand(id: number) {
    expandedId.value = expandedId.value === id ? null : id
}

function openStatusChange(ticket: ClientTicket) {
    statusTarget.value = ticket
    newStatus.value = null
    statusComment.value = ''
    rejectionError.value = false
    statusModalOpen.value = true
}

async function confirmStatusChange() {
    if (!statusTarget.value || !newStatus.value) return

    if (newStatus.value === 'rejected' && !statusComment.value.trim()) {
        rejectionError.value = true
        return
    }

    isUpdatingStatus.value = true
    try {
        await clientTicketService.updateStatus(statusTarget.value.id, {
            status: newStatus.value as ClientTicketStatus,
            statusComment: newStatus.value === 'rejected' ? statusComment.value.trim() : null,
        })
        statusModalOpen.value = false
        await loadTickets()
    } finally {
        isUpdatingStatus.value = false
    }
}
</script>

<style scoped>
.ct-panel-enter-active,
.ct-panel-leave-active {
    transition: opacity 0.2s ease;
}

.ct-panel-enter-active > div:last-child,
.ct-panel-leave-active > div:last-child {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-panel-enter-from,
.ct-panel-leave-to {
    opacity: 0;
}

.ct-panel-enter-from > div:last-child,
.ct-panel-leave-to > div:last-child {
    transform: translateX(100%);
}

.ct-modal-enter-active,
.ct-modal-leave-active {
    transition: opacity 0.15s ease;
}

.ct-modal-enter-from,
.ct-modal-leave-to {
    opacity: 0;
}
</style>
