@php
    use App\Support\LeadVehicleCatalog;
    use App\Support\VehicleYear;

    $compact = (bool) ($compact ?? false);
    $captureLayout = (bool) ($captureLayout ?? false);
    $lead = $lead ?? null;
    $labelClass = 'block text-sm font-medium text-gray-700';
    $inputClass = $compact
        ? 'mt-1 block w-full rounded-lg border-gray-300 text-sm py-2 focus:border-red-500 focus:ring-red-500'
        : 'mt-1 block w-full rounded-lg border-gray-300 focus:border-red-500 focus:ring-red-500';
    $selectWrapClass = $compact ? 'mt-1 block w-full min-h-[2.25rem]' : 'mt-1 block w-full';
    $gridGap = $compact ? 'gap-3' : 'gap-4';
    $wrapperClass = match (true) {
        $captureLayout => 'space-y-2',
        $compact => 'space-y-3 border-t border-gray-100 pt-3',
        default => 'rounded-xl border border-gray-200 bg-gray-50/60 p-5 space-y-4',
    };
    $vehicleGridClass = $captureLayout
        ? 'grid grid-cols-2 lg:grid-cols-3 gap-x-3 gap-y-3'
        : 'grid grid-cols-1 md:grid-cols-2 '.$gridGap;
    $headingClass = 'text-sm font-semibold text-gray-900';

    if (old('vehicle_make') !== null) {
        $vehicleMakeSelect = (string) old('vehicle_make');
        $vehicleMakeOther = (string) old('vehicle_make_other', '');
    } else {
        $storedMake = (string) ($lead?->vehicle_make ?? '');
        $vehicleMakeSelect = LeadVehicleCatalog::makeSelectValue($storedMake);
        $vehicleMakeOther = LeadVehicleCatalog::customMakeValue($storedMake);
    }

    $vehicleModel = (string) old('vehicle_model', $lead?->vehicle_model ?? '');
    $vehicleVariant = (string) old('vehicle_variant', $lead?->vehicle_variant ?? '');
    $vehicleYear = old('vehicle_preferred_year', $lead?->vehicle_preferred_year ?? '');
    $vehicleColour = (string) old('vehicle_preferred_colour', $lead?->vehicle_preferred_colour ?? '');
    $vehicleBudget = old('vehicle_max_budget', $lead?->vehicle_max_budget ?? '');
    $maxYear = VehicleYear::max();

    $makeOptions = array_merge(
        [['value' => '', 'label' => 'Select make…']],
        collect(LeadVehicleCatalog::makes())->map(fn (string $make) => [
            'value' => $make,
            'label' => $make,
        ])->all(),
    );
@endphp

<div
    class="{{ $wrapperClass }}"
    x-data="leadVehicleInterest(@js(LeadVehicleCatalog::catalogForJs()), @js($vehicleMakeSelect), @js($vehicleModel), @js($vehicleMakeOther))"
>
    <div>
        <h2 class="{{ $headingClass }}">Vehicle Interest</h2>
        @unless ($compact)
            <p class="mt-1 text-xs text-gray-600">Optional — capture vehicle preferences when the customer knows what they want.</p>
        @endunless
    </div>

    <input type="hidden" name="vehicle_model" x-model="model">

    <div class="{{ $vehicleGridClass }}">
        <div>
            <label for="vehicle_make" class="{{ $labelClass }}">Make</label>
            <x-styled-select
                name="vehicle_make"
                id="vehicle_make"
                :selected="$vehicleMakeSelect"
                :options="$makeOptions"
                class="{{ $selectWrapClass }}"
            />
            @error('vehicle_make')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div x-show="showOtherMake" x-cloak>
            <label for="vehicle_make_other" class="{{ $labelClass }}">Specify Make</label>
            <input
                id="vehicle_make_other"
                name="vehicle_make_other"
                type="text"
                x-model="customMake"
                :required="showOtherMake"
                placeholder="Enter vehicle make"
                value="{{ $vehicleMakeOther }}"
                class="{{ $inputClass }}"
            />
            @error('vehicle_make_other')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="vehicle_model" class="{{ $labelClass }}">Model</label>
            <div class="mt-1 space-y-0">
                <select
                    id="vehicle_model_select"
                    x-show="useModelSelect"
                    x-cloak
                    x-model="model"
                    class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-red-500 focus:ring-red-500"
                >
                    <option value="">Select model…</option>
                    <template x-for="opt in modelOptions" :key="opt">
                        <option :value="opt" x-text="opt" :selected="String(model) === String(opt)"></option>
                    </template>
                </select>
                <input
                    id="vehicle_model_text"
                    type="text"
                    x-show="!useModelSelect"
                    x-model="model"
                    placeholder="Enter model"
                    class="{{ $inputClass }}"
                />
            </div>
            @error('vehicle_model')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="vehicle_variant" class="{{ $labelClass }}">Variant</label>
            <input
                id="vehicle_variant"
                name="vehicle_variant"
                type="text"
                value="{{ $vehicleVariant }}"
                placeholder="e.g. 2.8 GD-6 Raider"
                class="{{ $inputClass }}"
            />
        </div>

        <div>
            <label for="vehicle_preferred_year" class="{{ $labelClass }}">Preferred Year</label>
            <input
                id="vehicle_preferred_year"
                name="vehicle_preferred_year"
                type="number"
                min="{{ VehicleYear::MIN }}"
                max="{{ $maxYear }}"
                step="1"
                value="{{ $vehicleYear }}"
                placeholder="{{ $maxYear }}"
                class="{{ $inputClass }}"
            />
        </div>

        <div>
            <label for="vehicle_preferred_colour" class="{{ $labelClass }}">Preferred Colour</label>
            <input
                id="vehicle_preferred_colour"
                name="vehicle_preferred_colour"
                type="text"
                value="{{ $vehicleColour }}"
                placeholder="e.g. White"
                class="{{ $inputClass }}"
            />
        </div>

        <div x-data="{
            rawBudget: @js($vehicleBudget !== null && $vehicleBudget !== '' ? (string) $vehicleBudget : ''),
            onFocus($event) { window.applyMoneyDisplay($event.target, this.rawBudget, { force: true }); },
            onInput($event) { window.syncMoneyFieldInput($event, (value) => { this.rawBudget = value; }); },
            onBlur($event) {
                const _p = window.parseRandInput($event.target.value);
                this.rawBudget = _p;
                $event.target.value = window.formatRandDisplay(_p);
            }
        }" x-init="$el.querySelector('#vehicle_max_budget').value = window.formatRandDisplay(rawBudget)">
            <label for="vehicle_max_budget" class="{{ $labelClass }}">Maximum Budget</label>
            <input type="hidden" name="vehicle_max_budget" x-bind:value="rawBudget">
            <input
                id="vehicle_max_budget"
                type="text"
                inputmode="decimal"
                autocomplete="off"
                x-on:focus="onFocus($event)"
                x-on:input="onInput($event)"
                x-on:blur="onBlur($event)"
                placeholder="R 0.00"
                class="{{ $inputClass }}"
            />
        </div>
    </div>
</div>