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 BookingRow = {
    id: number;
    invoice_number: string;
    guest: string;
    email: string;
    phone: string;
    room: string;
    room_number: string;
    dates: string;
    nights: number;
    guests: string;
    total: string;
    total_usd: string | null;
    status: string;
    status_label: string;
    message: string;
    created_at: string;
};

type BookingStatus = {
    value: string;
    label: string;
};

type BookingsIndexProps = {
    bookings: BookingRow[];
    statuses: BookingStatus[];
};

function BookingsIndex({ bookings, statuses }: BookingsIndexProps) {
    const { canEdit, canDelete } = useCrudPermissions('booking');
    const [deleteRow, setDeleteRow] = useState<BookingRow | null>(null);

    const columns: DataTableColumn<BookingRow>[] = [
        { header: 'Invoice', key: 'invoice_number' },
        { header: 'Guest', key: 'guest' },
        { header: 'Room', key: 'room' },
        { header: 'Number', key: 'room_number' },
        { header: 'Dates', key: 'dates' },
        { header: 'Nights', key: 'nights' },
        { header: 'Guests', key: 'guests' },
        {
            header: 'Total',
            key: 'total',
            render: (row) => (row.total_usd ? `${row.total} · ${row.total_usd}` : row.total),
        },
        {
            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.bookings.status', { booking: 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: 'Phone', key: 'phone' },
        { header: 'Received', key: 'created_at' },
    ];

    return (
        <>
            <Head title="Bookings" />
            <div className="grid grid-cols-12 gap-6">
                <div className="col-span-12">
                    <DataTable
                        data={bookings}
                        columns={columns}
                        title="Bookings"
                        itemsPerPage={10}
                        onDelete={canDelete ? setDeleteRow : undefined}
                        showDelete={canDelete}
                        noDataText="No bookings yet"
                    />
                    <DeleteConfirmationModal
                        isOpen={deleteRow !== null}
                        onClose={() => setDeleteRow(null)}
                        itemName={deleteRow?.guest ?? 'this booking'}
                        itemType="booking"
                        deleteEndpoint={route('admin.bookings.destroy', { booking: deleteRow?.id ?? 0 })}
                        loadingMessage="Deleting booking..."
                    />
                    <p className="mt-4 mb-0 text-sm text-gray-500 dark:text-white/70">
                        A requested, confirmed, or checked-in stay keeps its room number. Cancelled and completed stays free that number for new bookings.
                    </p>
                </div>
            </div>
        </>
    );
}

export default Object.assign(BookingsIndex, {
    layout: dashboardPersistentLayout('Bookings', 'Room stays and the room number assigned to each one'),
});