@extends('app-admin.layout')
@section('title', 'System Devices — Wavora Admin')
@section('page-title', 'System Devices')
@section('page-sub', 'Manage WhatsApp devices for platform notifications (OTP, etc.)')

@section('topbar-actions')
    <button class="btn btn-apple btn-sm" onclick="showAddDeviceModal()">
        <span class="ms">add</span> Add System Device
    </button>
@endsection

@section('content')

@if(session('success'))
<div style="background:#d1fae5;border:1px solid #a7f3d0;border-radius:10px;padding:12px 14px;margin-bottom:16px;display:flex;gap:8px;align-items:center">
    <span class="ms" style="color:#059669">check_circle</span>
    <span style="font-size:13px;color:#065f46">{{ session('success') }}</span>
</div>
@endif

<div class="card">
    <div class="card-title">System Devices <span class="badge badge-blue">{{ $devices->total() }}</span></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Label</th><th>Phone</th><th>Plan</th><th>Status</th><th>Action</th></tr></thead>
            <tbody>
            @forelse($devices as $d)
            <tr>
                <td>
                    <div style="display:flex;align-items:center;gap:8px">
                        <div style="width:28px;height:28px;border-radius:8px;background:var(--frost);display:grid;place-items:center">
                            <span class="ms" style="font-size:15px;color:var(--muted)">smartphone</span>
                        </div>
                        <div>
                            <div style="font-weight:500">{{ $d->label ?? $d->name ?? 'Device' }}</div>
                            <div class="td-mono" style="font-size:11px;color:var(--muted)">{{ $d->gowa_device_id ?? $d->id }}</div>
                        </div>
                    </div>
                </td>
                <td class="td-mono">{{ $d->phone_number ?? $d->phone ?? '—' }}</td>
                <td>
                    <span class="badge badge-apple">Bebas</span>
                </td>
                <td>
                    @php $s = $d->status ?? 'unknown'; @endphp
                    <span class="badge {{ $s==='connected'?'badge-green':($s==='disconnected'?'badge-red':'badge-gray') }}">{{ $s }}</span>
                </td>
                <td>
                    <div style="display:flex;gap:6px;flex-wrap:wrap">
                        <button class="btn btn-ghost btn-sm" onclick="checkDeviceStatus('{{ $d->id }}')">
                            <span class="ms">sync</span> Status
                        </button>
                        @if($s !== 'connected')
                            <button class="btn btn-outline btn-sm" onclick="connectDevice('{{ $d->id }}')">
                                <span class="ms">qr_code</span> Connect
                            </button>
                        @else
                            <button class="btn btn-ghost btn-sm" style="color:var(--red)" onclick="revokeDevice('{{ $d->id }}')">
                                <span class="ms">power_settings_new</span> Revoke
                            </button>
                        @endif
                        <button class="btn btn-ghost btn-sm" style="color:var(--red)" onclick="deleteDevice('{{ $d->id }}')">
                            <span class="ms">delete</span> Delete
                        </button>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="5"><div class="empty"><span class="ms">smartphone</span><p>No system devices</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($devices->hasPages())
    <div style="padding:12px 0 0;display:flex;gap:8px;flex-wrap:wrap">{{ $devices->links() }}</div>
    @endif
</div>

<style>
.swal2-confirm {
    color: #111827 !important;
}
</style>

<script>
function showAddDeviceModal() {
    Swal.fire({
        title: 'Add System Device',
        html: `
            <div style="text-align:left">
                <div class="form-group">
                    <label class="form-label">Device Name</label>
                    <input id="swal-name" class="form-input" placeholder="e.g. OTP Sender">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Phone Number</label>
                    <input id="swal-phone" class="form-input" placeholder="e.g. 628123456789">
                </div>
            </div>
        `,
        focusConfirm: false,
        showCancelButton: true,
        confirmButtonText: 'Save',
        confirmButtonColor: '#bfff5a',
        preConfirm: () => {
            const name = document.getElementById('swal-name').value;
            const phone = document.getElementById('swal-phone').value;
            
            if (!name || !phone) {
                Swal.showValidationMessage('Semua field harus diisi');
                return false;
            }
            return { name, phone_number: phone };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("app-admin.system-devices.store") }}';
            
            const csrf = document.createElement('input');
            csrf.type = 'hidden';
            csrf.name = '_token';
            csrf.value = '{{ csrf_token() }}';
            form.appendChild(csrf);
            
            for (const key in result.value) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = result.value[key];
                form.appendChild(input);
            }
            
            document.body.appendChild(form);
            form.submit();
        }
    });
}

