@php
    $pageConfig = $pageConfig ?? [];
    $pageTitle = (string) ($pageConfig['title'] ?? 'Targets vs Actuals');
    $formRoute = (string) ($pageConfig['formRoute'] ?? 'targets-vs-actuals.sales');
    $teamLabel = (string) ($pageConfig['teamLabel'] ?? 'Team');
    $filterUserLabel = (string) ($pageConfig['filterUserLabel'] ?? 'Person');
    $filterAllUsersLabel = (string) ($pageConfig['filterAllUsersLabel'] ?? 'All');
    $entityCountLabel = (string) ($pageConfig['entityCountLabel'] ?? 'person(s)');
    $tablePersonColumn = (string) ($pageConfig['tablePersonColumn'] ?? 'Person');
    $chartCanvasId = (string) ($pageConfig['chartCanvasId'] ?? 'targets-vs-actuals-chart');
    $showCharts = (bool) ($showCharts ?? true);
    $showAssignedSalesmanCount = (bool) ($pageConfig['showAssignedSalesmanCount'] ?? false);
    $showTeamLabel = (bool) ($pageConfig['showTeamLabel'] ?? true);
    $metricFilterOptions = $metricFilterOptions ?? [];
    $selectedMetricKey = (string) ($selectedMetricKey ?? '');

    $activityStatusBadgeClasses = [
        'behind' => 'bg-red-100 text-red-800 border-red-200',
        'on_track' => 'bg-amber-100 text-amber-900 border-amber-200',
        'achieved' => 'bg-green-100 text-green-800 border-green-200',
        'no_target' => 'bg-gray-100 text-gray-700 border-gray-200',
    ];
    $activityStatusLabels = [
        'behind' => 'Behind',
        'on_track' => 'On track',
        'achieved' => 'Achieved',
        'no_target' => 'No target set',
    ];

    $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();
    $periodTypeOptions = [
        ['value' => 'daily', 'label' => 'Daily'],
        ['value' => 'weekly', 'label' => 'Weekly'],
        ['value' => 'monthly', 'label' => 'Monthly'],
    ];
    $userFilterOptions = [['value' => '', 'label' => $filterAllUsersLabel]];
    foreach (($users ?? []) as $u) {
        $uName = trim(($u->name ?? '').' '.($u->surname ?? ''));
        $userFilterOptions[] = [
            'value' => (string) $u->id,
            'label' => $uName !== '' ? $uName : 'User #'.$u->id,
        ];
    }
    $chartMetricOptions = $chartMetricOptions ?? [];
    $chartMetricKey = (string) ($chartMetricKey ?? 'performance:gross_profit');
    $chartsByKey = $chartsByKey ?? [];
@endphp

