@php
    $tz = config('app.display_timezone');
    $tabMeta = [
        'overdue' => ['label' => __('Overdue'), 'icon' => 'exclamation-triangle', 'accent' => '#e11d48', 'sub' => __('Past their due time')],
        'today' => ['label' => __('Today'), 'icon' => 'clock', 'accent' => '#f59e0b', 'sub' => __('Still to do today')],
        'week' => ['label' => __('This Week'), 'icon' => 'calendar-days', 'accent' => '#6366f1', 'sub' => __('From now to Sunday')],
        'open' => ['label' => __('All Open'), 'icon' => 'queue-list', 'accent' => '#0ea5e9', 'sub' => __('Everything not done')],
        'done' => ['label' => __('Completed'), 'icon' => 'check-circle', 'accent' => '#10b981', 'sub' => __('With their outcomes')],
    ];
    $priorityColor = ['high' => 'rose', 'medium' => 'amber', 'low' => 'slate'];
    $empty = [
        'overdue' => [__('Nothing overdue'), __('Every task is on time. Keep it that way by rescheduling with a reason rather than letting a date slip.')],
        'today' => [__('Nothing else due today'), __('Tasks due later today appear here.')],
        'week' => [__('Nothing due this week'), __('Tasks due between now and Sunday appear here.')],
        'open' => [__('No open tasks'), __('Add one, or complete an activity and set its next action.')],
        'done' => [__('Nothing completed yet'), __('Completed tasks are kept here with their outcome.')],
    ];
    $hasFilters = $type !== '' || $assignee || trim($q) !== '' || $record;
