@php
    $hours = fn ($h) => $h === null ? null : rtrim(rtrim(number_format((float) $h, 1), '0'), '.');
    $ownerHours = $thresholds[0];
    $directorHours = $thresholds[1];
    $metrics = [
        ['label' => __('Enquiries'), 'value' => number_format($totals['received']), 'icon' => 'inbox-arrow-down', 'accent' => '#6366f1',
            'sub' => __(':n answered', ['n' => number_format($totals['responded'])])],
        ['label' => __('Median response'), 'value' => $totals['median'] === null ? __('Not available') : __(':h working h', ['h' => $hours($totals['median'])]), 'icon' => 'clock', 'accent' => '#0ea5e9',
            'sub' => __('Arrival to first contact')],
        ['label' => trans_choice('Within :n working hour|Within :n working hours', $ownerHours, ['n' => $ownerHours]), 'value' => $totals['within_pct'] === null ? __('Not available') : $totals['within_pct'].'%', 'icon' => 'check-circle', 'accent' => '#10b981',
            'sub' => __(':n of :of answered', ['n' => number_format($totals['within']), 'of' => number_format($totals['responded'])])],
        ['label' => __('Waiting now'), 'value' => number_format($totals['waiting']), 'icon' => 'bell-alert', 'accent' => '#f59e0b',
            'sub' => __('Open, no contact yet')],
        ['label' => __('Closed unanswered'), 'value' => number_format($totals['closed']), 'icon' => 'x-circle', 'accent' => '#e11d48',
            'sub' => __('Won, lost or deferred with no contact logged')],
    ];
    $statusMeta = [
        'responded' => ['label' => __('Answered'), 'color' => 'emerald'],
        'waiting' => ['label' => __('Waiting'), 'color' => 'amber'],
        'closed' => ['label' => __('Closed, no contact'), 'color' => 'slate'],
    ];
    $channel = \App\Models\Interaction::CRM_TYPES;
