import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table';
import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal';
import { useCrudPermissions } from '@admin/hooks/use-crud-permissions';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import { Head, router } from '@inertiajs/react';
import { useState } from 'react';

type ReservationRow = { id: number; guest: string; phone: string; email: string; when: string; guests: number; message: string; status: string; status_label: string; created_at: string };
type StatusOption = { value: string; label: string };

function TableReservationsIndex({ reservations, statuses }: { reservations: ReservationRow[]; statuses: StatusOption[] }) {
    const { canEdit, canDelete } = useCrudPermissions('table-reservation');
    const [deleteRow, setDeleteRow] = useState<ReservationRow | null>(null);
    const columns: DataTableColumn<ReservationRow>[] = [
        { header: 'Guest', key: 'guest' },
        { header: 'When', key: 'when' },
        { header: 'Guests', key: 'guests' },
        { header: 'Phone', key: 'phone' },
        { header: 'Message', key: 'message', truncate: true },
        {
            header: 'Status',
            key: 'status',
            render: (row) => canEdit ? (
                <select className="ti-form-select" value={row.status} aria-label={`Status for ${row.guest}`} onChange={(event) => router.put(route('admin.table-reservations.status', { reservation: row.id }), { status: event.target.value }, { preserveScroll: true })}>
                    {statuses.map((status) => <option key={status.value} value={status.value}>{status.label}</option>)}
                </select>
            ) : row.status_label,
        },
        { header: 'Received', key: 'created_at' },
    ];

    return (
        <>
            <Head title="Table reservations" />
            <DataTable data={reservations} columns={columns} title="Table reservations" itemsPerPage={10} onDelete={canDelete ? (row) => setDeleteRow(row) : undefined} showDelete={canDelete} noDataText="No table requests yet" />
            <DeleteConfirmationModal isOpen={deleteRow !== null} onClose={() => setDeleteRow(null)} itemName={deleteRow?.guest || 'this reservation'} itemType="reservation" deleteEndpoint={deleteRow ? route('admin.table-reservations.destroy', { reservation: deleteRow.id }) : ''} loadingMessage="Deleting reservation..." />
        </>
    );
}

export default Object.assign(TableReservationsIndex, { layout: dashboardPersistentLayout('Table reservations', 'Private table requests from the dining page') });