import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { useState } from 'react';

import {
    ProductAttributeSelector,
    buildInitialAttributeValues,
    buildRemovedAttributeIds,
    buildSubmittedAttributeValues,
    selectedAttributeGroupKeysFromAttributeIds,
    selectedAttributeIdsFromValues,
} from '@/components/admin/product-attribute-selector';
import type { AttributeDefinition } from '@/components/admin/product-attribute-selector';
import { AdminLayout } from '@/layouts/admin-layout';
import type { AppPageProps } from '@/types';

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

type VehicleVariantOption = {
    id: number;
    label: string;
};

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

type ProductReferenceInput = {
    type: string;
    number: string;
    brand: string;
    notes: string;
};

type ProductCreateProps = {
    categoryOptions: CategoryOption[];
    attributeDefinitions: AttributeDefinition[];
    attributeValues: Record<string, string>;
    vehicleVariantOptions: VehicleVariantOption[];
    vehicleFitments: Record<string, string>;
    referenceTypeOptions: ReferenceTypeOption[];
    references: ProductReferenceInput[];
};

type ProductForm = {
    category_id: string;
    name: string;
    slug: string;
    sku: string;
    brand: string;
    price: string;
    short_description: string;
    description: string;
    seo_title: string;
    meta_description: string;
    meta_keywords: string;
    status: 'draft' | 'published';
    new_media: File[];
    attribute_values: Record<string, string>;
    removed_attribute_ids: number[];
    vehicle_fitments: Record<string, string>;
    references: ProductReferenceInput[];
};

