import { adminToast } from '@admin/components/ui/admin-toast';
import { CrudCreateLink } from '@admin/components/ui/crud-create-link';
import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table';
import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal';
import { formHelpClassName } from '@admin/components/ui/field-styles';
import { useCrudPermissions } from '@admin/hooks/use-crud-permissions';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import EditRoom from '@admin/pages/rooms/edit-room';
import { cn } from '@admin/lib/utils';
import { Head } from '@inertiajs/react';
import { useState } from 'react';

type RoomRow = {
    id: number;
    name: string;
    nightly_rate: string;
    units_count: number;
    sort_order: number;
    status: boolean;
};

type RoomRecord = RoomRow & {
    summary?: string;
    description?: string;
    occupancy?: number | null;
    bed_configuration?: string;
    featured_image?: string;
    gallery?: string[];
    amenities?: string;
    house_rules?: string;
    units?: string;
};

type RoomsIndexProps = {
    rooms: RoomRow[];
    tzsPerUsd: string | null;
};

function RoomsIndex({ rooms, tzsPerUsd }: RoomsIndexProps) {
    const { canEdit, canDelete } = useCrudPermissions('room');
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [initialData, setInitialData] = useState<RoomRecord | null>(null);
    const [deleteModal, setDeleteModal] = useState<{ show: boolean; room: RoomRow | null }>({
        show: false,
        room: null,
    });

    const columns: DataTableColumn<RoomRow>[] = [
        { header: 'Order', key: 'sort_order', className: 'w-20' },
        { header: 'Room type', key: 'name', truncate: true },
        { header: 'Nightly rate', key: 'nightly_rate', truncate: true },
        { header: 'Rooms', key: 'units_count', className: 'w-20' },
        { header: 'Status', key: 'status' },
    ];

    const handleEdit = async (row: RoomRow) => {
        try {
            const response = await fetch(`/admin/edit_room/${row.id}`);
            if (!response.ok) {
                throw new Error('Failed to fetch room');
            }

            setInitialData((await response.json()) as RoomRecord);
            setIsEditModalOpen(true);
        } catch {
            adminToast.error('Could not load room details');
        }
    };

    return (
        <>
            <Head title="Rooms" />

            <div className="grid grid-cols-12 gap-6">
                <div className="col-span-12">
                    <CrudCreateLink href={route('admin.rooms.create')} label="Create room" resource="room" />
                    <p className={cn('mb-4', formHelpClassName)}>
                        Published room types appear on the home page and Rooms &amp; Suites. Rates are stored in Tanzanian shillings. Featured image 575×420 px. Gallery 830×630 px.
                    </p>
                    <DataTable
                        data={rooms}
                        columns={columns}
                        title="Rooms"
                        itemsPerPage={10}
                        onEdit={canEdit ? handleEdit : undefined}
                        onDelete={canDelete ? (row) => setDeleteModal({ show: true, room: row }) : undefined}
                        showEdit={canEdit}
                        showDelete={canDelete}
                        noDataText="No rooms found"
                    />
                </div>
            </div>

            <DeleteConfirmationModal
                isOpen={deleteModal.show}
                onClose={() => setDeleteModal({ show: false, room: null })}
                itemName={deleteModal.room?.name ?? 'this room'}
                itemType="room"
                deleteEndpoint={`/admin/api/delete_room/${deleteModal.room?.id ?? ''}`}
                loadingMessage="Deleting room..."
            />

            <EditRoom
                isOpen={isEditModalOpen}
                onClose={() => setIsEditModalOpen(false)}
                initialData={initialData}
                tzsPerUsd={tzsPerUsd}
            />
        </>
    );
}

export default Object.assign(RoomsIndex, {
    layout: dashboardPersistentLayout('Rooms', 'Room types, photos, and room numbers'),
});