@php
    use App\Services\ActivityTargets\ActivityTargetAssignment;

    $filters = $filters ?? [
        'metric_code' => null,
        'period_type' => null,
        'assignment_type' => null,
        'is_active' => null,
    ];

    $metrics = $metrics ?? [];
    $targetableMetrics = $targetableMetrics ?? $metrics;
    $metricLabels = $metricLabels ?? [];
    $metricValueTypes = $metricValueTypes ?? [];
    $filterQuery = $filterQuery ?? [];

    $metricOptions = [['value' => '', 'label' => 'Select a metric…']];
    foreach ($targetableMetrics as $metricDef) {
        $metricOptions[] = ['value' => (string) $metricDef['code'], 'label' => (string) $metricDef['label']];
    }

    $metricFilterMetricDefs = $metrics;

    $assignmentTypeOptions = [
        ['value' => ActivityTargetAssignment::TYPE_DEALER, 'label' => 'Dealer-wide'],
        ['value' => ActivityTargetAssignment::TYPE_USER, 'label' => 'Specific user'],
        ['value' => ActivityTargetAssignment::TYPE_ROLE, 'label' => 'Role'],
    ];

    $userOptions = [['value' => '', 'label' => 'Select a user…']];
    foreach (($users ?? []) as $u) {
        $uName = trim(($u->name ?? '').' '.($u->surname ?? ''));
        $userOptions[] = ['value' => (string) $u->id, 'label' => $uName !== '' ? $uName : 'User #'.$u->id];
    }

    $roleOptions = [['value' => '', 'label' => 'Select a role…']];
    foreach (($assignableRoles ?? []) as $role) {
        $roleOptions[] = ['value' => (string) $role, 'label' => (string) $role];
    }

    $periodTypeOptions = [
        ['value' => 'daily', 'label' => 'Daily'],
        ['value' => 'weekly', 'label' => 'Weekly'],
        ['value' => 'monthly', 'label' => 'Monthly'],
    ];

    $pageConfig = $pageConfig ?? [];
    $indexRoute = (string) ($pageConfig['indexRoute'] ?? 'sales-performance-targets.index');
    $storeRoute = (string) ($pageConfig['storeRoute'] ?? 'sales-performance-targets.store');
    $deactivateRouteName = (string) ($pageConfig['deactivateRouteName'] ?? 'sales-performance-targets.deactivate');
    $emptyMessage = (string) ($pageConfig['emptyMessage'] ?? 'No sales performance targets match these filters.');
    $config = $salesPerformanceConfig ?? [];
    $deactivateFormRef = (string) ($config['deactivateFormRef'] ?? 'salesPerformanceDeactivateForm');
    $managerUserOnly = (bool) ($managerUserOnly ?? ($config['managerUserOnly'] ?? false));
    $modalIdPrefix = (string) ($config['modalIdPrefix'] ?? '');

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

