@php
    use App\Services\Leads\LeadModule;
    use App\Services\Leads\RemarkRule;
    $sortable = $module->sortable();
    $ids = $leads->getCollection()->map(fn ($l) => (string) $l->getKey())->values();
    $liveRemarks = collect($module->remarkOptions())->keys()->filter(fn ($r) => RemarkRule::outcome($r) === RemarkRule::LIVE)->values();
    $status = request('status');
    $statusTabs = [
        '' => ['All leads', $stats['total'], 'heroicon-o-inbox-stack', 'blue'],
        'new' => ['New', $stats['new'], 'heroicon-o-sparkles', 'violet'],
        'live' => ['Live', $stats['live'], 'heroicon-o-bolt', 'green'],
        'lost' => ['Lost', $stats['lost'], 'heroicon-o-x-circle', 'red'],
    ];
@endphp
<x-layouts.app :title="$module->label()" :subtitle="$module->description()"
               :breadcrumbs="['Leads & Messaging' => null, 'Chatbot leads' => $modules->count() > 1 ? route('leads.home') : null, $module->label() => null]">
    <x-slot:actions>
        <a href="{{ route('leads.export', array_merge(request()->except('page'), ['module' => $module->key])) }}" class="btn btn-secondary">
            <x-heroicon-m-arrow-down-tray class="h-4 w-4" /> Export CSV
        </a>
    </x-slot:actions>

    {{-- Module switcher --}}
    @if ($modules->count() > 1)
        <div class="mb-6">
            <div class="sm:hidden">
                <label for="module-switch" class="form-label">Lead module</label>
                <select id="module-switch" class="form-input" onchange="window.location = this.value">
                    @foreach ($modules as $m)
                        <option value="{{ route('leads.index', $m->key) }}" @selected($m->key === $module->key)>{{ $m->label() }}</option>
                    @endforeach
                </select>
            </div>
            <nav class="hidden flex-wrap gap-2 sm:flex" aria-label="Lead modules">
                @foreach ($modules as $m)
                    <a href="{{ route('leads.index', $m->key) }}"
                       @class(['inline-flex items-center gap-2 rounded-full px-3.5 py-1.5 text-sm font-medium ring-1 transition',
                               'bg-ink-900 text-white ring-ink-900 shadow-sm dark:bg-brand-500 dark:text-ink-950 dark:ring-brand-500' => $m->key === $module->key,
                               'bg-white text-ink-600 ring-ink-200 hover:bg-ink-50 hover:text-ink-900 dark:bg-ink-900 dark:text-ink-300 dark:ring-ink-700 dark:hover:bg-ink-800' => $m->key !== $module->key])
                       @if ($m->key === $module->key) aria-current="page" @endif>
                        <x-dynamic-component :component="$m->icon()" class="h-4 w-4" />
                        {{ $m->label() }}
                    </a>
                @endforeach
            </nav>
        </div>
    @endif

    {{-- Status overview (click to filter) --}}
    <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ($statusTabs as $key => [$label, $count, $icon, $tone])
            <x-stat :label="$label" :value="number_format($count)" :icon="$icon" :tone="$tone"
                    :href="route('leads.index', array_filter(['module' => $module->key, 'status' => $key ?: null]))"
                    :hint="$stats['total'] && $key ? round($count * 100 / $stats['total']).'% of all leads' : null"
                    :class="(string) $status === $key ? 'ring-2 ring-brand-400 dark:ring-brand-500' : ''" />
        @endforeach
    </div>

    <x-card :padded="false" x-data="bulkSelect()">
        <div class="border-b border-ink-100 p-4 dark:border-ink-800">
            <x-filter-bar placeholder="Search name, mobile{{ in_array('location', $module->searchable()) ? ', location' : '' }}…">
                <x-select name="status" :options="['new' => 'New', 'live' => 'Live', 'lost' => 'Lost']" :value="$status" placeholder="Any status" class="w-36" />
                @foreach ($filterOptions as $field => $options)
                    <x-select :name="$field" :options="$options" :value="request($field)" :placeholder="'Any '.mb_strtolower($module->columnLabel($field))" class="w-48" :enhance="count($options) > 15" />
                @endforeach
                <div class="w-40">
                    <label for="from" class="sr-only">Captured from</label>
                    <input type="date" id="from" name="from" value="{{ request('from') }}" class="form-input" title="Captured from">
                </div>
                <div class="w-40">
                    <label for="to" class="sr-only">Captured to</label>
                    <input type="date" id="to" name="to" value="{{ request('to') }}" class="form-input" title="Captured to">
                </div>
            </x-filter-bar>
        </div>

        {{-- Bulk action bar --}}
        <div x-cloak x-show="selected.length" x-transition
             class="flex flex-wrap items-center justify-between gap-3 border-b border-brand-200 bg-brand-50/70 px-5 py-2.5 text-sm dark:border-brand-500/20 dark:bg-brand-500/10">
            <div class="font-medium text-brand-900 dark:text-brand-200">
                <span x-text="selected.length"></span> selected
                <button type="button" class="ml-2 text-xs text-brand-700 underline-offset-2 hover:underline dark:text-brand-300" @click="selected = []; all = false">Clear</button>
            </div>
            <div class="flex flex-wrap gap-2">
                @if ($bulkFields)
                    <button type="button" class="btn btn-secondary btn-sm" @click="$dispatch('open-modal', 'bulk-update')">
                        <x-heroicon-m-pencil-square class="h-4 w-4" /> Bulk update
                    </button>
                @endif
                @if ($canDelete)
                    <form method="POST" action="{{ route('leads.bulk-destroy', $module->key) }}"
                          x-data="confirmSubmit('Permanently delete the selected leads? This cannot be undone.')" @submit="submit">
                        @csrf @method('DELETE')
                        <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                        <button class="btn btn-danger btn-sm"><x-heroicon-m-trash class="h-4 w-4" /> Delete</button>
                    </form>
                @endif
            </div>
        </div>

        @if ($leads->isEmpty())
            <x-empty-state title="No leads found" icon="heroicon-o-inbox"
                           :message="$stats['total'] ? 'No lead matches these filters. Try a different search.' : 'The '.$module->label().' chatbot has not captured any leads yet.'" />
        @else
            <div class="table-wrap">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="w-10">
                                <input type="checkbox" class="form-checkbox" aria-label="Select all on this page"
                                       :checked="all" @click="toggleAll(@js($ids))">
                            </th>
                            <th><x-sort-link column="user_name" label="Lead" /></th>
                            @foreach ($module->listColumns() as $col)
                                <th @class(['whitespace-nowrap'])>
                                    @if (isset($sortable[$col]))
                                        <x-sort-link :column="$col" :label="$module->columnLabel($col)" />
                                    @else
                                        {{ $module->columnLabel($col) }}
                                    @endif
                                </th>
                            @endforeach
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                        @foreach ($leads as $lead)
                            @php($id = (string) $lead->getKey())
                            <tr :class="selected.includes('{{ $id }}') && 'bg-brand-50/60 dark:bg-brand-500/5'">
                                <td><input type="checkbox" class="form-checkbox" value="{{ $id }}" x-model="selected" aria-label="Select lead {{ $id }}"></td>
                                <td>
                                    <div class="flex items-center gap-3">
                                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-ink-100 to-ink-200 text-xs font-semibold text-ink-600 dark:from-ink-700 dark:to-ink-800 dark:text-ink-200">
                                            {{ mb_strtoupper(mb_substr(trim((string) $lead->user_name) ?: '?', 0, 1)) }}
                                        </span>
                                        <div class="min-w-0">
                                            <a href="{{ route('leads.show', [$module->key, $id]) }}" class="block max-w-[16rem] truncate font-medium text-ink-900 hover:text-brand-700 dark:text-white dark:hover:text-brand-400">
                                                {{ trim((string) $lead->user_name) ?: 'Unnamed lead' }}
                                            </a>
                                            @if ($lead->user_number)
                                                <a href="tel:{{ $lead->user_number }}" class="text-xs text-ink-500 tabular-nums hover:text-ink-800 dark:hover:text-ink-200">{{ $lead->user_number }}</a>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                @foreach ($module->listColumns() as $col)
                                    <td class="whitespace-nowrap">
                                        @if ($col === 'live_data')
                                            @include('leads.partials.status', ['value' => $lead->live_data])
                                        @elseif ($col === 'due_date')
                                            @php($due = LeadModule::parseDate($lead->due_date))
                                            @if ($due)
                                                <span @class(['inline-flex items-center gap-1 tabular-nums',
                                                              'font-medium text-rose-600 dark:text-rose-400' => $due->isPast() && ! $due->isToday() && RemarkRule::statusKey($lead->live_data) === 'live',
                                                              'font-medium text-brand-700 dark:text-brand-400' => $due->isToday()])>
                                                    <x-heroicon-m-calendar class="h-3.5 w-3.5 opacity-60" /> {{ $due->format('d M Y') }}
                                                </span>
                                            @else
                                                <span class="text-ink-300 dark:text-ink-600">—</span>
                                            @endif
                                        @elseif ($col === 'date')
                                            <span class="text-xs text-ink-500 tabular-nums">{{ $lead->date ?: '—' }}</span>
                                        @else
                                            @php($text = $module->display($lead, $col))
                                            <span @class(['text-ink-600 dark:text-ink-300', 'text-ink-300 dark:text-ink-600' => $text === ''])>{{ $text !== '' ? \Illuminate\Support\Str::limit($text, 40) : '—' }}</span>
                                        @endif
                                    </td>
                                @endforeach
                                <td class="text-right">
                                    <div class="inline-flex items-center gap-1">
                                        <a href="{{ route('leads.show', [$module->key, $id]) }}" class="btn-icon" title="View"><x-heroicon-o-eye class="h-4 w-4" /></a>
                                        <a href="{{ route('leads.edit', [$module->key, $id]) }}" class="btn-icon" title="Edit"><x-heroicon-o-pencil-square class="h-4 w-4" /></a>
                                        @if ($canDelete)
                                            <form method="POST" action="{{ route('leads.destroy', [$module->key, $id]) }}" x-data="confirmSubmit('Delete this lead permanently?')" @submit="submit">
                                                @csrf @method('DELETE')
                                                <button class="btn-icon hover:!bg-rose-50 hover:!text-rose-600" title="Delete"><x-heroicon-o-trash class="h-4 w-4" /></button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <x-pagination-bar :paginator="$leads" />
        @endif

        {{-- Bulk update modal (whitelisted fields only) --}}
        @if ($bulkFields)
            <x-modal name="bulk-update" title="Bulk update selected leads" maxWidth="md">
                <form method="POST" action="{{ route('leads.bulk-update', $module->key) }}" id="bulk-update-form" class="space-y-4"
                      x-data="{ field: @js(array_key_first($bulkFields)), remark: '', live: @js($liveRemarks) }">
                    @csrf
                    <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                    <p class="text-sm text-ink-500">Applies to <span class="font-semibold text-ink-900 dark:text-white" x-text="selected.length"></span> selected lead(s).</p>
                    <div>
                        <label for="bulk-field" class="form-label">Field</label>
                        <select id="bulk-field" name="field" x-model="field" class="form-input">
                            @foreach ($bulkFields as $field => $options)
                                <option value="{{ $field }}">{{ $module->columnLabel($field) }}</option>
                            @endforeach
                        </select>
                    </div>
                    @foreach ($bulkFields as $field => $options)
                        <div x-show="field === @js($field)">
                            <label for="bulk-{{ $field }}" class="form-label">New value</label>
                            <select id="bulk-{{ $field }}" name="value" class="form-input" :disabled="field !== @js($field)"
                                    @if ($field === 'final_remark') x-model="remark" @endif>
                                <option value="">— None (clear) —</option>
                                @foreach ($options as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            @if ($field === 'final_remark')
                                <p class="form-hint">The status is set automatically: live remarks need a due date, lost remarks clear it.</p>
                            @endif
                        </div>
                    @endforeach
                    @if ($module->hasField('due_date'))
                        <div x-show="field === 'final_remark' && live.includes(remark)" x-cloak>
                            <label for="bulk-due" class="form-label">Due date <span class="text-rose-500">*</span></label>
                            <input type="date" id="bulk-due" name="due_date" class="form-input" :disabled="!(field === 'final_remark' && live.includes(remark))">
                        </div>
                    @endif
                </form>
                <x-slot:footer>
                    <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'bulk-update')">Cancel</button>
                    <button form="bulk-update-form" class="btn btn-brand"><x-heroicon-m-check class="h-4 w-4" /> Apply</button>
                </x-slot:footer>
            </x-modal>
        @endif
    </x-card>
</x-layouts.app>