@php
    $teamForecasts = $teamForecasts ?? [];
    $charts = $teamForecasts['charts'] ?? [];
    $periodLabel = $teamForecasts['period_label'] ?? ($tv['period_label'] ?? now()->format('F Y'));

    $forecastPanels = [
        ['key' => 'total_sales_revenue', 'label' => 'Total Sales Revenue', 'canvasId' => 'tv-forecast-revenue'],
        ['key' => 'units_sold', 'label' => 'Units Sold', 'canvasId' => 'tv-forecast-units'],
        ['key' => 'gross_profit', 'label' => 'Gross Profit', 'canvasId' => 'tv-forecast-gp'],
    ];

    $formatForecastSummary = function (array $chart, string $field): string {
        $summary = is_array($chart['summary'] ?? null) ? $chart['summary'] : [];
        $value = (float) ($summary[$field] ?? 0);
        $valueType = (string) ($chart['value_type'] ?? 'count');

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

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

<div class="tv-leaderboard-card flex flex-col flex-1 min-h-0 rounded-2xl border border-slate-800/80 overflow-hidden">
    <div class="flex-1 min-h-0 flex flex-col px-4 sm:px-6 lg:px-8 pt-5 sm:pt-6 pb-4 sm:pb-6">
        <h2 class="tv-team-performance-title text-center font-bold text-white tracking-tight mb-4 sm:mb-5 shrink-0">
            Team Forecast
        </h2>
        <p class="text-center text-sm sm:text-base text-slate-500 mb-4 sm:mb-5 shrink-0">
            Target, actual, and projected run-rate · {{ $periodLabel }}
        </p>

        <div class="tv-forecast-grid flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5">
            @foreach ($forecastPanels as $panel)
                @php
                    $chart = $charts[$panel['key']] ?? [];
                    $hasTarget = ($chart['has_target'] ?? false) === true;
                @endphp
                <div class="tv-forecast-panel flex flex-col min-h-0 rounded-xl border border-slate-800/80 bg-slate-900/40 p-3 sm:p-4">
                    <h3 class="text-sm sm:text-base font-semibold text-slate-200 text-center mb-3 shrink-0">
                        {{ $panel['label'] }}
                    </h3>

                    <div
                        id="{{ $panel['canvasId'] }}-stats"
                        class="tv-forecast-stats grid grid-cols-3 gap-2 sm:gap-3 mb-3 shrink-0 {{ $hasTarget ? '' : 'hidden' }}"
                    >
                        <div class="rounded-lg border border-slate-700/80 bg-slate-950/50 px-2 py-2 sm:px-3 sm:py-2.5 text-center">
                            <p class="text-[10px] sm:text-xs uppercase tracking-wide text-slate-500 font-semibold">Month target</p>
                            <p class="tv-forecast-stat-target mt-1 text-xs sm:text-sm font-bold text-slate-100 tabular-nums leading-tight">
                                {{ $hasTarget ? $formatForecastSummary($chart, 'target') : '—' }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-sky-800/50 bg-sky-950/20 px-2 py-2 sm:px-3 sm:py-2.5 text-center">
                            <p class="text-[10px] sm:text-xs uppercase tracking-wide text-sky-400/80 font-semibold">Actual today</p>
                            <p class="tv-forecast-stat-actual mt-1 text-xs sm:text-sm font-bold text-sky-200 tabular-nums leading-tight">
                                {{ $hasTarget ? $formatForecastSummary($chart, 'actual_to_date') : '—' }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-amber-800/50 bg-amber-950/20 px-2 py-2 sm:px-3 sm:py-2.5 text-center">
                            <p class="text-[10px] sm:text-xs uppercase tracking-wide text-amber-400/80 font-semibold">Forecast end</p>
                            <p class="tv-forecast-stat-projected mt-1 text-xs sm:text-sm font-bold text-amber-200 tabular-nums leading-tight">
                                {{ $hasTarget ? $formatForecastSummary($chart, 'projected_end') : '—' }}
                            </p>
                        </div>
                    </div>

                    <div
                        id="{{ $panel['canvasId'] }}-empty"
                        class="tv-forecast-empty flex-1 flex items-center justify-center text-center text-sm text-slate-500 px-3 {{ $hasTarget ? 'hidden' : '' }}"
                    >
                        No team target configured for this metric.
                    </div>
                    <div class="tv-forecast-chart-wrap flex-1 min-h-[9rem] relative {{ $hasTarget ? '' : 'hidden' }}">
                        <canvas
                            id="{{ $panel['canvasId'] }}"
                            aria-label="{{ $panel['label'] }} forecast chart"
                        ></canvas>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>