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

import { AddResourceLink } from '@/components/admin/add-resource-link';
import { Switch } from '@/components/ui/switch';
import { AdminLayout } from '@/layouts/admin-layout';

type Option = {
    id: number;
    name: string;
    vehicle_make_id?: number;
    vehicle_model_id?: number;
};

type VariantOptions = {
    makes: Option[];
    models: Option[];
    generations: Option[];
    engines: Option[];
    bodyStyles: Option[];
    driveTrains: Option[];
    gearboxes: Option[];
};

type VariantData = {
    id: number;
    vehicle_make_id: number;
    vehicle_model_id: number;
    vehicle_generation_id: number;
    body_style_id: number;
    drive_train_id: number;
    vehicle_engine_id: number;
    vehicle_gearbox_ids: number[];
    modification_name: string;
    year_from: number;
    year_to: number;
    doors: number | null;
    market: string | null;
    notes: string | null;
    is_active: boolean;
    sort_order: number;
};

type VehicleVariantEditProps = {
    variant: VariantData;
    options: VariantOptions;
};

type VariantForm = {
    vehicle_make_id: string;
    vehicle_model_id: string;
    vehicle_generation_id: string;
    body_style_id: string;
    drive_train_id: string;
    vehicle_engine_id: string;
    vehicle_gearbox_ids: string[];
    modification_name: string;
    year_from: string;
    year_to: string;
    doors: string;
    market: string;
    notes: string;
    is_active: boolean;
    sort_order: string;
};

