@extends('admin.layout')
@section('title', 'Notifikasi')
@section('subtitle', 'Kirim notifikasi ke aplikasi pengguna & mitra')

@section('content')
    <x-flash />

    @unless ($configured)
        {{-- Tanpa kredensial, notifikasi hanya masuk antrean lalu dibuang diam-diam.
             Lebih baik dikatakan di depan daripada admin mengira pesannya terkirim. --}}
        <div class="mb-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
            <span class="font-semibold">Firebase belum dikonfigurasi di server.</span>
            Isi <code class="font-mono">FIREBASE_CREDENTIALS</code> di <code class="font-mono">.env</code> —
            selama kosong, notifikasi tidak akan sampai ke perangkat mana pun.
        </div>
    @endunless

    {{-- Form pencarian berdiri sendiri di luar form kirim: form bersarang tidak
         sah di HTML, jadi kotak carinya ditautkan lewat atribut `form`. --}}
    <form method="GET" action="{{ route('admin.push') }}" id="push-filter">
        @if ($role)<input type="hidden" name="role" value="{{ $role }}">@endif
    </form>

    <form method="POST" action="{{ route('admin.push.send') }}" class="space-y-4"
          onsubmit="return confirm('Kirim notifikasi ini ke perangkat penerima?')">
        @csrf

        <div class="bg-white rounded-2xl border border-line p-5 space-y-4">
            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="block text-sm font-semibold mb-1.5">Judul</label>
                    <input name="title" value="{{ old('title') }}" required maxlength="80"
                           placeholder="Promo akhir pekan"
                           class="w-full rounded-xl border border-line px-3.5 py-2.5 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">
                    <p class="text-xs text-sub mt-1.5">Maksimal 80 karakter — sistem memotongnya jadi satu baris.</p>
                    @error('title')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold mb-1.5">Penerima</label>
                    <div class="space-y-1.5 text-sm">
                        @foreach ([
                            ['all', 'Semua pengguna', $totals['all']],
                            ['customer', 'Customer saja', $totals['customer']],
                            ['mitra', 'Mitra saja', $totals['mitra']],
                            ['selected', 'Hanya yang dicentang di daftar bawah', null],
                        ] as [$val, $label, $count])
                            <label class="flex items-center gap-2">
                                <input type="radio" name="target" value="{{ $val }}"
                                       @checked(old('target', 'all') === $val) class="accent-brand">
                                <span>{{ $label }}</span>
                                @if ($count !== null)
                                    <span class="text-xs text-sub">({{ number_format($count) }} perangkat aktif)</span>
                                @endif
                            </label>
                        @endforeach
                    </div>
                    @error('target')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>
            </div>

            <div>
                <label class="block text-sm font-semibold mb-1.5">Isi pesan</label>
                <textarea name="body" rows="3" required maxlength="500"
                          placeholder="Tulis isi notifikasi…"
                          class="w-full rounded-xl border border-line px-3.5 py-2.5 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">{{ old('body') }}</textarea>
                @error('body')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="flex flex-wrap items-center gap-2">
                <button class="px-4 py-2.5 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                    Kirim Notifikasi
                </button>
                {{-- Notifikasi hanya muncul di layar perangkat; tidak tersimpan sebagai
                     chat. Untuk pesan yang harus bisa dibaca ulang, pakai Percakapan. --}}
                <span class="text-xs text-sub">
                    Notifikasi tidak tersimpan di aplikasi. Untuk pesan yang bisa dibaca ulang, kirim lewat
                    <a href="{{ route('admin.conversations.create') }}" class="text-brand font-semibold hover:text-brand-dark">Percakapan</a>.
                </span>
            </div>
        </div>

        <div class="bg-white rounded-2xl border border-line overflow-hidden">
            <div class="flex flex-wrap items-center gap-3 px-5 py-4 border-b border-line">
                <div>
                    <h2 class="font-semibold">Bisa menerima notifikasi</h2>
                    <p class="text-xs text-sub">Akun yang sedang masuk di aplikasi dan perangkatnya terdaftar.</p>
                </div>

                <div class="ml-auto flex flex-wrap items-center gap-2">
                    <input form="push-filter" name="q" value="{{ $search }}" placeholder="Cari nama / HP…"
                           class="w-48 max-w-full rounded-lg border border-line px-3 py-1.5 text-xs outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">

                    @foreach ([[null, 'Semua'], ['customer', 'Customer'], ['mitra', 'Mitra']] as [$val, $label])
                        <a href="{{ route('admin.push', array_filter(['role' => $val, 'q' => $search])) }}"
                           class="px-3 py-1.5 rounded-lg text-xs font-semibold transition
                           {{ $role === $val ? 'bg-brand text-white' : 'bg-canvas border border-line text-sub hover:text-brand' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-canvas text-sub text-xs uppercase tracking-wide">
                        <tr>
                            <th class="px-5 py-3 w-10"></th>
                            <th class="text-left font-semibold px-5 py-3">Nama</th>
                            <th class="text-left font-semibold px-5 py-3">No. HP</th>
                            <th class="text-left font-semibold px-5 py-3">Peran</th>
                            <th class="text-left font-semibold px-5 py-3">Perangkat</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-line">
                        @forelse ($recipients as $user)
                            <tr class="hover:bg-canvas transition">
                                <td class="px-5 py-3">
                                    <input type="checkbox" name="user_ids[]" value="{{ $user->id }}"
                                           @checked(in_array($user->id, old('user_ids', []))) class="accent-brand">
                                </td>
                                <td class="px-5 py-3">
                                    <div class="flex items-center gap-3">
                                        <span class="w-8 h-8 rounded-full bg-brand-soft text-brand-dark grid place-items-center text-xs font-bold">{{ $user->initials() }}</span>
                                        <span class="font-semibold">{{ $user->name }}</span>
                                    </div>
                                </td>
                                <td class="px-5 py-3 text-sub">{{ $user->phone }}</td>
                                <td class="px-5 py-3">
                                    <x-badge :color="$user->isMitra() ? 'blue' : 'gray'">
                                        {{ $user->isMitra() ? 'Mitra' : 'Customer' }}
                                    </x-badge>
                                </td>
                                <td class="px-5 py-3">
                                    {{-- Token penuh tidak ditampilkan: panjang, tidak terbaca, dan
                                         cukup 12 karakter terakhir untuk membedakan dua perangkat. --}}
                                    <ul class="space-y-1">
                                        @foreach ($user->deviceTokens as $device)
                                            <li class="flex flex-wrap items-center gap-2 text-xs">
                                                <x-badge :color="$device->platform === 'ios' ? 'gray' : 'blue'">
                                                    {{ $device->platform ? strtoupper($device->platform) : 'Tidak diketahui' }}
                                                </x-badge>
                                                <code class="font-mono text-sub">…{{ substr($device->token, -12) }}</code>
                                                <span class="text-sub" title="{{ $device->updated_at?->format('d M Y H:i') }}">
                                                    aktif {{ $device->updated_at?->diffForHumans() }}
                                                </span>
                                            </li>
                                        @endforeach
                                    </ul>
                                    <p class="text-xs text-sub mt-1">{{ $user->device_tokens_count }} perangkat</p>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-5 py-8 text-center text-sub">
                                    Belum ada pengguna yang perangkatnya terdaftar. Daftar ini terisi setelah
                                    pengguna masuk di aplikasi versi yang sudah memakai notifikasi.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </form>

    <x-pagination :paginator="$recipients" unit="pengguna" />
@endsection