export default function ProductCreate({
    categoryOptions,
    attributeDefinitions,
    attributeValues,
    vehicleVariantOptions,
    vehicleFitments,
    referenceTypeOptions,
    references,
}: ProductCreateProps) {
    const { config } = usePage<AppPageProps>().props;
    const defaultReferenceType = referenceTypeOptions[0]?.value || 'oem';
    const initialSelectedAttributeIds = selectedAttributeIdsFromValues(
        attributeDefinitions,
        attributeValues,
    );
    const [originallySelectedAttributeIds] = useState<number[]>(
        initialSelectedAttributeIds,
    );
    const [selectedAttributeIds, setSelectedAttributeIds] = useState<number[]>(
        initialSelectedAttributeIds,
    );
    const [selectedAttributeGroupKeys, setSelectedAttributeGroupKeys] =
        useState<string[]>(
            selectedAttributeGroupKeysFromAttributeIds(
                attributeDefinitions,
                initialSelectedAttributeIds,
            ),
        );

    const form = useForm<ProductForm>({
        category_id: '',
        name: '',
        slug: '',
        sku: '',
        brand: '',
        price: '0.00',
        short_description: '',
        description: '',
        seo_title: '',
        meta_description: '',
        meta_keywords: '',
        status: 'draft',
        new_media: [],
        removed_attribute_ids: [],
        attribute_values: buildInitialAttributeValues(
            attributeDefinitions,
            attributeValues,
        ),
        vehicle_fitments: buildInitialVehicleFitments(
            vehicleVariantOptions,
            vehicleFitments,
        ),
        references: buildInitialReferences(references),
    });

    const toggleAttributeGroup = (
        groupKey: string,
        attributeIds: number[],
        checked: boolean,
    ) => {
        if (checked) {
            setSelectedAttributeGroupKeys((current) =>
                current.includes(groupKey) ? current : [...current, groupKey],
            );

            return;
        }

        setSelectedAttributeGroupKeys((current) =>
            current.filter((key) => key !== groupKey),
        );
        setSelectedAttributeIds((current) =>
            current.filter(
                (attributeId) => !attributeIds.includes(attributeId),
            ),
        );

        const nextValues = { ...form.data.attribute_values };
        attributeIds.forEach((attributeId) => {
            nextValues[String(attributeId)] = '';
        });
        form.setData('attribute_values', nextValues);
    };

    const toggleAttribute = (attributeId: number, checked: boolean) => {
        if (checked) {
            setSelectedAttributeIds((current) =>
                current.includes(attributeId)
                    ? current
                    : [...current, attributeId],
            );

            return;
        }

        setSelectedAttributeIds((current) =>
            current.filter(
                (currentAttributeId) => currentAttributeId !== attributeId,
            ),
        );
        form.setData('attribute_values', {
            ...form.data.attribute_values,
            [String(attributeId)]: '',
        });
    };

    const updateAttributeValue = (attributeId: number, value: string) => {
        form.setData('attribute_values', {
            ...form.data.attribute_values,
            [String(attributeId)]: value,
        });
    };

    const addReferenceRow = () => {
        form.setData('references', [
            ...form.data.references,
            {
                type: defaultReferenceType,
                number: '',
                brand: '',
                notes: '',
            },
        ]);
    };

    const removeReferenceRow = (index: number) => {
        form.setData(
            'references',
            form.data.references.filter(
                (_, currentIndex) => currentIndex !== index,
            ),
        );
    };

    const updateReferenceRow = (
        index: number,
        key: keyof ProductReferenceInput,
        value: string,
    ) => {
        form.setData(
            'references',
            form.data.references.map((reference, currentIndex) => {
                if (currentIndex !== index) {
                    return reference;
                }

                return {
                    ...reference,
                    [key]: value,
                };
            }),
        );
    };

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

        form.transform((data) => ({
            ...data,
            category_id:
                data.category_id === '' ? null : Number(data.category_id),
            attribute_values: buildSubmittedAttributeValues(
                data.attribute_values,
                selectedAttributeIds,
            ),
            removed_attribute_ids: buildRemovedAttributeIds(
                selectedAttributeIds,
                originallySelectedAttributeIds,
            ),
            sku: data.sku === '' ? null : data.sku,
            brand: data.brand === '' ? null : data.brand,
            slug: data.slug === '' ? null : data.slug,
            seo_title: data.seo_title === '' ? null : data.seo_title,
            meta_description:
                data.meta_description === '' ? null : data.meta_description,
            meta_keywords:
                data.meta_keywords === '' ? null : data.meta_keywords,
        }));

        form.post('/admin/products', { forceFormData: true });
    };

    return (
        <AdminLayout>
            <Head title="Create Product" />

            <div className="space-y-5">
                <div className="flex flex-wrap items-center justify-between gap-3">
                    <h1 className="text-2xl font-semibold text-[#0a1530] dark:text-[#efe8ff]">
                        Create Product
                    </h1>
                    <Link
                        href="/admin/products"
                        className="text-sm font-medium text-slate-600 hover:text-[#0a1530] dark:text-[#d7c7ff] dark:hover:text-[#efe8ff]"
                    >
                        Back to list
                    </Link>
                </div>

                <form onSubmit={submit} className="space-y-4">
                    <div className="grid gap-4 md:grid-cols-3">
                        <Field label="Name" error={form.errors.name}>
                            <input
                                value={form.data.name}
                                onChange={(event) =>
                                    form.setData('name', event.target.value)
                                }
                                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                required
                            />
                        </Field>
                        <Field label="SKU" error={form.errors.sku}>
                            <input
                                value={form.data.sku}
                                onChange={(event) =>
                                    form.setData('sku', event.target.value)
                                }
                                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                placeholder="Optional"
                            />
                        </Field>
                        <Field label="Brand" error={form.errors.brand}>
                            <input
                                value={form.data.brand}
                                onChange={(event) =>
                                    form.setData('brand', event.target.value)
                                }
                                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                placeholder="Optional"
                            />
                        </Field>
                    </div>

                    <div className="grid gap-4 md:grid-cols-3">
                        <Field label="Slug" error={form.errors.slug}>
                            <input
                                value={form.data.slug}
                                onChange={(event) =>
                                    form.setData('slug', event.target.value)
                                }
                                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                placeholder="Optional"
                            />
                        </Field>
                        <Field
                            label="Category / Subcategory"
                            error={form.errors.category_id}
                        >
                            <select
                                value={form.data.category_id}
                                onChange={(event) =>
                                    form.setData(
                                        'category_id',
                                        event.target.value,
                                    )
                                }
                                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                            >
                                <option value="">Uncategorized</option>
                                {categoryOptions.map((option) => (
                                    <option key={option.id} value={option.id}>
                                        {option.name}
                                    </option>
                                ))}
                            </select>
                        </Field>
                        <Field
                            label={`Price (${config.default_currency})`}
                            error={form.errors.price}
                        >
                            <input
                                type="number"
                                min="0"
                                step="0.01"
                                value={form.data.price}
                                onChange={(event) =>
                                    form.setData('price', event.target.value)
                                }
                                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                            />
                        </Field>
                    </div>

                    <Field label="Status" error={form.errors.status}>
                        <select
                            value={form.data.status}
                            onChange={(event) =>
                                form.setData(
                                    'status',
                                    event.target.value as 'draft' | 'published',
                                )
                            }
                            className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                        >
                            <option value="draft">Draft</option>
                            <option value="published">Published</option>
                        </select>
                    </Field>

                    <Field
                        label="Short Description"
                        error={form.errors.short_description}
                    >
                        <textarea
                            value={form.data.short_description}
                            onChange={(event) =>
                                form.setData(
                                    'short_description',
                                    event.target.value,
                                )
                            }
                            className="h-24 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                        />
                    </Field>

                    <Field label="Description" error={form.errors.description}>
                        <textarea
                            value={form.data.description}
                            onChange={(event) =>
                                form.setData('description', event.target.value)
                            }
                            className="h-36 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                        />
                    </Field>

                    <div className="space-y-4 rounded-2xl border border-slate-200 bg-slate-50/70 p-4 dark:border-[#3c2b68] dark:bg-[#2a1d50]/35">
                        <div>
                            <h2 className="text-base font-semibold text-[#0a1530] dark:text-[#efe8ff]">
                                SEO Metadata
                            </h2>
                            <p className="text-sm text-slate-600 dark:text-[#c7bde8]">
                                Optional search metadata for product detail
                                pages and API consumers.
                            </p>
                        </div>

                        <Field label="SEO Title" error={form.errors.seo_title}>
                            <input
                                value={form.data.seo_title}
                                onChange={(event) =>
                                    form.setData(
                                        'seo_title',
                                        event.target.value,
                                    )
                                }
                                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                placeholder="Optional, defaults to product name"
                            />
                        </Field>

                        <Field
                            label="Meta Description"
                            error={form.errors.meta_description}
                        >
                            <textarea
                                value={form.data.meta_description}
                                onChange={(event) =>
                                    form.setData(
                                        'meta_description',
                                        event.target.value,
                                    )
                                }
                                className="h-24 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                placeholder="Optional search result summary"
                            />
                        </Field>

                        <Field
                            label="Meta Keywords"
                            error={form.errors.meta_keywords}
                        >
                            <input
                                value={form.data.meta_keywords}
                                onChange={(event) =>
                                    form.setData(
                                        'meta_keywords',
                                        event.target.value,
                                    )
                                }
                                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                placeholder="Optional comma-separated keywords"
                            />
                        </Field>
                    </div>

                    <Field label="Media Files" error={form.errors.new_media}>
                        <input
                            type="file"
                            multiple
                            onChange={(event) => {
                                const files = event.target.files
                                    ? Array.from(event.target.files)
                                    : [];
                                form.setData('new_media', files);
                            }}
                            className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff]"
                        />
                        {form.errors['new_media.0'] ? (
                            <p className="mt-1 text-xs text-rose-600">
                                {form.errors['new_media.0']}
                            </p>
                        ) : null}
                    </Field>

                    <ProductAttributeSelector
                        attributeDefinitions={attributeDefinitions}
                        attributeValues={form.data.attribute_values}
                        errors={form.errors}
                        selectedAttributeGroupKeys={selectedAttributeGroupKeys}
                        selectedAttributeIds={selectedAttributeIds}
                        onToggleGroup={toggleAttributeGroup}
                        onToggleAttribute={toggleAttribute}
                        onValueChange={updateAttributeValue}
                    />

                    {vehicleVariantOptions.length > 0 ? (
                        <div className="space-y-4 rounded-2xl border border-slate-200 bg-slate-50/70 p-4 dark:border-[#3c2b68] dark:bg-[#2a1d50]/35">
                            <div>
                                <h2 className="text-base font-semibold text-[#0a1530] dark:text-[#efe8ff]">
                                    Vehicle Fitment
                                </h2>
                                <p className="text-sm text-slate-600 dark:text-[#c7bde8]">
                                    Mark which vehicle configurations are
                                    compatible or explicitly incompatible.
                                </p>
                            </div>

                            <div className="space-y-3">
                                {vehicleVariantOptions.map((option) => {
                                    const value =
                                        form.data.vehicle_fitments[
                                            String(option.id)
                                        ] || '';
                                    const error =
                                        form.errors[
                                            `vehicle_fitments.${option.id}`
                                        ];

                                    return (
                                        <div
                                            key={option.id}
                                            className="grid gap-2 rounded-xl border border-slate-200 bg-white p-3 dark:border-[#3c2b68] dark:bg-[#211740]"
                                        >
                                            <p className="text-sm text-slate-700 dark:text-[#e5dcff]">
                                                {option.label}
                                            </p>
                                            <select
                                                value={value}
                                                onChange={(event) => {
                                                    form.setData(
                                                        'vehicle_fitments',
                                                        {
                                                            ...form.data
                                                                .vehicle_fitments,
                                                            [String(option.id)]:
                                                                event.target
                                                                    .value,
                                                        },
                                                    );
                                                }}
                                                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                            >
                                                <option value="">
                                                    Not set
                                                </option>
                                                <option value="compatible">
                                                    Compatible
                                                </option>
                                                <option value="incompatible">
                                                    Incompatible
                                                </option>
                                            </select>
                                            {error ? (
                                                <p className="text-xs text-rose-600">
                                                    {error}
                                                </p>
                                            ) : null}
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    ) : null}

                    <div className="space-y-4 rounded-2xl border border-slate-200 bg-slate-50/70 p-4 dark:border-[#3c2b68] dark:bg-[#2a1d50]/35">
                        <div className="flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <h2 className="text-base font-semibold text-[#0a1530] dark:text-[#efe8ff]">
                                    Part References
                                </h2>
                                <p className="text-sm text-slate-600 dark:text-[#c7bde8]">
                                    Add OEM, aftermarket, cross, and alternative
                                    numbers.
                                </p>
                            </div>
                            <button
                                type="button"
                                onClick={addReferenceRow}
                                className="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-[#4a3a78] dark:text-[#e5dcff] dark:hover:bg-[#2a1d50]"
                            >
                                Add Reference
                            </button>
                        </div>

                        {form.data.references.length === 0 ? (
                            <p className="text-sm text-slate-500 dark:text-[#bcaee6]">
                                No references added yet.
                            </p>
                        ) : (
                            <div className="space-y-3">
                                {form.data.references.map(
                                    (reference, index) => (
                                        <div
                                            key={`reference-${index}`}
                                            className="grid gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-[#3c2b68] dark:bg-[#211740]"
                                        >
                                            <div className="grid gap-3 md:grid-cols-3">
                                                <div>
                                                    <label className="block text-sm font-medium text-[#0a1530] dark:text-[#e5dcff]">
                                                        Type
                                                    </label>
                                                    <select
                                                        value={reference.type}
                                                        onChange={(event) =>
                                                            updateReferenceRow(
                                                                index,
                                                                'type',
                                                                event.target
                                                                    .value,
                                                            )
                                                        }
                                                        className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                                    >
                                                        {referenceTypeOptions.map(
                                                            (option) => (
                                                                <option
                                                                    key={
                                                                        option.value
                                                                    }
                                                                    value={
                                                                        option.value
                                                                    }
                                                                >
                                                                    {
                                                                        option.label
                                                                    }
                                                                </option>
                                                            ),
                                                        )}
                                                    </select>
                                                    {form.errors[
                                                        `references.${index}.type`
                                                    ] ? (
                                                        <p className="mt-1 text-xs text-rose-600">
                                                            {
                                                                form.errors[
                                                                    `references.${index}.type`
                                                                ]
                                                            }
                                                        </p>
                                                    ) : null}
                                                </div>
                                                <div>
                                                    <label className="block text-sm font-medium text-[#0a1530] dark:text-[#e5dcff]">
                                                        Number
                                                    </label>
                                                    <input
                                                        value={reference.number}
                                                        onChange={(event) =>
                                                            updateReferenceRow(
                                                                index,
                                                                'number',
                                                                event.target
                                                                    .value,
                                                            )
                                                        }
                                                        className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                                        placeholder="e.g. 13627520519"
                                                    />
                                                    {form.errors[
                                                        `references.${index}.number`
                                                    ] ? (
                                                        <p className="mt-1 text-xs text-rose-600">
                                                            {
                                                                form.errors[
                                                                    `references.${index}.number`
                                                                ]
                                                            }
                                                        </p>
                                                    ) : null}
                                                </div>
                                                <div>
                                                    <label className="block text-sm font-medium text-[#0a1530] dark:text-[#e5dcff]">
                                                        Brand
                                                    </label>
                                                    <input
                                                        value={reference.brand}
                                                        onChange={(event) =>
                                                            updateReferenceRow(
                                                                index,
                                                                'brand',
                                                                event.target
                                                                    .value,
                                                            )
                                                        }
                                                        className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                                        placeholder="Optional"
                                                    />
                                                    {form.errors[
                                                        `references.${index}.brand`
                                                    ] ? (
                                                        <p className="mt-1 text-xs text-rose-600">
                                                            {
                                                                form.errors[
                                                                    `references.${index}.brand`
                                                                ]
                                                            }
                                                        </p>
                                                    ) : null}
                                                </div>
                                            </div>

                                            <div className="grid gap-3 md:grid-cols-[1fr_auto] md:items-end">
                                                <div>
                                                    <label className="block text-sm font-medium text-[#0a1530] dark:text-[#e5dcff]">
                                                        Notes
                                                    </label>
                                                    <input
                                                        value={reference.notes}
                                                        onChange={(event) =>
                                                            updateReferenceRow(
                                                                index,
                                                                'notes',
                                                                event.target
                                                                    .value,
                                                            )
                                                        }
                                                        className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                                                        placeholder="Optional"
                                                    />
                                                    {form.errors[
                                                        `references.${index}.notes`
                                                    ] ? (
                                                        <p className="mt-1 text-xs text-rose-600">
                                                            {
                                                                form.errors[
                                                                    `references.${index}.notes`
                                                                ]
                                                            }
                                                        </p>
                                                    ) : null}
                                                </div>
                                                <button
                                                    type="button"
                                                    onClick={() =>
                                                        removeReferenceRow(
                                                            index,
                                                        )
                                                    }
                                                    className="rounded-lg border border-rose-200 px-3 py-2 text-xs font-medium text-rose-700 hover:bg-rose-50"
                                                >
                                                    Remove
                                                </button>
                                            </div>
                                        </div>
                                    ),
                                )}
                            </div>
                        )}
                    </div>

                    <button
                        type="submit"
                        disabled={form.processing}
                        className="rounded-lg bg-[#0b7285] px-4 py-2 text-sm font-semibold text-white hover:bg-[#095f6f] disabled:opacity-50 dark:bg-[#7c3aed] dark:hover:bg-[#8b5cf6]"
                    >
                        {form.processing ? 'Saving...' : 'Create Product'}
                    </button>
                </form>
            </div>
        </AdminLayout>
    );
}

function Field({
    label,
    error,
    children,
}: {
    label: string;
    error?: string;
    children: React.ReactNode;
}) {
    return (
        <div>
            <label className="block text-sm font-medium text-[#0a1530] dark:text-[#e5dcff]">
                {label}
            </label>
            <div className="mt-1">{children}</div>
            {error ? (
                <p className="mt-1 text-xs text-rose-600">{error}</p>
            ) : null}
        </div>
    );
}

function buildInitialVehicleFitments(
    options: VehicleVariantOption[],
    existingValues: Record<string, string>,
): Record<string, string> {
    return options.reduce<Record<string, string>>((carry, option) => {
        carry[String(option.id)] = existingValues[String(option.id)] || '';

        return carry;
    }, {});
}

function buildInitialReferences(
    existingReferences: ProductReferenceInput[],
): ProductReferenceInput[] {
    return existingReferences.map((reference) => ({
        type: reference.type || 'oem',
        number: reference.number || '',
        brand: reference.brand || '',
        notes: reference.notes || '',
    }));
}