import { Head, router, useForm } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import type { FormEvent } from 'react';
import { useMemo, useState } from 'react';
import { DataTable } from '@/components/data-table';
import { FormField } from '@/components/form-field';
import { EmptyState } from '@/components/layout/empty-state';
import { PageHeader } from '@/components/layout/page-header';
import { SectionCard } from '@/components/layout/section-card';
import { ResourceActionsMenu } from '@/components/resource-actions-menu';
import { ResponsiveDialog } from '@/components/responsive-dialog';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { VehicleSizeCategoryIcon } from '@/components/vehicle-size-category-icon';
import AppLayout from '@/layouts/app-layout';
import type { VehicleSizeCategoryOption } from '@/lib/vehicle-sizes';
import adminVehicleSizes from '@/routes/admin/vehicle-sizes';

type Props = {
    categories: VehicleSizeCategoryOption[];
    showArchived: boolean;
};

type CategoryFormData = {
    name: string;
    description: string;
    emoji_fallback: string;
    display_order: number;
    is_active: boolean;
    image: File | null;
    remove_image: boolean;
};

const emptyForm = (): CategoryFormData => ({
    name: '',
    description: '',
    emoji_fallback: '🚗',
    display_order: 0,
    is_active: true,
    image: null,
    remove_image: false,
});