export default function VehicleVariantEdit({
    variant,
    options,
}: VehicleVariantEditProps) {
    const form = useForm<VariantForm>({
        vehicle_make_id: String(variant.vehicle_make_id),
        vehicle_model_id: String(variant.vehicle_model_id),
        vehicle_generation_id: String(variant.vehicle_generation_id),
        body_style_id: String(variant.body_style_id),
        drive_train_id: String(variant.drive_train_id),
        vehicle_engine_id: String(variant.vehicle_engine_id),
        vehicle_gearbox_ids: variant.vehicle_gearbox_ids.map(String),
        modification_name: variant.modification_name,
        year_from: String(variant.year_from),
        year_to: String(variant.year_to),
        doors: variant.doors !== null ? String(variant.doors) : '',
        market: variant.market || '',
        notes: variant.notes || '',
        is_active: variant.is_active,
        sort_order: String(variant.sort_order),
    });

    const selectedMakeId =
        form.data.vehicle_make_id === ''
            ? null
            : Number(form.data.vehicle_make_id);
    const selectedModelId =
        form.data.vehicle_model_id === ''
            ? null
            : Number(form.data.vehicle_model_id);

    const filteredModels = options.models.filter(
        (model) =>
            selectedMakeId === null || model.vehicle_make_id === selectedMakeId,
    );
    const filteredGenerations = options.generations.filter(
        (generation) =>
            selectedModelId === null ||
            generation.vehicle_model_id === selectedModelId,
    );

    const changeMake = (makeId: string) => {
        form.setData({
            ...form.data,
            vehicle_make_id: makeId,
            vehicle_model_id: '',
            vehicle_generation_id: '',
        });
    };

    const changeModel = (modelId: string) => {
        form.setData({
            ...form.data,
            vehicle_model_id: modelId,
            vehicle_generation_id: '',
        });
    };

    const changeGeneration = (generationId: string) => {
        form.setData({
            ...form.data,
            vehicle_generation_id: generationId,
        });
    };

    const toggleGearbox = (gearboxId: number, checked: boolean) => {
        const id = String(gearboxId);

        form.setData(
            'vehicle_gearbox_ids',
            checked
                ? Array.from(new Set([...form.data.vehicle_gearbox_ids, id]))
                : form.data.vehicle_gearbox_ids.filter((value) => value !== id),
        );
    };

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

        form.transform((data) => ({
            ...data,
            vehicle_make_id: Number(data.vehicle_make_id),
            vehicle_model_id: Number(data.vehicle_model_id),
            vehicle_generation_id: Number(data.vehicle_generation_id),
            body_style_id: Number(data.body_style_id),
            drive_train_id: Number(data.drive_train_id),
            vehicle_engine_id: Number(data.vehicle_engine_id),
            vehicle_gearbox_ids: data.vehicle_gearbox_ids.map(Number),
            year_from: Number(data.year_from),
            year_to: Number(data.year_to),
            doors: data.doors === '' ? null : Number(data.doors),
            market: data.market === '' ? null : data.market,
            notes: data.notes === '' ? null : data.notes,
            sort_order: data.sort_order === '' ? 0 : Number(data.sort_order),
        }));

        form.put(`/admin/vehicle-variants/${variant.id}`);
    };

    return (
        <AdminLayout>
            <Head title="Edit Vehicle Variant" />
            <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]">
                        Edit Vehicle Variant
                    </h1>
                    <Link
                        href="/admin/vehicle-variants"
                        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-2">
                        <Field
                            label="Brand"
                            error={form.errors.vehicle_make_id}
                        >
                            <select
                                value={form.data.vehicle_make_id}
                                onChange={(event) =>
                                    changeMake(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
                            >
                                <option value="">Select brand</option>
                                {options.makes.map((option) => (
                                    <option key={option.id} value={option.id}>
                                        {option.name}
                                    </option>
                                ))}
                            </select>
                            <AddResourceLink href="/admin/vehicle-makes/create">
                                Missing brand?
                            </AddResourceLink>
                        </Field>
                        <Field
                            label="Model"
                            error={form.errors.vehicle_model_id}
                        >
                            <select
                                value={form.data.vehicle_model_id}
                                onChange={(event) =>
                                    changeModel(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
                                disabled={selectedMakeId === null}
                            >
                                <option value="">Select model</option>
                                {filteredModels.map((option) => (
                                    <option key={option.id} value={option.id}>
                                        {option.name}
                                    </option>
                                ))}
                            </select>
                            <AddResourceLink href="/admin/vehicle-models/create">
                                Missing model?
                            </AddResourceLink>
                        </Field>
                    </div>

                    <div className="grid gap-4 md:grid-cols-2">
                        <Field
                            label="Generation"
                            error={form.errors.vehicle_generation_id}
                        >
                            <select
                                value={form.data.vehicle_generation_id}
                                onChange={(event) =>
                                    changeGeneration(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
                                disabled={selectedModelId === null}
                            >
                                <option value="">Select generation</option>
                                {filteredGenerations.map((option) => (
                                    <option key={option.id} value={option.id}>
                                        {option.name}
                                    </option>
                                ))}
                            </select>
                            <AddResourceLink href="/admin/vehicle-generations/create">
                                Missing generation?
                            </AddResourceLink>
                        </Field>
                        <Field
                            label="Modification"
                            error={form.errors.modification_name}
                        >
                            <input
                                value={form.data.modification_name}
                                onChange={(event) =>
                                    form.setData(
                                        'modification_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>
                    </div>

                    <div className="grid gap-4 md:grid-cols-2">
                        <Field
                            label="Body Style"
                            error={form.errors.body_style_id}
                        >
                            <select
                                value={form.data.body_style_id}
                                onChange={(event) =>
                                    form.setData(
                                        'body_style_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]"
                                required
                            >
                                <option value="">Select body type</option>
                                {options.bodyStyles.map((option) => (
                                    <option key={option.id} value={option.id}>
                                        {option.name}
                                    </option>
                                ))}
                            </select>
                            <AddResourceLink href="/admin/body-styles/create">
                                Missing body style?
                            </AddResourceLink>
                        </Field>
                        <Field
                            label="Drive Type"
                            error={form.errors.drive_train_id}
                        >
                            <select
                                value={form.data.drive_train_id}
                                onChange={(event) =>
                                    form.setData(
                                        'drive_train_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]"
                                required
                            >
                                <option value="">Select drive type</option>
                                {options.driveTrains.map((option) => (
                                    <option key={option.id} value={option.id}>
                                        {option.name}
                                    </option>
                                ))}
                            </select>
                            <AddResourceLink href="/admin/drive-trains/create">
                                Missing drive type?
                            </AddResourceLink>
                        </Field>
                    </div>

                    <div className="grid gap-4 md:grid-cols-2">
                        <Field
                            label="Engine"
                            error={form.errors.vehicle_engine_id}
                        >
                            <select
                                value={form.data.vehicle_engine_id}
                                onChange={(event) =>
                                    form.setData(
                                        'vehicle_engine_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]"
                                required
                            >
                                <option value="">Select engine</option>
                                {options.engines.map((option) => (
                                    <option key={option.id} value={option.id}>
                                        {option.name}
                                    </option>
                                ))}
                            </select>
                            <AddResourceLink href="/admin/vehicle-engines/create">
                                Missing engine?
                            </AddResourceLink>
                        </Field>
                        <Field
                            label="Transmissions"
                            error={form.errors.vehicle_gearbox_ids}
                        >
                            <div className="max-h-52 space-y-2 overflow-y-auto rounded-lg border border-slate-300 bg-white p-3 dark:border-[#4a3a78] dark:bg-[#160f2d]">
                                {options.gearboxes.map((option) => (
                                    <label
                                        key={option.id}
                                        className="flex items-start gap-2 text-sm text-[#0a1530] dark:text-[#efe8ff]"
                                    >
                                        <input
                                            type="checkbox"
                                            checked={form.data.vehicle_gearbox_ids.includes(
                                                String(option.id),
                                            )}
                                            onChange={(event) =>
                                                toggleGearbox(
                                                    option.id,
                                                    event.target.checked,
                                                )
                                            }
                                            className="mt-1"
                                        />
                                        <span>{option.name}</span>
                                    </label>
                                ))}
                            </div>
                            <AddResourceLink href="/admin/vehicle-gearboxes/create">
                                Missing gearbox?
                            </AddResourceLink>
                        </Field>
                    </div>

                    <div className="grid gap-4 md:grid-cols-4">
                        <Field label="Year From" error={form.errors.year_from}>
                            <input
                                type="number"
                                min={1886}
                                max={2100}
                                value={form.data.year_from}
                                onChange={(event) =>
                                    form.setData(
                                        'year_from',
                                        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="Year To" error={form.errors.year_to}>
                            <input
                                type="number"
                                min={1886}
                                max={2100}
                                value={form.data.year_to}
                                onChange={(event) =>
                                    form.setData('year_to', 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="Doors" error={form.errors.doors}>
                            <input
                                type="number"
                                min={1}
                                max={12}
                                value={form.data.doors}
                                onChange={(event) =>
                                    form.setData('doors', 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>
                        <Field
                            label="Sort Order"
                            error={form.errors.sort_order}
                        >
                            <input
                                type="number"
                                min={0}
                                value={form.data.sort_order}
                                onChange={(event) =>
                                    form.setData(
                                        'sort_order',
                                        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="Market" error={form.errors.market}>
                        <input
                            value={form.data.market}
                            onChange={(event) =>
                                form.setData('market', 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="Notes" error={form.errors.notes}>
                        <textarea
                            value={form.data.notes}
                            onChange={(event) =>
                                form.setData('notes', 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>

                    <div className="mt-2 rounded-xl border border-slate-200 bg-slate-50/80 p-4 dark:border-[#3c2b68] dark:bg-[#2a1d50]/40">
                        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                            <div className="inline-flex items-center gap-3 text-sm text-slate-700 dark:text-[#d7c7ff]">
                                <Switch
                                    checked={form.data.is_active}
                                    onChange={(checked) =>
                                        form.setData('is_active', checked)
                                    }
                                    ariaLabel="Active vehicle"
                                />
                                Active vehicle
                            </div>
                            <button
                                type="submit"
                                disabled={form.processing}
                                className="w-full rounded-lg bg-[#0b7285] px-4 py-2 text-sm font-semibold text-white hover:bg-[#095f6f] disabled:opacity-50 md:w-auto dark:bg-[#7c3aed] dark:hover:bg-[#8b5cf6]"
                            >
                                {form.processing
                                    ? 'Saving...'
                                    : 'Update Vehicle'}
                            </button>
                        </div>
                    </div>
                </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>
    );
}