@php
    use App\Support\FinanceApplicationStatuses;

    $monthNames = [
        1 => 'January', 2 => 'February', 3 => 'March', 4 => 'April', 5 => 'May', 6 => 'June',
        7 => 'July', 8 => 'August', 9 => 'September', 10 => 'October', 11 => 'November', 12 => 'December',
    ];
    $monthSelectOptions = [];
    foreach ($monthNames as $num => $label) {
        $monthSelectOptions[] = ['value' => (string) $num, 'label' => $label];
    }
    $yearSelectOptions = collect($yearOptions ?? [])->map(fn ($y) => ['value' => (string) $y, 'label' => (string) $y])->all();
    $statusFilterOptions = [['value' => '', 'label' => 'All statuses']];
    foreach (($statusOptions ?? []) as $st) {
        $statusFilterOptions[] = ['value' => (string) $st, 'label' => FinanceApplicationStatuses::label($st)];
    }
    $selectedStatusStr = $selectedStatus !== null ? (string) $selectedStatus : '';
    $financeHouseFilterOptions = [['value' => '', 'label' => 'All finance houses']];
    foreach (($financeHouseOptions ?? []) as $house) {
        $financeHouseFilterOptions[] = ['value' => (string) $house, 'label' => (string) $house];
    }
    $selectedFinanceHouseStr = $selectedFinanceHouse !== null ? (string) $selectedFinanceHouse : '';
    $userFilterOptions = [['value' => '', 'label' => 'All salespeople']];
    foreach (($users ?? []) as $u) {
        $userLabel = trim(($u->name ?? '').' '.($u->surname ?? ''));
        $userFilterOptions[] = ['value' => (string) $u->id, 'label' => $userLabel !== '' ? $userLabel : ('User #'.$u->id)];
    }
    $selectedUserStr = $selectedUserId !== null ? (string) $selectedUserId : '';
    $canUpdateApplications = (bool) ($canUpdateApplications ?? false);

    $summaryMetrics = [
        ['label' => 'Total', 'key' => 'total'],
        ['label' => 'Submitted', 'key' => 'submitted'],
        ['label' => 'Pending', 'key' => 'pending'],
        ['label' => 'Approved', 'key' => 'approved', 'value_class' => 'text-emerald-700'],
        ['label' => 'Declined', 'key' => 'declined', 'value_class' => 'text-red-700'],
        ['label' => 'Cancelled', 'key' => 'cancelled'],
    ];
@endphp

