@php
    use App\Services\Targets\SalesForecastService;

    $canvasId = $canvasId ?? 'team-forecast-chart-canvas';
    $deferChartInit = (bool) ($deferChartInit ?? false);

    $teamForecastChart = $teamForecastChart ?? [];
    $teamForecastChartOptions = $teamForecastChartOptions ?? [];
    $teamForecastChartCode = (string) ($teamForecastChartCode ?? 'final_score');
    $chartSummary = $teamForecastChart['summary'] ?? [];
    $chartHasTarget = ($teamForecastChart['has_target'] ?? false) === true;
    $chartPaceStatus = (string) ($chartSummary['pace_status'] ?? SalesForecastService::PACE_NO_TARGET);
    $chartPaceBadge = $forecastPaceBadgeClasses[$chartPaceStatus] ?? $forecastPaceBadgeClasses[SalesForecastService::PACE_NO_TARGET];
    $chartPaceLabel = $forecastPaceLabels[$chartPaceStatus] ?? ucfirst(str_replace('_', ' ', $chartPaceStatus));
    $chartValueType = (string) ($teamForecastChart['value_type'] ?? 'score');

    $teamForecastChartSelectOptions = collect($teamForecastChartOptions)->map(fn (array $option) => [
        'value' => (string) ($option['metric_code'] ?? ''),
        'label' => (string) ($option['label'] ?? ''),
    ])->all();

    $formatTeamChartSummaryValue = function (string $field) use ($chartSummary, $chartValueType): string {
        $value = (float) ($chartSummary[$field] ?? 0);

        if ($chartValueType === 'money') {
            return format_rand($value);
        }

        if ($chartValueType === 'score') {
            return number_format($value, 1, '.', ',');
        }

        return number_format($value, 0, '.', ',');
    };
@endphp

<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 space-y-6">
    <div class="space-y-4">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div class="space-y-1">
                <h3 class="text-base font-semibold text-gray-900">Team forecast trend</h3>
                <p class="text-sm text-gray-600">
                    Aggregated target pace, actual progress, and projected run-rate for the sales team (monthly).
                </p>
            </div>
            <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:gap-3">
                <div class="min-w-[12rem]">
                    <label for="team_forecast_chart_{{ $canvasId }}" class="block text-sm font-medium text-gray-700">Metric</label>
                    <x-styled-select
                        name="forecast_chart"
                        id="team_forecast_chart_{{ $canvasId }}"
                        :selected="$teamForecastChartCode"
                        :options="$teamForecastChartSelectOptions"
                        class="mt-1 block w-full sm:w-56"
                    />
                </div>
            </div>
        </div>

        @if (! $chartHasTarget)
            <div class="rounded-lg border border-dashed border-gray-200 bg-gray-50 px-4 py-6 text-center text-sm text-gray-600">
                No team target data is available for this metric this month, so chart lines cannot be drawn.
            </div>
        @else
            <div class="relative h-72 w-full">
                <canvas
                    id="{{ $canvasId }}"
                    aria-label="{{ $teamForecastChart['title'] ?? 'Team forecast chart' }}"
                ></canvas>
            </div>

            <div class="grid grid-cols-2 lg:grid-cols-5 gap-3 text-sm">
                <div class="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
                    <p class="text-xs font-medium uppercase tracking-wide text-gray-500">Target</p>
                    <p class="mt-0.5 font-semibold text-gray-900 tabular-nums">{{ $formatTeamChartSummaryValue('target') }}</p>
                </div>
                <div class="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
                    <p class="text-xs font-medium uppercase tracking-wide text-gray-500">Actual to date</p>
                    <p class="mt-0.5 font-semibold text-gray-900 tabular-nums">{{ $formatTeamChartSummaryValue('actual_to_date') }}</p>
                </div>
                <div class="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
                    <p class="text-xs font-medium uppercase tracking-wide text-gray-500">Projected end</p>
                    <p class="mt-0.5 font-semibold text-gray-900 tabular-nums">{{ $formatTeamChartSummaryValue('projected_end') }}</p>
                </div>
                <div class="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
                    <p class="text-xs font-medium uppercase tracking-wide text-gray-500">Projected %</p>
                    <p class="mt-0.5 font-semibold text-gray-900 tabular-nums">
                        {{ number_format((float) ($chartSummary['projected_percent'] ?? 0), 1) }}%
                    </p>
                </div>
                <div class="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
                    <p class="text-xs font-medium uppercase tracking-wide text-gray-500">Pace</p>
                    <p class="mt-1">
                        <span class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold {{ $chartPaceBadge }}">
                            {{ $chartPaceLabel }}
                        </span>
                    </p>
                </div>
            </div>

            <p class="text-xs text-gray-500">
                Targets are dealership targets. Actuals are total dealer sales for the month.
            </p>

            @unless ($deferChartInit)
                <script>
                    document.addEventListener('DOMContentLoaded', () => {
                        const canvas = document.getElementById(@json($canvasId));
                        if (canvas && typeof window.initForecastChart === 'function') {
                            window.initForecastChart(canvas, @json($teamForecastChart));
                        }
                    });
                </script>
            @endunless
        @endif
    </div>
</div>