@php
    use App\Services\Targets\SalesForecastService;

    $dashboardSlides = $dashboardSlides ?? [];
    $initialScopeIndex = (int) ($initialScopeIndex ?? 0);
    $teamForecastChartCode = (string) ($teamForecastChartCode ?? 'gross_profit');
    $teamForecastChartSelectOptions = $teamForecastChartSelectOptions ?? [];

    $forecastPaceBadgeClasses = [
        SalesForecastService::PACE_AHEAD => 'bg-green-100 text-green-800 border-green-200',
        SalesForecastService::PACE_ON_TRACK => 'bg-indigo-100 text-indigo-900 border-indigo-200',
        SalesForecastService::PACE_AT_RISK => 'bg-amber-100 text-amber-900 border-amber-200',
        SalesForecastService::PACE_BEHIND => 'bg-red-100 text-red-800 border-red-200',
        SalesForecastService::PACE_NO_TARGET => 'bg-gray-100 text-gray-700 border-gray-200',
        SalesForecastService::PACE_NO_ELAPSED_DAYS => 'bg-gray-100 text-gray-600 border-gray-200',
    ];

    $forecastPaceLabels = [
        SalesForecastService::PACE_AHEAD => 'Ahead',
        SalesForecastService::PACE_ON_TRACK => 'On track',
        SalesForecastService::PACE_AT_RISK => 'At risk',
        SalesForecastService::PACE_BEHIND => 'Behind',
        SalesForecastService::PACE_NO_TARGET => 'No targets',
        SalesForecastService::PACE_NO_ELAPSED_DAYS => 'Period not started',
    ];

    $gallerySlides = collect($dashboardSlides)->map(fn (array $slide) => [
        'key' => (string) ($slide['key'] ?? ''),
        'label' => (string) ($slide['label'] ?? ''),
        'forecastByMetric' => $slide['forecastByMetric'] ?? [],
    ])->values()->all();

    $initialLabel = $dashboardSlides[$initialScopeIndex]['label'] ?? 'Dealer';
@endphp

<x-app-layout>
    <x-slot name="header">
        {{ $title }}
    </x-slot>

    <div
        class="p-6 space-y-6"
        x-data="salesDashboardGallery({
            slides: @js($gallerySlides),
            initialIndex: {{ $initialScopeIndex }},
            forecastChartCode: @js($teamForecastChartCode),
            paceBadgeClasses: @js($forecastPaceBadgeClasses),
            paceLabels: @js($forecastPaceLabels),
        })"
        x-init="init()"
        @keydown.window="onKeydown($event)"
        @change.capture="onForecastMetricChange($event)"
    >
        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 space-y-5">
            <div class="grid grid-cols-[1fr_auto_1fr] items-center gap-x-2">
                <div class="min-w-0" aria-hidden="true"></div>
                <div class="flex justify-center min-w-0">
                    <x-dashboard.sales-scope-navigator-bar :label="$initialLabel" />
                </div>
                <div class="flex justify-end min-w-0">
                    <x-reporting-period-filter
                        :action="route('dashboard.sales')"
                        :selected-month="$reportingPeriod->month"
                        :selected-year="$reportingPeriod->year"
                        :preserve="['scope', 'forecast_chart']"
                    />
                </div>
            </div>

            <div class="overflow-hidden">
                <div
                    class="flex transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform"
                    :class="isAnimating ? 'pointer-events-none' : ''"
                    :style="trackStyle"
                >
                    @foreach ($dashboardSlides as $slide)
                        @include('dashboard.departments.partials.sales-dashboard-slide-top', [
                            'slide' => $slide,
                            'reportingPeriodLabel' => $reportingPeriod->label(),
                        ])
                    @endforeach
                </div>
            </div>
        </div>

        @include('dashboard.departments.partials.sales-dashboard-forecast-panel', [
            'teamForecastChartCode' => $teamForecastChartCode,
            'teamForecastChartSelectOptions' => $teamForecastChartSelectOptions,
        ])

        <div class="overflow-hidden">
            <div
                class="flex transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform"
                :class="isAnimating ? 'pointer-events-none' : ''"
                :style="trackStyle"
            >
                @foreach ($dashboardSlides as $slide)
                    @include('dashboard.departments.partials.sales-dashboard-slide-bottom', [
                        'slide' => $slide,
                        'reportingPeriodLabel' => $reportingPeriod->label(),
                    ])
                @endforeach
            </div>
        </div>
    </div>
</x-app-layout>