@props([
    'showHeading' => true,
    'variant' => 'auto',
    'defaultCategoryId' => null,
    'defaultSubject' => null,
    'sourceType' => 'general',
    'sourceId' => null,
])

@php
    $min = (int) config('site.lead_form_min_body', 10);
    $dark = match ($variant) {
        'dark' => true,
        'light' => false,
        default => site_theme() !== 'light',
    };
    $inp = $dark
        ? 'site-lead-input'
        : 'mt-2 block w-full rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm  shadow-inner focus:border-brand-accent focus:ring-brand-accent';
    $lbl = $dark ? 'site-lead-label' : 'text-xs font-semibold uppercase tracking-wide text-brand-muted';
    $muted = $dark ? 'text-slate-300' : 'text-brand-muted';
    $comboboxList = $dark
        ? 'site-lead-combobox-list'
        : 'absolute z-30 mt-1 max-h-56 w-full list-none overflow-auto rounded-xl border border-slate-200 bg-white py-1 text-sm text-slate-900 shadow-lg';
    $comboboxOption = $dark
        ? 'site-lead-combobox-option'
        : 'flex w-full flex-col px-4 py-2 text-start hover:bg-slate-50';
    $comboboxOptionMuted = $dark ? 'text-xs text-slate-400' : 'text-xs text-brand-muted';
    $comboboxEmpty = $dark
        ? 'site-lead-combobox-empty'
        : 'absolute z-30 mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-xs text-brand-muted shadow-lg';
    $categoriesUrl = route('site.lead.categories', ['locale' => app()->getLocale()]);
    $selectedCategoryId = old('category_id', $defaultCategoryId);
    $subjectValue = old('subject', $defaultSubject);
    $initialCategoryLabel = old('category_label');
@endphp

<div
    x-data="leadCategoryCombobox({
        url: @js($categoriesUrl),
        selectedId: @js($selectedCategoryId ? (int) $selectedCategoryId : null),
        initialLabel: @js($initialCategoryLabel),
        authenticated: @js(auth()->check()),
        userMobile: @js(auth()->user()?->mobile),
    })"
>
    @if ($showHeading)
        <h2 @class(['text-lg font-bold', $dark ? 'text-white' : ''])>{{ __('site.lead_title') }}</h2>
        <p @class(['mt-2 text-xs leading-relaxed', $muted])>{{ __('site.cta_request') }}</p>
    @endif

    <form
        method="post"
        action="{{ route('site.support.store', ['locale' => app()->getLocale()]) }}"
        class="{{ $showHeading ? 'mt-4' : '' }}"
        @submit.prevent="submit($event)"
    >
        @csrf
        <input type="hidden" name="source_type" value="{{ old('source_type', $sourceType) }}" />
        <input type="hidden" name="source_id" value="{{ old('source_id', $sourceId) }}" />
        <input type="hidden" name="category_id" :value="selectedId || ''" required />
        <input type="hidden" name="category_label" :value="selectedLabel" />
        <input type="hidden" name="mobile_verified_token" :value="verifiedToken" />

        <div>
            <label for="lead_subject" class="{{ $lbl }}">{{ __('site.lead_subject') }}</label>
            <input id="lead_subject" name="subject" type="text" value="{{ $subjectValue }}" class="{{ $inp }}" />
        </div>

        <div class="relative" @click.outside="closeDropdown()">
            <label for="lead_category_search" class="{{ $lbl }}">{{ __('site.lead_category') }}</label>
            <div x-show="step === 'child' && parentLabel" x-cloak class="mb-1 flex items-center gap-2 text-xs {{ $muted }}">
                <button type="button" class="underline hover:no-underline" @click="backToParents()">{{ __('site.lead_category_back') }}</button>
                <span aria-hidden="true">/</span>
                <span x-text="parentLabel"></span>
            </div>
            <input
                id="lead_category_search"
                type="text"
                class="{{ $inp }}"
                :placeholder="step === 'parent' ? @js(__('site.lead_category_parent_placeholder')) : @js(__('site.lead_category_child_placeholder'))"
                autocomplete="off"
                role="combobox"
                :aria-expanded="open"
                x-model="query"
                @focus="openDropdown()"
                @input="onInput()"
                @keydown.escape.prevent="closeDropdown()"
                @keydown.arrow-down.prevent="openDropdown()"
            />
            <p x-show="loading" x-cloak class="mt-1 text-xs {{ $muted }}">{{ __('site.lead_category_loading') }}</p>

            <ul
                x-show="open && filtered.length > 0"
                x-cloak
                class="{{ $comboboxList }}"
                role="listbox"
            >
                <template x-for="item in filtered" :key="item.id">
                    <li>
                        <button
                            type="button"
                            class="{{ $comboboxOption }}"
                            role="option"
                            @mousedown.prevent="step === 'parent' ? selectParent(item) : selectChild(item)"
                        >
                            <span class="font-medium" x-text="item.label"></span>
                            <span class="{{ $comboboxOptionMuted }}" x-text="item.parent_name" x-show="step === 'child' && item.parent_name"></span>
                        </button>
                    </li>
                </template>
            </ul>

            <p x-show="open && !loading && loaded && filtered.length === 0" x-cloak class="{{ $comboboxEmpty }}">
                {{ __('site.lead_category_empty') }}
            </p>

            @error('category_id')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
        </div>

             <div>
                <label for="lead_name" class="{{ $lbl }}">{{ __('site.lead_name') }}</label>
                <input id="lead_name" name="name" type="text" value="{{ old('name') }}" class="{{ $inp }}" autocomplete="name" />
            </div>
            <div>
                <label for="lead_mobile" class="{{ $lbl }}">{{ __('site.lead_mobile') }}</label>
                <input id="lead_mobile" name="mobile" type="text" value="{{ old('mobile') }}" class="{{ $inp }}" autocomplete="tel" />
            </div>
         <div>
            <label for="lead_email" class="{{ $lbl }}">{{ __('site.lead_email') }}</label>
            <input id="lead_email" name="email" type="email" value="{{ old('email') }}" class="{{ $inp }}" autocomplete="email" />
        </div>
        <div>
            <label for="lead_body" class="{{ $lbl }}">{{ __('site.lead_body') }}</label>
            <textarea id="lead_body" name="body" rows="2" required minlength="{{ $min }}" class="{{ $inp }}">{{ old('body') }}</textarea>
            <p class="mt-1 text-xs {{ $muted }}">{{ __('validation.min.string', ['attribute' => __('site.lead_body'), 'min' => $min]) }}</p>
        </div>
        @error('body')
            <p class="text-xs text-red-500">{{ $message }}</p>
        @enderror
        <button type="submit" class="site-btn-primary w-full sm:w-auto mt-3" :disabled="submitting">
            <span x-show="!submitting">{{ __('site.lead_submit') }}</span>
            <span x-show="submitting" x-cloak>{{ __('site.auth_verifying') }}</span>
        </button>
    </form>
</div>