@props([
    'fieldKey',
    'mapped',
])

@php
    $askProductLocked = (bool) ($askProductLocked ?? $askAmountLocked ?? $askLocked ?? false);
@endphp

@if (! isset($mapped[$fieldKey]))
@else
    @switch($fieldKey)
        @case('product_name')
            <div data-field-key="{{ $mapped['product_name']['field_key'] }}" data-is-core="{{ ($mapped['product_name']['is_core'] ?? false) ? '1' : '0' }}">
                @if (config('loan_application.show_product_discovery_filter'))
                    <label class="mb-2 inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
                        <input
                            type="checkbox"
                            x-model="productDiscoveryEnabled"
                            @change="onProductDiscoveryEnabledChange()"
                            class="h-4 w-4 rounded border-slate-300 text-teal-700 focus:ring-teal-600"
                        >
                        <span class="text-xs font-semibold text-slate-700">Filter by amount & term</span>
                    </label>
                @endif
                <label for="product_name" class="block text-xs font-semibold text-slate-600 mb-1">{{ $mapped['product_name']['label'] ?? 'Product' }}<span data-required-star class="ml-0.5 text-red-600 font-semibold hidden" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span></label>
                <div class="flex gap-2">
                    <select
                        id="product_name"
                        name="product_name"
                        class="w-full rounded-lg border-slate-200 text-sm disabled:cursor-not-allowed disabled:bg-slate-100"
                        x-model="selectedProductName"
                        @change="onProductSelectChange()"
                        :disabled="@js((bool) ($askProductLocked ?? false))"
                    >
                        <option value="">Select product...</option>
                        @foreach (($productOptions ?? []) as $productName)
                            <option value="{{ $productName }}" @selected(old('product_name', $draftApplication?->product_name ?? $defaultProductName ?? '') === $productName)>{{ $productName }}</option>
                        @endforeach
                    </select>
                    <x-loan.modal-stack-trigger
                        :url="route('loan.book.applications.products.create', ['modal' => 1, 'target' => 'product_name'])"
                        target="product_name"
                        :refresh-url="route('loan.lookups.products')"
                        value-field="name"
                        label-field="name"
                        title="Create new product"
                    />
                </div>
                @error('product_name')<p class="text-xs text-red-600 mt-1" data-loan-field-error="product_name">{{ $message }}</p>@enderror
                @if (($askLocked ?? false) && ! ($askProductLocked ?? true))
                    <p class="mt-1 text-[11px] text-sky-800">You can switch product for this correction. Fees already paid will be checked on save.</p>
                @endif
                <p class="mt-1 text-[11px] text-amber-700" x-show="productDiscoveryEnabled && discoveryError" x-text="discoveryError" x-cloak></p>
                <p class="mt-1 text-xs text-amber-800 rounded border border-amber-200 bg-amber-50 px-2 py-1" x-show="productDiscoveryEnabled && selectedProductMismatchWarning" x-text="selectedProductMismatchWarning" x-cloak></p>
                <div
                    class="mt-2"
                    x-show="productDiscoveryEnabled && discoveryReady && hasDiscoveryFilter && visibleMatchedProducts.length > 0"
                    x-cloak
                    data-loan-product-discovery-matches
                >
                    <p class="mb-1 text-[10px] font-semibold uppercase tracking-wide text-sky-700">Matching products</p>
                    <div class="max-h-44 overflow-auto rounded-lg border border-sky-100 bg-sky-50/50">
                        <table class="min-w-full text-left text-[11px] text-slate-700">
                            <thead class="sticky top-0 bg-sky-100/90 text-[10px] font-semibold uppercase tracking-wide text-sky-800">
                                <tr>
                                    <th class="px-2 py-1.5">Product</th>
                                    <th class="px-2 py-1.5 hidden sm:table-cell">Range</th>
                                    <th class="px-2 py-1.5 hidden md:table-cell">Max term</th>
                                    <th class="px-2 py-1.5">Frequency</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="product in visibleMatchedProducts" :key="product.name">
                                    <tr
                                        role="button"
                                        tabindex="0"
                                        class="cursor-pointer border-t border-sky-100/80 hover:bg-sky-100/70 focus:bg-sky-100/70 focus:outline-none"
                                        :class="{ 'bg-sky-100/90 font-medium text-sky-900 ring-1 ring-inset ring-sky-300': isMatchedProductSelected(product.name) }"
                                        data-loan-discovery-match-row
                                        :data-product-name="product.name"
                                        :aria-pressed="isMatchedProductSelected(product.name)"
                                        @click="selectMatchedProduct(product.name)"
                                        @keydown.enter="selectMatchedProduct(product.name)"
                                        @keydown.space.prevent="selectMatchedProduct(product.name)"
                                    >
                                        <td class="px-2 py-1.5 font-medium" x-text="product.name"></td>
                                        <td class="px-2 py-1.5 tabular-nums hidden sm:table-cell" x-text="matchedProductRangeLabel(product)"></td>
                                        <td class="px-2 py-1.5 hidden md:table-cell" x-text="matchedProductMaxTermLabel(product)"></td>
                                        <td class="px-2 py-1.5" x-text="product.repayment_frequency || '—'"></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
                <p
                    class="mt-2 rounded border border-slate-200 bg-slate-50 px-2 py-1.5 text-[11px] text-slate-600"
                    x-show="productDiscoveryEnabled && discoveryReady && hasDiscoveryFilter && visibleMatchedProducts.length === 0"
                    x-cloak
                    data-loan-product-discovery-zero-matches
                >
                    No products match the current filters.
                </p>
            </div>
            @break

        @case('amount_requested')
            <div data-field-key="{{ $mapped['amount_requested']['field_key'] }}" data-is-core="{{ ($mapped['amount_requested']['is_core'] ?? false) ? '1' : '0' }}">
                <label for="amount_requested" class="block text-xs font-semibold text-slate-600 mb-1">{{ $mapped['amount_requested']['label'] ?? 'Amount requested' }}<span data-required-star class="ml-0.5 text-red-600 font-semibold hidden" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span></label>
                <input id="amount_requested" name="amount_requested" type="text" inputmode="decimal" autocomplete="off" value="{{ old('amount_requested', $draftApplication?->amount_requested) }}" class="w-full rounded-lg border-slate-200 text-sm tabular-nums disabled:cursor-not-allowed disabled:bg-slate-100" x-model="requestedAmount" :readonly="@js((bool) ($askAmountLocked ?? false))" :disabled="@js((bool) ($askAmountLocked ?? false))" @input="onLoanRequestInput($event.target)" @change="onLoanRequestInput($event.target)" />
                @error('amount_requested')<p class="text-xs text-red-600 mt-1" data-loan-field-error="amount_requested">{{ $message }}</p>@enderror
                <p class="text-xs text-red-600 mt-1" x-show="amountRangeError !== ''" x-text="amountRangeError" x-cloak></p>
            </div>
            @break

        @case('term_unit')
            <div data-field-key="{{ $mapped['term_unit']['field_key'] }}" data-is-core="{{ ($mapped['term_unit']['is_core'] ?? false) ? '1' : '0' }}">
                <label for="term_unit" class="block text-xs font-semibold text-slate-600 mb-1">{{ $mapped['term_unit']['label'] ?? 'Term unit' }}<span data-required-star class="ml-0.5 text-red-600 font-semibold hidden" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span></label>
                <select id="term_unit" name="term_unit" class="w-full rounded-lg border-slate-200 text-sm" x-model="termUnit" @change="onTermUnitChange()">
                    <option value="" @selected(old('term_unit', $draftApplication?->term_unit ?? '') === '')>Select term unit…</option>
                    @foreach (['daily' => 'Daily', 'weekly' => 'Weekly', 'monthly' => 'Monthly'] as $v => $lab)
                        <option value="{{ $v }}" @selected(old('term_unit', $draftApplication?->term_unit ?? '') === $v)>{{ $lab }}</option>
                    @endforeach
                </select>
                <p class="mt-1 text-[11px] text-slate-500" x-show="termUnit === ''">Choose how the loan term is measured (days, weeks, or months).</p>
                @error('term_unit')<p class="text-xs text-red-600 mt-1" data-loan-field-error="term_unit">{{ $message }}</p>@enderror
            </div>
            @break

        @case('term_value')
            <div data-field-key="{{ $mapped['term_value']['field_key'] }}" data-is-core="{{ ($mapped['term_value']['is_core'] ?? false) ? '1' : '0' }}">
                <label for="term_value" class="block text-xs font-semibold text-slate-600 mb-1">{{ $mapped['term_value']['label'] ?? 'Term length' }}<span data-required-star class="ml-0.5 text-red-600 font-semibold hidden" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span></label>
                <input id="term_value" name="term_value" type="number" min="1" value="{{ old('term_value', $draftApplication?->term_value) }}" class="w-full rounded-lg border-slate-200 text-sm tabular-nums" placeholder="e.g. 6" @input="scheduleProductDiscovery()" @change="scheduleProductDiscovery()" />
                @error('term_value')<p class="text-xs text-red-600 mt-1" data-loan-field-error="term_value">{{ $message }}</p>@enderror
            </div>
            @break

        @case('interest_rate')
            <div data-field-key="{{ $mapped['interest_rate']['field_key'] }}" data-is-core="{{ ($mapped['interest_rate']['is_core'] ?? false) ? '1' : '0' }}">
                <label for="interest_rate" class="block text-xs font-semibold text-slate-600 mb-1">{{ $mapped['interest_rate']['label'] ?? 'Interest rate (%)' }}<span data-required-star class="ml-0.5 text-red-600 font-semibold hidden" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span></label>
                <input id="interest_rate" name="interest_rate" type="number" step="0.0001" min="0" max="1000" value="{{ old('interest_rate', $draftApplication?->interest_rate) }}" class="w-full rounded-lg border-slate-200 text-sm tabular-nums" />
                @error('interest_rate')<p class="text-xs text-red-600 mt-1" data-loan-field-error="interest_rate">{{ $message }}</p>@enderror
            </div>
            @break

        @case('interest_rate_period')
            <div data-field-key="{{ $mapped['interest_rate_period']['field_key'] }}" data-is-core="{{ ($mapped['interest_rate_period']['is_core'] ?? false) ? '1' : '0' }}">
                <label for="interest_rate_period" class="block text-xs font-semibold text-slate-600 mb-1">{{ $mapped['interest_rate_period']['label'] ?? 'Interest period' }}<span data-required-star class="ml-0.5 text-red-600 font-semibold hidden" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span></label>
                <select id="interest_rate_period" name="interest_rate_period" class="w-full rounded-lg border-slate-200 text-sm">
                    @foreach (['daily' => 'Per day', 'weekly' => 'Per week', 'monthly' => 'Per month', 'annual' => 'Per year'] as $v => $lab)
                        <option value="{{ $v }}" @selected(old('interest_rate_period', $draftApplication?->interest_rate_period ?? 'annual') === $v)>{{ $lab }}</option>
                    @endforeach
                </select>
                @error('interest_rate_period')<p class="text-xs text-red-600 mt-1" data-loan-field-error="interest_rate_period">{{ $message }}</p>@enderror
            </div>
            @break

        @case('stage')
            <div data-field-key="{{ $mapped['stage']['field_key'] }}" data-is-core="{{ ($mapped['stage']['is_core'] ?? false) ? '1' : '0' }}">
                <label for="stage" class="block text-xs font-semibold text-slate-600 mb-1">{{ $mapped['stage']['label'] ?? 'Stage' }}<span data-required-star class="ml-0.5 text-red-600 font-semibold hidden" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span></label>
                <select id="stage" name="stage" class="w-full rounded-lg border-slate-200 text-sm">
                    @foreach ($stages as $value => $label)
                        @continue($value === \App\Models\LoanBookApplication::STAGE_DISBURSED)
                        <option value="{{ $value }}" @selected(old('stage', $draftApplication?->stage ?? \App\Models\LoanBookApplication::STAGE_SUBMITTED) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <p class="mt-1 text-[11px] text-slate-500">Disbursed is set automatically after a completed disbursement record.</p>
                @error('stage')<p class="text-xs text-red-600 mt-1" data-loan-field-error="stage">{{ $message }}</p>@enderror
            </div>
            @break

        @case('branch')
            <div data-field-key="{{ $mapped['branch']['field_key'] }}" data-is-core="{{ ($mapped['branch']['is_core'] ?? false) ? '1' : '0' }}">
                <label for="branch" class="block text-xs font-semibold text-slate-600 mb-1">{{ $mapped['branch']['label'] ?? 'Branch (optional)' }}<span data-required-star class="ml-0.5 text-red-600 font-semibold hidden" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span></label>
                <div class="flex gap-2">
                    <select id="branch" name="branch" class="w-full rounded-lg border-slate-200 text-sm">
                        <option value="">Select branch...</option>
                        @foreach (($branchOptions ?? []) as $branchName)
                            <option value="{{ $branchName }}" @selected(old('branch', $draftApplication?->branch) === $branchName)>{{ $branchName }}</option>
                        @endforeach
                    </select>
                    <x-loan.modal-stack-trigger
                        :url="route('loan.clients.branches.create', ['modal' => 1, 'target' => 'branch'])"
                        target="branch"
                        :refresh-url="route('loan.lookups.application_branches')"
                        value-field="name"
                        label-field="name"
                        title="Create branch"
                    />
                </div>
                @error('branch')<p class="text-xs text-red-600 mt-1" data-loan-field-error="branch">{{ $message }}</p>@enderror
            </div>
            @break

        @case('purpose')
            <div data-field-key="{{ $mapped['purpose']['field_key'] }}" data-is-core="{{ ($mapped['purpose']['is_core'] ?? false) ? '1' : '0' }}">
                @include('loan.partials.reference-purpose-field', [
                    'options' => $loanPurposeOptions ?? [],
                    'textareaId' => 'purpose',
                    'textareaName' => 'purpose',
                    'label' => $mapped['purpose']['label'] ?? 'Purpose',
                    'value' => old('purpose', $draftApplication?->purpose ?? $defaultPurpose ?? ''),
                ])
            </div>
            @break

        @case('notes')
            <div data-field-key="{{ $mapped['notes']['field_key'] }}" data-is-core="{{ ($mapped['notes']['is_core'] ?? false) ? '1' : '0' }}">
                <label for="notes" class="block text-xs font-semibold text-slate-600 mb-1">{{ $mapped['notes']['label'] ?? 'Internal notes' }}<span data-required-star class="ml-0.5 text-red-600 font-semibold hidden" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span></label>
                <textarea id="notes" name="notes" rows="2" class="w-full rounded-lg border-slate-200 text-sm">{{ old('notes', $draftApplication?->notes) }}</textarea>
                @error('notes')<p class="text-xs text-red-600 mt-1" data-loan-field-error="notes">{{ $message }}</p>@enderror
            </div>
            @break
    @endswitch
@endif