@php
    use App\Services\Targets\SalesPerformanceProgressService;
    use App\Services\Targets\TargetProgressService;

    $statusBadgeClasses = [
        TargetProgressService::STATUS_BEHIND => 'bg-red-100 text-red-800',
        TargetProgressService::STATUS_ON_TRACK => 'bg-amber-100 text-amber-900',
        TargetProgressService::STATUS_ACHIEVED => 'bg-green-100 text-green-800',
        'no_target' => 'bg-gray-100 text-gray-700',
    ];
    $statusLabels = [
        TargetProgressService::STATUS_BEHIND => 'Behind',
        TargetProgressService::STATUS_ON_TRACK => 'On track',
        TargetProgressService::STATUS_ACHIEVED => 'Achieved',
        'no_target' => 'No target set',
    ];
    $progressBarClasses = [
        TargetProgressService::STATUS_BEHIND => 'bg-red-500',
        TargetProgressService::STATUS_ON_TRACK => 'bg-amber-500',
        TargetProgressService::STATUS_ACHIEVED => 'bg-green-500',
        'no_target' => 'bg-gray-300',
    ];

    $formatTargetValue = static function (float|int $value, string $valueType): string {
        if ($valueType === 'money') {
            return format_rand((float) $value);
        }

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

    $monthSelectOptions = \App\Support\ReportingPeriod::monthSelectOptions();
    $yearSelectOptions = \App\Support\ReportingPeriod::yearSelectOptions();

    $activityTypeFilterOptions = [['value' => '', 'label' => 'All types']];
    foreach (($activityTypes ?? []) as $type) {
        $typeLabel = $type->code === 'online_ads_posted' ? 'Online Ad' : $type->name;
        $activityTypeFilterOptions[] = [
            'value' => (string) $type->id,
            'label' => $typeLabel,
        ];
    }
    $selectedActivityTypeStr = $selectedActivityTypeId !== null ? (string) $selectedActivityTypeId : '';

    $metricFilterOptions = [['value' => '', 'label' => 'All metrics']];
    foreach (($performanceMetrics ?? []) as $metric) {
        $metricFilterOptions[] = [
            'value' => (string) ($metric['code'] ?? ''),
            'label' => (string) ($metric['label'] ?? ''),
        ];
    }
    $selectedMetricStr = $selectedMetricCode ?? '';

    $totalRowCount = collect($periodSections ?? [])->sum(
        fn ($section) => count($section['activity_rows'] ?? []) + count($section['performance_rows'] ?? []),
    );

    $summaryValueClasses = [
        'neutral' => 'text-gray-900',
        TargetProgressService::STATUS_BEHIND => 'text-red-700',
        TargetProgressService::STATUS_ON_TRACK => 'text-amber-700',
        TargetProgressService::STATUS_ACHIEVED => 'text-emerald-700',
    ];
@endphp

<x-app-layout>
    <x-slot name="header">
        {{ __('My Targets') }}
    </x-slot>

    <div class="space-y-4 py-6 px-3 sm:px-4 md:px-5">
        @if (! empty($isManagerPersonal))
            <p class="text-sm text-gray-600">
                Manager targets assigned to you. Actuals reflect your assigned salespeople’s combined activity.
            </p>
        @endif

        <x-flash-messages />

        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
            <dl class="flex flex-nowrap items-center divide-x divide-gray-100 overflow-x-auto">
                @foreach (($summaryMetrics ?? []) as $metric)
                    @php
                        $tone = (string) ($metric['tone'] ?? 'neutral');
                        $valueClass = $summaryValueClasses[$tone] ?? $summaryValueClasses['neutral'];
                    @endphp
                    <div class="flex min-w-0 flex-1 items-center gap-2 whitespace-nowrap px-3 py-2.5 sm:px-4">
                        <dt class="shrink-0 text-[10px] font-medium uppercase leading-none tracking-wide text-gray-500">
                            {{ $metric['label'] }}
                        </dt>
                        <dd class="shrink-0 text-sm font-semibold tabular-nums leading-none {{ $valueClass }}">
                            {{ $metric['value'] }}
                        </dd>
                    </div>
                @endforeach
            </dl>
        </div>

        <div class="overflow-visible bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-4">
            <div class="relative z-20 flex min-h-[1.75rem] flex-wrap items-center gap-x-3 gap-y-2 overflow-visible">
                <form
                    method="GET"
                    action="{{ route('my-targets.index') }}"
                    class="flex max-w-full shrink-0 flex-wrap items-center justify-start gap-x-2 gap-y-1"
                >
                    <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) $reportingPeriod->month"
                                :options="$monthSelectOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>

                    <div class="ml-2 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) $reportingPeriod->year"
                                :options="$yearSelectOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>

                    <div class="ml-2 flex shrink-0 items-center gap-1">
                        <label for="activity_type_id" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Activity type</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="activity_type_id"
                                id="activity_type_id"
                                :selected="$selectedActivityTypeStr"
                                :options="$activityTypeFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>

                    <div class="ml-2 flex shrink-0 items-center gap-1">
                        <label for="metric_code" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Sales metric</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="metric_code"
                                id="metric_code"
                                :selected="$selectedMetricStr"
                                :options="$metricFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>

                    <div class="ml-1 flex shrink-0 items-center gap-1.5">
                        <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>
                        <a
                            href="{{ route('my-targets.index', ['month' => $reportingPeriod->month, 'year' => $reportingPeriod->year]) }}"
                            class="inline-flex h-6 shrink-0 items-center rounded-md border border-gray-200 bg-white px-2 text-[10px] font-medium text-gray-700 shadow-sm hover:bg-gray-50"
                            title="Clear filters (keep month/year)"
                        >
                            Clear
                        </a>
                    </div>
                </form>

                <p class="ml-auto shrink-0 whitespace-nowrap text-right text-xs text-gray-500 leading-none">
                    As at {{ $referenceDate->format('j M Y') }} · {{ number_format($totalRowCount) }} row(s)
                </p>
            </div>

            @foreach (($periodSections ?? []) as $section)
                @php
                    $sectionKey = (string) ($section['key'] ?? '');
                    $sectionOpen = $sectionKey === \App\Services\Targets\TargetResolver::PERIOD_DAILY;
                @endphp
                <details
                    class="group/period border-t border-gray-100 pt-3 first:border-t-0 first:pt-0"
                    @if ($sectionOpen) open @endif
                >
                    <summary class="flex cursor-pointer list-none flex-wrap items-center justify-between gap-2 rounded-lg px-1 py-2 marker:content-none hover:bg-gray-50">
                        <div class="flex min-w-0 items-center gap-2">
                            <span
                                class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-gray-500 transition-transform duration-150 group-open/period:rotate-90"
                                aria-hidden="true"
                            >
                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                </svg>
                            </span>
                            <h2 class="text-sm font-semibold text-gray-900">{{ $section['label'] ?? 'Targets' }}</h2>
                        </div>
                        <p class="text-[10px] text-gray-500">Period: {{ $section['range_label'] ?? '—' }}</p>
                    </summary>

                    <div class="space-y-4 pb-2 pt-1">

                    <div class="space-y-2">
                        <h3 class="text-xs font-semibold text-gray-700">Activity targets</h3>
                        <div class="relative z-0 overflow-x-auto">
                            <table class="w-full table-fixed divide-y divide-gray-200 text-[11px] leading-tight">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Activity</th>
                                        <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Target</th>
                                        <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Actual</th>
                                        <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Remaining</th>
                                        <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Achievement</th>
                                        <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Progress</th>
                                        <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Status</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 bg-white">
                                    @forelse (($section['activity_rows'] ?? []) as $row)
                                        @php
                                            $status = (string) ($row['status'] ?? 'no_target');
                                            $badgeClass = $statusBadgeClasses[$status] ?? $statusBadgeClasses['no_target'];
                                            $statusLabel = $statusLabels[$status] ?? $status;
                                            $barClass = $progressBarClasses[$status] ?? $progressBarClasses['no_target'];
                                            $hasTarget = (bool) ($row['has_target'] ?? false);
                                            $percent = (float) ($row['achievement_percent'] ?? 0);
                                            $barWidth = $hasTarget ? min(100, max(0, $percent)) : 0;
                                        @endphp
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-1.5 py-1.5 text-gray-900 font-medium">
                                                {{ $row['activity_label'] ?? '—' }}
                                            </td>
                                            <td class="px-1.5 py-1.5 text-right text-gray-700 tabular-nums">
                                                {{ number_format((int) ($row['target'] ?? 0)) }}
                                            </td>
                                            <td class="px-1.5 py-1.5 text-right text-gray-700 tabular-nums">
                                                {{ number_format((int) ($row['actual'] ?? 0)) }}
                                            </td>
                                            <td class="px-1.5 py-1.5 text-right text-gray-700 tabular-nums">
                                                {{ number_format((int) ($row['remaining'] ?? 0)) }}
                                            </td>
                                            <td class="px-1.5 py-1.5 text-right text-gray-700 tabular-nums">
                                                @if ($hasTarget)
                                                    {{ number_format($percent, $percent === floor($percent) ? 0 : 1) }}%
                                                @else
                                                    —
                                                @endif
                                            </td>
                                            <td class="px-1.5 py-1.5 min-w-[6rem]">
                                                <div class="h-1.5 w-full rounded-full bg-gray-200 overflow-hidden">
                                                    <div
                                                        class="h-1.5 rounded-full {{ $barClass }}"
                                                        style="width: {{ $barWidth }}%"
                                                    ></div>
                                                </div>
                                            </td>
                                            <td class="px-1.5 py-1.5 whitespace-nowrap">
                                                <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold {{ $badgeClass }}">
                                                    {{ $statusLabel }}
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="px-2 py-4 text-center text-gray-500">
                                                No activity targets for this period.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <h3 class="text-xs font-semibold text-gray-700">Sales performance targets</h3>
                        <div class="relative z-0 overflow-x-auto">
                            <table class="w-full table-fixed divide-y divide-gray-200 text-[11px] leading-tight">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Metric</th>
                                        <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Target</th>
                                        <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Actual</th>
                                        <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Remaining</th>
                                        <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Achievement</th>
                                        <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Progress</th>
                                        <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Status</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 bg-white">
                                    @forelse (($section['performance_rows'] ?? []) as $row)
                                        @php
                                            $status = (string) ($row['status'] ?? SalesPerformanceProgressService::STATUS_NO_TARGET);
                                            $badgeClass = $statusBadgeClasses[$status] ?? $statusBadgeClasses['no_target'];
                                            $statusLabel = $statusLabels[$status] ?? $status;
                                            $barClass = $progressBarClasses[$status] ?? $progressBarClasses['no_target'];
                                            $hasTarget = (bool) ($row['has_target'] ?? false);
                                            $percent = (float) ($row['achievement_percent'] ?? 0);
                                            $barWidth = $hasTarget ? min(100, max(0, $percent)) : 0;
                                            $valueType = (string) ($row['value_type'] ?? 'count');
                                        @endphp
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-1.5 py-1.5 text-gray-900 font-medium">
                                                {{ $row['metric_label'] ?? '—' }}
                                            </td>
                                            <td class="px-1.5 py-1.5 text-right text-gray-700 tabular-nums">
                                                {{ $hasTarget ? $formatTargetValue($row['target'] ?? 0, $valueType) : '—' }}
                                            </td>
                                            <td class="px-1.5 py-1.5 text-right text-gray-700 tabular-nums">
                                                {{ $formatTargetValue($row['actual'] ?? 0, $valueType) }}
                                            </td>
                                            <td class="px-1.5 py-1.5 text-right text-gray-700 tabular-nums">
                                                {{ $hasTarget ? $formatTargetValue($row['remaining'] ?? 0, $valueType) : '—' }}
                                            </td>
                                            <td class="px-1.5 py-1.5 text-right text-gray-700 tabular-nums">
                                                @if ($hasTarget)
                                                    {{ number_format($percent, $percent === floor($percent) ? 0 : 1) }}%
                                                @else
                                                    —
                                                @endif
                                            </td>
                                            <td class="px-1.5 py-1.5 min-w-[6rem]">
                                                <div class="h-1.5 w-full rounded-full bg-gray-200 overflow-hidden">
                                                    <div
                                                        class="h-1.5 rounded-full {{ $barClass }}"
                                                        style="width: {{ $barWidth }}%"
                                                    ></div>
                                                </div>
                                            </td>
                                            <td class="px-1.5 py-1.5 whitespace-nowrap">
                                                <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold {{ $badgeClass }}">
                                                    {{ $statusLabel }}
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="px-2 py-4 text-center text-gray-500">
                                                No sales performance targets for this period.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    </div>
                </details>
            @endforeach
        </div>
    </div>
</x-app-layout>