@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="__('Tasks and Follow-ups')">
            @if ($canCreate)
                <x-button type="button" wire:click="$dispatch('crm-task-create', { opportunityId: {{ $record instanceof \App\Models\Opportunity ? $record->id : 'null' }} })">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New task') }}
                </x-button>
            @endif
        </x-page-header>

        {{-- One card per view; each opens its list --}}
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($tabMeta as $key => $m)
                <button type="button" wire:click="switchTab('{{ $key }}')" class="text-left">
                    <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 {{ $view === $key ? 'ring-2 ring-indigo-300' : '' }}">
                        <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($counts[$key]) }}</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>
                </button>
            @endforeach
        </section>

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <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 {{ $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)
                <div class="flex w-fit items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                    <button type="button" wire:click="setScope('mine')" class="rounded-lg px-3 py-1.5 transition {{ $scope !== 'team' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">{{ __('Mine') }}</button>
                    <button type="button" wire:click="setScope('team')" class="rounded-lg px-3 py-1.5 transition {{ $scope === 'team' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">{{ __('Whole team') }}</button>
                </div>
            @endif
        </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[$view]['label'] }}</h2>
                    <p class="text-xs text-slate-400">
                        {{ $scope === 'team' ? __('Everyone on the team') : __('Assigned to you') }}
                        @if ($record)
                            · {{ $record instanceof \App\Models\Opportunity ? $record->title : $record->name }}
                            <button type="button" wire:click="clearRecord" class="ms-1 text-indigo-600 hover:text-indigo-800">{{ __('Show all') }}</button>
                        @endif
                    </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="q" placeholder="{{ __('Search tasks…') }}"
                            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="type" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All types') }}</option>
                        @foreach (\App\Models\Crm\Task::TYPES as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    @if ($seesTeam && $scope === 'team')
                        <select wire:model.live="assignee" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Anyone') }}</option>
                            @foreach ($members as $member)
                                <option value="{{ $member->id }}">{{ $member->name }}</option>
                            @endforeach
                        </select>
                    @endif
                </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">{{ $view === 'done' ? __('Completed') : __('Due') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Task') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Regarding') }}</th>
                            @if ($scope === 'team')
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Assigned to') }}</th>
                            @endif
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Priority') }}</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 ($tasks as $task)
                            @php
                                $overdue = $task->isOverdue();
                                $canEdit = $task->isOpen() && \Illuminate\Support\Facades\Gate::allows('update', $task);
                            @endphp
                            <tr wire:key="task-{{ $task->id }}" class="transition hover:bg-slate-50/70">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm {{ $overdue ? 'font-semibold text-rose-600' : 'text-slate-500' }}">
                                    @if ($view === 'done')
                                        {{ $task->completed_at?->copy()->timezone($tz)->format('j M Y') }}
                                    @elseif ($task->due_at)
                                        {{ $task->due_at->copy()->timezone($tz)->format('D j M') }}
                                        @unless (\App\Services\Crm\TaskService::isDateOnly($task->due_at))
                                            <span class="block text-xs">{{ $task->due_at->copy()->timezone($tz)->format('H:i') }}</span>
                                        @endunless
                                        @if ($overdue)
                                            <span class="block text-xs font-medium">{{ $task->due_at->diffForHumans($now, \Carbon\CarbonInterface::DIFF_ABSOLUTE) }} {{ __('late') }}</span>
                                        @endif
                                    @else
                                        <span class="text-slate-400">{{ __('No date') }}</span>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    <p class="font-medium text-slate-900">{{ $task->title }}</p>
                                    <p class="mt-0.5 flex flex-wrap items-center gap-1.5 text-xs text-slate-500">
                                        <x-badge color="slate">{{ __(\App\Models\Crm\Task::TYPES[$task->type] ?? $task->type) }}</x-badge>
                                        @if ($task->reschedule_count > 0)
                                            <span class="text-amber-700" title="{{ $task->reschedule_reason }}">{{ trans_choice('{1} rescheduled once|[2,*] rescheduled :count times', $task->reschedule_count, ['count' => $task->reschedule_count]) }}</span>
                                        @endif
                                    </p>
                                    @if ($view === 'done' && $task->outcome)
                                        <p class="mt-1 text-xs text-slate-600"><span class="font-medium">{{ $task->status === 'cancelled' ? __('Cancelled') : __('Outcome') }}:</span> {{ $task->outcome }}</p>
                                    @elseif ($task->description)
                                        <p class="mt-1 text-xs text-slate-500">{{ \Illuminate\Support\Str::limit($task->description, 140) }}</p>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">
                                    @if ($task->opportunity)
                                        <a href="{{ route('crm.opportunities.show', $task->opportunity) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $task->opportunity->title }}</a>
                                        @if ($task->customer)
                                            <span class="block text-xs text-slate-400">{{ $task->customer->name }}</span>
                                        @endif
                                    @elseif ($task->customer)
                                        <a href="{{ route('crm.organisations.show', $task->customer) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $task->customer->name }}</a>
                                    @else
                                        <span class="text-slate-400">{{ __('General') }}</span>
                                    @endif
                                </td>
                                @if ($scope === 'team')
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">{{ $task->assignee?->name ?? __('Nobody') }}</td>
                                @endif
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$priorityColor[$task->priority] ?? 'slate'">{{ __(\App\Models\Crm\Task::PRIORITIES[$task->priority] ?? $task->priority) }}</x-badge>
                                </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 ($canEdit)
                                            <button type="button" wire:click="$dispatch('crm-task-complete', { id: {{ $task->id }} })" class="text-emerald-600 transition hover:text-emerald-800">{{ __('Complete') }}</button>
                                            <button type="button" wire:click="$dispatch('crm-task-reschedule', { id: {{ $task->id }} })" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Reschedule') }}</button>
                                            <button type="button" wire:click="$dispatch('crm-task-cancel', { id: {{ $task->id }} })" class="text-rose-600 transition hover:text-rose-800">{{ __('Cancel') }}</button>
                                        @elseif ($view === 'done')
                                            <span class="text-xs font-normal text-slate-400">{{ $task->completedBy?->name }}</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12">
                                    <x-empty-state icon="clipboard-document-check"
                                        :title="$hasFilters ? __('No tasks match these filters') : $empty[$view][0]"
                                        :message="$hasFilters ? __('Clear the search or the filters to see more.') : $empty[$view][1]"
                                        class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

    <livewire:crm.tasks.task-actions />
</div>