const csrfToken = '{{ csrf_token() }}';

function checkDeviceStatus(id) {
    Swal.fire({title: 'Cek status...', allowOutsideClick: false, didOpen: () => Swal.showLoading()});
    fetch(`/app-admin/wa-devices/${id}/status`)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    icon: data.data.is_logged_in ? 'success' : 'info',
                    title: 'Status Device',
                    html: `<div style="text-align:left;font-size:13px;line-height:1.7">
                        <b>Status:</b> ${data.data.status}<br>
                        <b>Connected:</b> ${data.data.is_connected ? 'Ya' : 'Tidak'}<br>
                        <b>Logged in:</b> ${data.data.is_logged_in ? 'Ya' : 'Tidak'}
                    </div>`,
                    confirmButtonColor: '#bfff5a',
                }).then(() => window.location.reload());
            } else {
                Swal.fire({icon: 'error', title: 'Gagal', text: 'Gagal cek status device.', confirmButtonColor: '#bfff5a'});
            }
        })
        .catch(() => Swal.fire({icon: 'error', title: 'Error', text: 'Terjadi kesalahan sistem.', confirmButtonColor: '#bfff5a'}));
}

function revokeDevice(id) {
    Swal.fire({
        icon: 'warning',
        title: 'Revoke device?',
        text: 'Session WhatsApp akan logout dari gateway.',
        showCancelButton: true,
        confirmButtonText: 'Revoke',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#ef4444',
    }).then(result => {
        if (!result.isConfirmed) return;
        fetch(`/app-admin/wa-devices/${id}/revoke`, {method: 'POST', headers: {'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json'}})
            .then(r => r.json())
            .then(data => Swal.fire({icon: data.success ? 'success' : 'error', title: data.success ? 'Revoked' : 'Gagal', text: data.success ? 'Device berhasil direvoke.' : 'Gagal revoke device.', confirmButtonColor: '#bfff5a'}).then(() => window.location.reload()))
            .catch(() => Swal.fire({icon: 'error', title: 'Error', text: 'Terjadi kesalahan sistem.', confirmButtonColor: '#bfff5a'}));
    });
}

function deleteDevice(id) {
    Swal.fire({
        icon: 'warning',
        title: 'Delete device?',
        text: 'Device akan dihapus dari database dan gateway. Aksi ini tidak bisa dibatalkan.',
        showCancelButton: true,
        confirmButtonText: 'Delete',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#ef4444',
    }).then(result => {
        if (!result.isConfirmed) return;
        fetch(`/app-admin/wa-devices/${id}`, {method: 'DELETE', headers: {'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json'}})
            .then(r => r.json())
            .then(data => Swal.fire({icon: data.success ? 'success' : 'error', title: data.success ? 'Deleted' : 'Gagal', text: data.success ? 'Device berhasil dihapus.' : 'Gagal delete device.', confirmButtonColor: '#bfff5a'}).then(() => window.location.reload()))
            .catch(() => Swal.fire({icon: 'error', title: 'Error', text: 'Terjadi kesalahan sistem.', confirmButtonColor: '#bfff5a'}));
    });
}

