@extends('layouts.master')

@section('title', 'Pairing User Hotspot')
@section('page-title', 'Pairing User Hotspot')

@section('css')
    <link rel="stylesheet" href="{{ URL::asset('/assets/css/pelanggan.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}">
@endsection

@section('content')
    <div class="pelanggan-page">
        <div class="card page-header-card mb-3">
            <div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h4 class="mb-1">Tahap 2: Pairing User Hotspot</h4>
                    <small class="text-muted">Pilih satu router, load user hotspot sekali, lalu pasangkan user ke pelanggan dalam router tersebut.</small>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('pelanggan.hotspot-router-pairing') }}" class="btn btn-outline-success">
                        <i class="bx bx-left-arrow-alt"></i> Kembali Pairing Router
                    </a>
                    <a href="{{ route('pelanggan.hotspot-user-manager') }}" class="btn btn-outline-primary">
                        <i class="bx bx-edit-alt"></i> Kelola User Hotspot
                    </a>
                    <a href="{{ route('pelanggan.hotspot-ip-binding-pairing') }}" class="btn btn-outline-dark">
                        <i class="bx bx-network-chart"></i> Pairing IP Binding
                    </a>
                    <a href="{{ route('pelanggan.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-arrow-back"></i> Kembali
                    </a>
                </div>
            </div>
        </div>

        <div id="pair-toast-wrap" style="position:fixed;top:74px;right:16px;z-index:2000;width:320px;"></div>

        <div class="card mb-3">
            <div class="card-body">
                <form method="get" class="row g-2 align-items-end">
                    <div class="col-md-5">
                        <label class="form-label mb-0">Router MikroTik</label>
                        <select name="mikrotik_server_id" class="form-select" required>
                            @foreach ($servers as $server)
                                <option value="{{ $server->id }}" @selected($selectedServerId == $server->id)>
                                    {{ $server->name }} ({{ $server->host }}:{{ $server->port }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label mb-0">Pencarian Pelanggan</label>
                        <input type="text" class="form-control" name="q" value="{{ $q }}"
                            placeholder="Nama / kode / kecamatan / desa">
                    </div>
                    <div class="col-md-3 d-flex gap-2">
                        <button type="submit" class="btn btn-outline-primary">
                            <i class="bx bx-filter-alt"></i> Tampilkan
                        </button>
                        <button type="button" id="btn-load-users" class="btn btn-outline-info">
                            <i class="bx bx-cloud-download"></i> Load User Router
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card table-card">
            <div class="card-body table-responsive">
                <table class="table table-sm align-middle">
                    <thead>
                        <tr>
                            <th>Pelanggan</th>
                            <th>Tipe</th>
                            <th>Kec/Desa</th>
                            <th>User Terpasang</th>
                            <th style="min-width: 430px;">Pairing User</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($customers as $c)
                            <tr class="user-row"
                                data-customer-id="{{ $c->id }}"
                                data-customer-name="{{ e($c->nama) }}"
                                data-auth-type="{{ (string) ($c->tipe_autentikasi ?? 'hotspot_user') }}"
                                data-current-username="{{ strtolower((string) ($c->hotspot_username ?? '')) }}">
                                <td>
                                    <div class="small fw-semibold">{{ $c->kode_pelanggan ?: '-' }}</div>
                                    <div>{{ $c->nama }}</div>
                                </td>
                                <td style="min-width: 170px;">
                                    <form action="{{ route('pelanggan.hotspot-set-auth-type', $c->id) }}" method="post" class="customer-type-form mb-0">
                                        @csrf
                                        <select name="tipe_autentikasi" class="form-select form-select-sm customer-auth-type-select">
                                            <option value="hotspot_user" @selected(($c->tipe_autentikasi ?? 'hotspot_user') === 'hotspot_user')>Hotspot User</option>
                                            <option value="ip_binding" @selected(($c->tipe_autentikasi ?? 'hotspot_user') === 'ip_binding')>IP Binding</option>
                                        </select>
                                    </form>
                                </td>
                                <td>
                                    <div class="small fw-semibold">{{ $c->kecamatan ?: '-' }}</div>
                                    <div class="small text-muted">{{ $c->desa ?: '-' }}</div>
                                </td>
                                <td class="pair-current-user">
                                    @if ($c->hotspot_username)
                                        <span class="mk-badge mk-badge-success pair-current-user-badge">{{ $c->hotspot_username }}</span>
                                    @else
                                        <span class="mk-badge mk-badge-neutral pair-current-user-badge">Belum dipasangkan</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex flex-wrap gap-2">
                                        <form action="{{ route('pelanggan.hotspot-pair', $c->id) }}" method="post" class="d-flex gap-2 user-pair-form flex-grow-1">
                                            @csrf
                                            <input type="hidden" name="mikrotik_server_id" value="{{ $selectedServerId }}">
                                            <select name="hotspot_username" class="form-select form-select-sm pair-user-select" required data-placeholder="Cari user / comment / profile..."
                                                @disabled(($c->tipe_autentikasi ?? 'hotspot_user') !== 'hotspot_user')>
                                                <option value="">-- Load user router dulu --</option>
                                            </select>
                                            <small class="text-muted pair-user-meta align-self-center"></small>
                                            <button class="btn btn-sm btn-outline-success pair-submit-btn" type="submit"
                                                @disabled(($c->tipe_autentikasi ?? 'hotspot_user') !== 'hotspot_user')>Pasangkan</button>
                                        </form>

                                        <form action="{{ route('pelanggan.hotspot-unpair', $c->id) }}" method="post"
                                            class="pair-unpair-form {{ $c->hotspot_username ? '' : 'd-none' }}"
                                            onsubmit="return confirm('Lepas pairing hotspot untuk pelanggan ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-sm btn-outline-danger" type="submit">Lepas</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-4">Belum ada pelanggan pada router terpilih.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-3">
            {{ $customers->withQueryString()->links() }}
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectedServerId = @json((string)$selectedServerId);
            const loadUrl = @json(route('pelanggan.hotspot-router-users'));
            const csrfToken = @json(csrf_token());
            const toastWrap = document.getElementById('pair-toast-wrap');
            const usersByServer = {};
            const usageByServer = {};

            function normalize(value) {
                return String(value || '').trim().toLowerCase();
            }

            function showToast(message, type = 'info', duration = 2000) {
                if (!toastWrap) return;
                const node = document.createElement('div');
                node.style.cssText = 'border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:12px;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.12);opacity:0;transform:translateY(-8px);transition:all .18s ease;';
                const palette = {
                    success: ['#dff7e6', '#0f5a2a', '#b9ebc8'],
                    danger: ['#fde9eb', '#7b1f28', '#f6c7cd'],
                    info: ['#e8f3ff', '#184c86', '#c9e1ff'],
                    warning: ['#fff5df', '#7a5a12', '#f7dfab']
                };
                const colors = palette[type] || palette.info;
                node.style.background = colors[0];
                node.style.color = colors[1];
                node.style.border = '1px solid ' + colors[2];
                node.textContent = message;
                toastWrap.appendChild(node);
                requestAnimationFrame(() => {
                    node.style.opacity = '1';
                    node.style.transform = 'translateY(0)';
                });
                setTimeout(() => {
                    node.style.opacity = '0';
                    node.style.transform = 'translateY(-8px)';
                    setTimeout(() => node.remove(), 180);
                }, duration);
            }

            function enhanceSelect(row) {
                const userSelect = row.querySelector('.pair-user-select');
                if (!userSelect || typeof window.jQuery === 'undefined' || typeof window.jQuery.fn.select2 !== 'function') return;
                const $s = window.jQuery(userSelect);
                if ($s.hasClass('select2-hidden-accessible')) {
                    $s.select2('destroy');
                }
                $s.select2({
                    width: '260px',
                    placeholder: userSelect.dataset.placeholder || 'Cari user...',
                    allowClear: true
                });
            }

            function renderOptionsForRow(row) {
                const userSelect = row.querySelector('.pair-user-select');
                const meta = row.querySelector('.pair-user-meta');
                if (!userSelect) return;

                const customerId = Number(row.dataset.customerId || 0);
                const currentUsername = normalize(row.dataset.currentUsername || '');
                const users = (usersByServer[selectedServerId] || []).slice();
                const usage = usageByServer[selectedServerId] || {};

                userSelect.innerHTML = '';
                const ph = document.createElement('option');
                ph.value = '';
                ph.textContent = users.length ? '-- Pilih User Hotspot --' : '-- Load user router dulu --';
                userSelect.appendChild(ph);

                let count = 0;
                users.forEach(function(user) {
                    const username = String(user.name || '');
                    if (!username) return;
                    const unameKey = normalize(username);
                    const usedBy = usage[unameKey] || null;
                    const usedByOther = usedBy && Number(usedBy.id || 0) !== customerId;

                    const comment = String(user.comment || '-');
                    const profile = String(user.profile || '-');
                    let label = '[' + comment + '] ' + username + ' (' + profile + ')';
                    if (user.disabled) label += ' [disabled]';
                    if (usedByOther) label += ' (dipakai: ' + String(usedBy.nama || 'lainnya') + ')';

                    const opt = document.createElement('option');
                    opt.value = username;
                    opt.textContent = label;
                    opt.disabled = Boolean(usedByOther);
                    if (unameKey === currentUsername) opt.selected = true;
                    userSelect.appendChild(opt);
                    count++;
                });

                if (meta) meta.textContent = count + ' user';
                enhanceSelect(row);
                togglePairControls(row);
            }

            function togglePairControls(row) {
                const isHotspot = (row.dataset.authType || 'hotspot_user') === 'hotspot_user';
                const userSelect = row.querySelector('.pair-user-select');
                const pairBtn = row.querySelector('.pair-submit-btn');
                const unpairForm = row.querySelector('.pair-unpair-form');
                const meta = row.querySelector('.pair-user-meta');

                if (userSelect) {
                    userSelect.disabled = !isHotspot;
                    if (!isHotspot) {
                        userSelect.value = '';
                    }
                    if (typeof window.jQuery !== 'undefined' && typeof window.jQuery.fn.select2 === 'function') {
                        window.jQuery(userSelect).trigger('change.select2');
                    }
                }
                if (pairBtn) pairBtn.disabled = !isHotspot;
                if (meta && !isHotspot) {
                    meta.textContent = 'Mode IP Binding';
                }
                if (unpairForm && !isHotspot) {
                    unpairForm.classList.add('d-none');
                }
            }

            function renderAllRows() {
                document.querySelectorAll('.user-row').forEach(renderOptionsForRow);
            }

            async function loadUsers() {
                if (!selectedServerId) {
                    showToast('Pilih router terlebih dahulu.', 'warning');
                    return;
                }
                if (usersByServer[selectedServerId]) {
                    renderAllRows();
                    showToast('User router sudah tersedia.', 'info', 1600);
                    return;
                }

                const btn = document.getElementById('btn-load-users');
                const original = btn ? btn.innerHTML : '';
                if (btn) {
                    btn.disabled = true;
                    btn.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i> Loading';
                }
                try {
                    const url = new URL(loadUrl, window.location.origin);
                    url.searchParams.set('mikrotik_server_id', selectedServerId);
                    const res = await fetch(url.toString(), {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    const json = await res.json();
                    if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal load user.');

                    usersByServer[selectedServerId] = Array.isArray(json.users) ? json.users : [];
                    usageByServer[selectedServerId] = json.usage || {};
                    renderAllRows();
                    showToast('User hotspot berhasil dimuat.', 'success', 1700);
                } catch (err) {
                    showToast(err.message || 'Terjadi kesalahan saat load user.', 'danger', 2500);
                } finally {
                    if (btn) {
                        btn.disabled = false;
                        btn.innerHTML = original;
                    }
                }
            }

            function setCurrentBadge(row, username) {
                const badge = row.querySelector('.pair-current-user-badge');
                if (!badge) return;
                if (username) {
                    badge.className = 'mk-badge mk-badge-success pair-current-user-badge';
                    badge.textContent = username;
                } else {
                    badge.className = 'mk-badge mk-badge-neutral pair-current-user-badge';
                    badge.textContent = 'Belum dipasangkan';
                }
            }

            function upsertUsage(username, customerId, customerName) {
                if (!usageByServer[selectedServerId]) usageByServer[selectedServerId] = {};
                usageByServer[selectedServerId][normalize(username)] = {
                    id: Number(customerId),
                    nama: customerName
                };
            }

            function removeUsage(username, customerId) {
                const map = usageByServer[selectedServerId] || {};
                const key = normalize(username);
                if (map[key] && Number(map[key].id) === Number(customerId)) {
                    delete map[key];
                }
            }

            async function submitPair(form, row) {
                if (form.dataset.pairing === '1') return;
                if ((row.dataset.authType || 'hotspot_user') !== 'hotspot_user') {
                    showToast('Pelanggan bertipe IP Binding, pairing hotspot dinonaktifkan.', 'warning', 2200);
                    return;
                }
                const btn = form.querySelector('button[type="submit"]');
                const select = form.querySelector('.pair-user-select');
                if (!select || !select.value) {
                    showToast('Pilih user hotspot terlebih dahulu.', 'warning');
                    return;
                }

                form.dataset.pairing = '1';
                btn.disabled = true;
                try {
                    const payload = new URLSearchParams(new FormData(form));
                    const res = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrfToken,
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        },
                        body: payload.toString()
                    });
                    const json = await res.json();
                    if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal pair user.');

                    const customerId = Number(row.dataset.customerId || 0);
                    const oldUsername = row.dataset.currentUsername || '';
                    removeUsage(oldUsername, customerId);
                    row.dataset.currentUsername = normalize(select.value);
                    upsertUsage(select.value, customerId, row.dataset.customerName || 'Pelanggan');

                    setCurrentBadge(row, select.value);
                    const unpairForm = row.querySelector('.pair-unpair-form');
                    if (unpairForm) unpairForm.classList.remove('d-none');
                    renderAllRows();
                    showToast(json.message || 'Pairing berhasil.', 'success');
                } catch (err) {
                    showToast(err.message || 'Gagal pairing.', 'danger', 2500);
                } finally {
                    form.dataset.pairing = '0';
                    btn.disabled = false;
                }
            }

            function triggerAutoPairBySelect(selectEl) {
                if (!selectEl) return;
                const row = selectEl.closest('.user-row');
                const pairForm = selectEl.closest('.user-pair-form');
                if (!row || !pairForm) return;
                if ((row.dataset.authType || 'hotspot_user') !== 'hotspot_user') return;
                if (!selectEl.value) return;
                if (normalize(selectEl.value) === normalize(row.dataset.currentUsername || '')) return;
                submitPair(pairForm, row);
            }

            async function submitTypeChange(form, row) {
                const select = form.querySelector('.customer-auth-type-select');
                if (!select) return;
                const nextType = select.value;
                const prevType = row.dataset.authType || 'hotspot_user';
                if (nextType === prevType) return;

                select.disabled = true;
                try {
                    const payload = new URLSearchParams();
                    payload.set('_token', csrfToken);
                    payload.set('tipe_autentikasi', nextType);

                    const res = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrfToken,
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        },
                        body: payload.toString()
                    });
                    const json = await res.json();
                    if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal menyimpan tipe pelanggan.');

                    const customerId = Number(row.dataset.customerId || 0);
                    if (nextType === 'ip_binding') {
                        removeUsage(row.dataset.currentUsername || '', customerId);
                        row.dataset.currentUsername = '';
                        setCurrentBadge(row, '');
                    }

                    row.dataset.authType = nextType;
                    togglePairControls(row);
                    renderAllRows();
                    showToast(json.message || 'Tipe pelanggan berhasil disimpan.', 'success', 1700);
                } catch (err) {
                    select.value = prevType;
                    showToast(err.message || 'Gagal menyimpan tipe pelanggan.', 'danger', 2500);
                } finally {
                    select.disabled = false;
                }
            }

            async function submitUnpair(form, row) {
                const btn = form.querySelector('button[type="submit"]');
                btn.disabled = true;
                try {
                    const payload = new URLSearchParams();
                    payload.set('_token', csrfToken);
                    payload.set('_method', 'DELETE');

                    const res = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrfToken,
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        },
                        body: payload.toString()
                    });
                    const json = await res.json();
                    if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal lepas pairing.');

                    const customerId = Number(row.dataset.customerId || 0);
                    removeUsage(row.dataset.currentUsername || '', customerId);
                    row.dataset.currentUsername = '';
                    setCurrentBadge(row, '');
                    form.classList.add('d-none');
                    renderAllRows();
                    showToast(json.message || 'Pairing dilepas.', 'success');
                } catch (err) {
                    showToast(err.message || 'Gagal lepas pairing.', 'danger', 2500);
                } finally {
                    btn.disabled = false;
                }
            }

            const loadBtn = document.getElementById('btn-load-users');
            if (loadBtn) {
                loadBtn.addEventListener('click', loadUsers);
            }

            document.addEventListener('change', function(e) {
                const target = e.target;
                if (!(target instanceof HTMLSelectElement)) return;
                if (!target.classList.contains('pair-user-select')) return;
                triggerAutoPairBySelect(target);
            });

            if (typeof window.jQuery !== 'undefined' && typeof window.jQuery.fn.select2 === 'function') {
                window.jQuery(document).on('select2:select', '.pair-user-select', function() {
                    triggerAutoPairBySelect(this);
                });
            }

            document.querySelectorAll('.user-row').forEach(function(row) {
                const pairForm = row.querySelector('.user-pair-form');
                const unpairForm = row.querySelector('.pair-unpair-form');
                const typeForm = row.querySelector('.customer-type-form');
                togglePairControls(row);
                if (pairForm) {
                    pairForm.addEventListener('submit', function(e) {
                        e.preventDefault();
                        submitPair(pairForm, row);
                    });
                }
                if (unpairForm) {
                    unpairForm.addEventListener('submit', function(e) {
                        e.preventDefault();
                        submitUnpair(unpairForm, row);
                    });
                }
                if (typeForm) {
                    const typeSelect = typeForm.querySelector('.customer-auth-type-select');
                    if (typeSelect) {
                        typeSelect.addEventListener('change', function() {
                            submitTypeChange(typeForm, row);
                        });
                    }
                }
            });
        });
    </script>
@endsection