@php
    $isAssign = $list === 'assign';
    $user = auth()->user();
    $seesAll = $user->seesAllRecords();
    $canBulk = $seesAll;
    $status = request('status', 'all');
    $routeName = $isAssign ? 'activities.assign' : 'activities.index';
    $tabs = [
        ['all', 'All', $counters['all'], 'gray'],
        ['Not Started', 'Not started', $counters['not_started'], 'amber'],
        ['In Progress', 'In progress', $counters['in_progress'], 'blue'],
        ['Completed', 'Completed', $counters['completed'], 'green'],
    ];
    if (! $isAssign) {
        $tabs[] = ['inq', 'Inq generated', $counters['inq'], 'violet'];
    }
    $tabTone = [
        'gray' => 'bg-ink-100 text-ink-700 dark:bg-ink-800 dark:text-ink-200',
        'amber' => 'bg-brand-100 text-brand-800 dark:bg-brand-500/15 dark:text-brand-300',
        'blue' => 'bg-sky-100 text-sky-800 dark:bg-sky-500/15 dark:text-sky-300',
        'green' => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-300',
        'violet' => 'bg-violet-100 text-violet-800 dark:bg-violet-500/15 dark:text-violet-300',
    ];
    $back = url()->full();
@endphp
<x-layouts.app :title="$isAssign ? 'Assign Activities' : 'Activities'"
               :subtitle="$isAssign
                    ? ($seesAll ? 'Leads handed over to field managers.' : 'Leads handed over to you as field manager.')
                    : ($seesAll ? 'Every telecaller task across the team.' : 'Your calling tasks and follow-ups.')"
               :breadcrumbs="['CRM' => null, ($isAssign ? 'Assign Activities' : 'Activities') => null]">
    <x-slot:actions>
        <a href="{{ route('activities.export', array_merge(request()->except(['page', 'per_page']), ['list' => $list])) }}" class="btn btn-secondary">
            <x-heroicon-m-arrow-down-tray class="h-4 w-4" /> Export CSV
        </a>
        @if ($isAssign)
            <a href="{{ route('activities.index') }}" class="btn btn-ghost"><x-heroicon-m-clipboard-document-check class="h-4 w-4" /> All activities</a>
        @endif
    </x-slot:actions>

    {{-- Status tabs with counters --}}
    <div class="mb-5 flex gap-2 overflow-x-auto pb-1">
        @foreach ($tabs as [$key, $label, $count, $tone])
            @php($active = $status === $key)
            <a href="{{ route($routeName, array_merge(request()->except(['page', 'status']), ['status' => $key])) }}"
               @class([
                   'group flex shrink-0 items-center gap-3 rounded-2xl border px-4 py-3 transition',
                   'border-brand-400 bg-white shadow-sm ring-4 ring-brand-500/10 dark:border-brand-500/60 dark:bg-ink-900' => $active,
                   'border-ink-200/80 bg-white/60 hover:border-ink-300 hover:bg-white dark:border-ink-800 dark:bg-ink-900/50 dark:hover:bg-ink-900' => ! $active,
               ])>
                <span class="text-sm font-medium {{ $active ? 'text-ink-900 dark:text-white' : 'text-ink-600 dark:text-ink-300' }}">{{ $label }}</span>
                <span class="rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums {{ $tabTone[$tone] }}">{{ number_format((int) $count) }}</span>
            </a>
        @endforeach
    </div>

    <x-card :padded="false"
            x-data="{ selected: [], ids: {{ \Illuminate\Support\Js::from($rows->pluck('id')->all()) }},
                      get allSelected() { return this.ids.length > 0 && this.selected.length === this.ids.length },
                      toggleAll() { this.selected = this.allSelected ? [] : [...this.ids] },
                      wide: (() => { try { return localStorage.getItem('activities.wide') === '1' } catch (e) { return false } })(),
                      toggleWide() { this.wide = !this.wide; try { localStorage.setItem('activities.wide', this.wide ? '1' : '0') } catch (e) {} } }">
        <div class="border-b border-ink-100 p-4 dark:border-ink-800">
            <x-filter-bar placeholder="Search name, mobile, reg no, subject…">
                <input type="hidden" name="status" value="{{ $status }}">
                <div class="w-52">
                    <select name="remark" class="form-input" data-enhance aria-label="Final remark">
                        <option value="">Any final remark</option>
                        <option value="__none" @selected(request('remark') === '__none')>— No remark yet —</option>
                        @foreach ($remarks as $r)<option value="{{ $r }}" @selected(request('remark') === $r)>{{ $r }}</option>@endforeach
                    </select>
                </div>
                <x-select name="due" :options="['overdue' => 'Overdue', 'today' => 'Due today', 'upcoming' => 'Upcoming']" :value="request('due')" placeholder="Any due date" class="w-36" aria-label="Due date" />
                <div class="flex items-center gap-1.5">
                    <input type="date" name="from" value="{{ request('from') }}" class="form-input w-36" aria-label="Due from" title="Due from">
                    <span class="text-ink-400">–</span>
                    <input type="date" name="to" value="{{ request('to') }}" class="form-input w-36" aria-label="Due to" title="Due to">
                </div>
                <x-select name="task_for" :options="$taskFors" :value="request('task_for')" placeholder="Any task" class="w-40" aria-label="Task for" />
                @if ($seesAll)
                    <div class="w-48">
                        <select name="user" class="form-input" data-enhance aria-label="Assigned to">
                            <option value="">Anyone</option>
                            @foreach ($assignees as $a)<option value="{{ $a->id }}" @selected((string) request('user') === (string) $a->id)>{{ $a->name }}</option>@endforeach
                        </select>
                    </div>
                    @if ($isAssign)
                        <div class="w-48">
                            <select name="field_manager" class="form-input" data-enhance aria-label="Field manager">
                                <option value="">Any field manager</option>
                                @foreach ($fieldManagers as $fm)<option value="{{ $fm->name }}" @selected(request('field_manager') === $fm->name)>{{ $fm->name }}</option>@endforeach
                            </select>
                        </div>
                    @endif
                @endif
            </x-filter-bar>
        </div>

        {{-- Toolbar: selection + bulk actions + column toggle --}}
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-ink-100 bg-ink-50/50 px-4 py-2.5 text-sm dark:border-ink-800 dark:bg-ink-900/40">
            <div class="flex items-center gap-2">
                @if ($canBulk)
                    <template x-if="selected.length">
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="font-medium text-ink-700 dark:text-ink-200"><span x-text="selected.length"></span> selected</span>
                            <button type="button" class="btn btn-secondary btn-sm" @click="$dispatch('open-modal', 'bulk-reassign')"><x-heroicon-m-user-plus class="h-4 w-4" /> Reassign</button>
                            <button type="button" class="btn btn-secondary btn-sm" @click="$dispatch('open-modal', 'bulk-field-manager')"><x-heroicon-m-briefcase class="h-4 w-4" /> Field manager</button>
                            @if ($user->isAdmin())
                                <form method="POST" action="{{ route('activities.bulk') }}" x-data="confirmSubmit('Permanently delete the selected activities? This cannot be undone.')" @submit="submit">
                                    @csrf
                                    <input type="hidden" name="action" value="delete">
                                    <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                                    <button class="btn btn-sm bg-rose-50 text-rose-700 ring-1 ring-rose-200 hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-300 dark:ring-rose-500/20"><x-heroicon-m-trash class="h-4 w-4" /> Delete</button>
                                </form>
                            @endif
                            <button type="button" class="btn btn-ghost btn-sm" @click="selected = []">Clear</button>
                        </div>
                    </template>
                    <span x-show="!selected.length" class="text-ink-500">Select rows to reassign{{ $user->isAdmin() ? ' or delete' : '' }}.</span>
                @else
                    <span class="text-ink-500">{{ number_format($rows->total()) }} {{ str('activity')->plural($rows->total()) }}</span>
                @endif
            </div>
            <button type="button" class="btn btn-ghost btn-sm" @click="toggleWide()">
                <x-heroicon-m-view-columns class="h-4 w-4" /><span x-text="wide ? 'Fewer columns' : 'More columns'"></span>
            </button>
        </div>

        @if ($searchTruncated)
            <div class="border-b border-amber-200 bg-amber-50 px-4 py-2 text-xs text-amber-800 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300">
                Your search matches a very large number of leads — only the first {{ number_format(\App\Services\Crm\ActivityListQuery::SEARCH_ID_LIMIT) }} are considered. Type more of the mobile number, registration number or name.
            </div>
        @endif

        @if ($rows->isEmpty())
            <x-empty-state title="No activities found" message="Try another status tab, search or filter." icon="heroicon-o-clipboard-document-check" />
        @else
            <div class="table-wrap">
                <table class="table table-compact">
                    <thead>
                        <tr>
                            @if ($canBulk)
                                <th class="w-10"><input type="checkbox" class="form-checkbox" :checked="allSelected" @change="toggleAll()" aria-label="Select all on this page"></th>
                            @endif
                            <th><x-sort-link column="name" label="Contact" /></th>
                            <th><x-sort-link column="subject" label="Subject" /></th>
                            <th><x-sort-link column="status" label="Status" /></th>
                            <th><x-sort-link column="remark" label="Final remark" /></th>
                            <th><x-sort-link column="due_date" label="Due" /></th>
                            <th><x-sort-link column="task_for" label="Task" /></th>
                            <th><x-sort-link column="reg_no" label="Vehicle" /></th>
                            <th>Location</th>
                            @if ($seesAll)<th><x-sort-link column="assignee" label="Assigned to" /></th>@endif
                            @if ($isAssign || $seesAll)<th><x-sort-link column="field_manager" label="Field manager" /></th>@endif
                            <th x-cloak x-show="wide"><x-sort-link column="allocated" label="Allocated" /></th>
                            <th x-cloak x-show="wide">HPA</th>
                            <th x-cloak x-show="wide">Reg date</th>
                            <th x-cloak x-show="wide">Ins / Bank</th>
                            <th x-cloak x-show="wide">Inq status</th>
                            <th x-cloak x-show="wide">Sales manager</th>
                            <th x-cloak x-show="wide">OD premium</th>
                            <th x-cloak x-show="wide">Login LOS</th>
                            <th x-cloak x-show="wide">Login month</th>
                            <th x-cloak x-show="wide">Login date</th>
                            <th x-cloak x-show="wide">Created by</th>
                            <th><x-sort-link column="modified" label="Updated" /></th>
                            <th class="w-10"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                        @foreach ($rows as $a)
                            @php($url = route('activities.show', ['activity' => $a->id, 'back' => $back]))
                            <tr :class="selected.includes({{ $a->id }}) && '!bg-brand-50/70 dark:!bg-brand-500/5'">
                                @if ($canBulk)
                                    <td><input type="checkbox" class="form-checkbox" value="{{ $a->id }}" x-model.number="selected" aria-label="Select activity {{ $a->id }}"></td>
                                @endif
                                <td class="max-w-[16rem]">
                                    <a href="{{ $url }}" class="block truncate font-medium text-ink-900 hover:text-brand-600 dark:text-white">{{ $a->displayName() ?? 'Unnamed lead' }}</a>
                                    @if ($m = $a->displayMobile())
                                        <a href="tel:{{ preg_replace('/[^\d+]/', '', $m) }}" class="text-xs text-ink-500 tabular-nums hover:text-brand-600">{{ $m }}</a>
                                    @endif
                                </td>
                                <td><a href="{{ $url }}" class="text-ink-700 hover:text-brand-600 dark:text-ink-300">{{ $a->subject ?: '—' }}</a></td>
                                <td><span class="badge {{ $a->statusBadge() }}">{{ $a->status ?: 'Unknown' }}</span></td>
                                <td class="max-w-[14rem] truncate" title="{{ $a->clean('final_remark_ins_loan') }}">{{ $a->clean('final_remark_ins_loan') ?? '—' }}</td>
                                <td class="tabular-nums">
                                    @if ($a->due_date)
                                        <span @class(['font-medium text-rose-600 dark:text-rose-400' => $a->isOverdue(), 'font-medium text-brand-700 dark:text-brand-300' => ! $a->isOverdue() && $a->due_date->isToday()])>
                                            {{ $a->due_date->format('d-m-Y') }}
                                        </span>
                                        @if ($a->isOverdue())<div class="text-[11px] text-rose-500">{{ $a->due_date->diffForHumans(['parts' => 1]) }}</div>@endif
                                    @else
                                        <span class="text-ink-400">—</span>
                                    @endif
                                </td>
                                <td>{{ $a->clean('task_for') ?? '—' }}</td>
                                <td>
                                    @php($reg = \App\Models\Activity::firstFilled($a->loanData?->car_reg_no, $a->contact?->car_reg_no))
                                    <div class="font-medium text-ink-800 tabular-nums dark:text-ink-200">{{ $reg ?? '—' }}</div>
                                    <div class="text-xs text-ink-500">{{ collect([\App\Models\Activity::firstFilled($a->contact?->model_picklist, $a->loanData?->model_picklist), $a->loanData?->vahan_year_pick_list])->filter()->implode(' · ') }}</div>
                                </td>
                                <td>{{ \App\Models\Activity::firstFilled($a->loanData?->location, $a->contact?->location) ?? '—' }}</td>
                                @if ($seesAll)
                                    <td>{{ $a->user?->name ?? '—' }}</td>
                                @endif
                                @if ($isAssign || $seesAll)
                                    <td>{{ $a->clean('field_manager') ?? '—' }}</td>
                                @endif
                                <td x-cloak x-show="wide" class="tabular-nums">{{ \App\Services\Crm\ActivityListQuery::allocationDate($a) ?? '—' }}</td>
                                <td x-cloak x-show="wide">{{ \App\Models\Activity::firstFilled($a->contact?->hpa_pick_easy_at_calling_update, $a->loanData?->hpa_pick_easy_at_calling_update) ?? '—' }}</td>
                                <td x-cloak x-show="wide">{{ \App\Models\Activity::firstFilled($a->contact?->reg_date, $a->loanData?->reg_date) ?? '—' }}</td>
                                <td x-cloak x-show="wide">{{ $a->clean('ins_bank_name') ?? '—' }}</td>
                                <td x-cloak x-show="wide">{{ $a->clean('inq_status') ?? '—' }}</td>
                                <td x-cloak x-show="wide">{{ $a->clean('sales_manager') ?? '—' }}</td>
                                <td x-cloak x-show="wide" class="tabular-nums">{{ $a->final_od_premium_for_payout ?? '—' }}</td>
                                <td x-cloak x-show="wide" class="tabular-nums">{{ $a->login_los_no ?: '—' }}</td>
                                <td x-cloak x-show="wide">{{ $a->clean('login_month') ?? '—' }}</td>
                                <td x-cloak x-show="wide">{{ $a->clean('login_date') ?? '—' }}</td>
                                <td x-cloak x-show="wide">{{ $a->clean('created_by') ?? '—' }}</td>
                                <td class="text-xs text-ink-500" title="{{ $a->modified_by?->format('d-m-Y H:i') }}">{{ $a->modified_by?->diffForHumans() ?? '—' }}</td>
                                <td><a href="{{ $url }}" class="btn-icon" title="Open follow-up"><x-heroicon-o-pencil-square class="h-4 w-4" /></a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <x-pagination-bar :paginator="$rows" />
        @endif

        @if ($canBulk)
            <x-modal name="bulk-reassign" title="Reassign activities" maxWidth="md">
                <form method="POST" action="{{ route('activities.bulk') }}" class="space-y-4" id="bulk-reassign-form">
                    @csrf
                    <input type="hidden" name="action" value="reassign">
                    <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                    <p class="text-sm text-ink-600 dark:text-ink-300">Move <strong x-text="selected.length"></strong> selected activities to another user. The subject is renamed for the new owner; a lead the user already owns is skipped.</p>
                    <div>
                        <label class="form-label" for="bulk_user_id">Assign to <span class="text-rose-500">*</span></label>
                        <select name="user_id" id="bulk_user_id" class="form-input" required>
                            <option value="">Choose a user…</option>
                            @foreach ($assignees as $a)<option value="{{ $a->id }}">{{ $a->name }} ({{ $a->role->label() }})</option>@endforeach
                        </select>
                    </div>
                    <x-input name="due_date" type="date" label="New due date (optional)" :min="now()->toDateString()" />
                    <label class="flex items-center gap-2 text-sm text-ink-700 dark:text-ink-300">
                        <input type="checkbox" name="reset_status" value="1" class="form-checkbox"> Reset status to “Not Started”
                    </label>
                    <div class="flex justify-end gap-2 pt-2">
                        <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'bulk-reassign')">Cancel</button>
                        <button class="btn btn-brand"><x-heroicon-m-user-plus class="h-4 w-4" /> Reassign</button>
                    </div>
                </form>
            </x-modal>

            <x-modal name="bulk-field-manager" title="Hand over to a field manager" maxWidth="md">
                <form method="POST" action="{{ route('activities.bulk') }}" class="space-y-4">
                    @csrf
                    <input type="hidden" name="action" value="field_manager">
                    <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                    <p class="text-sm text-ink-600 dark:text-ink-300">The <strong x-text="selected.length"></strong> selected activities will appear in the field manager's “Assign Activities” list.</p>
                    <div>
                        <label class="form-label" for="bulk_field_manager">Field manager <span class="text-rose-500">*</span></label>
                        <select name="field_manager" id="bulk_field_manager" class="form-input" required>
                            <option value="">Choose…</option>
                            @foreach ($fieldManagers as $fm)<option value="{{ $fm->name }}">{{ $fm->name }}</option>@endforeach
                        </select>
                    </div>
                    <div class="flex justify-end gap-2 pt-2">
                        <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'bulk-field-manager')">Cancel</button>
                        <button class="btn btn-brand"><x-heroicon-m-briefcase class="h-4 w-4" /> Hand over</button>
                    </div>
                </form>
            </x-modal>
        @endif
    </x-card>
</x-layouts.app>