@php
    use App\Models\TestSmsLog;
    $ids = $messages->getCollection()->map(fn ($m) => (string) $m->Id)->values();
    $count = fn ($s) => (int) ($statusCounts[$s] ?? 0);
    $importErrors = $errors->hasAny(['file', 'template', 'bitly_url_id', 'sender_mobile', 'campaign', 'user_id']);
    $linkUrls = $bitlyLinks->mapWithKeys(fn ($l) => [(string) $l->id => $l->url])->all();
@endphp
<x-layouts.app title="Mobile Bulk SMS" subtitle="Campaign queue delivered by the Android SMS-gateway app."
               :breadcrumbs="['Leads & Messaging' => null, 'Mobile Bulk SMS' => null]">
    <x-slot:actions>
        <a href="{{ route('sms.campaigns.export', request()->except('page')) }}" class="btn btn-secondary"><x-heroicon-m-arrow-down-tray class="h-4 w-4" /> Export</a>
        <button type="button" class="btn btn-brand" x-data @click="$dispatch('open-modal', 'import-campaign')"><x-heroicon-m-arrow-up-tray class="h-4 w-4" /> Import campaign</button>
    </x-slot:actions>

    @include('sms.partials.tabs')

    <div class="mb-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-stat label="Queued (new)" :value="number_format($count('1'))" icon="heroicon-o-clock" tone="blue" :href="route('sms.campaigns.index', ['status' => '1'])" :hint="number_format($total).' messages in total'" />
        <x-stat label="Sent" :value="number_format($count('2'))" icon="heroicon-o-paper-airplane" tone="green" :href="route('sms.campaigns.index', ['status' => '2'])" />
        <x-stat label="Failed" :value="number_format($count('4'))" icon="heroicon-o-exclamation-triangle" tone="red" :href="route('sms.campaigns.index', ['status' => '4'])" />
        <x-stat label="Invalid numbers" :value="number_format($count('3'))" icon="heroicon-o-no-symbol" tone="amber" :href="route('sms.campaigns.index', ['status' => '3'])" />
    </div>
    <div class="mb-6 flex flex-wrap items-center gap-2 text-xs">
        <span class="text-ink-500">Also:</span>
        <a href="{{ route('sms.campaigns.index', ['status' => '-1']) }}" class="badge badge-gray hover:ring-1 hover:ring-ink-300">Cancelled · {{ number_format($count('-1')) }}</a>
        <a href="{{ route('sms.campaigns.index', ['status' => '6']) }}" class="badge badge-gray hover:ring-1 hover:ring-ink-300">Deleted · {{ number_format($count('6')) }}</a>
        <a href="{{ route('sms.campaigns.index', ['dnd' => '1']) }}" class="badge badge-red hover:ring-1 hover:ring-rose-300">DND · {{ number_format($dndCounts['1'] ?? 0) }}</a>
        <a href="{{ route('sms.campaigns.index', ['dnd' => '2']) }}" class="badge badge-green hover:ring-1 hover:ring-emerald-300">Non-DND · {{ number_format($dndCounts['2'] ?? 0) }}</a>
        <a href="{{ route('sms.campaigns.index', ['dnd' => 'none']) }}" class="badge badge-gray hover:ring-1 hover:ring-ink-300">DND not checked · {{ number_format($total - ($dndCounts['1'] ?? 0) - ($dndCounts['2'] ?? 0) - ($dndCounts['-1'] ?? 0)) }}</a>
    </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 number, message, name, campaign…">
                <x-select name="status" :options="TestSmsLog::statusOptions() + ['none' => 'Not defined']" :value="request('status')" placeholder="Any status" class="w-40" />
                <x-select name="dnd" :options="['1' => 'DND', '2' => 'Non-DND', '-1' => 'Not found', 'none' => 'Not checked']" :value="request('dnd')" placeholder="Any DND" class="w-36" />
                <x-select name="campaign" :options="$campaigns" :value="request('campaign')" placeholder="All campaigns" class="w-56" :enhance="true" />
                <x-select name="user" :options="$senders->all()" :value="request('user')" placeholder="Any sender" class="w-44" />
                <input type="date" name="from" value="{{ request('from') }}" class="form-input w-40" title="Sent from" aria-label="Sent from">
                <input type="date" name="to" value="{{ request('to') }}" class="form-input w-40" title="Sent to" aria-label="Sent to">
            </x-filter-bar>
        </div>

        <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 hover:underline dark:text-brand-300" @click="selected = []; all = false">Clear</button>
            </div>
            <div class="flex flex-wrap gap-2">
                <form method="POST" action="{{ route('sms.campaigns.send') }}" x-data="confirmSubmit('Send the selected New/Failed messages now through the SMS gateway? Charges may apply.')" @submit="submit">
                    @csrf
                    <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                    <button class="btn btn-success btn-sm" :disabled="selected.length > {{ $sendLimit }}" :title="selected.length > {{ $sendLimit }} ? 'Select at most {{ $sendLimit }} messages to send at once' : ''">
                        <x-heroicon-m-paper-airplane class="h-4 w-4" /> Send now
                    </button>
                </form>
                @foreach ([TestSmsLog::STATUS_NEW => ['Re-queue', 'heroicon-m-arrow-path'], TestSmsLog::STATUS_CANCELLED => ['Cancel', 'heroicon-m-pause-circle']] as $value => [$label, $icon])
                    <form method="POST" action="{{ route('sms.campaigns.status') }}">
                        @csrf
                        <input type="hidden" name="status" value="{{ $value }}">
                        <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                        <button class="btn btn-secondary btn-sm"><x-dynamic-component :component="$icon" class="h-4 w-4" /> {{ $label }}</button>
                    </form>
                @endforeach
                <form method="POST" action="{{ route('sms.campaigns.destroy') }}" x-data="confirmSubmit('Permanently delete the selected messages?')" @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>
            </div>
        </div>

        @if ($messages->isEmpty())
            <x-empty-state title="No messages" icon="heroicon-o-device-phone-mobile" message="Nothing matches these filters. Import a CSV to queue a new campaign.">
                <button type="button" class="btn btn-brand" @click="$dispatch('open-modal', 'import-campaign')"><x-heroicon-m-arrow-up-tray class="h-4 w-4" /> Import campaign</button>
            </x-empty-state>
        @else
            <div class="table-wrap">
                <table class="table table-compact">
                    <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="status" label="Status" /></th>
                            <th><x-sort-link column="number" label="Recipient" /></th>
                            <th class="min-w-[18rem]">Message</th>
                            <th><x-sort-link column="campaign" label="Campaign" /></th>
                            <th><x-sort-link column="user" label="Sender" /></th>
                            <th><x-sort-link column="dnd" label="DND" /></th>
                            <th>Sent</th>
                            <th>SIM</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                        @foreach ($messages as $m)
                            @php([$dndLabel, $dndBadge] = TestSmsLog::dndLabel($m->DndStatus))
                            <tr :class="selected.includes('{{ $m->Id }}') && 'bg-brand-50/60 dark:bg-brand-500/5'">
                                <td><input type="checkbox" class="form-checkbox" value="{{ $m->Id }}" x-model="selected" aria-label="Select message {{ $m->Id }}"></td>
                                <td>@include('sms.partials.status', ['value' => $m->MessageStatusId])</td>
                                <td class="whitespace-nowrap">
                                    <div class="font-medium text-ink-900 tabular-nums dark:text-white">{{ $m->Number ?: '—' }}</div>
                                    @if (trim((string) $m->Name) !== '' && strlen(trim($m->Name)) > 1)<div class="text-xs text-ink-500">{{ $m->Name }}</div>@endif
                                </td>
                                <td>
                                    <button type="button" class="line-clamp-2 max-w-md text-left text-ink-600 hover:text-ink-900 dark:text-ink-300 dark:hover:text-white"
                                            @click="$dispatch('show-sms', { number: @js((string) $m->Number), text: @js((string) $m->Message) })">{{ $m->Message ?: '—' }}</button>
                                </td>
                                <td class="whitespace-nowrap">
                                    @if ($m->Campaign)
                                        <a href="{{ route('sms.campaigns.index', ['campaign' => $m->Campaign]) }}" class="badge badge-violet">{{ \Illuminate\Support\Str::limit($m->Campaign, 28) }}</a>
                                    @else
                                        <span class="text-ink-300 dark:text-ink-600">—</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap text-ink-600 dark:text-ink-300">{{ $m->user_name ?? ($m->UserId ? '#'.$m->UserId : '—') }}</td>
                                <td class="whitespace-nowrap">
                                    <span class="badge {{ $dndBadge }}">{{ $dndLabel }}</span>
                                    @if ($m->DndCheckDate)<div class="mt-0.5 text-[11px] text-ink-400">{{ $m->DndCheckDate }}</div>@endif
                                </td>
                                <td class="whitespace-nowrap text-xs text-ink-500 tabular-nums">
                                    {{ $m->SentOnDate ?: '—' }}
                                    @if ($m->TimeTaken)<div class="text-[11px] text-ink-400">{{ $m->TimeTaken }}</div>@endif
                                </td>
                                <td class="whitespace-nowrap text-xs text-ink-500">{{ $m->SimName ?: '—' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <x-pagination-bar :paginator="$messages" />
        @endif
    </x-card>

    @include('sms.partials.message-modal')

    {{-- Import campaign --}}
    <x-modal name="import-campaign" title="Import SMS campaign" maxWidth="2xl" :show="$importErrors">
        <form method="POST" action="{{ route('sms.campaigns.import') }}" enctype="multipart/form-data" id="import-campaign-form" class="space-y-5"
              x-data="{
                  mode: @js(old('mode', 'template')),
                  template: @js(old('template', $defaultTemplate)),
                  link: @js((string) old('bitly_url_id', '')),
                  mobile: @js((string) old('sender_mobile', '')),
                  links: @js($linkUrls),
                  insert(tag) {
                      const el = this.$refs.template, s = el.selectionStart ?? this.template.length;
                      this.template = this.template.slice(0, s) + tag + this.template.slice(el.selectionEnd ?? s);
                      this.$nextTick(() => { el.focus(); el.selectionStart = el.selectionEnd = s + tag.length; });
                  },
                  get preview() {
                      return this.template.replace(/\{(name|car|mobile|link)\}/gi, (m, k) => ({ name: 'RAHUL SHAH', car: 'SWIFT DZIRE', mobile: this.mobile, link: this.links[this.link] || '' })[k.toLowerCase()])
                          .replace(/[ \t]{2,}/g, ' ').trim();
                  },
              }">
            @csrf
            <div class="rounded-xl border border-dashed border-ink-300 bg-ink-50/60 p-4 dark:border-ink-700 dark:bg-ink-800/40">
                <label for="file" class="form-label">Recipients file <span class="text-rose-500">*</span></label>
                <input type="file" name="file" id="file" accept=".csv,.txt,.xlsx,.xls" required
                       class="block w-full text-sm text-ink-600 file:mr-3 file:rounded-lg file:border-0 file:bg-ink-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white hover:file:bg-ink-700 dark:text-ink-300 dark:file:bg-brand-500 dark:file:text-ink-950">
                @error('file')<p class="form-error">{{ $message }}</p>@enderror
                <p class="form-hint">CSV or Excel with a header row. Columns used: <span class="font-medium">Number</span> (or Mobile), <span class="font-medium">Name</span> / SMS Name, <span class="font-medium">Car</span> / Model, and optionally <span class="font-medium">Message</span>. Numbers that are not valid 10-digit mobiles are kept as “Invalid number”.</p>
            </div>

            <div class="grid gap-5 sm:grid-cols-2">
                <x-input name="campaign" label="Campaign name" placeholder="e.g. CARLOAN SURAT OCT" maxlength="100" hint="Leave blank to generate one." />
                <x-select name="user_id" label="Send from (user's phone)" :options="$users->all()" :value="auth()->id()" required :enhance="true" hint="The gateway app of this user sends the messages." />
            </div>

            <fieldset>
                <legend class="form-label">Message</legend>
                <div class="grid gap-2 sm:grid-cols-2">
                    <label class="flex cursor-pointer items-start gap-3 rounded-xl border p-3 text-sm transition" :class="mode === 'template' ? 'border-brand-400 bg-brand-50/60 dark:bg-brand-500/10' : 'border-ink-200 dark:border-ink-700'">
                        <input type="radio" name="mode" value="template" x-model="mode" class="mt-0.5">
                        <span><span class="block font-medium text-ink-900 dark:text-white">Template</span><span class="text-xs text-ink-500">Personalise with name, car, executive mobile and a bitly link.</span></span>
                    </label>
                    <label class="flex cursor-pointer items-start gap-3 rounded-xl border p-3 text-sm transition" :class="mode === 'file' ? 'border-brand-400 bg-brand-50/60 dark:bg-brand-500/10' : 'border-ink-200 dark:border-ink-700'">
                        <input type="radio" name="mode" value="file" x-model="mode" class="mt-0.5">
                        <span><span class="block font-medium text-ink-900 dark:text-white">From file</span><span class="text-xs text-ink-500">Use each row's own “Message” column.</span></span>
                    </label>
                </div>
            </fieldset>

            <div x-show="mode === 'template'" class="space-y-4">
                <div>
                    <div class="mb-1.5 flex flex-wrap items-center justify-between gap-2">
                        <label for="template" class="form-label mb-0">Template</label>
                        <div class="flex flex-wrap gap-1">
                            @foreach (['{name}', '{car}', '{mobile}', '{link}'] as $tag)
                                <button type="button" class="rounded-md bg-ink-100 px-2 py-0.5 font-mono text-xs text-ink-700 hover:bg-brand-100 hover:text-brand-800 dark:bg-ink-800 dark:text-ink-200" @click="insert('{{ $tag }}')">{{ $tag }}</button>
                            @endforeach
                        </div>
                    </div>
                    <textarea name="template" id="template" rows="3" maxlength="480" x-ref="template" x-model="template" :disabled="mode !== 'template'"
                              class="form-input @error('template') border-rose-400 @enderror"></textarea>
                    @error('template')<p class="form-error">{{ $message }}</p>@enderror
                </div>
                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="bitly_url_id" class="form-label">Bitly link <span class="font-mono text-xs text-ink-400">{link}</span></label>
                        <select name="bitly_url_id" id="bitly_url_id" x-model="link" class="form-input" :disabled="mode !== 'template'">
                            <option value="">— None —</option>
                            @foreach ($bitlyLinks as $l)
                                <option value="{{ $l->id }}">{{ $l->type }}</option>
                            @endforeach
                        </select>
                        @error('bitly_url_id')<p class="form-error">{{ $message }}</p>@enderror
                        <p class="form-hint">Manage links under <a href="{{ route('bitly.index') }}" class="underline">Bitly links</a>.</p>
                    </div>
                    <div>
                        <label for="sender_mobile" class="form-label">Executive mobile <span class="font-mono text-xs text-ink-400">{mobile}</span></label>
                        <select name="sender_mobile" id="sender_mobile" x-model="mobile" class="form-input" :disabled="mode !== 'template'">
                            <option value="">— None —</option>
                            @foreach ($senderMobiles as $mobile => $label)
                                <option value="{{ $mobile }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('sender_mobile')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                </div>
                <div>
                    <div class="form-label">Preview</div>
                    <div class="flex gap-3">
                        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ink-200 text-ink-500 dark:bg-ink-700"><x-heroicon-m-user class="h-5 w-5" /></div>
                        <div class="max-w-md rounded-2xl rounded-tl-sm bg-ink-100 px-4 py-2.5 text-sm text-ink-800 dark:bg-ink-800 dark:text-ink-100" x-text="preview || 'Your message preview appears here.'"></div>
                    </div>
                    <p class="form-hint"><span x-text="preview.length"></span> characters · <span x-text="Math.max(1, Math.ceil(preview.length / 160))"></span> SMS part(s) per recipient</p>
                </div>
            </div>
        </form>
        <x-slot:footer>
            <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'import-campaign')">Cancel</button>
            <button form="import-campaign-form" class="btn btn-brand"><x-heroicon-m-arrow-up-tray class="h-4 w-4" /> Import &amp; queue</button>
        </x-slot:footer>
    </x-modal>
</x-layouts.app>