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 { VehicleSizePricingFields } from '@/components/admin/package-form-sections';
import { DataTable } from '@/components/data-table';
import { FormField } from '@/components/form-field';
import { EmptyState } from '@/components/layout/empty-state';
import { FormDrawer } from '@/components/layout/form-drawer';
import { PageHeader } from '@/components/layout/page-header';
import { SectionCard } from '@/components/layout/section-card';
import { ResourceActionsMenu } from '@/components/resource-actions-menu';
import { Button } from '@/components/ui/button';
import { SheetFooter } from '@/components/ui/sheet';
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 AppLayout from '@/layouts/app-layout';
import { buildDefaultPrices, formatPriceRangeCents  } from '@/lib/vehicle-sizes';
import type {VehicleSizeCategoryOption} from '@/lib/vehicle-sizes';
import adminAddons from '@/routes/admin/addons';

type AddonRow = {
    id: number;
    name: string;
    description: string | null;
    duration_minutes: number;
    prices: Record<string, number>;
    is_active: boolean;
    display_order: number;
};

type Props = {
    addons: AddonRow[];
    vehicleSizeCategories: VehicleSizeCategoryOption[];
};

export default function AdminAddonsIndex({ addons, vehicleSizeCategories }: Props) {
    const createForm = useForm({
        name: '',
        description: '',
        duration_minutes: 0,
        prices: buildDefaultPrices(vehicleSizeCategories),
        is_active: true,
    });

    const submitCreate = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        createForm.post(adminAddons.store.url(), {
            onSuccess: () => {
                createForm.reset();
                createForm.setData('prices', buildDefaultPrices(vehicleSizeCategories));
            },
        });
    };

    const [editingAddon, setEditingAddon] = useState<AddonRow | null>(null);
    const editForm = useForm({
        name: '',
        description: '',
        duration_minutes: 0,
        prices: buildDefaultPrices(vehicleSizeCategories),
        is_active: true,
    });

    const openEdit = (item: AddonRow) => {
        setEditingAddon(item);
        editForm.setData({
            name: item.name,
            description: item.description ?? '',
            duration_minutes: item.duration_minutes,
            prices: item.prices,
            is_active: item.is_active,
        });
        editForm.clearErrors();
    };

    const closeEdit = () => {
        setEditingAddon(null);
        editForm.reset();
        editForm.clearErrors();
    };

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

        if (!editingAddon) {
return;
}

        editForm.patch(adminAddons.update.url({ addon: editingAddon.id }), {
            onSuccess: () => closeEdit(),
        });
    };

    const deleteAddon = (addonId: number) => {
        router.delete(adminAddons.destroy.url({ addon: addonId }));
    };

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

    const columns = useMemo<ColumnDef<AddonRow>[]>(
        () => [
            {
                accessorKey: 'name',
                header: 'Name',
                meta: { label: 'Name' },
            },
            {
                accessorKey: 'duration_minutes',
                header: 'Duration',
                meta: { label: 'Duration' },
                cell: ({ row }) => `${row.getValue('duration_minutes')} min`,
            },
            {
                id: 'pricing',
                header: 'Pricing',
                meta: { label: 'Pricing' },
                cell: ({ row }) =>
                    formatPriceRangeCents(Object.values(row.original.prices)),
            },
            {
                accessorKey: 'is_active',
                header: 'Active',
                meta: { label: 'Active' },
                cell: ({ row }) => (row.getValue('is_active') ? 'Yes' : 'No'),
            },
            {
                id: 'actions',
                enableHiding: false,
                header: () => <span className="sr-only">Actions</span>,
                cell: ({ row }) => (
                    <ResourceActionsMenu
                        onEdit={() => openEdit(row.original)}
                        onDelete={() => deleteAddon(row.original.id)}
                        deleteTitle="Delete add-on?"
                        deleteDescription="Add-ons used on bookings cannot be deleted. Deactivate them instead."
                    />
                ),
            },
        ],
        [],
    );

    return (
        <>
            <Head title="Admin add-ons" />
            <div className="flex h-full flex-1 flex-col gap-6">
                <PageHeader title="Add-ons" />

                <SectionCard title="Add add-on">
                    <form onSubmit={submitCreate} className="grid gap-4">
                        <div className="grid gap-3 md:grid-cols-2">
                            <FormField label="Name" htmlFor="name">
                                <Input
                                    id="name"
                                    value={createForm.data.name}
                                    onChange={(e) =>
                                        createForm.setData('name', e.target.value)
                                    }
                                />
                            </FormField>
                            <FormField label="Duration (min)" htmlFor="duration_minutes">
                                <Input
                                    id="duration_minutes"
                                    type="number"
                                    min={1}
                                    value={createForm.data.duration_minutes}
                                    onChange={(e) =>
                                        createForm.setData(
                                            'duration_minutes',
                                            Number(e.target.value),
                                        )
                                    }
                                />
                            </FormField>
                        </div>

                        <FormField label="Description" htmlFor="description">
                            <Textarea
                                id="description"
                                rows={2}
                                placeholder="Short summary shown in the booking wizard"
                                value={createForm.data.description}
                                onChange={(e) =>
                                    createForm.setData(
                                        'description',
                                        e.target.value,
                                    )
                                }
                            />
                        </FormField>

                        <VehicleSizePricingFields
                            idPrefix="create"
                            categories={vehicleSizeCategories}
                            values={createForm.data}
                            onChange={(slug, value) =>
                                createForm.setData('prices', {
                                    ...createForm.data.prices,
                                    [slug]: value,
                                })
                            }
                        />

                        <div>
                            <Button type="submit" disabled={createForm.processing}>
                                Create add-on
                            </Button>
                        </div>
                    </form>
                </SectionCard>

                <SectionCard title="All add-ons">
                    {addons.length === 0 ? (
                        <EmptyState
                            title="No add-ons yet"
                            description="Optional services show up during booking."
                        />
                    ) : (
                        <DataTable
                            columns={columns}
                            data={addons}
                            searchPlaceholder="Search add-ons..."
                            onReorder={reorderAddons}
                        />
                    )}
                </SectionCard>
            </div>

            <FormDrawer
                open={editingAddon !== null}
                onOpenChange={(open) => {
                    if (!open) {
closeEdit();
}
                }}
                title="Edit add-on"
                direction="right"
            >
                <form onSubmit={submitEdit} className="grid gap-3">
                    <FormField label="Name" htmlFor="edit-addon-name">
                        <Input
                            id="edit-addon-name"
                            value={editForm.data.name}
                            onChange={(e) =>
                                editForm.setData('name', e.target.value)
                            }
                        />
                    </FormField>
                    <FormField label="Duration (min)" htmlFor="edit-addon-duration">
                        <Input
                            id="edit-addon-duration"
                            type="number"
                            value={editForm.data.duration_minutes}
                            onChange={(e) =>
                                editForm.setData(
                                    'duration_minutes',
                                    Number(e.target.value),
                                )
                            }
                        />
                    </FormField>

                    <FormField
                        label="Description"
                        htmlFor="edit-addon-description"
                    >
                        <Textarea
                            id="edit-addon-description"
                            rows={4}
                            placeholder="Short summary shown in the booking wizard"
                            value={editForm.data.description}
                            onChange={(e) =>
                                editForm.setData('description', e.target.value)
                            }
                        />
                    </FormField>

                    <VehicleSizePricingFields
                        idPrefix="edit"
                        categories={vehicleSizeCategories}
                        values={editForm.data}
                        onChange={(slug, value) =>
                            editForm.setData('prices', {
                                ...editForm.data.prices,
                                [slug]: value,
                            })
                        }
                        layout="compact"
                    />

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

                    <SheetFooter className="px-0 pb-0 sm:flex-row">
                        <Button type="button" variant="outline" onClick={closeEdit}>
                            Cancel
                        </Button>
                        <Button type="submit" disabled={editForm.processing}>
                            Save changes
                        </Button>
                    </SheetFooter>
                </form>
            </FormDrawer>
        </>
    );
}

AdminAddonsIndex.layout = (page: React.ReactNode) => (
    <AppLayout
        breadcrumbs={[
            {
                title: 'Admin add-ons',
                href: '/admin/addons',
            },
        ]}
    >
        {page}
    </AppLayout>
);