<script setup>
import DataTable from '@/Components/Supervisor/DataTable.vue';
import Pagination from '@/Components/Supervisor/Pagination.vue';
import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
import {
    bookingStatusColors,
    filterInputClass,
    filterSelectClass,
    getStatusColor,
    linkClass,
    rowClass,
    tdClass,
} from '@/Components/Supervisor/ui.js';
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
import { Head, Link } from '@inertiajs/vue3';
import { computed } from 'vue';

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

const { localFilters, toggleSort } = useListFilters('supervisor.bookings.index', {
    establishment_id: props.filters.establishment_id ?? '',
    user: props.filters.user ?? '',
    status: props.filters.status ?? '',
    date: props.filters.date ?? '',
    sort: props.filters.sort ?? 'slot_start',
    direction: props.filters.direction ?? 'desc',
    per_page: props.filters.per_page ?? 10,
}, { debounceKeys: ['user'] });

const showEstablishmentFilter = computed(() => props.establishments.length > 1);

const handleSort = (key) => toggleSort(key, ['slot_start', 'booking_fee']);

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);
</script>

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

    <SupervisorLayout title="Réservations">
        <DataTable>
            <template #head>
                <tr>
                    <TableHeaderCell
                        label="Créneau"
                        sortable
                        sort-key="slot_start"
                        :active-sort="localFilters.sort"
                        :sort-direction="localFilters.direction"
                        @sort="handleSort"
                    >
                        <input v-model="localFilters.date" type="date" :class="filterInputClass" />
                    </TableHeaderCell>
                    <TableHeaderCell
                        label="Utilisateur"
                        sortable
                        sort-key="user"
                        :active-sort="localFilters.sort"
                        :sort-direction="localFilters.direction"
                        @sort="handleSort"
                    >
                        <input
                            v-model="localFilters.user"
                            type="text"
                            placeholder="Nom ou e-mail…"
                            :class="filterInputClass"
                        />
                    </TableHeaderCell>
                    <TableHeaderCell
                        label="Machine"
                        sortable
                        sort-key="machine"
                        :active-sort="localFilters.sort"
                        :sort-direction="localFilters.direction"
                        @sort="handleSort"
                    >
                        <select
                            v-if="showEstablishmentFilter"
                            v-model="localFilters.establishment_id"
                            :class="filterSelectClass"
                        >
                            <option value="">Toutes</option>
                            <option v-for="est in establishments" :key="est.id" :value="est.id">
                                {{ est.name }}
                            </option>
                        </select>
                    </TableHeaderCell>
                    <TableHeaderCell
                        label="Statut"
                        sortable
                        sort-key="status"
                        :active-sort="localFilters.sort"
                        :sort-direction="localFilters.direction"
                        @sort="handleSort"
                    >
                        <select v-model="localFilters.status" :class="filterSelectClass">
                            <option value="">Tous</option>
                            <option v-for="(label, value) in statusOptions" :key="value" :value="value">
                                {{ label }}
                            </option>
                        </select>
                    </TableHeaderCell>
                    <TableHeaderCell
                        label="Frais"
                        sortable
                        sort-key="booking_fee"
                        :active-sort="localFilters.sort"
                        :sort-direction="localFilters.direction"
                        @sort="handleSort"
                    />
                </tr>
            </template>

            <tr v-if="bookings.data.length === 0">
                <td colspan="5" class="px-6 py-12 text-center text-sm text-slate-400">
                    Aucune réservation trouvée.
                </td>
            </tr>
            <tr v-for="booking in bookings.data" :key="booking.uuid" :class="rowClass">
                <td :class="tdClass">
                    <div class="font-medium text-slate-800">{{ formatDate(booking.slot_start) }}</div>
                    <div class="mt-0.5 text-xs text-slate-400">→ {{ formatDate(booking.slot_end) }}</div>
                </td>
                <td :class="tdClass">
                    <div class="font-medium text-slate-800">{{ booking.user?.name ?? '—' }}</div>
                    <div class="text-xs text-slate-400">{{ booking.user?.email }}</div>
                </td>
                <td :class="tdClass">
                    <Link
                        v-if="booking.machine"
                        :href="route('supervisor.machines.show', booking.machine.uuid)"
                        :class="linkClass"
                    >
                        {{ booking.machine.name }}
                    </Link>
                    <span v-else>—</span>
                    <div v-if="booking.machine?.establishment_name" class="mt-0.5 text-xs text-slate-400">
                        {{ booking.machine.establishment_name }}
                    </div>
                </td>
                <td :class="tdClass">
                    <StatusBadge
                        :label="booking.status_label"
                        :color-class="getStatusColor(booking.status, bookingStatusColors)"
                    />
                </td>
                <td :class="[tdClass, 'font-semibold text-slate-800']">
                    {{ formatCurrency(booking.booking_fee) }}
                </td>
            </tr>

            <template #footer>
                <Pagination
                    :paginator="bookings"
                    :per-page="localFilters.per_page"
                    @update:per-page="(value) => { localFilters.per_page = value; }"
                />
            </template>
        </DataTable>
    </SupervisorLayout>
</template>