<div class="space-y-4">
    @if (! empty($sectionTitle))
        <h2 class="text-lg font-semibold text-gray-900">{{ $sectionTitle }}</h2>
    @endif

    <div
        class="space-y-4"
        x-data="salesPerformanceTargetsIndex(@js($config))"
        x-on:keydown.escape.window="onEscapeWindow()"
    >
        @if ($showFlashMessages ?? false)
            <x-flash-messages />
        @endif

        <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="{{ $deactivateFormRef }}" 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" 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" x-on:click.stop="deactivateSelected()">Deactivate</button>
                </div>

                <form method="GET" action="{{ route($indexRoute) }}" class="flex min-w-0 shrink-0 flex-wrap items-center gap-x-2 gap-y-1">
                    @php
                        $metricFilterOptions = array_merge(
                            [['value' => '', 'label' => 'All metrics']],
                            collect($metricFilterMetricDefs)->map(fn (array $metricDef) => [
                                'value' => (string) $metricDef['code'],
                                'label' => (string) $metricDef['label'],
                            ])->values()->all(),
                        );
                        $periodFilterOptions = [
                            ['value' => '', 'label' => 'All periods'],
                            ['value' => 'daily', 'label' => 'Daily'],
                            ['value' => 'weekly', 'label' => 'Weekly'],
                            ['value' => 'monthly', 'label' => 'Monthly'],
                        ];
                        $assignmentFilterOptions = $managerUserOnly
                            ? [
                                ['value' => '', 'label' => 'All managers'],
                                ['value' => ActivityTargetAssignment::TYPE_USER, 'label' => 'Branch Manager'],
                            ]
                            : [
                                ['value' => '', 'label' => 'All assignments'],
                                ['value' => ActivityTargetAssignment::TYPE_DEALER, 'label' => 'Dealer-wide'],
                                ['value' => ActivityTargetAssignment::TYPE_USER, 'label' => 'Specific user'],
                                ['value' => ActivityTargetAssignment::TYPE_ROLE, 'label' => 'Role'],
                            ];
                        $statusFilterOptions = [
                            ['value' => '', 'label' => 'All statuses'],
                            ['value' => '1', 'label' => 'Active'],
                            ['value' => '0', 'label' => 'Inactive'],
                        ];
                    @endphp

                    <div class="flex shrink-0 items-center gap-1">
                        <label for="filter_metric_code" 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="filter_metric_code" id="filter_metric_code" :selected="(string) ($filters['metric_code'] ?? '')" :options="$metricFilterOptions" compact class="h-full" />
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="filter_period_type" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Period</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select name="filter_period_type" id="filter_period_type" :selected="(string) ($filters['period_type'] ?? '')" :options="$periodFilterOptions" compact class="h-full" />
                        </div>
                    </div>
                    @if (! $managerUserOnly)
                        <div class="flex shrink-0 items-center gap-1">
                            <label for="filter_assignment_type" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Assignment</label>
                            <div class="relative h-7 w-max shrink-0">
                                <x-styled-select name="filter_assignment_type" id="filter_assignment_type" :selected="(string) ($filters['assignment_type'] ?? '')" :options="$assignmentFilterOptions" compact class="h-full" />
                            </div>
                        </div>
                    @endif
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="filter_is_active" 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="filter_is_active" id="filter_is_active" :selected="(string) ($filters['is_active'] ?? '')" :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="w-8 px-2 py-2"></th>
                            <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">Starts</th>
                            <th class="px-3 py-2">Ends</th>
                            <th class="px-3 py-2">Status</th>
                        </tr>
                    </thead>
                    @forelse ($targetGroups ?? [] as $scopeGroup)
                        @php
                            $scopeKey = $scopeGroup['key'];
                            $scopeTargets = $scopeGroup['targets'];
                            $scopeActiveCount = $scopeTargets->where('is_active', true)->count();
                        @endphp
                        <tbody class="divide-y divide-gray-100 bg-white" data-scope-key="{{ $scopeKey }}">
                            <tr class="cursor-pointer select-none bg-gray-50/90 transition-colors hover:bg-gray-100" data-scope-header data-scope-key="{{ $scopeKey }}" x-bind:class="scopeHasSelected(@js($scopeKey)) ? 'bg-slate-100 ring-1 ring-inset ring-gray-200/80' : ''">
                                <td colspan="7" class="px-3 py-2">
                                    <div class="flex min-w-0 items-center gap-2">
                                        <span class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-gray-500 transition-transform duration-150" x-bind:class="isScopeExpanded(@js($scopeKey)) ? 'rotate-90' : ''" aria-hidden="true">
                                            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                                        </span>
                                        <span class="min-w-0 truncate text-sm font-semibold text-gray-900">{{ $scopeGroup['label'] }}</span>
                                        <span class="shrink-0 text-[10px] font-medium tabular-nums text-gray-500">
                                            {{ $scopeTargets->count() }} {{ $scopeTargets->count() === 1 ? 'target' : 'targets' }}
                                            @if ($scopeActiveCount < $scopeTargets->count()) · {{ $scopeActiveCount }} active @endif
                                        </span>
                                    </div>
                                </td>
                            </tr>
                            @foreach ($scopeGroup['period_groups'] as $periodGroup)
                                @php
                                    $periodKey = $periodGroup['key'];
                                    $periodTargets = $periodGroup['targets'];
                                    $periodActiveCount = $periodTargets->where('is_active', true)->count();
                                @endphp
                                @if ($periodTargets->isNotEmpty())
                                    <tr class="cursor-pointer select-none bg-gray-50/50 transition-colors hover:bg-gray-100" data-period-header data-scope-key="{{ $scopeKey }}" data-period-key="{{ $periodKey }}" x-show="isScopeExpanded(@js($scopeKey))">
                                        <td colspan="7" class="px-3 py-1.5 pl-8">
                                            <div class="flex min-w-0 items-center gap-2">
                                                <span class="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-gray-400 transition-transform duration-150" x-bind:class="isPeriodExpanded(@js($scopeKey), @js($periodKey)) ? 'rotate-90' : ''" aria-hidden="true">
                                                    <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                                                </span>
                                                <span class="min-w-0 truncate text-xs font-semibold text-gray-800">{{ $periodGroup['label'] }}</span>
                                                <span class="shrink-0 text-[10px] font-medium tabular-nums text-gray-500">{{ $periodTargets->count() }}@if ($periodActiveCount < $periodTargets->count()) · {{ $periodActiveCount }} active @endif</span>
                                            </div>
                                        </td>
                                    </tr>
                                    @foreach ($periodTargets as $target)
                                        @php
                                            $rowMetricLabel = $metricLabels[$target->metric_code] ?? $target->metric_code;
                                            $rowValueType = $metricValueTypes[$target->metric_code] ?? 'count';
                                            $rowTargetDisplay = $rowValueType === 'money' ? format_rand($target->target_value) : (string) (int) round((float) $target->target_value);
                                        @endphp
                                        <tr class="cursor-pointer select-none transition-colors hover:bg-gray-50" data-target-id="{{ $target->id }}" data-scope-key="{{ $scopeKey }}" data-period-key="{{ $periodKey }}" data-target-active="{{ $target->is_active ? '1' : '0' }}" data-edit-payload-b64="{{ base64_encode(json_encode($target->editPayload($metricLabels, $filterQuery, $deactivateRouteName))) }}" x-show="isTargetRowVisible(@js($scopeKey), @js($periodKey))" 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-2 py-2 pl-6"></td>
                                            <td class="px-3 py-2 font-medium text-gray-900">{{ $rowMetricLabel }}</td>
                                            <td class="px-3 py-2 whitespace-nowrap text-gray-700 capitalize">{{ $target->period_type }}</td>
                                            <td class="px-3 py-2 text-right tabular-nums text-gray-900">{{ $rowTargetDisplay }}</td>
                                            <td class="px-3 py-2 whitespace-nowrap tabular-nums text-gray-700">{{ $target->starts_at?->format('Y-m-d') ?? '—' }}</td>
                                            <td class="px-3 py-2 whitespace-nowrap tabular-nums text-gray-700">{{ $target->ends_at?->format('Y-m-d') ?? '—' }}</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>
                                        </tr>
                                    @endforeach
                                @endif
                            @endforeach
                        </tbody>
                    @empty
                        <tbody>
                            <tr>
                                <td colspan="7" class="px-3 py-6 text-center text-gray-500">{{ $emptyMessage }}</td>
                            </tr>
                        </tbody>
                    @endforelse
                </table>
            </div>
        </div>

        <x-sales-performance-target-form-modal
            :metric-options="$metricOptions"
            :assignment-type-options="$assignmentTypeOptions"
            :user-options="$userOptions"
            :role-options="$roleOptions"
            :period-type-options="$periodTypeOptions"
            :store-url="route($storeRoute)"
            :manager-user-only="$managerUserOnly"
            :modal-id-prefix="$modalIdPrefix"
        />
    </div>
</div>