<script setup>
import { reactive } from 'vue';
import { Head, router } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import AppCard from '@/Components/ui/AppCard.vue';
import AppTable from '@/Components/ui/AppTable.vue';
import StatusBadge from '@/Components/ui/StatusBadge.vue';

const props = defineProps({
    tickets: Object,
    filters: Object,
    statuses: Array,
});

const query = reactive({
    status: props.filters?.status || '',
});

const applyFilters = () => {
    router.get(route('admin.tickets.index'), query, { preserveState: true, replace: true });
};

const updateTicket = (ticket) => {
    router.patch(route('admin.tickets.update', ticket.id), {
        status: ticket.status,
        admin_reply: ticket.admin_reply || '',
    }, { preserveScroll: true });
};
</script>

<template>
    <Head title="Tickets" />
    <AdminLayout>
        <template #header>
            <div>
                <h2 class="text-xl font-semibold text-gray-800">Support Tickets</h2>
                <p class="mt-1 text-sm text-gray-500">Respond to user tickets and link issues to transactions.</p>
            </div>
        </template>

        <div class="mx-auto max-w-7xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
            <AppCard title="Filter">
                <div class="flex gap-3">
                    <select v-model="query.status" class="rounded-md border-gray-300 text-sm shadow-sm">
                        <option value="">All statuses</option>
                        <option v-for="status in statuses" :key="status" :value="status">{{ status }}</option>
                    </select>
                    <button type="button" class="rounded-md border border-gray-300 px-3 py-2 text-sm" @click="applyFilters">Apply</button>
                </div>
            </AppCard>

            <div class="space-y-4">
                <AppCard v-for="ticket in tickets.data" :key="ticket.id">
                    <div class="space-y-4">
                        <div class="flex flex-wrap items-start justify-between gap-3">
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900">{{ ticket.subject }}</h3>
                                <p class="mt-1 text-xs text-gray-500">
                                    {{ ticket.user?.name }} | Tx: {{ ticket.transaction?.internal_reference || 'N/A' }}
                                </p>
                            </div>
                            <StatusBadge :status="ticket.status" />
                        </div>

                        <p class="rounded bg-gray-50 p-3 text-sm text-gray-700">{{ ticket.message }}</p>

                        <div class="grid gap-3 sm:grid-cols-2">
                            <select v-model="ticket.status" class="rounded-md border-gray-300 text-sm shadow-sm">
                                <option v-for="status in statuses" :key="status" :value="status">{{ status }}</option>
                            </select>
                            <button type="button" class="rounded-md border border-gray-300 px-3 py-2 text-sm" @click="updateTicket(ticket)">
                                Save Update
                            </button>
                        </div>

                        <textarea
                            v-model="ticket.admin_reply"
                            rows="3"
                            class="w-full rounded-md border-gray-300 text-sm shadow-sm"
                            placeholder="Admin reply"
                        />
                    </div>
                </AppCard>
            </div>
        </div>
    </AdminLayout>
</template>