function connectDevice(id) {
    Swal.fire({
        title: 'Hubungkan WhatsApp',
        text: 'Pilih metode untuk menghubungkan akun WhatsApp Anda:',
        icon: 'question',
        showCancelButton: true,
        showDenyButton: true,
        confirmButtonText: '<span class="ms" style="vertical-align:middle;margin-right:4px">qr_code</span> Scan QR Code',
        denyButtonText: '<span class="ms" style="vertical-align:middle;margin-right:4px">phone_android</span> Kode Pairing (Nomor)',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#bfff5a',
        denyButtonColor: '#3b82f6',
        customClass: {
            confirmButton: 'swal-btn-apple',
            denyButton: 'swal-btn-blue',
        }
    }).then((result) => {
        if (result.isConfirmed) {
            showQrFlow(id);
        } else if (result.isDenied) {
            showPairingCodeFlow(id);
        }
    });
}

function showQrFlow(id) {
    Swal.fire({
        title: 'Menghubungkan...',
        text: 'Mengambil QR code dari gateway',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
            fetch(`/app-admin/wa-devices/${id}/connect`)
                .then(r => r.json())
                .then(data => {
                    if (data.success && data.data.qr) {
                        Swal.fire({
                            title: 'Scan QR Code',
                            html: `
                                <div style="text-align:center">
                                    <p style="font-size:13px;color:var(--muted);margin-bottom:15px">Buka WhatsApp > Perangkat Tertaut > Tautkan Perangkat, lalu scan QR di bawah ini:</p>
                                    <img src="${data.data.qr}" alt="WhatsApp QR Code" style="max-width:100%;border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff;box-shadow:var(--shadow-sm)" onerror="this.style.display='none';this.insertAdjacentHTML('afterend','<div style=&quot;font-size:12px;color:#ef4444;margin-top:10px&quot;>QR berhasil dibuat, tapi gambar tidak bisa dimuat. <a href=&quot;'+this.src+'&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;>Buka QR di tab baru</a></div>')" />
                                </div>
                            `,
                            confirmButtonText: 'Selesai',
                            confirmButtonColor: '#bfff5a',
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: 'Gagal mengambil QR code dari gateway.',
                            confirmButtonColor: '#bfff5a',
                        });
                    }
                })
                .catch(e => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan sistem.',
                        confirmButtonColor: '#bfff5a',
                    });
                });
        }
    });
}

function showPairingCodeFlow(id) {
    Swal.fire({
        title: 'Membuat Kode...',
        text: 'Mengambil kode pairing dari gateway',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
            fetch(`/app-admin/wa-devices/${id}/connect-code`)
                .then(r => r.json())
                .then(data => {
                    if (data.success && data.data.pair_code) {
                        Swal.fire({
                            title: 'Kode Pairing Anda',
                            html: `
                                <div style="text-align:center">
                                    <p style="font-size:13px;color:var(--muted);margin-bottom:15px">Masukkan kode ini pada HP Anda di aplikasi WhatsApp:</p>
                                    <div style="font-size:32px;font-weight:800;letter-spacing:4px;color:var(--blue);background:var(--frost);padding:15px;border-radius:12px;border:1px dashed var(--border);margin-bottom:15px;font-family:monospace">
                                        ${data.data.pair_code}
                                    </div>
                                    <ol style="text-align:left;font-size:12px;color:var(--muted);padding-left:20px;line-height:1.6">
                                        <li>Buka aplikasi WhatsApp di HP Anda.</li>
                                        <li>Ketuk Menu (titik tiga) atau Pengaturan > Perangkat Tertaut.</li>
                                        <li>Ketuk <b>Tautkan Perangkat</b> lalu ketuk <b>Tautkan dengan nomor telepon saja</b>.</li>
                                        <li>Masukkan kode pairing di atas.</li>
                                    </ol>
                                </div>
                            `,
                            confirmButtonText: 'Selesai',
                            confirmButtonColor: '#bfff5a',
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: 'Gagal membuat kode pairing dari gateway.',
                            confirmButtonColor: '#bfff5a',
                        });
                    }
                })
                .catch(e => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan sistem.',
                        confirmButtonColor: '#bfff5a',
                    });
                });
        }
    });
}
</script>

@endsection