@php
    $periodMeta = [
        'weekly' => ['label' => __('Week'), 'icon' => 'calendar-days'],
        'monthly' => ['label' => __('Month'), 'icon' => 'calendar-days'],
        'quarterly' => ['label' => __('Quarter'), 'icon' => 'calendar-days'],
        'yearly' => ['label' => __('Year'), 'icon' => 'calendar-days'],
    ];
    $viewMeta = [
        'managed' => ['label' => __('Managed'), 'icon' => 'briefcase', 'hint' => __('Opportunities they own')],
        'originated' => ['label' => __('Originated'), 'icon' => 'flag', 'hint' => __('Opportunities they brought in')],
        'supported' => ['label' => __('Supported'), 'icon' => 'users', 'hint' => __('Opportunities they collaborate on')],
    ];
    $statusMeta = [
        'met' => ['label' => __('Met'), 'color' => 'emerald'],
        'on_track' => ['label' => __('On track'), 'color' => 'sky'],
        'behind' => ['label' => __('Behind'), 'color' => 'rose'],
        'no_target' => ['label' => __('No target set'), 'color' => 'slate'],
        'not_available' => ['label' => __('Not available'), 'color' => 'slate'],
    ];
    $kpiMeta = [
        ['label' => __('Officers'), 'value' => $kpis['officers'], 'icon' => 'users', 'accent' => '#6366f1', 'sub' => $windowLabel],
        ['label' => __('Targets in force'), 'value' => $kpis['targets'], 'icon' => 'flag', 'accent' => '#0ea5e9', 'sub' => __('Approved for this period')],
        ['label' => __('Met or on track'), 'value' => $kpis['met'], 'icon' => 'check-circle', 'accent' => '#10b981', 'sub' => __(':pct% of the period gone', ['pct' => number_format($expected, 0)])],
        ['label' => __('Behind'), 'value' => $kpis['behind'], 'icon' => 'exclamation-triangle', 'accent' => '#e11d48', 'sub' => __('Below the pace for today')],
        ['label' => __('Awaiting approval'), 'value' => $kpis['awaiting'], 'icon' => 'clock', 'accent' => '#f59e0b', 'sub' => __('Targets not yet in force')],
    ];
    $fmt = fn (?float $v, bool $percent = false): string => $v === null ? __('Not available') : rtrim(rtrim(number_format($v, 1), '0'), '.').($percent ? '%' : '');
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Performance')">
            @if ($canSetTargets)
                <a href="{{ route('targets.index') }}#business-development" wire:navigate>
                    <x-secondary-button type="button">
                        <x-icon name="flag" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('Set targets') }}
                    </x-secondary-button>
                </a>
            @endif
            <a href="{{ route('crm.weekly-reports.index') }}" wire:navigate>
                <x-button type="button">
                    <x-icon name="clipboard-document-list" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Weekly reports') }}
                </x-button>
            </a>
        </x-page-header>

        {{-- Period, view and officer --}}
        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex flex-wrap items-center gap-3">
                    <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        @foreach ($periodMeta as $key => $meta)
                            <button type="button" wire:click="setPeriod('{{ $key }}')"
                                class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 transition {{ $period === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                {{ $meta['label'] }}
                            </button>
                        @endforeach
                    </div>
                    <div class="flex items-center gap-1">
                        <button type="button" wire:click="previous" class="rounded-lg p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700" title="{{ __('Previous') }}">
                            <x-icon name="chevron-left" class="h-4 w-4" />
                        </button>
                        <span class="min-w-[8rem] text-center text-sm font-semibold text-slate-800">{{ $windowLabel }}</span>
                        @if ($offset < 0)
                            <button type="button" wire:click="next" class="rounded-lg p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700" title="{{ __('Next') }}">
                                <x-icon name="chevron-right" class="h-4 w-4" />
                            </button>
                        @endif
                    </div>
                </div>

                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        @foreach ($viewMeta as $key => $meta)
                            <button type="button" wire:click="setView('{{ $key }}')" title="{{ $meta['hint'] }}"
                                class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 transition {{ $view === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                <x-icon :name="$meta['icon']" class="h-4 w-4" />
                                {{ $meta['label'] }}
                            </button>
                        @endforeach
                    </div>
                    @if ($seesTeam)
                        <select wire:model.live="officer" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Every officer') }}</option>
                            @foreach ($people as $person)
                                <option value="{{ $person->id }}">{{ $person->name }}</option>
                            @endforeach
                        </select>
                    @endif
                </div>
            </div>
            <p class="mt-3 text-xs text-slate-400">
                {{ __('The view decides whose opportunities count: :hint. Activity figures always count whoever did the work. The three views overlap and are never added together.', ['hint' => mb_strtolower($viewMeta[$view]['hint'])]) }}
            </p>
        </x-card>

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($kpiMeta as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ number_format($m['value']) }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        @forelse ($cards as $card)
            <x-card class="overflow-hidden" wire:key="officer-{{ $card['user']->id }}">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-start sm:justify-between sm:p-5">
                    <div class="flex items-center gap-3">
                        <img src="{{ $card['user']->profile_photo_url }}" alt="" class="h-10 w-10 rounded-full object-cover ring-1 ring-slate-200">
                        <div>
                            <h2 class="text-base font-semibold text-slate-900">{{ $card['user']->name }}</h2>
                            <p class="text-xs text-slate-400">{{ $card['role'] ?? __('No role') }}</p>
                        </div>
                    </div>
                    <dl class="grid grid-cols-2 gap-x-6 gap-y-1 text-xs sm:grid-cols-4">
                        <div>
                            <dt class="text-slate-400">{{ __('Active pipeline') }}</dt>
                            <dd class="font-semibold tabular-nums text-slate-800">
                                {{ number_format($card['pipeline']['count']) }}
                                <span class="font-normal text-slate-500">· {{ $card['pipeline']['value_base'] === null ? __('Not estimated') : number_format($card['pipeline']['value_base'], 0) }}</span>
                            </dd>
                        </div>
                        <div>
                            <dt class="text-slate-400">{{ __('Win rate') }}</dt>
                            <dd class="font-semibold tabular-nums text-slate-800">{{ $card['winRate'] === null ? __('Not applicable') : number_format($card['winRate'] * 100, 0).'%' }}</dd>
                        </div>
                        <div>
                            <dt class="text-slate-400">{{ __('Gone quiet') }}</dt>
                            <dd class="font-semibold tabular-nums text-slate-800">{{ number_format($card['stale']) }}</dd>
                        </div>
                        <div>
                            <dt class="text-slate-400" title="{{ __('Wins in each view. They overlap and are never added together.') }}">{{ __('Wins: originated / managed / supported') }}</dt>
                            <dd class="font-semibold tabular-nums text-slate-800">{{ $card['credit']['originated'] }} / {{ $card['credit']['managed'] }} / {{ $card['credit']['supported'] }}</dd>
                        </div>
                    </dl>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Measure') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Target') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actual') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Remaining') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Progress') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($card['rows'] as $row)
                                <tr wire:key="measure-{{ $card['user']->id }}-{{ $row['metric'] }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 py-4 text-sm lg:px-4">
                                        <p class="font-medium text-slate-900">{{ __($row['label']) }}</p>
                                        <p class="text-xs text-slate-400">{{ __($row['definition']) }}</p>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums font-semibold text-slate-900 lg:px-4">
                                        @if ($row['target'] === null)
                                            <span class="font-normal text-slate-400">{{ __('Not set') }}</span>
                                        @else
                                            {{ $fmt($row['target'], $row['percent']) }}
                                            @if ($row['revision'] > 1)
                                                <span class="block text-[11px] font-normal text-slate-400">{{ __('Revision :n', ['n' => $row['revision']]) }}</span>
                                            @endif
                                        @endif
                                        @if ($row['pending'])
                                            <span class="block text-[11px] font-normal text-amber-600">{{ __('Change awaiting approval') }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums font-semibold text-slate-900 lg:px-4">
                                        <span class="{{ $row['actual'] === null ? 'font-normal text-slate-400' : '' }}">{{ $fmt($row['actual'], $row['percent']) }}</span>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-700 lg:px-4">
                                        {{ $row['remaining'] === null ? __('Not applicable') : $fmt($row['remaining'], $row['percent']) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                        @if ($row['pct'] !== null)
                                            <div class="flex items-center gap-2">
                                                <div class="relative h-2 w-24 overflow-hidden rounded-full bg-slate-100">
                                                    <div class="absolute inset-y-0 left-0 rounded-full {{ $row['status'] === 'behind' ? 'bg-rose-400' : 'bg-emerald-500' }}" style="width: {{ min(100, $row['pct']) }}%"></div>
                                                    <div class="absolute inset-y-0 w-px bg-slate-500" style="left: {{ min(100, $expected) }}%" title="{{ __('Pace for today') }}"></div>
                                                </div>
                                                <span class="tabular-nums text-xs text-slate-500">{{ number_format($row['pct'], 0) }}%</span>
                                            </div>
                                        @else
                                            <span class="text-xs text-slate-400">{{ __('Not applicable') }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                        <x-badge :color="$statusMeta[$row['status']]['color']">{{ $statusMeta[$row['status']]['label'] }}</x-badge>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-10">
                                        <x-empty-state icon="flag" :title="__('No measures for this role')"
                                            :message="__('Measures appear here once a director sets a business development target for this person.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @empty
            <x-card class="p-6">
                <x-empty-state icon="trophy" :title="__('Nobody to show yet')"
                    :message="__('Business development officers appear here, along with anyone a director has set a business development target for.')" class="border-0 bg-transparent py-0" />
            </x-card>
        @endforelse
    </div>
</div>