@php
    $money = fn (?float $v, string $null = 'Not estimated'): string => $v === null ? __($null) : trim($base.' '.number_format($v, 2));
    $periodWord = mb_strtolower(__($periods[$period]));
    $closed = $outcomes['won'] + $outcomes['lost'];

    $kpis = [
        ['label' => __('Active pipeline'), 'value' => $money($pipeline['value_base']), 'icon' => 'funnel', 'accent' => '#6366f1',
            'sub' => $pipeline['not_estimated'] > 0
                ? __(':n open · :m not estimated', ['n' => $pipeline['count'], 'm' => $pipeline['not_estimated']])
                : __(':n open', ['n' => $pipeline['count']]),
            'href' => route('crm.reports.show', 'pipeline-by-stage')],
        ['label' => __('Newly qualified'), 'value' => number_format($qualified), 'icon' => 'check-circle', 'accent' => '#10b981',
            'sub' => __('First time, :period', ['period' => $periodWord]),
            'href' => route('crm.reports.show', ['report' => 'qualified-by-originator', 'period' => $period])],
        ['label' => __('Win rate'), 'value' => $winRate === null ? __('Not applicable') : number_format($winRate * 100, 1).'%', 'icon' => 'trophy', 'accent' => '#0ea5e9',
            'sub' => $closed === 0 ? __('No closed opportunities') : __(':won won, :lost lost', ['won' => $outcomes['won'], 'lost' => $outcomes['lost']]),
            'href' => route('crm.reports.show', ['report' => 'won-opportunities', 'period' => $period])],
        ['label' => __('Needs attention'), 'value' => number_format($flagged), 'icon' => 'eye', 'accent' => '#f59e0b',
            'sub' => __('Flagged opportunities'),
            'href' => route('crm.pipeline-monitor', $officerId ? ['officer' => $officerId] : [])],
        ['label' => __('Overdue tasks'), 'value' => number_format($overdueTasks), 'icon' => 'bell-alert', 'accent' => '#e11d48',
            'sub' => $overdueTasks > 0 ? __('Follow-up required') : __('All on time'),
            'href' => route('crm.reports.show', 'overdue-follow-ups')],
    ];

    $stageFigure = fn (array $figures): float => $stageMode === 'value' ? (float) ($figures['value_base'] ?? 0) : (float) $figures['count'];
    $maxStage = max(1.0, (float) max(array_map($stageFigure, $pipeline['by_stage']) ?: [0]));

    $initials = function (string $name): string {
        $parts = preg_split('/\s+/', trim($name)) ?: [];
        $letters = array_map(fn (string $p): string => mb_strtoupper(mb_substr($p, 0, 1)), array_slice(array_filter($parts), 0, 2));

        return implode('', $letters) ?: '?';
    };

    $actions = [
        ['tone' => 'rose', 'icon' => 'clock', 'count' => $overdueTasks, 'text' => trans_choice(':n overdue task|:n overdue tasks', $overdueTasks, ['n' => number_format($overdueTasks)]),
            'link' => __('Review tasks'), 'href' => route('crm.tasks.index', ['view' => 'overdue'])],
        ['tone' => 'amber', 'icon' => 'flag', 'count' => $flagged, 'text' => trans_choice(':n flagged opportunity|:n flagged opportunities', $flagged, ['n' => number_format($flagged)]),
            'link' => __('Review pipeline'), 'href' => route('crm.pipeline-monitor', $officerId ? ['officer' => $officerId] : [])],
    ];
    $actionTones = [
        'rose' => 'bg-rose-50 text-rose-600 ring-rose-100',
        'amber' => 'bg-amber-50 text-amber-600 ring-amber-100',
        'sky' => 'bg-sky-50 text-sky-600 ring-sky-100',
    ];