<x-app-layout>
    <x-slot name="header">
        {{ __($pageTitle) }}
    </x-slot>

    <div class="space-y-4 py-6 px-3 sm:px-4 md:px-5">
        <div
            class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-3"
            x-data="{
                open: @js(array_fill_keys($expandedUserIds ?? [], true)),
                chartCanvasId: @js($chartCanvasId),
                toggle(userId) {
                    this.open[userId] = !this.open[userId];
                },
                isOpen(userId) {
                    return !!this.open[userId];
                },
                chartKey: @js($chartMetricKey),
                chartsByKey: @js($chartsByKey),
                chartHasTarget: true,
                chartTitle: '',
                updateChart() {
                    const payload = this.chartsByKey?.[this.chartKey] ?? null;
                    this.chartHasTarget = payload?.has_target === true;
                    this.chartTitle = payload?.title ?? '';

                    const canvas = document.getElementById(this.chartCanvasId);
                    if (!canvas || typeof window.initTargetsActualsChart !== 'function') {
                        return;
                    }

                    if (!payload?.has_target) {
                        const existing = window.Chart?.getChart?.(canvas);
                        existing?.destroy?.();

                        return;
                    }

                    window.initTargetsActualsChart(canvas, payload, { compact: true });
                    window.setTimeout(() => {
                        const chart = window.Chart?.getChart?.(canvas);
                        chart?.resize?.();
                    }, 50);
                },
                init() {
                    this.$nextTick(() => this.updateChart());
                },
            }"
        >
            <div class="flex min-h-[1.75rem] w-full flex-wrap items-center gap-x-2 gap-y-1">
                @if ($showTeamLabel)
                    <div class="flex shrink-0 flex-wrap items-center gap-2">
                        <p class="shrink-0 text-xs font-semibold text-gray-900">{{ $teamLabel }}</p>
                    </div>
                @endif

                <form
                    method="GET"
                    action="{{ route($formRoute) }}"
                    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="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="period_type"
                                id="period_type"
                                :selected="(string) ($selectedPeriodType ?? 'monthly')"
                                :options="$periodTypeOptions"
                                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="(string) (int) ($selectedMonth ?? now()->month)"
                                :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 ?? now()->year)"
                                :options="$yearSelectOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>

                    <div class="flex shrink-0 items-center gap-1">
                        <label for="user_id" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">{{ $filterUserLabel }}</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="user_id"
                                id="user_id"
                                :selected="$selectedUserId !== null ? (string) $selectedUserId : ''"
                                :options="$userFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>

                    <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 min-w-[8rem]">
                            <x-styled-select
                                name="metric"
                                id="metric"
                                :selected="$selectedMetricKey"
                                :options="$metricFilterOptions"
                                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($userGroups ?? [])) }} {{ $entityCountLabel }}
                </p>
            </div>

            @if ($showCharts)
                <div class="space-y-2">
                    <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
                        <div class="space-y-0.5">
                            <h2 class="text-sm font-semibold text-gray-900">Targets vs actuals</h2>
                            <p class="text-xs text-gray-500">Team totals for the selected filters (no forecasts).</p>
                        </div>
                        <div class="min-w-[14rem]">
                            <label for="targets_vs_actuals_chart_metric" class="block text-sm font-medium text-gray-700">Metric</label>
                            <x-styled-select
                                name="chart"
                                id="targets_vs_actuals_chart_metric"
                                :selected="$chartMetricKey"
                                :options="$chartMetricOptions"
                                class="mt-1 block w-full sm:w-80"
                                x-on:change.stop="chartKey = $event.target.value; updateChart()"
                            />
                        </div>
                    </div>

                    <div
                        x-show="!chartHasTarget"
                        x-cloak
                        class="rounded-lg border border-dashed border-gray-200 bg-gray-50 px-4 py-6 text-center text-sm text-gray-600"
                    >
                        No target data is available for this metric in the selected period.
                    </div>

                    <div x-show="chartHasTarget" x-cloak class="relative h-56 w-full">
                        <canvas id="{{ $chartCanvasId }}" :aria-label="chartTitle"></canvas>
                    </div>
                </div>
            @else
                <div class="space-y-0.5">
                    <h2 class="text-sm font-semibold text-gray-900">Activity & sales performance</h2>
                    <p class="text-xs text-gray-500">
                        Aggregated actuals for salespeople assigned to each manager.
                        Period: {{ $periodRangeLabel ?? '' }}.
                    </p>
                </div>
            @endif

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-2 text-left font-semibold text-gray-700 w-8"></th>
                            <th class="px-3 py-2 text-left font-semibold text-gray-700">{{ $tablePersonColumn }}</th>
                            @if ($showAssignedSalesmanCount)
                                <th class="px-3 py-2 text-right font-semibold text-gray-700">Salespeople</th>
                            @endif
                            <th class="px-3 py-2 text-left font-semibold text-gray-700">Metric</th>
                            <th class="px-3 py-2 text-left font-semibold text-gray-700">Period</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Target</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Actual</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Remaining</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Achievement</th>
                            <th class="px-3 py-2 text-left font-semibold text-gray-700">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white">
                        @forelse (($userGroups ?? []) as $group)
                            @php
                                $userId = (int) $group['user_id'];
                                $groupAvg = (float) ($group['average_achievement_percent'] ?? 0);
                                $metricCount = count($group['activities'] ?? []);
                            @endphp
                            <tr
                                class="cursor-pointer bg-white hover:bg-gray-50 transition-colors"
                                @click="toggle({{ $userId }})"
                                role="button"
                                :aria-expanded="isOpen({{ $userId }}) ? 'true' : 'false'"
                            >
                                <td class="px-3 py-2 text-gray-500">
                                    <svg
                                        class="h-4 w-4 transition-transform duration-150"
                                        :class="isOpen({{ $userId }}) ? 'rotate-90' : ''"
                                        xmlns="http://www.w3.org/2000/svg"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                        stroke-width="2"
                                        stroke="currentColor"
                                        aria-hidden="true"
                                    >
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                                    </svg>
                                </td>
                                <td class="px-3 py-2 text-gray-900 font-semibold">
                                    {{ $group['user_name'] }}
                                    <span class="ml-2 text-xs font-normal text-gray-500">({{ $metricCount }} metrics)</span>
                                </td>
                                @if ($showAssignedSalesmanCount)
                                    <td class="px-3 py-2 text-right text-gray-700 tabular-nums">
                                        {{ number_format((int) ($group['assigned_salesman_count'] ?? 0)) }}
                                    </td>
                                @endif
                                <td class="px-3 py-2 text-gray-500 italic" colspan="5">Summary</td>
                                <td class="px-3 py-2 text-right text-gray-700">
                                    {{ number_format($groupAvg, $groupAvg === floor($groupAvg) ? 0 : 1) }}% avg
                                </td>
                                <td class="px-3 py-2 text-gray-400 text-xs">Expand for detail</td>
                            </tr>
                            @foreach (($group['activities'] ?? []) as $row)
                                @php
                                    $status = (string) ($row['status'] ?? 'no_target');
                                    $badgeClass = $activityStatusBadgeClasses[$status] ?? $activityStatusBadgeClasses['no_target'];
                                    $statusLabel = $activityStatusLabels[$status] ?? $status;
                                    $hasTarget = (bool) ($row['has_target'] ?? false);
                                    $percent = (float) ($row['achievement_percent'] ?? 0);
                                    $valueType = (string) ($row['value_type'] ?? 'count');
                                    $targetDisplay = $valueType === 'money'
                                        ? format_rand((float) ($row['target'] ?? 0))
                                        : number_format((int) ($row['target'] ?? 0));
                                    $actualDisplay = $valueType === 'money'
                                        ? format_rand((float) ($row['actual'] ?? 0))
                                        : number_format((int) ($row['actual'] ?? 0));
                                    $remainingDisplay = $valueType === 'money'
                                        ? format_rand((float) ($row['remaining'] ?? 0))
                                        : number_format((int) ($row['remaining'] ?? 0));
                                @endphp
                                <tr
                                    x-show="isOpen({{ $userId }})"
                                    x-cloak
                                    class="bg-slate-50/80"
                                >
                                    <td class="px-3 py-2"></td>
                                    <td class="px-3 py-2"></td>
                                    @if ($showAssignedSalesmanCount)
                                        <td class="px-3 py-2"></td>
                                    @endif
                                    <td class="px-3 py-2 text-gray-800">{{ $row['metric_label'] ?? '—' }}</td>
                                    <td class="px-3 py-2 text-gray-700">{{ $row['period_label'] ?? '—' }}</td>
                                    <td class="px-3 py-2 text-right text-gray-700 tabular-nums">{{ $targetDisplay }}</td>
                                    <td class="px-3 py-2 text-right text-gray-700 tabular-nums">{{ $actualDisplay }}</td>
                                    <td class="px-3 py-2 text-right text-gray-700 tabular-nums">{{ $remainingDisplay }}</td>
                                    <td class="px-3 py-2 text-right text-gray-700">
                                        @if ($hasTarget)
                                            {{ number_format($percent, $percent === floor($percent) ? 0 : 1) }}%
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td class="px-3 py-2">
                                        <span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold {{ $badgeClass }}">
                                            {{ $statusLabel }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        @empty
                            <tr>
                                <td colspan="{{ $showAssignedSalesmanCount ? 10 : 9 }}" class="px-3 py-10 text-center text-gray-500">
                                    No results for the selected filters.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-app-layout>