export default function AdminVehicleSizesIndex({
    categories,
    showArchived,
}: Props) {
    const [dialogOpen, setDialogOpen] = useState(false);
    const [editingCategory, setEditingCategory] =
        useState<VehicleSizeCategoryOption | null>(null);

    const form = useForm<CategoryFormData>(emptyForm());

    const openCreate = () => {
        setEditingCategory(null);
        form.clearErrors();
        form.setData(emptyForm());
        setDialogOpen(true);
    };

    const openEdit = (category: VehicleSizeCategoryOption) => {
        setEditingCategory(category);
        form.clearErrors();
        form.setData({
            name: category.name,
            description: category.description ?? '',
            emoji_fallback: category.emoji_fallback ?? '🚗',
            display_order: category.display_order,
            is_active: category.is_active,
            image: null,
            remove_image: false,
        });
        setDialogOpen(true);
    };

    const closeDialog = () => {
        setDialogOpen(false);
        setEditingCategory(null);
        form.reset();
        form.clearErrors();
    };

    const submit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        const options = {
            forceFormData: true,
            preserveScroll: true,
            onSuccess: () => closeDialog(),
        };

        if (editingCategory) {
            form.transform((data) => ({
                ...data,
                _method: 'patch',
            }));

            form.post(
                adminVehicleSizes.update.url({
                    vehicleSizeCategory: editingCategory.id,
                }),
                options,
            );

            return;
        }

        form.post(adminVehicleSizes.store.url(), options);
    };

    const toggleArchivedFilter = () => {
        router.get(
            adminVehicleSizes.index.url({
                query: showArchived ? undefined : { archived: 1 },
            }),
            {},
            { preserveState: true },
        );
    };

    const deactivate = (categoryId: number) => {
        router.patch(
            adminVehicleSizes.deactivate.url({
                vehicleSizeCategory: categoryId,
            }),
            {},
            { preserveScroll: true },
        );
    };

    const reactivate = (categoryId: number) => {
        router.patch(
            adminVehicleSizes.reactivate.url({
                vehicleSizeCategory: categoryId,
            }),
            {},
            { preserveScroll: true },
        );
    };

    const deleteCategory = (categoryId: number) => {
        router.delete(
            adminVehicleSizes.destroy.url({
                vehicleSizeCategory: categoryId,
            }),
            { preserveScroll: true },
        );
    };

    const reorderCategories = (orderedIds: (number | string)[]) => {
        router.post(
            adminVehicleSizes.reorder.url(),
            { ids: orderedIds },
            { preserveScroll: true, preserveState: true },
        );
    };

    const columns = useMemo<ColumnDef<VehicleSizeCategoryOption>[]>(
        () => [
            {
                id: 'preview',
                header: '',
                cell: ({ row }) => (
                    <VehicleSizeCategoryIcon
                        imageUrl={row.original.image_url}
                        name={row.original.name}
                        emojiFallback={row.original.emoji_fallback}
                        withTile
                        colorClassName="text-primary"
                    />
                ),
            },
            {
                accessorKey: 'name',
                header: 'Name',
                meta: { label: 'Name' },
            },
            {
                accessorKey: 'slug',
                header: 'Slug',
                meta: { label: 'Slug' },
            },
            {
                accessorKey: 'display_order',
                header: 'Order',
                meta: { label: 'Order' },
            },
            {
                accessorKey: 'is_active',
                header: 'Status',
                meta: { label: 'Status' },
                cell: ({ row }) =>
                    row.original.is_active ? 'Active' : 'Archived',
            },
            {
                id: 'actions',
                enableHiding: false,
                header: () => <span className="sr-only">Actions</span>,
                cell: ({ row }) => (
                    <ResourceActionsMenu
                        onEdit={() => openEdit(row.original)}
                        onArchive={
                            row.original.is_active
                                ? () => deactivate(row.original.id)
                                : undefined
                        }
                        onReactivate={
                            row.original.is_active
                                ? undefined
                                : () => reactivate(row.original.id)
                        }
                        onDelete={() => deleteCategory(row.original.id)}
                        deleteTitle="Delete vehicle size?"
                        deleteDescription="This removes the size from the catalog and package pricing. Sizes linked to saved vehicles cannot be deleted."
                    />
                ),
            },
        ],
        [],
    );

    return (
        <>
            <Head title="Vehicle sizes" />

            <div className="flex h-full flex-1 flex-col gap-6">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <PageHeader title="Vehicle sizes" />
                    <div className="flex flex-wrap gap-2">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={toggleArchivedFilter}
                        >
                            {showArchived
                                ? 'Show active only'
                                : 'Show archived'}
                        </Button>
                        <Button type="button" onClick={openCreate}>
                            Add vehicle size
                        </Button>
                    </div>
                </div>

                <SectionCard title="Catalog">
                    {categories.length === 0 ? (
                        <EmptyState
                            title={
                                showArchived
                                    ? 'No archived sizes'
                                    : 'No vehicle sizes yet'
                            }
                            description={
                                showArchived
                                    ? 'Archived sizes will appear here.'
                                    : 'Add sizes like Sedan, Mini SUV, or Truck for booking and package pricing.'
                            }
                        />
                    ) : (
                        <DataTable
                            columns={columns}
                            data={categories}
                            searchPlaceholder="Search vehicle sizes..."
                            onReorder={reorderCategories}
                        />
                    )}
                </SectionCard>
            </div>

            <ResponsiveDialog
                open={dialogOpen}
                onOpenChange={(open) => {
                    if (!open) {
                        closeDialog();
                    } else {
                        setDialogOpen(true);
                    }
                }}
                title={
                    editingCategory
                        ? `Edit ${editingCategory.name}`
                        : 'Add vehicle size'
                }
                description="Upload an image or keep the emoji fallback shown in the booking wizard."
            >
                <form onSubmit={submit} className="grid gap-4">
                    <FormField label="Name" htmlFor="vehicle-size-name">
                        <Input
                            id="vehicle-size-name"
                            value={form.data.name}
                            onChange={(event) =>
                                form.setData('name', event.target.value)
                            }
                        />
                    </FormField>

                    <FormField
                        label="Description"
                        htmlFor="vehicle-size-description"
                    >
                        <Textarea
                            id="vehicle-size-description"
                            rows={3}
                            value={form.data.description}
                            onChange={(event) =>
                                form.setData('description', event.target.value)
                            }
                        />
                    </FormField>

                    <FormField
                        label="Emoji fallback"
                        htmlFor="vehicle-size-emoji"
                    >
                        <Input
                            id="vehicle-size-emoji"
                            value={form.data.emoji_fallback}
                            onChange={(event) =>
                                form.setData(
                                    'emoji_fallback',
                                    event.target.value,
                                )
                            }
                        />
                    </FormField>

                    <FormField label="Image" htmlFor="vehicle-size-image">
                        <Input
                            id="vehicle-size-image"
                            type="file"
                            accept="image/png,image/jpeg,image/webp,image/svg+xml,.svg"
                            onChange={(event) =>
                                form.setData(
                                    'image',
                                    event.target.files?.[0] ?? null,
                                )
                            }
                        />
                    </FormField>

                    {editingCategory?.image_url ? (
                        <div className="flex items-center gap-3 rounded-lg border p-3">
                            <VehicleSizeCategoryIcon
                                imageUrl={editingCategory.image_url}
                                name={editingCategory.name}
                                emojiFallback={editingCategory.emoji_fallback}
                                withTile
                                colorClassName="text-primary"
                            />
                            <div className="flex items-center gap-2">
                                <Checkbox
                                    id="vehicle-size-remove-image"
                                    checked={form.data.remove_image}
                                    onCheckedChange={(checked) =>
                                        form.setData(
                                            'remove_image',
                                            checked === true,
                                        )
                                    }
                                />
                                <Label htmlFor="vehicle-size-remove-image">
                                    Remove current image
                                </Label>
                            </div>
                        </div>
                    ) : null}

                    <FormField label="Display order" htmlFor="vehicle-size-order">
                        <Input
                            id="vehicle-size-order"
                            type="number"
                            min={0}
                            value={form.data.display_order}
                            onChange={(event) =>
                                form.setData(
                                    'display_order',
                                    Number(event.target.value),
                                )
                            }
                        />
                    </FormField>

                    <div className="flex items-center gap-2">
                        <Switch
                            id="vehicle-size-active"
                            checked={form.data.is_active}
                            onCheckedChange={(checked) =>
                                form.setData('is_active', checked)
                            }
                        />
                        <Label htmlFor="vehicle-size-active">Active</Label>
                    </div>

                    <div className="flex flex-wrap gap-2 pt-2">
                        <Button type="submit" disabled={form.processing}>
                            {editingCategory ? 'Save changes' : 'Create size'}
                        </Button>
                        <Button
                            type="button"
                            variant="outline"
                            onClick={closeDialog}
                        >
                            Cancel
                        </Button>
                    </div>
                </form>
            </ResponsiveDialog>
        </>
    );
}

AdminVehicleSizesIndex.layout = (page: React.ReactNode) => (
    <AppLayout
        breadcrumbs={[
            {
                title: 'Vehicle sizes',
                href: '/admin/vehicle-sizes',
            },
        ]}
    >
        {page}
    </AppLayout>
);