<x-app-layout>
    <x-slot name="header">
        {{ __('Finance Applications') }}
    </x-slot>

    <div
        class="space-y-4 py-6 px-3 sm:px-4 md:px-5"
        x-data="financeApplicationsIndex({{ $canUpdateApplications ? 'true' : 'false' }})"
        x-on:keydown.escape.window="onEscapeWindow()"
    >
        <x-flash-messages />

        <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
            <dl class="grid grid-cols-2 divide-y divide-gray-100 sm:grid-cols-3 lg:grid-cols-6 lg:divide-y-0 lg:divide-x">
                @foreach ($summaryMetrics as $metric)
                    <div class="flex min-w-0 items-center justify-between gap-2 px-3 py-2 sm:block sm:px-4">
                        <dt class="truncate text-[10px] font-medium uppercase leading-none tracking-wide text-gray-500">
                            {{ $metric['label'] }}
                        </dt>
                        <dd class="shrink-0 text-base font-semibold tabular-nums leading-none text-gray-900 sm:mt-1 sm:text-lg {{ $metric['value_class'] ?? '' }}">
                            {{ number_format((int) data_get($summary, $metric['key'], 0)) }}
                        </dd>
                    </div>
                @endforeach
            </dl>
        </div>

        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-3">
            <form method="POST" x-ref="quickStatusForm" class="hidden" x-bind:action="quickStatusAction">
                @csrf
                @method('PATCH')
                <input type="hidden" name="status" x-ref="quickStatusInput" value="">
            </form>

            <div class="flex min-h-[1.75rem] w-full flex-wrap items-center gap-x-2 gap-y-1">
                <div class="flex shrink-0 flex-wrap items-center gap-2">
                    <button
                        type="button"
                        class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-red-600 enabled:hover:bg-red-600 enabled:hover:text-white"
                        :class="(canUpdate && hasSelection) ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="!canUpdate || !hasSelection"
                        :title="!canUpdate ? 'You do not have permission to edit applications' : (hasSelection ? 'Edit all fields for the selected application' : 'Select a row in the table first')"
                        x-on:click.stop="openEditSelected()"
                    >
                        Edit application
                    </button>
                    <button
                        type="button"
                        class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-amber-600 enabled:hover:bg-amber-600 enabled:hover:text-white"
                        :class="canChangeStatus ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="!canChangeStatus"
                        :title="!canUpdate ? 'You do not have permission to update applications' : (hasSelection ? (selectionIsFinal ? 'Status is locked' : 'Set status to Pending') : 'Select a row first')"
                        x-on:click.stop="submitQuickStatus('pending')"
                    >
                        Mark Pending
                    </button>
                    <button
                        type="button"
                        class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-emerald-600 enabled:hover:bg-emerald-600 enabled:hover:text-white"
                        :class="canChangeStatus ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="!canChangeStatus"
                        :title="!canUpdate ? 'You do not have permission to update applications' : (hasSelection ? (selectionIsFinal ? 'Status is locked' : 'Set status to Approved') : 'Select a row first')"
                        x-on:click.stop="submitQuickStatus('approved')"
                    >
                        Mark Approved
                    </button>
                    <button
                        type="button"
                        class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-red-600 enabled:hover:bg-red-600 enabled:hover:text-white"
                        :class="canChangeStatus ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="!canChangeStatus"
                        :title="!canUpdate ? 'You do not have permission to update applications' : (hasSelection ? (selectionIsFinal ? 'Status is locked' : 'Set status to Declined') : 'Select a row first')"
                        x-on:click.stop="submitQuickStatus('declined')"
                    >
                        Mark Declined
                    </button>
                    <button
                        type="button"
                        class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-gray-600 enabled:hover:bg-gray-600 enabled:hover:text-white"
                        :class="canChangeStatus ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="!canChangeStatus"
                        :title="!canUpdate ? 'You do not have permission to update applications' : (hasSelection ? (selectionIsFinal ? 'Status is locked' : 'Set status to Cancelled') : 'Select a row first')"
                        x-on:click.stop="submitQuickStatus('cancelled')"
                    >
                        Mark Cancelled
                    </button>
                </div>

                <form
                    method="GET"
                    action="{{ route('finance-applications.index') }}"
                    class="flex min-w-0 shrink-0 flex-wrap items-center gap-x-2 gap-y-1"
                >
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="month" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Month</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="month"
                                id="month"
                                :selected="(string) (int) $selectedMonth"
                                :options="$monthSelectOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="year" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Year</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="year"
                                id="year"
                                :selected="(string) (int) $selectedYear"
                                :options="$yearSelectOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="status" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Status</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="status"
                                id="status"
                                :selected="$selectedStatusStr"
                                :options="$statusFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="finance_house" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Finance house</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="finance_house"
                                id="finance_house"
                                :selected="$selectedFinanceHouseStr"
                                :options="$financeHouseFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    @if (! empty($isDealerWideView) && $isDealerWideView)
                        <div class="flex min-w-0 shrink-0 items-center gap-1">
                            <label for="user_id" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Salesperson</label>
                            <div class="relative h-7 w-max shrink-0">
                                <x-styled-select
                                    name="user_id"
                                    id="user_id"
                                    :selected="$selectedUserStr"
                                    :options="$userFilterOptions"
                                    compact
                                    class="h-full"
                                />
                            </div>
                        </div>
                    @endif
                    <button
                        type="submit"
                        class="inline-flex h-6 shrink-0 items-center rounded-md bg-[var(--dealer-accent-color)] px-2 text-[10px] font-medium text-[var(--dealer-accent-text-color)] shadow-sm hover:opacity-95 focus:outline-none focus:ring-1 focus:ring-[var(--dealer-accent-color)]"
                    >
                        Apply
                    </button>
                </form>

                <p class="ml-auto shrink-0 whitespace-nowrap text-right text-xs text-gray-500 leading-none">{{ number_format(count($applications ?? [])) }} record(s)</p>
            </div>

            <div class="overflow-x-auto" x-on:click="handleTableClick($event)">
                <table class="w-full table-fixed divide-y divide-gray-200 text-xs leading-tight">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Date</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Lead</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Applicant</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Vehicle</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Finance house</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Amount</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Deposit</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Term</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Status</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Reference</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Salesperson</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Created by</th>
                            <th scope="col" class="w-56 min-w-[14rem] max-w-md px-2 py-1 text-left font-semibold text-gray-700">Notes</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white">
                        @forelse ($applications as $application)
                            @php
                                $salesperson = trim(($application->user?->name ?? '').' '.($application->user?->surname ?? ''));
                                $creator = trim(($application->createdBy?->name ?? '').' '.($application->createdBy?->surname ?? ''));
                                $editPayload = $canUpdateApplications ? [
                                    'updateUrl' => route('finance-applications.update', $application),
                                    'leadLabel' => $application->lead?->displayNameForTable() ?? '',
                                    'applicationDate' => optional($application->application_date)->format('Y-m-d') ?? '',
                                    'applicantName' => $application->applicant_name,
                                    'vehicleMake' => $application->vehicle_make ?? '',
                                    'vehicleModel' => $application->vehicle_model ?? '',
                                    'vehicleVariant' => $application->vehicle_variant ?? '',
                                    'vehicleYear' => $application->vehicle_year ?? '',
                                    'stockNumber' => $application->stock_number ?? '',
                                    'financeHouse' => $application->finance_house ?? '',
                                    'amountFinanced' => $application->amount_financed,
                                    'deposit' => $application->deposit,
                                    'termMonths' => $application->term_months,
                                    'status' => $application->status,
                                    'statusLabel' => \App\Support\FinanceApplicationStatuses::label((string) $application->status),
                                    'isFinal' => \App\Support\FinanceApplicationStatuses::isFinal((string) $application->status),
                                    'referenceNumber' => $application->reference_number ?? '',
                                    'notes' => $application->notes ?? '',
                                ] : null;
                            @endphp
                            <tr
                                class="cursor-pointer select-none transition-colors hover:bg-gray-50"
                                data-application-id="{{ $application->id }}"
                                @if ($canUpdateApplications)
                                    data-update-url="{{ route('finance-applications.update', $application) }}"
                                    data-edit-payload-b64="{{ base64_encode(json_encode($editPayload, JSON_THROW_ON_ERROR | JSON_INVALID_UTF8_SUBSTITUTE)) }}"
                                @endif
                                x-bind:class="selectedApplicationId !== null && Number(selectedApplicationId) === {{ (int) $application->id }}
                                    ? 'bg-slate-50 ring-1 ring-inset ring-gray-200/90 shadow-[inset_3px_0_0_#dc2626] hover:bg-slate-100'
                                    : ''"
                            >
                                <td class="whitespace-nowrap px-2 py-1 text-gray-700">{{ optional($application->application_date)->format('Y-m-d') ?? '—' }}</td>
                                <td class="max-w-[10rem] truncate whitespace-nowrap px-2 py-1 font-medium text-gray-900" title="{{ e($application->lead?->displayNameForTable() ?? '') }}">
                                    {{ $application->lead?->displayNameForTable() ?? '—' }}
                                </td>
                                <td class="max-w-[9rem] truncate whitespace-nowrap px-2 py-1 text-gray-700" title="{{ e($application->applicant_name) }}">{{ $application->applicant_name }}</td>
                                <td class="max-w-[10rem] truncate px-2 py-1 text-gray-700" title="{{ e($application->displayVehicle()) }}">{{ $application->displayVehicle() }}</td>
                                <td class="max-w-[8rem] truncate whitespace-nowrap px-2 py-1 text-gray-700" title="{{ e((string) ($application->finance_house ?? '')) }}">{{ $application->finance_house ?? '—' }}</td>
                                <td class="whitespace-nowrap px-2 py-1 text-gray-700">{{ $application->formattedAmountFinanced() }}</td>
                                <td class="whitespace-nowrap px-2 py-1 text-gray-700">{{ $application->formattedDeposit() }}</td>
                                <td class="whitespace-nowrap px-2 py-1 text-gray-700">{{ $application->term_months ?? '—' }}</td>
                                <td class="whitespace-nowrap px-2 py-1 text-gray-700">
                                    <span class="inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold {{ $application->statusBadgeClasses() }}">
                                        {{ $application->statusLabel() }}
                                    </span>
                                </td>
                                <td class="max-w-[7rem] truncate whitespace-nowrap px-2 py-1 text-gray-700" title="{{ e((string) ($application->reference_number ?? '')) }}">{{ $application->reference_number ?? '—' }}</td>
                                <td class="max-w-[8rem] truncate whitespace-nowrap px-2 py-1 text-gray-700" title="{{ e($salesperson) }}">{{ $salesperson !== '' ? $salesperson : '—' }}</td>
                                <td class="max-w-[8rem] truncate whitespace-nowrap px-2 py-1 text-gray-700" title="{{ e($creator) }}">{{ $creator !== '' ? $creator : '—' }}</td>
                                <x-lead-table-notes-cell :notes="$application->notes ?? ''" />
                            </tr>
                        @empty
                            <tr>
                                <td colspan="13" class="px-2 py-8 text-center text-gray-500">
                                    No finance applications found for this period.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if ($canUpdateApplications)
            <x-finance-application-edit-modal />
        @endif
    </div>
</x-app-layout>