@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="__('Team Dashboard')">
            <a href="{{ route('crm.reports.index') }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="presentation-chart-line" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Report Centre') }}
                </x-secondary-button>
            </a>
            <a href="{{ route('crm.pipeline-monitor') }}" wire:navigate>
                <x-button type="button">
                    <x-icon name="eye" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Pipeline Monitor') }}
                </x-button>
            </a>
        </x-page-header>

        {{-- Period and officer filters --}}
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex w-fit flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                @foreach ($periods as $key => $label)
                    <button type="button" wire:click="setPeriod('{{ $key }}')"
                        class="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' }}">
                        {{ __($label) }}
                    </button>
                @endforeach
            </div>
            <div class="sm:w-56">
                <label for="team-officer" class="sr-only">{{ __('Officer') }}</label>
                <select id="team-officer" wire:model.live="officer" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('All officers') }}</option>
                    @foreach ($officers as $id => $name)
                        <option value="{{ $id }}">{{ $name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Headline figures --}}
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($kpis as $m)
                <a href="{{ $m['href'] }}" wire:navigate class="block">
                    <x-card class="group relative flex h-full 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;">{{ $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>
                </a>
            @endforeach
        </section>

        {{-- Team performance --}}
        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Team performance') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Pipeline ownership and activity for the selected period.') }}</p>
                </div>
                <a href="{{ route('crm.performance', $officerId ? ['officer' => $officerId] : []) }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-800">
                    {{ __('View performance') }}
                    <x-icon name="arrow-right" class="h-3.5 w-3.5" />
                </a>
            </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">{{ __('Officer') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Open') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Pipeline value') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Outreach') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Meetings') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Qualified') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Won') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Flagged') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($rows as $row)
                            <tr wire:key="officer-{{ $row['user']->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 py-3.5 text-sm font-medium text-slate-900 lg:px-4">
                                    <a href="{{ route('crm.performance', ['officer' => $row['user']->id]) }}" wire:navigate class="group flex items-center gap-3">
                                        @if ($row['user']->hasProfilePhoto())
                                            <img src="{{ $row['user']->profile_photo_url }}" alt="" class="h-9 w-9 shrink-0 rounded-full object-cover ring-1 ring-slate-200" />
                                        @else
                                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-50 text-xs font-bold text-indigo-700 ring-1 ring-indigo-100">{{ $initials($row['user']->name) }}</span>
                                        @endif
                                        <span class="whitespace-nowrap group-hover:text-indigo-600">{{ $row['user']->name }}</span>
                                    </a>
                                </td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right text-sm tabular-nums text-slate-700 lg:px-4">{{ $row['open'] }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right text-sm lg:px-4">
                                    <div class="flex items-center justify-end gap-3">
                                        <span class="font-semibold tabular-nums {{ $row['value'] === null ? 'text-slate-400' : 'text-slate-900' }}">{{ $money($row['value']) }}</span>
                                        <span class="hidden h-2 w-24 overflow-hidden rounded-full bg-slate-100 md:block" aria-hidden="true">
                                            <span class="block h-full rounded-full bg-indigo-500" style="width: {{ $row['value'] === null ? 0 : max(min($row['value'] / $maxOfficerValue * 100, 100), 3) }}%"></span>
                                        </span>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right text-sm tabular-nums text-slate-700 lg:px-4">{{ $row['outreach'] }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right text-sm tabular-nums text-slate-700 lg:px-4">{{ $row['meetings'] }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right text-sm tabular-nums text-slate-700 lg:px-4">{{ $row['qualified'] }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right text-sm tabular-nums text-slate-700 lg:px-4">{{ $row['won'] }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right text-sm lg:px-4">
                                    <a href="{{ route('crm.pipeline-monitor', ['officer' => $row['user']->id]) }}" wire:navigate
                                       class="inline-flex min-w-[2rem] items-center justify-center rounded-lg px-2 py-1 text-xs font-bold tabular-nums ring-1 ring-inset transition {{ $row['flagged'] ? 'bg-amber-50 text-amber-700 ring-amber-200 hover:bg-amber-100' : 'bg-slate-50 text-slate-500 ring-slate-200 hover:bg-slate-100' }}"
                                       title="{{ $row['stale'] ? __(':n stalled', ['n' => $row['stale']]) : __('Nothing stalled') }}">{{ $row['flagged'] }}</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-6 py-12">
                                    <x-empty-state icon="user-group" :title="__('No officers yet')" :message="__('Business development officers and anyone owning open opportunities appear here.')" class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                    @if ($rows->total() > 0)
                        <tfoot>
                            <tr class="border-t-2 border-slate-100 bg-slate-50/80 text-sm font-semibold text-slate-900">
                                <td class="px-3 py-3.5 lg:px-4">{{ $officerId ? __('Total') : __('Team total') }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right tabular-nums lg:px-4">{{ $totals['open'] }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right lg:px-4">
                                    <div class="flex items-center justify-end gap-3">
                                        <span class="tabular-nums {{ $totals['value'] === null ? 'text-slate-400' : '' }}">{{ $money($totals['value']) }}</span>
                                        <span class="hidden h-2 w-24 overflow-hidden rounded-full bg-slate-200 md:block" aria-hidden="true">
                                            <span class="block h-full rounded-full bg-indigo-600" style="width: {{ $totals['value'] === null ? 0 : 100 }}%"></span>
                                        </span>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right tabular-nums lg:px-4">{{ $totals['outreach'] }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right tabular-nums lg:px-4">{{ $totals['meetings'] }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right tabular-nums lg:px-4">{{ $totals['qualified'] }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right tabular-nums lg:px-4">{{ $totals['won'] }}</td>
                                <td class="whitespace-nowrap px-3 py-3.5 text-right tabular-nums lg:px-4">{{ $totals['flagged'] }}</td>
                            </tr>
                        </tfoot>
                    @endif
                </table>
            </div>
            @if ($rows->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $rows->links() }}
                </div>
            @endif
            <div class="flex items-center gap-1.5 border-t border-slate-100 px-4 py-2.5 text-xs text-slate-400 sm:px-5">
                <x-icon name="information-circle" class="h-3.5 w-3.5 shrink-0" />
                <span>{{ __('Pipeline belongs to the owner, activity belongs to the person who logged it.') }}</span>
            </div>
        </x-card>

        {{-- Below xl the side cards take a full row (two-up from md), so the
             action centre's sentences never wrap into three lines. --}}
        <div class="grid grid-cols-1 gap-6 xl:grid-cols-12 xl:items-start">
            {{-- Pipeline by stage --}}
            <x-card class="flex flex-col p-5 xl:col-span-7">
                <div class="flex items-center justify-between gap-3">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Pipeline by stage') }}</h2>
                    <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        @foreach ($stageModes as $key => $label)
                            <button type="button" wire:click="setStageMode('{{ $key }}')"
                                class="rounded-lg px-3 py-1 transition {{ $stageMode === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                {{ __($label) }}
                            </button>
                        @endforeach
                    </div>
                </div>
                <div class="mt-5 flex-1 space-y-3">
                    @foreach ($pipeline['by_stage'] as $stage => $figures)
                        @php $figure = $stageFigure($figures); @endphp
                        <div class="flex items-center gap-3 text-sm" wire:key="stage-{{ $stage }}">
                            <span class="w-44 shrink-0 truncate text-slate-600" title="{{ __($stageLabels[$stage]) }}">{{ __($stageLabels[$stage]) }}</span>
                            <div class="h-2.5 flex-1 overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full bg-indigo-600 transition-all duration-300" style="width: {{ $figure > 0 ? max($figure / $maxStage * 100, 3) : 0 }}%"></div>
                            </div>
                            <span class="shrink-0 text-right font-semibold tabular-nums text-slate-900 {{ $stageMode === 'value' ? 'w-28 text-xs' : 'w-8' }}">
                                {{ $stageMode === 'value' ? ($figures['value_base'] === null ? ($figures['count'] ? __('Not estimated') : $money(0.0)) : $money($figures['value_base'])) : $figures['count'] }}
                            </span>
                        </div>
                    @endforeach
                </div>
                <div class="mt-5 flex items-center gap-2 border-t border-slate-100 pt-4 text-xs text-slate-500">
                    <span class="h-2 w-2 rounded-full {{ $stale > 0 ? 'bg-amber-500' : 'bg-emerald-500' }}"></span>
                    <span>{{ trans_choice(':n open opportunity|:n open opportunities', $pipeline['count'], ['n' => number_format($pipeline['count'])]) }} · {{ __(':n stalled over :d days', ['n' => number_format($stale), 'd' => $staleDays]) }}</span>
                </div>
            </x-card>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:col-span-5 xl:grid-cols-1">
                {{-- Action centre --}}
                <x-card class="p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Action centre') }}</h2>
                    <ul class="mt-3 divide-y divide-slate-100">
                        @foreach ($actions as $a)
                            <li class="flex items-center gap-3 py-3">
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full ring-1 {{ $a['count'] > 0 ? $actionTones[$a['tone']] : 'bg-slate-50 text-slate-400 ring-slate-100' }}">
                                    <x-icon :name="$a['icon']" class="h-4 w-4" />
                                </span>
                                <span class="min-w-0 flex-1 text-sm font-medium text-slate-900">{{ $a['text'] }}</span>
                                <a href="{{ $a['href'] }}" wire:navigate class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-xs font-medium text-indigo-600 hover:text-indigo-800">
                                    {{ $a['link'] }}
                                    <x-icon name="arrow-right" class="h-3.5 w-3.5" />
                                </a>
                            </li>
                        @endforeach
                        <li class="flex items-center gap-3 py-3">
                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full ring-1 {{ $actionTones['sky'] }}">
                                <x-icon name="document-text" class="h-4 w-4" />
                            </span>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-medium text-slate-900">
                                    {{ $completeness === null ? __('Record completeness not applicable') : __(':pct% record completeness', ['pct' => number_format($completeness, 1)]) }}
                                </p>
                                @if ($completeness !== null)
                                    <span class="mt-1.5 block h-1.5 w-full max-w-[10rem] overflow-hidden rounded-full bg-slate-100" aria-hidden="true">
                                        <span class="block h-full rounded-full {{ $completeness >= 75 ? 'bg-emerald-500' : ($completeness >= 50 ? 'bg-indigo-500' : 'bg-amber-500') }}" style="width: {{ min($completeness, 100) }}%"></span>
                                    </span>
                                @endif
                            </div>
                            <a href="{{ route('crm.pipeline-monitor', array_filter(['flag' => 'missing_details', 'officer' => $officerId])) }}" wire:navigate class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-xs font-medium text-indigo-600 hover:text-indigo-800">
                                {{ __('Complete records') }}
                                <x-icon name="arrow-right" class="h-3.5 w-3.5" />
                            </a>
                        </li>
                    </ul>
                </x-card>

                {{-- Recent wins --}}
                <x-card class="overflow-hidden">
                    <div class="flex items-center justify-between gap-3 p-5 pb-3">
                        <h2 class="whitespace-nowrap text-base font-semibold text-slate-900">{{ __('Recent wins') }}</h2>
                        <a href="{{ route('crm.sales-tracker', ['period' => $period]) }}" wire:navigate class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-xs font-medium text-indigo-600 hover:text-indigo-800">
                            {{ __('Open Sales Tracker') }}
                            <x-icon name="arrow-right" class="h-3.5 w-3.5" />
                        </a>
                    </div>
                    <ul class="divide-y divide-slate-100">
                        @forelse ($wins as $win)
                            @php $f = $sales->of($win); @endphp
                            <li wire:key="win-{{ $win->id }}" class="flex items-start justify-between gap-3 px-5 py-3">
                                <div class="min-w-0">
                                    <a href="{{ route('crm.opportunities.show', $win) }}" wire:navigate class="block truncate text-sm font-medium text-slate-900 hover:text-indigo-600">{{ $win->title }}</a>
                                    <p class="truncate text-xs text-slate-500">{{ $win->customer?->name }} · {{ __('Originated by :o, managed by :m', ['o' => $win->originator?->name ?? __('nobody recorded'), 'm' => $win->owner?->name ?? __('nobody recorded')]) }}</p>
                                </div>
                                <span class="whitespace-nowrap text-sm font-semibold tabular-nums {{ $f['confirmed'] === null ? 'text-slate-400' : 'text-slate-900' }}">{{ $money($f['confirmed'], 'Not available') }}</span>
                            </li>
                        @empty
                            <li class="px-5 pb-6 pt-2">
                                <x-empty-state icon="trophy" :title="__('No wins :period', ['period' => $periodWord])" :message="__('Confirmed jobs will appear here once linked.')" class="border-0 bg-transparent py-0" />
                            </li>
                        @endforelse
                    </ul>
                    @if ($wins->hasPages())
                        <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                            {{ $wins->links() }}
                        </div>
                    @endif
                </x-card>
            </div>
        </div>

        {{-- Left-aligned: the Ask launcher owns the bottom-right corner. --}}
        <div class="flex items-center gap-2 text-xs text-slate-400">
            <span>{{ __('Last updated :time', ['time' => $updatedAt->format('H:i')]) }}</span>
            <button type="button" wire:click="$refresh" class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-600" title="{{ __('Refresh') }}">
                <x-icon name="arrow-path" class="h-3.5 w-3.5" wire:loading.class="animate-spin" />
                <span class="sr-only">{{ __('Refresh') }}</span>
            </button>
        </div>
    </div>
</div>