<script setup>
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
import { Head, Link, router } from '@inertiajs/vue3';
import { reactive, watch } from 'vue';

const props = defineProps({
    bookings: {
        type: Object,
        required: true,
    },
    filters: {
        type: Object,
        default: () => ({}),
    },
    statusOptions: {
        type: Object,
        default: () => ({}),
    },
});

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

watch(localFilters, () => {
    router.get(route('supervisor.bookings.index'), localFilters, {
        preserveState: true,
        replace: true,
    });
});

const formatDate = (iso) => {
    if (!iso) return '—';
    return new Intl.DateTimeFormat('fr-FR', {
        dateStyle: 'short',
        timeStyle: 'short',
    }).format(new Date(iso));
};

const formatCurrency = (value) =>
    new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value ?? 0);

const statusColor = (status) => {
    const colors = {
        pending: 'bg-gray-100 text-gray-800',
        confirmed: 'bg-blue-100 text-blue-800',
        expired: 'bg-orange-100 text-orange-800',
        active: 'bg-green-100 text-green-800',
        completed: 'bg-indigo-100 text-indigo-800',
        cancelled: 'bg-yellow-100 text-yellow-800',
        no_show: 'bg-red-100 text-red-800',
    };
    return colors[status] ?? 'bg-gray-100 text-gray-800';
};
</script>

<template>
    <Head title="Réservations" />

    <SupervisorLayout title="Réservations">
        <div class="mb-6 flex flex-wrap gap-4 rounded-lg bg-white p-4 shadow">
            <div>
                <label class="block text-xs font-medium text-gray-500">Statut</label>
                <select
                    v-model="localFilters.status"
                    class="mt-1 block rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                >
                    <option value="">Tous</option>
                    <option v-for="(label, value) in statusOptions" :key="value" :value="value">
                        {{ label }}
                    </option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500">Date</label>
                <input
                    v-model="localFilters.date"
                    type="date"
                    class="mt-1 block rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                />
            </div>
        </div>

        <div class="overflow-hidden rounded-lg bg-white shadow">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Créneau</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Utilisateur</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Machine</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Statut</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Frais</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <tr v-if="bookings.data.length === 0">
                        <td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">
                            Aucune réservation trouvée.
                        </td>
                    </tr>
                    <tr v-for="booking in bookings.data" :key="booking.uuid" class="hover:bg-gray-50">
                        <td class="whitespace-nowrap px-4 py-3 text-sm">
                            <div>{{ formatDate(booking.slot_start) }}</div>
                            <div class="text-xs text-gray-500">→ {{ formatDate(booking.slot_end) }}</div>
                        </td>
                        <td class="px-4 py-3 text-sm">
                            <div class="font-medium text-gray-800">{{ booking.user?.name ?? '—' }}</div>
                            <div class="text-xs text-gray-500">{{ booking.user?.email }}</div>
                        </td>
                        <td class="px-4 py-3 text-sm">
                            <Link
                                v-if="booking.machine"
                                :href="route('supervisor.machines.show', booking.machine.uuid)"
                                class="text-indigo-600 hover:text-indigo-800"
                            >
                                {{ booking.machine.name }}
                            </Link>
                            <span v-else>—</span>
                            <div v-if="booking.machine?.establishment_name" class="text-xs text-gray-500">
                                {{ booking.machine.establishment_name }}
                            </div>
                        </td>
                        <td class="px-4 py-3">
                            <span
                                class="rounded-full px-2.5 py-0.5 text-xs font-medium"
                                :class="statusColor(booking.status)"
                            >
                                {{ booking.status_label }}
                            </span>
                        </td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">
                            {{ formatCurrency(booking.booking_fee) }}
                        </td>
                    </tr>
                </tbody>
            </table>

            <div v-if="bookings.links.length > 3" class="flex items-center justify-between border-t px-4 py-3">
                <p class="text-sm text-gray-600">
                    {{ bookings.from ?? 0 }}–{{ bookings.to ?? 0 }} sur {{ bookings.total }}
                </p>
                <div class="flex gap-1">
                    <Link
                        v-for="link in bookings.links"
                        :key="link.label"
                        :href="link.url"
                        v-html="link.label"
                        class="rounded px-3 py-1 text-sm"
                        :class="
                            link.active
                                ? 'bg-indigo-600 text-white'
                                : link.url
                                  ? 'text-gray-600 hover:bg-gray-100'
                                  : 'cursor-not-allowed text-gray-300'
                        "
                        preserve-state
                    />
                </div>
            </div>
        </div>
    </SupervisorLayout>
</template>
