@php
    $metrics = [
        ['label' => __('Meetings'), 'value' => number_format($summary['notes']), 'icon' => 'chat-bubble-left-right', 'accent' => '#6366f1', 'sub' => __('Confirmed notes')],
        ['label' => __('Organisations'), 'value' => number_format($summary['organisations']), 'icon' => 'building-office', 'accent' => '#0ea5e9', 'sub' => __('Distinct in these meetings')],
        ['label' => __('Officers'), 'value' => number_format($summary['officers']), 'icon' => 'users', 'accent' => '#8b5cf6', 'sub' => __('Who wrote the notes')],
        ['label' => __('Client needs'), 'value' => number_format(count($summary['needs'])), 'icon' => 'tag', 'accent' => '#10b981', 'sub' => __('Distinct needs')],
        ['label' => __('Competitors'), 'value' => number_format(count($summary['competitors'])), 'icon' => 'flag', 'accent' => '#f59e0b', 'sub' => __('Distinct competitors')],
    ];
@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="__('Meeting Reports')" />

        <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">{{ __('Meetings held :from to :to', ['from' => $from->format('j M Y'), 'to' => $to->format('j M Y')]) }}</p>
                        <p class="text-xs text-slate-400">{{ __('Draft notes are left out. Counts are distinct meetings and distinct organisations.') }}</p>
                    </div>
                </div>
                <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap 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="sector" aria-label="{{ __('Sector') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Every sector') }}</option>
                        @foreach ($sectors as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="organisation" aria-label="{{ __('Organisation') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Every organisation') }}</option>
                        @foreach ($organisations as $row)
                            <option value="{{ $row->id }}">{{ $row->name }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="officer" aria-label="{{ __('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 ($officers as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</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>

        <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">{{ $tab === 'competitors' ? __('Competitors mentioned') : __('Client needs') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('The same wording in one meeting counts as one meeting. The same organisation counts once, however many of its meetings mentioned it.') }}</p>
                </div>
                <div class="relative max-w-xs flex-1">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input type="text" wire:model.live.debounce.300ms="q"
                           placeholder="{{ __('Search findings…') }}"
                           aria-label="{{ __('Search findings') }}"
                           class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                </div>
            </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">{{ $tab === 'competitors' ? __('Competitor') : __('Need') }}</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">{{ __('Organisations') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Source meetings') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($rows as $row)
                            <tr wire:key="finding-{{ $tab }}-{{ md5($row['label']) }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">{{ $row['label'] }}</td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">{{ number_format($row['meetings']) }}</td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">{{ number_format($row['organisations']) }}</td>
                                <td class="px-3 py-4 text-sm lg:px-4">
                                    <ul class="space-y-1">
                                        @foreach ($row['sources'] as $source)
                                            <li wire:key="source-{{ $tab }}-{{ md5($row['label']) }}-{{ $source['id'] }}">
                                                <a href="{{ route('crm.meetings.show', $source['id']) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $source['title'] }}</a>
                                                <p class="text-xs text-slate-400">
                                                    {{ $source['held_at'] ? $source['held_at']->timezone($tz)->format('j M Y') : __('Not available') }}
                                                    · {{ $source['organisation'] ?: __('Not available') }}
                                                    · {{ $source['officer'] ?: __('Not available') }}
                                                </p>
                                            </li>
                                        @endforeach
                                    </ul>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-12">
                                    <x-empty-state icon="chat-bubble-left-right" :title="__('No findings in this period')"
                                        :message="__('Confirmed meeting notes with need tags or competitor tags show up here, each linked back to its meeting.')" 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>
    </div>
</div>