@php
    $monthOptionsForForm = collect($monthSelectOptions ?? [])
        ->filter(fn ($o) => ($o['value'] ?? '') !== '')
        ->values()
        ->all();

    $reopenForm = $reopenForm ?? [];
    if (filled($reopenForm['dealer_target_id'] ?? null)) {
        $reopenTarget = \App\Models\DealerTarget::query()->find((int) $reopenForm['dealer_target_id']);
        if ($reopenTarget !== null) {
            $reopenForm = array_merge($reopenTarget->editPayload(), $reopenForm, [
                'updateUrl' => route('dealer-targets.update', $reopenTarget),
                '_method' => 'PUT',
                'dealer_target_id' => (int) $reopenTarget->id,
            ]);
        }
    }

    $dealerTargetsConfig = [
        'storeUrl' => route('dealer-targets.store'),
        'defaultYear' => (string) (int) now()->format('Y'),
        'defaultMonth' => (string) (int) now()->format('n'),
        'reopenForm' => $reopenForm,
        'moneyMetrics' => [
            \App\Models\DealerTarget::METRIC_GROSS_PROFIT,
            \App\Models\DealerTarget::METRIC_TOTAL_SALES_REVENUE,
        ],
    ];

    $summaryMetrics = [
        ['label' => 'Total', 'key' => 'total'],
        ['label' => 'Active', 'key' => 'active', 'value_class' => 'text-emerald-700'],
        ['label' => 'Inactive', 'key' => 'inactive', 'value_class' => 'text-gray-600'],
    ];
@endphp

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

    <div
        class="space-y-4 py-6 px-3 sm:px-4 md:px-5"
        x-data="dealerTargetsIndex(@js($dealerTargetsConfig))"
        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-3 divide-x divide-gray-100">
                @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="deactivateForm" class="hidden">
                @csrf
            </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 border-[var(--dealer-accent-color)] bg-[var(--dealer-accent-color)] px-2.5 py-1 text-xs font-semibold text-[var(--dealer-accent-text-color)] shadow-sm transition-colors hover:opacity-95"
                        x-on:click.stop="openNewTarget()"
                    >
                        New target
                    </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="hasSelection ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="!hasSelection"
                        :title="hasSelection ? 'Edit the selected target' : 'Select a row in the table first'"
                        x-on:click.stop="openEditSelected()"
                    >
                        Edit target
                    </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="selectionCanDeactivate ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="!selectionCanDeactivate"
                        :title="selectionCanDeactivate ? 'Deactivate the selected target' : (hasSelection ? 'This target is already inactive' : 'Select a row first')"
                        x-on:click.stop="deactivateSelected()"
                    >
                        Deactivate
                    </button>
                </div>

                <form
                    method="GET"
                    action="{{ route('dealer-targets.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="metric" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Metric</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="metric"
                                id="metric"
                                :selected="$selectedMetricStr ?? ''"
                                :options="$metricFilterOptions ?? []"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <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="$selectedMonthStr ?? ''"
                                :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="$selectedYearStr ?? (string) (int) now()->format('Y')"
                                :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>
                    <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 text-right text-xs leading-none text-gray-500">
                    {{ number_format(count($targets ?? [])) }} target(s)
                </p>
            </div>

            <div class="overflow-x-auto" x-on:click="handleTableClick($event)">
                <table class="w-full table-auto divide-y divide-gray-200 text-xs leading-snug">
                    <thead class="bg-gray-50 text-left text-[10px] font-semibold uppercase tracking-wide text-gray-500">
                        <tr>
                            <th class="px-3 py-2">Metric</th>
                            <th class="px-3 py-2">Period</th>
                            <th class="px-3 py-2 text-right">Target</th>
                            <th class="px-3 py-2">Status</th>
                            <th class="px-3 py-2">Created by</th>
                            <th class="px-3 py-2">Updated</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white">
                        @forelse ($targets as $target)
                            @php
                                $createdByName = trim(($target->createdBy?->name ?? '').' '.($target->createdBy?->surname ?? ''));
                                $payload = $target->editPayload();
                            @endphp
                            <tr
                                class="cursor-pointer select-none transition-colors hover:bg-gray-50"
                                data-target-id="{{ $target->id }}"
                                data-target-active="{{ $target->is_active ? '1' : '0' }}"
                                data-edit-payload-b64="{{ base64_encode(json_encode($payload)) }}"
                                x-bind:class="selectedTargetId !== null && Number(selectedTargetId) === {{ (int) $target->id }}
                                    ? 'bg-slate-50 ring-1 ring-inset ring-gray-200/90 shadow-[inset_3px_0_0_#dc2626] hover:bg-slate-100'
                                    : ''"
                            >
                                <td class="px-3 py-2 font-medium text-gray-900">{{ $target->metricLabel() }}</td>
                                <td class="px-3 py-2 whitespace-nowrap text-gray-700">{{ $target->periodLabel() }}</td>
                                <td class="px-3 py-2 text-right font-semibold tabular-nums text-gray-900">{{ $target->displayTargetValue() }}</td>
                                <td class="px-3 py-2 whitespace-nowrap">
                                    @if ($target->is_active)
                                        <span class="inline-flex rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-semibold leading-tight text-green-800">Active</span>
                                    @else
                                        <span class="inline-flex rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-semibold leading-tight text-gray-700">Inactive</span>
                                    @endif
                                </td>
                                <td class="px-3 py-2 text-gray-700">{{ $createdByName !== '' ? $createdByName : '—' }}</td>
                                <td class="px-3 py-2 whitespace-nowrap tabular-nums text-gray-700">
                                    {{ $target->updated_at?->format('Y-m-d H:i') ?? '—' }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-3 py-6 text-center text-gray-500">
                                    No dealer targets match these filters.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <x-dealer-target-form-modal
            :metric-options="$metricOptions ?? []"
            :month-options="$monthOptionsForForm"
            :year-options="$yearSelectOptions ?? []"
            :store-url="route('dealer-targets.store')"
        />
    </div>
</x-app-layout>