@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="__('Response Times')">
            @if ($canSeeSettings)
                <a href="{{ route('crm.settings.rota') }}" wire:navigate>
                    <x-secondary-button type="button"><x-icon name="arrow-path" class="mr-1.5 h-4 w-4" /> {{ __('Enquiry rota') }}</x-secondary-button>
                </a>
            @endif
        </x-page-header>

        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex items-center gap-3">
                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                        <x-icon name="calendar" class="h-5 w-5" />
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-slate-900">{{ __('Enquiries that arrived :from to :to', ['from' => $from->format('j M Y'), 'to' => $to->format('j M Y')]) }}</p>
                        <p class="text-xs text-slate-400">{{ __('Owner alerted after :o, a director after :d working hours without contact.', ['o' => $ownerHours, 'd' => $directorHours]) }}</p>
                    </div>
                </div>
                <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
                    <div class="hidden flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium md:flex">
                        @foreach ($periods as $key => $label)
                            <button type="button" wire:click="$set('period', '{{ $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>
                    <select wire:model.live="period" aria-label="{{ __('Period') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 md:hidden">
                        @foreach ($periods as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="owner" aria-label="{{ __('Owner') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Everyone') }}</option>
                        @foreach ($members as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="source" aria-label="{{ __('Source') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Every source') }}</option>
                        @foreach ($sources as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </x-card>

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($metrics 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;">{{ $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>

        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($tabs as $key => $meta)
                <button type="button" wire:click="switchTab('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $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 ($tab === 'enquiries')
            <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">{{ __('Each enquiry') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Newest first. Time shown is working hours to first contact, or waited so far.') }}</p>
                    </div>
                    <select wire:model.live="status" aria-label="{{ __('Status') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Any status') }}</option>
                        @foreach ($statusMeta as $key => $meta)
                            <option value="{{ $key }}">{{ $meta['label'] }}</option>
                        @endforeach
                    </select>
                </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 lg:px-4 py-3.5">{{ __('Arrived') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Enquiry') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Owner and how assigned') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('First contact') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Working hours') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($rows as $row)
                                <tr wire:key="enquiry-{{ $row['id'] }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-sm text-slate-500">{{ $row['received_at']->copy()->setTimezone($tz)->format('j M Y, H:i') }}</td>
                                    <td class="px-3 lg:px-4 py-3 text-sm">
                                        <a href="{{ route('crm.opportunities.show', $row['id']) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $row['title'] }}</a>
                                        <p class="text-xs text-slate-400">{{ $row['organisation'] }} · {{ $row['source_label'] }}</p>
                                    </td>
                                    <td class="px-3 lg:px-4 py-3 text-sm text-slate-700">
                                        {{ $row['owner'] }}
                                        <p class="text-xs text-slate-400">{{ $row['assigned_via_label'] }}</p>
                                    </td>
                                    <td class="px-3 lg:px-4 py-3 text-sm text-slate-600">
                                        @if ($row['first_response_at'])
                                            <span class="whitespace-nowrap">{{ $row['first_response_at']->copy()->setTimezone($tz)->format('j M, H:i') }}</span>
                                            <p class="text-xs text-slate-400">{{ __($channel[$row['first_response_type']] ?? '') }}{{ $row['first_response_by'] ? ' · '.$row['first_response_by'] : '' }}</p>
                                        @else
                                            <span class="text-slate-400">{{ __('None yet') }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-semibold tabular-nums {{ $row['status'] === 'responded' ? ($row['within'] ? 'text-emerald-700' : 'text-slate-900') : 'text-amber-700' }}">
                                        {{ $hours($row['hours']) }}
                                        @if ($row['status'] !== 'responded')
                                            <p class="text-xs font-normal text-slate-400">{{ __('so far') }}</p>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-sm">
                                        <x-badge :color="$statusMeta[$row['status']]['color']">{{ $statusMeta[$row['status']]['label'] }}</x-badge>
                                        @if ($row['director_alerted'])
                                            <p class="mt-1 text-xs text-rose-600">{{ __('Director alerted') }}</p>
                                        @elseif ($row['owner_alerted'])
                                            <p class="mt-1 text-xs text-amber-600">{{ __('Owner alerted') }}</p>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        <x-empty-state icon="inbox" :title="__('No enquiries in this period')"
                                            :message="__('Enquiries from the public request form appear here as they arrive.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if ($rows->hasPages())
                    <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                        {{ $rows->links() }}
                    </div>
                @endif
            </x-card>
        @else
            @php $groups = $tab === 'people' ? $byPerson : $bySource; @endphp
            <x-card class="overflow-hidden">
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ $tab === 'people' ? __('By person') : __('By source') }}</h2>
                    <p class="text-xs text-slate-400">
                        {{ $tab === 'people' ? __('By the enquiry\'s owner. Fastest median first.') : __('By where the enquiry came from. Fastest median first.') }}
                        {{ __('The median is the middle response time, so one slow enquiry does not hide the rest.') }}
                    </p>
                </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 lg:px-4 py-3.5">{{ $tab === 'people' ? __('Person') : __('Source') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Enquiries') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Answered') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Median working hours') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ trans_choice('Within :n h|Within :n h', $ownerHours, ['n' => $ownerHours]) }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Waiting') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Director alerts') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($groups as $group)
                                <tr wire:key="group-{{ $tab }}-{{ md5($group['label']) }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-3 text-sm font-medium text-slate-900">{{ $group['label'] }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm tabular-nums text-slate-600">{{ number_format($group['received']) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm tabular-nums text-slate-600">{{ number_format($group['responded']) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-semibold tabular-nums text-slate-900">{{ $group['median'] === null ? __('Not available') : $hours($group['median']) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm tabular-nums text-slate-600">{{ $group['within_pct'] === null ? __('Not available') : $group['within_pct'].'%' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm tabular-nums {{ $group['waiting'] > 0 ? 'font-semibold text-amber-700' : 'text-slate-600' }}">{{ number_format($group['waiting']) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm tabular-nums text-slate-600">{{ number_format($group['director_alerts']) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-6 py-12">
                                        <x-empty-state icon="users" :title="__('No enquiries in this period')" :message="__('Try a longer period.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        <x-card class="p-5">
            <h2 class="text-base font-semibold text-slate-900">{{ __('How it is measured') }}</h2>
            <ul class="mt-3 list-disc space-y-1.5 pl-5 text-sm text-slate-600">
                <li>{{ __('Arrived: when the request came in through the public request form.') }}</li>
                <li>{{ __('First contact: the earliest call, email, WhatsApp, SMS, LinkedIn message, meeting or presentation we logged on the enquiry, its organisation or one of its contacts after it arrived. Notes and messages from the client do not count. Whoever made it, the client was answered.') }}</li>
                <li>{{ __('Working hours: only the company\'s opening hours on its working days count, from HR settings. An enquiry at 16:30 on Friday answered at 08:30 on Monday took one working hour.') }}</li>
                <li>{{ __('Closed unanswered: won, lost or deferred before any contact was logged. It has no response time.') }}</li>
            </ul>
        </x-card>
    </div>
</div>