@php
    $tz = config('app.display_timezone');
    $statusColors = ['draft' => 'slate', 'submitted' => 'amber', 'accepted' => 'emerald', 'returned' => 'rose', 'cancelled' => 'slate'];
@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="__('Handovers')" />

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-4">
            @foreach ($kpis 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 ($tabMeta 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">{{ $tabMeta[$tab]['label'] }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Waiting handovers first, then the most recent.') }}</p>
                </div>
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <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="search" placeholder="{{ __('Opportunity or organisation…') }}"
                            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>
                    <select wire:model.live="statusFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Any status') }}</option>
                        @foreach ($statuses as $key => $label)
                            @if ($key !== 'draft')
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endif
                        @endforeach
                    </select>
                </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 lg:px-4 py-3.5">{{ __('Sent') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Opportunity') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('From and to') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Brief') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($handovers as $h)
                            @php
                                $canRespond = $h->isPending() && \Illuminate\Support\Facades\Gate::allows('respond', $h);
                                $canCancel = $h->isPending() && ((int) $h->sender_id === (int) auth()->id() || ($h->opportunity && \Illuminate\Support\Facades\Gate::allows('reassign', $h->opportunity)));
                                $canRedirect = $h->isPending() && $canReassign && $h->opportunity;
                            @endphp
                            <tr wire:key="handover-{{ $h->id }}" class="transition hover:bg-slate-50/70">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $h->submitted_at?->copy()->timezone($tz)->format('j M Y') }}</td>
                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    @if ($h->opportunity)
                                        <a href="{{ route('crm.opportunities.show', ['opportunity' => $h->opportunity->id, 'tab' => 'handover']) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $h->opportunity->title }}</a>
                                        <p class="text-xs text-slate-500">{{ $h->opportunity->customer?->name }} · {{ __('owner: :name', ['name' => $h->opportunity->owner?->name ?? __('nobody')]) }}</p>
                                    @else
                                        <span class="text-slate-400">{{ __('Deleted opportunity') }}</span>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">
                                    {{ $h->sender?->name ?? __('a former member') }}
                                    <span class="text-slate-400">→</span>
                                    {{ $h->recipient?->name ?? __($groups[$h->recipient_group] ?? 'Administration') }}
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    <p class="whitespace-pre-line">{{ \Illuminate\Support\Str::limit((string) $h->brief, 160) }}</p>
                                    @if ($h->response_note)
                                        <p class="mt-1 text-xs text-slate-500">{{ __('Answer: :note', ['note' => $h->response_note]) }}</p>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$statusColors[$h->status] ?? 'slate'">{{ __($statuses[$h->status] ?? $h->status) }}</x-badge>
                                    @if ($h->responded_at)
                                        <p class="mt-1 text-xs text-slate-500">{{ $h->respondedBy?->name }}, {{ $h->responded_at->copy()->timezone($tz)->format('j M') }}</p>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        @if ($canRespond)
                                            <button type="button" wire:click="accept({{ $h->id }})" class="text-emerald-600 transition hover:text-emerald-800">{{ __('Accept') }}</button>
                                            <button type="button" wire:click="openReturn({{ $h->id }})" class="text-rose-600 transition hover:text-rose-800">{{ __('Return') }}</button>
                                        @endif
                                        @if ($canRedirect)
                                            <button type="button" wire:click="openRedirect({{ $h->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Redirect') }}</button>
                                        @endif
                                        @if ($canCancel)
                                            <button type="button" wire:click="cancel({{ $h->id }})" wire:confirm="{{ __('Cancel this handover?') }}" class="text-slate-500 transition hover:text-slate-700">{{ __('Cancel') }}</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12">
                                    @if ($search !== '' || $statusFilter !== '')
                                        <x-empty-state icon="magnifying-glass" :title="__('No handovers match')" :message="__('Clear the search or the status to see them all.')" class="border-0 bg-transparent py-0" />
                                    @else
                                        <x-empty-state icon="arrows-right-left" :title="__('No handovers here')" :message="__('Hand an opportunity over from its Handover tab.')" class="border-0 bg-transparent py-0" />
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                {{ $handovers->links() }}
            </div>
        </x-card>
    </div>

    <x-dialog-modal wire:model.live="showReturn">
        <x-slot name="title">{{ __('Return the handover') }}</x-slot>
        <x-slot name="content">
            <x-label for="return-note" value="{{ __('Why it is coming back') }}" />
            <textarea id="return-note" rows="4" wire:model="responseNote" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
            <x-input-error for="responseNote" class="mt-2" />
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showReturn', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="returnHandover" wire:loading.attr="disabled" wire:target="returnHandover">{{ __('Return it') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <x-dialog-modal wire:model.live="showRedirect">
        <x-slot name="title">{{ __('Redirect the handover') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="redirect-to" value="{{ __('Send it to') }}" />
                    <select id="redirect-to" wire:model="redirectTo" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Choose…') }}</option>
                        @foreach ($groups as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }} {{ __('(anyone in it)') }}</option>
                        @endforeach
                        @foreach ($members as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="redirectTo" class="mt-2" />
                </div>
                <div>
                    <x-label for="redirect-reason" value="{{ __('Reason') }}" />
                    <textarea id="redirect-reason" rows="3" wire:model="redirectReason" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="redirectReason" class="mt-2" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showRedirect', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="redirectHandover" wire:loading.attr="disabled" wire:target="redirectHandover">{{ __('Redirect') }}</x-button>
        </x-slot>
    </x-dialog-modal>
</div>