@php
    use App\Services\Targets\SalesForecastService;

    $forecastByMetric = $forecastByMetric ?? [];
    $forecastChartSelectOptions = $forecastChartSelectOptions ?? [];
    $forecastChartCode = (string) ($forecastChartCode ?? 'final_score');
@endphp

<div
    class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 space-y-6"
    x-data="{
        code: @js($forecastChartCode),
        byMetric: @js($forecastByMetric),
        paceBadgeClasses: @js($forecastPaceBadgeClasses),
        paceLabels: @js($forecastPaceLabels),

        get current() {
            return this.byMetric[this.code] ?? {};
        },
        get chartHasTarget() {
            return this.current?.hasTarget === true;
        },
        get summary() {
            return this.current?.summary ?? {};
        },
        get valueType() {
            return this.current?.valueType ?? 'count';
        },
        get paceStatus() {
            return this.summary?.pace_status ?? 'no_target';
        },
        get paceBadge() {
            return this.paceBadgeClasses[this.paceStatus] ?? this.paceBadgeClasses['no_target'] ?? '';
        },
        get paceLabel() {
            return this.paceLabels[this.paceStatus] ?? this.paceStatus.replace(/_/g, ' ');
        },

        formatValue(field) {
            const value = Number(this.summary[field] ?? 0);
            if (this.valueType === 'money') {
                return 'R ' + value.toLocaleString('en-ZA', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            }
            if (this.valueType === 'score') {
                return value.toLocaleString('en-ZA', { minimumFractionDigits: 1, maximumFractionDigits: 1 });
            }
            return value.toLocaleString('en-ZA', { maximumFractionDigits: 0 });
        },

        formatPercent() {
            return Number(this.summary?.projected_percent ?? 0).toFixed(1) + '%';
        },

        destroyChart() {
            const canvas = this.$refs.forecastCanvas;
            if (!canvas) return;
            const existing = window.Chart?.getChart?.(canvas);
            if (existing) existing.destroy();
        },

        setMetric(newCode) {
            const next = String(newCode ?? '').trim();
            if (next === '' || next === this.code) return;
            this.destroyChart();
            this.code = next;
            this.syncUrl();
            this.$nextTick(() => this.renderChart());
        },

        renderChart() {
            if (typeof window.initForecastChart !== 'function') return;

            if (!this.chartHasTarget) {
                this.destroyChart();
                return;
            }

            const canvas = this.$refs.forecastCanvas;
            if (!canvas) return;

            this.destroyChart();

            const payload = this.current?.chart;
            if (!payload?.has_target) return;

            window.initForecastChart(canvas, payload);
            window.setTimeout(() => {
                window.Chart?.getChart?.(canvas)?.resize?.();
            }, 50);
        },

        syncUrl() {
            if (typeof window === 'undefined' || !window.history?.replaceState) return;
            const url = new URL(window.location.href);
            url.searchParams.set('forecast_chart', this.code);
            window.history.replaceState(null, '', url.toString());
        },

        init() {
            this.$nextTick(() => this.renderChart());
        }
    }"
    @change.capture="
        if ($event.target && $event.target.id === 'perf_forecast_chart_input') {
            setMetric(String($event.target.value ?? ''));
        }
    "
>
    <div class="space-y-4 border-b border-gray-100 pb-6">
        <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">Forecast trend</h3>
                <p class="text-sm text-gray-600">
                    Target pace, actual progress to date, and projected run-rate to period end.
                </p>
            </div>
            <div class="min-w-[12rem]">
                <label for="perf_forecast_chart" class="block text-sm font-medium text-gray-700">Metric</label>
                <x-styled-select
                    name="forecast_chart"
                    id="perf_forecast_chart"
                    :selected="$forecastChartCode"
                    :options="$forecastChartSelectOptions"
                    class="mt-1 block w-full sm:w-56"
                />
            </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 is configured for this metric in the selected period, so chart lines cannot be drawn.
        </div>

        <div x-show="chartHasTarget" x-cloak class="space-y-4">
            <div class="relative h-72 w-full">
                <canvas x-ref="forecastCanvas" aria-label="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" x-text="formatValue('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" x-text="formatValue('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" x-text="formatValue('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" x-text="formatPercent()"></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"
                            :class="paceBadge"
                            x-text="paceLabel"
                        ></span>
                    </p>
                </div>
            </div>

            <template x-if="current?.chart?.is_snapshot === true">
                <p class="text-xs text-amber-700">
                    This metric is a snapshot (current count only); historical daily points are not available yet.
                </p>
            </template>
        </div>
    </div>

</div>