@php
    $canCreate = auth()->user()->can('create', \App\Models\Target::class);
    $canAssign = auth()->user()->can('assign', \App\Models\Target::class);
    $canUpdate = app(\App\Support\WorkspaceContext::class)->can(\App\Enums\PermissionEnum::TargetsUpdate);
    $canDelete = app(\App\Support\WorkspaceContext::class)->can(\App\Enums\PermissionEnum::TargetsDelete);
    $pageIds = $targets->pluck('id')->map(fn ($id) => (string) $id)->all();
    $pageAllChecked = $pageIds !== [] && count(array_diff($pageIds, $selected)) === 0;
    $selectedCount = $selectAllMatching ? $totalMatching : count($selected);
    $hasFilters = filled($search) || filled($province) || filled($city) || filled($status) || filled($priority) || filled($assignee) || filled($listId) || filled($followup);
@endphp

<div>
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
        <div>
            <h1 class="text-lg font-bold text-gray-800">تارگت‌ها</h1>
            <p class="text-sm text-gray-500">لیست شماره‌های هدف؛ فیلتر بر اساس استان، پیگیری، تخصیص به کارشناس و اولویت‌بندی.</p>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            @if ($canCreate)
                <a href="{{ route('targets.template') }}" class="rounded-md border border-gray-300 bg-white px-3 py-2 text-xs font-medium text-gray-700 hover:bg-gray-50">دانلود فایل نمونه اکسل</a>
                <x-secondary-button type="button" wire:click="openImport">ورود از اکسل</x-secondary-button>
                <x-primary-button type="button" wire:click="createNew">+ تارگت جدید</x-primary-button>
            @endif
        </div>
    </div>

    @if ($lastImport)
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="font-bold">لیست «{{ $lastImport['name'] }}» وارد شد.</p>
                    <p class="mt-1 text-xs leading-6">
                        از {{ number_format($lastImport['total']) }} ردیف:
                        <span class="font-bold">{{ number_format($lastImport['imported']) }}</span> تارگت جدید ثبت شد،
                        {{ number_format($lastImport['duplicate']) }} شماره تکراری (قبلاً ثبت بود یا در فایل تکرار شده) نادیده گرفته شد،
                        {{ number_format($lastImport['invalid']) }} شماره نامعتبر رد شد.
                    </p>
                </div>
                <button type="button" wire:click="dismissImport" class="text-emerald-700 hover:text-emerald-900" aria-label="بستن">✕</button>
            </div>
        </div>
    @endif

    {{-- Status chips: counts respect every other active filter --}}
    <div class="mb-4 flex flex-wrap gap-2 text-xs">
        <button type="button" wire:click="filterByStatus('')"
            @class(['rounded-full border px-3 py-1', 'border-indigo-600 bg-indigo-600 text-white' => $status === '', 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50' => $status !== ''])>
            همه <span class="ltr-numerals">({{ number_format($statusCounts->sum()) }})</span>
        </button>
        @foreach (\App\Enums\TargetStatus::cases() as $case)
            <button type="button" wire:click="filterByStatus('{{ $case->value }}')" wire:key="chip-{{ $case->value }}"
                @class(['rounded-full border px-3 py-1', 'border-indigo-600 bg-indigo-600 text-white' => $status === $case->value, 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50' => $status !== $case->value])>
                {{ $case->label() }} <span class="ltr-numerals">({{ number_format($statusCounts[$case->value] ?? 0) }})</span>
            </button>
        @endforeach
    </div>

    {{-- Filters --}}
    <div class="mb-4 grid gap-3 rounded-lg border border-gray-200 bg-white p-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="sm:col-span-2">
            <label class="mb-1 block text-xs text-gray-500">جستجو (نام، شماره، شرکت یا شهر)</label>
            <input type="text" wire:model.live.debounce.400ms="search" placeholder="مثلاً 0912 یا علی..." class="w-full rounded-md border-gray-300 text-sm">
        </div>

        <div>
            <label class="mb-1 block text-xs text-gray-500">استان</label>
            <select wire:model.live="province" class="w-full rounded-md border-gray-300 text-sm">
                <option value="">همه استان‌ها</option>
                @foreach ($provinces as $row)
                    <option value="{{ $row->province }}">{{ $row->province }} ({{ number_format($row->total) }})</option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="mb-1 block text-xs text-gray-500">شهر</label>
            <input type="text" wire:model.live.debounce.400ms="city" class="w-full rounded-md border-gray-300 text-sm">
        </div>

        <div>
            <label class="mb-1 block text-xs text-gray-500">اولویت</label>
            <select wire:model.live="priority" class="w-full rounded-md border-gray-300 text-sm">
                <option value="">همه</option>
                @foreach (\App\Enums\TargetPriority::cases() as $case)
                    <option value="{{ $case->value }}">{{ $case->label() }}</option>
                @endforeach
            </select>
        </div>

        @if ($seesAll)
            <div>
                <label class="mb-1 block text-xs text-gray-500">مسئول</label>
                <select wire:model.live="assignee" class="w-full rounded-md border-gray-300 text-sm">
                    <option value="">همه</option>
                    <option value="none">بدون مسئول</option>
                    @foreach ($members as $member)
                        <option value="{{ $member->id }}">{{ $member->name }}</option>
                    @endforeach
                </select>
            </div>
        @endif

        <div>
            <label class="mb-1 block text-xs text-gray-500">لیست (فایل ورودی)</label>
            <select wire:model.live="listId" class="w-full rounded-md border-gray-300 text-sm">
                <option value="">همه لیست‌ها</option>
                @foreach ($lists as $list)
                    <option value="{{ $list->id }}">{{ $list->name }} ({{ number_format($list->imported_count) }})</option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="mb-1 block text-xs text-gray-500">پیگیری</label>
            <select wire:model.live="followup" class="w-full rounded-md border-gray-300 text-sm">
                <option value="">همه</option>
                <option value="no_activity">بدون هیچ فعالیت</option>
                <option value="overdue">اقدام عقب‌افتاده</option>
                <option value="today">اقدام امروز</option>
            </select>
        </div>

        <div>
            <label class="mb-1 block text-xs text-gray-500">مرتب‌سازی</label>
            <select wire:model.live="sort" class="w-full rounded-md border-gray-300 text-sm">
                <option value="newest">جدیدترین</option>
                <option value="priority">بالاترین اولویت</option>
                <option value="recent">آخرین فعالیت</option>
            </select>
        </div>

        @if ($hasFilters)
            <div class="sm:col-span-2 lg:col-span-4">
                <button type="button" wire:click="resetFilters" class="text-xs text-indigo-600 hover:underline">پاک کردن همه فیلترها</button>
            </div>
        @endif
    </div>

    {{-- Bulk actions --}}
    @if ($selectedCount > 0)
        <div class="mb-4 rounded-lg border border-indigo-200 bg-indigo-50 p-3 text-sm" x-data>
            <div class="flex flex-wrap items-center gap-3">
                <span class="font-medium text-indigo-800">
                    <span class="ltr-numerals">{{ number_format($selectedCount) }}</span> تارگت انتخاب شده
                </span>

                @if (! $selectAllMatching && $pageAllChecked && $totalMatching > count($pageIds))
                    <button type="button" wire:click="selectEveryMatch" class="text-xs text-indigo-700 underline">انتخاب هر {{ number_format($totalMatching) }} تارگتِ این فیلتر</button>
                @endif

                <button type="button" wire:click="clearSelection" class="text-xs text-gray-500 hover:underline">لغو انتخاب</button>
            </div>

            <div class="mt-3 flex flex-wrap items-center gap-2">
                @if ($canAssign)
                    <select class="rounded-md border-gray-300 text-xs" x-on:change="if ($event.target.value !== '') { $wire.bulkAssign($event.target.value); $event.target.value = '' }">
                        <option value="">تخصیص به…</option>
                        <option value="none">— برداشتن تخصیص —</option>
                        @foreach ($members as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                @endif

                @if ($canUpdate)
                    <select class="rounded-md border-gray-300 text-xs" x-on:change="if ($event.target.value !== '') { $wire.bulkSetStatus($event.target.value); $event.target.value = '' }">
                        <option value="">تغییر وضعیت به…</option>
                        @foreach (\App\Enums\TargetStatus::cases() as $case)
                            <option value="{{ $case->value }}">{{ $case->label() }}</option>
                        @endforeach
                    </select>

                    <select class="rounded-md border-gray-300 text-xs" x-on:change="if ($event.target.value !== '') { $wire.bulkSetPriority($event.target.value); $event.target.value = '' }">
                        <option value="">تغییر اولویت به…</option>
                        @foreach (\App\Enums\TargetPriority::cases() as $case)
                            <option value="{{ $case->value }}">{{ $case->label() }}</option>
                        @endforeach
                    </select>
                @endif

                @if ($canDelete)
                    <button type="button" wire:click="bulkDelete" wire:confirm="تارگت‌های انتخاب‌شده و فعالیت‌هایشان برای همیشه حذف شوند؟"
                        class="rounded-md border border-rose-300 bg-white px-3 py-1.5 text-xs font-medium text-rose-600 hover:bg-rose-50">حذف انتخاب‌شده‌ها</button>
                @endif
            </div>
        </div>
    @endif

    {{-- Desktop table --}}
    <div class="hidden md:block overflow-hidden rounded-lg border border-gray-200 bg-white">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
            <thead class="bg-gray-50">
                <tr>
                    <th class="w-10 px-3 py-3"><input type="checkbox" wire:click="selectPage" wire:key="page-check-{{ (int) $pageAllChecked }}" @checked($pageAllChecked) class="rounded border-gray-300 text-indigo-600"></th>
                    <th class="px-3 py-3 text-start font-medium text-gray-500">تارگت</th>
                    <th class="px-3 py-3 text-start font-medium text-gray-500">استان / شهر</th>
                    <th class="px-3 py-3 text-start font-medium text-gray-500">وضعیت</th>
                    <th class="px-3 py-3 text-start font-medium text-gray-500">اولویت</th>
                    <th class="px-3 py-3 text-start font-medium text-gray-500">مسئول</th>
                    <th class="px-3 py-3 text-start font-medium text-gray-500">اقدام بعدی</th>
                    <th class="px-3 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse ($targets as $target)
                    @php($canEditRow = $canUpdate && auth()->user()->can('update', $target))
                    <tr wire:key="target-{{ $target->id }}" @class(['bg-indigo-50/40' => in_array((string) $target->id, $selected, true) || $selectAllMatching])>
                        <td class="px-3 py-3"><input type="checkbox" wire:model.live="selected" value="{{ $target->id }}" class="rounded border-gray-300 text-indigo-600"></td>
                        <td class="px-3 py-3">
                            <a href="{{ route('targets.show', $target) }}" wire:navigate class="font-medium text-gray-900 hover:text-indigo-700">{{ $target->name ?: '—' }}</a>
                            <div class="ltr-numerals text-xs text-gray-500" dir="ltr" style="text-align: right">{{ $target->mobile }}</div>
                            @if ($target->company)
                                <div class="text-xs text-gray-400">{{ $target->company }}</div>
                            @endif
                        </td>
                        <td class="px-3 py-3 text-gray-600">
                            {{ $target->province ?: '—' }}
                            @if ($target->city)
                                <span class="text-xs text-gray-400">/ {{ $target->city }}</span>
                            @endif
                        </td>
                        <td class="px-3 py-3">
                            @if ($canEditRow)
                                <select wire:change="setStatus({{ $target->id }}, $event.target.value)" class="rounded-md border-gray-200 py-1 text-xs">
                                    @foreach (\App\Enums\TargetStatus::cases() as $case)
                                        <option value="{{ $case->value }}" @selected($target->status === $case)>{{ $case->label() }}</option>
                                    @endforeach
                                </select>
                            @else
                                <span class="rounded-full px-2 py-0.5 text-xs {{ $target->status->badge() }}">{{ $target->status->label() }}</span>
                            @endif
                        </td>
                        <td class="px-3 py-3">
                            @if ($canEditRow)
                                <select wire:change="setPriority({{ $target->id }}, $event.target.value)" class="rounded-md border-gray-200 py-1 text-xs">
                                    @foreach (\App\Enums\TargetPriority::cases() as $case)
                                        <option value="{{ $case->value }}" @selected($target->priority === $case)>{{ $case->label() }}</option>
                                    @endforeach
                                </select>
                            @else
                                <span class="rounded-full px-2 py-0.5 text-xs {{ $target->priority->badge() }}">{{ $target->priority->label() }}</span>
                            @endif
                        </td>
                        <td class="px-3 py-3">
                            @if ($canAssign)
                                <select wire:change="assignTo({{ $target->id }}, $event.target.value)" class="max-w-[9rem] rounded-md border-gray-200 py-1 text-xs">
                                    <option value="">— بدون مسئول —</option>
                                    @foreach ($members as $member)
                                        <option value="{{ $member->id }}" @selected($target->assigned_to === $member->id)>{{ $member->name }}</option>
                                    @endforeach
                                </select>
                            @else
                                <span class="text-xs text-gray-600">{{ $target->assignee?->name ?: '—' }}</span>
                            @endif
                        </td>
                        <td class="px-3 py-3 text-xs">
                            @if ($target->next_followup_at)
                                @php($due = \Illuminate\Support\Carbon::parse($target->next_followup_at))
                                <span @class(['ltr-numerals', 'font-medium text-rose-600' => $due->isPast(), 'text-gray-600' => ! $due->isPast()])>@ldatetime($due)</span>
                            @else
                                <span class="text-gray-300">—</span>
                            @endif
                        </td>
                        <td class="px-3 py-3 text-end">
                            <a href="{{ route('targets.show', $target) }}" wire:navigate class="text-xs text-indigo-600">مشاهده</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="px-4 py-10 text-center text-gray-400">
                            {{ $hasFilters ? 'تارگتی با این فیلترها پیدا نشد.' : 'هنوز تارگتی ثبت نشده است. با «ورود از اکسل» یک لیست وارد کنید.' }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Mobile cards --}}
    <div class="space-y-3 md:hidden">
        @forelse ($targets as $target)
            <div wire:key="target-card-{{ $target->id }}" class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
                <div class="flex items-start justify-between gap-2">
                    <label class="flex items-start gap-2">
                        <input type="checkbox" wire:model.live="selected" value="{{ $target->id }}" class="mt-1 rounded border-gray-300 text-indigo-600">
                        <span>
                            <a href="{{ route('targets.show', $target) }}" wire:navigate class="font-medium text-gray-900">{{ $target->name ?: $target->mobile }}</a>
                            <span class="ltr-numerals block text-xs text-gray-500">{{ $target->mobile }}</span>
                        </span>
                    </label>
                    <span class="shrink-0 rounded-full px-2 py-0.5 text-xs {{ $target->status->badge() }}">{{ $target->status->label() }}</span>
                </div>
                <div class="mt-2 flex flex-wrap items-center gap-2 text-xs text-gray-500">
                    <span>{{ $target->province ?: '—' }}{{ $target->city ? ' / '.$target->city : '' }}</span>
                    <span class="rounded-full px-2 py-0.5 {{ $target->priority->badge() }}">{{ $target->priority->label() }}</span>
                    <span>{{ $target->assignee?->name ?: 'بدون مسئول' }}</span>
                </div>
            </div>
        @empty
            <p class="rounded-xl border border-dashed border-gray-200 p-6 text-center text-sm text-gray-400">
                {{ $hasFilters ? 'تارگتی با این فیلترها پیدا نشد.' : 'هنوز تارگتی ثبت نشده است.' }}
            </p>
        @endforelse
    </div>

    <div class="mt-4">{{ $targets->links() }}</div>

    {{-- Import modal --}}
    <x-modal name="import-targets" :show="$errors->has('file')" focusable max-width="lg">
        <form wire:submit="import" class="space-y-4 p-6">
            <h2 class="text-base font-bold text-gray-800">ورود لیست تارگت از اکسل</h2>

            <div class="rounded-md bg-gray-50 p-3 text-xs leading-6 text-gray-600">
                ردیف اول فایل باید عنوان ستون‌ها باشد: <span class="font-medium">نام، موبایل، استان، شهر، شرکت، توضیحات</span>
                (فقط «موبایل» الزامی است و ترتیب ستون‌ها مهم نیست). اگر ستون «نام خانوادگی» هم بگذارید، ستون «نام» به‌عنوان نام کوچک خوانده می‌شود. شماره‌های تکراری و نامعتبر خودکار رد می‌شوند.
                فایل‌های xlsx، xls و csv تا ۱۰ مگابایت و ۲۰٬۰۰۰ ردیف پذیرفته می‌شوند.
                <a href="{{ route('targets.template') }}" class="text-indigo-600 underline">دانلود فایل نمونه</a>
            </div>

            <div>
                <x-input-label for="import-file" value="فایل اکسل" />
                <input type="file" wire:model="file" id="import-file" accept=".xlsx,.xls,.csv,.txt" class="mt-1 block w-full text-sm">
                <div wire:loading wire:target="file" class="mt-1 text-xs text-gray-500">در حال بارگذاری فایل…</div>
                <x-input-error :messages="$errors->get('file')" class="mt-2" />
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-input-label for="import-list-name" value="نام لیست (اختیاری — پیش‌فرض نام فایل)" />
                    <x-text-input wire:model="listName" id="import-list-name" type="text" class="mt-1 block w-full" />
                    <x-input-error :messages="$errors->get('listName')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="import-priority" value="اولویت پیش‌فرض" />
                    <select wire:model="importPriority" id="import-priority" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
                        @foreach (\App\Enums\TargetPriority::cases() as $case)
                            <option value="{{ $case->value }}">{{ $case->label() }}</option>
                        @endforeach
                    </select>
                </div>

                @if ($canAssign)
                    <div>
                        <x-input-label for="import-assignee" value="تخصیص کل لیست به (اختیاری)" />
                        <select wire:model="importAssignee" id="import-assignee" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
                            <option value="">— بدون تخصیص —</option>
                            @foreach ($members as $member)
                                <option value="{{ $member->id }}">{{ $member->name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
            </div>

            <div class="flex justify-end gap-2">
                <x-secondary-button type="button" x-on:click="$dispatch('close-modal', 'import-targets')">انصراف</x-secondary-button>
                <x-primary-button wire:loading.attr="disabled" wire:target="import,file">
                    <span wire:loading.remove wire:target="import">ورود لیست</span>
                    <span wire:loading wire:target="import">در حال ورود…</span>
                </x-primary-button>
            </div>
        </form>
    </x-modal>

    {{-- Manual create modal --}}
    <x-modal name="target-form" :show="$errors->has('form.mobile')" focusable max-width="lg">
        <form wire:submit="save" class="space-y-4 p-6">
            <h2 class="text-base font-bold text-gray-800">تارگت جدید</h2>
            @include('livewire.targets._form-fields')
            <div class="flex justify-end gap-2">
                <x-secondary-button type="button" x-on:click="$dispatch('close-modal', 'target-form')">انصراف</x-secondary-button>
                <x-primary-button wire:loading.attr="disabled">ثبت</x-primary-button>
            </div>
        </form>
    </x-modal>
</div>