import { adminToast } from '@admin/components/ui/admin-toast';
import { CreatePageLayout } from '@admin/components/ui/create-page-layout';
import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table';
import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal';
import { formClassName, formHelpClassName } from '@admin/components/ui/field-styles';
import { useCrudPermissions } from '@admin/hooks/use-crud-permissions';
import { useFormResponse } from '@admin/hooks/use-form-response';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import { cn } from '@admin/lib/utils';
import EditItem from '@admin/pages/menu-items/edit-item';
import { ItemFormFields, type MenuCurrency } from '@admin/pages/menu-items/item-form-fields';
import { Head, useForm } from '@inertiajs/react';
import { FormEvent, useState } from 'react';

type ItemSummary = {
    id: number;
    name: string;
    category: string;
    price: string;
    status: boolean;
};

type ItemRecord = {
    id: number;
    menu_category_id: number;
    name: string;
    description?: string | null;
    price?: string;
    currency_code?: string;
    image?: string;
    sort_order?: number;
    status: boolean | number;
};

type MenuCategoryOption = {
    id: number;
    name: string;
};

type CreateItemProps = {
    items: ItemSummary[];
    categories: MenuCategoryOption[];
    currencies: MenuCurrency[];
    tzsPerUsd: string | null;
};

const sidebarColumns: DataTableColumn<ItemSummary>[] = [
    { header: 'Dish', key: 'name', truncate: true, className: 'w-[40%]' },
    { header: 'Category', key: 'category', truncate: true },
    { header: 'Price', key: 'price', truncate: true },
    { header: 'Status', key: 'status', className: 'w-24' },
];

function CreateItem({ items, categories, currencies, tzsPerUsd }: CreateItemProps) {
    const { canEdit, canDelete } = useCrudPermissions('menu-item');
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [initialData, setInitialData] = useState<ItemRecord | null>(null);
    const [deleteModal, setDeleteModal] = useState<{ show: boolean; item: ItemSummary | null }>({
        show: false,
        item: null,
    });
    const { data, setData, post, processing, errors, reset } = useForm({
        menu_category_id: categories[0] ? String(categories[0].id) : '',
        name: '',
        description: '',
        price: '',
        currency_code: 'USD',
        image: '',
        sort_order: items.length,
        status: true,
    });

    const action = useFormResponse({
        onComplete: () => reset(),
        loadingMessage: 'Saving menu item...',
    });

    const handleSubmit = (event: FormEvent) => {
        event.preventDefault();

        post('/admin/api/create_menu_item', {
            onStart: action.onStart,
            onSuccess: action.onSuccess,
            onError: action.onError,
            preserveScroll: true,
        });
    };

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

            setInitialData((await response.json()) as ItemRecord);
            setIsEditModalOpen(true);
        } catch {
            adminToast.error('Could not load menu item');
        }
    };

    return (
        <>
            <Head title="Create menu item" />

            <CreatePageLayout
                indexHref={route('admin.menu-items')}
                form={
                    <div className="box">
                        <div className="box-header">
                            <h5 className="box-title">Add menu item</h5>
                        </div>
                        <div className="box-body">
                            {categories.length === 0 && (
                                <p className={cn('mb-4', formHelpClassName)}>Add a menu category before adding dishes.</p>
                            )}
                            <form className={formClassName} noValidate onSubmit={handleSubmit}>
                                <ItemFormFields
                                    data={data}
                                    errors={errors}
                                    setData={setData}
                                    categories={categories}
                                    currencies={currencies}
                                    tzsPerUsd={tzsPerUsd}
                                />
                                <button type="submit" className="ti-btn ti-btn-primary" disabled={processing || categories.length === 0}>
                                    Save
                                </button>
                            </form>
                        </div>
                    </div>
                }
                sidebar={
                    <DataTable
                        data={items}
                        columns={sidebarColumns}
                        title="Menu items"
                        compact
                        onEdit={canEdit ? handleEdit : undefined}
                        onDelete={canDelete ? (row) => setDeleteModal({ show: true, item: row }) : undefined}
                        showEdit={canEdit}
                        showDelete={canDelete}
                        noDataText="No dishes yet"
                    />
                }
            />

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

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

export default Object.assign(CreateItem, {
    layout: dashboardPersistentLayout('Create menu item', 'Add a dish to the dining page'),
});