@extends('root')
@section('title', 'WABA Pool Integration')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            @include('components.breadcrumb', [
                'title' => 'WABA Integration (Pool)',
                'links' => [['url' => route('admin.dashboard'), 'label' => 'Dashboard']],
                'current' => 'WABA Pool'
            ])
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card h-100">
                <div class="card-header bg-purple-subtle d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0 text-purple">
                        <i class="ti ti-brand-facebook me-2"></i>Admin Pool Management
                    </h5>
                    <button type="button" class="btn btn-primary" id="btnAddWaba">
                        <i class="ti ti-plus me-1"></i>Connect New WABA
                    </button>
                </div>
                <div class="card-body">
                    <p class="mb-2">
                        Hubungkan WhatsApp Business Account baru untuk dijadikan pool. Jika pilih client di bawah, setelah connect WABA akan langsung di-assign ke client tersebut dan paket client di-upgrade ke <strong>Dedicated</strong>.
                    </p>
                    <div class="row align-items-end mb-2">
                        <div class="col-md-4">
                            <label class="form-label small mb-1">Assign ke client setelah connect (opsional)</label>
                            <select class="form-select form-select-sm" id="connect_assign_client_id">
                                <option value="">Hanya masuk Pool / Assign nanti</option>
                                @foreach(\App\Models\Client::orderBy('name')->get() as $c)
                                    <option value="{{ $c->id }}">{{ $c->name }} ({{ $c->email }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="alert alert-info small mb-0">
                        <i class="ti ti-info-circle me-1"></i>
                        <strong>Flow:</strong> Connect WABA (FB Login) &rarr; Masuk Pool atau langsung Assign + Dedicated. Jika nomor belum terverifikasi, gunakan tombol <strong>Approve</strong> (PIN dari Meta) lalu pilih client untuk auto-assign.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- WABA List -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="ti ti-brand-whatsapp me-2"></i>Daftar WABA Pool
            </h5>
        </div>
        <div class="card-body">
            @if($wabas->isEmpty())
                <div class="text-center py-5">
                    <span class="avatar avatar-xl bg-light mb-3">
                        <i class="ti ti-device-mobile-off fs-1 text-muted"></i>
                    </span>
                    <h5 class="text-muted">Belum ada WABA di Pool</h5>
                    <p class="text-muted">Hubungkan WABA baru menggunakan tombol di atas.</p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>Akun WABA</th>
                                <th>Nomor & Phone ID</th>
                                <th>Assigned To</th>
                                <th>Status</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($wabas as $waba)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <span class="avatar avatar-md bg-success-subtle text-success me-3">
                                            <i class="ti ti-brand-whatsapp fs-5"></i>
                                        </span>
                                        <div>
                                            <h6 class="mb-0">{{ $waba->account_name ?: 'Unknown' }}</h6>
                                            <small class="text-muted">ID: {{ $waba->waba_id }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <strong>{{ $waba->phone_number ?: '-' }}</strong>
                                    <br><small class="text-muted">PID: {{ Str::limit($waba->phone_number_id, 15) }}</small>
                                </td>
                                <td>
                                    @if($waba->client)
                                        <span class="badge bg-success">
                                            <i class="ti ti-user me-1"></i>{{ $waba->client->name }}
                                        </span>
                                        <div class="small text-muted mt-1">{{ $waba->client->email }}</div>
                                    @else
                                        <span class="badge bg-warning text-dark">
                                            <i class="ti ti-database me-1"></i>Pool / Unassigned
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                        // Use code_verification_status from raw_meta_response as primary source
                                        $codeVerificationStatus = null;
                                        $phoneStatus = null;
                                        $rawResponse = $waba->raw_meta_response ?? [];
                                        
                                        if (isset($rawResponse['phone']['code_verification_status'])) {
                                            $codeVerificationStatus = strtoupper($rawResponse['phone']['code_verification_status']);
                                        }
                                        
                                        if (isset($rawResponse['phone']['status'])) {
                                            $phoneStatus = strtoupper($rawResponse['phone']['status']);
                                        }
                                        
                                        // Determine final status based on code_verification_status
                                        if ($codeVerificationStatus === 'VERIFIED') {
                                            $finalStatus = 'verified';
                                            $statusLabel = 'Verified';
                                        } elseif ($codeVerificationStatus === 'UNVERIFIED') {
                                            $finalStatus = 'unverified';
                                            $statusLabel = 'Unverified';
                                        } elseif ($codeVerificationStatus === 'PENDING') {
                                            $finalStatus = 'pending';
                                            $statusLabel = 'Pending';
                                        } elseif ($phoneStatus === 'CONNECTED' || $phoneStatus === 'REGISTERED') {
                                            // If phone is connected/registered but no code_verification_status, show Registered
                                            $finalStatus = 'registered';
                                            $statusLabel = 'Registered';
                                        } elseif ($waba->phone_status === 'active' || $waba->phone_status === 'REGISTERED') {
                                            $finalStatus = 'registered';
                                            $statusLabel = 'Registered';
                                        } elseif ($waba->phone_status === 'pending' || $waba->phone_status === 'PENDING') {
                                            $finalStatus = 'pending';
                                            $statusLabel = 'Pending';
                                        } elseif ($waba->status === 'active') {
                                            $finalStatus = 'active';
                                            $statusLabel = 'Active';
                                        } else {
                                            $finalStatus = 'pending';
                                            $statusLabel = 'Pending';
                                        }
                                        
                                        $statusClass = match($finalStatus) {
                                            'verified', 'registered', 'active' => 'bg-success-subtle text-success',
                                            'pending', 'unverified' => 'bg-warning-subtle text-warning',
                                            default => 'bg-secondary'
                                        };
                                    @endphp
                                    <span class="badge {{ $statusClass }}">
                                        {{ $statusLabel }}
                                    </span>
                                    @if($codeVerificationStatus)
                                        <div class="small text-muted mt-1">
                                            Code: {{ $codeVerificationStatus }}
                                        </div>
                                    @endif
                                    @if($phoneStatus && $phoneStatus !== 'UNKNOWN')
                                        <div class="small text-muted mt-1">
                                            Status: {{ $phoneStatus }}
                                        </div>
                                    @endif
                                    @if($waba->last_meta_sync_at)
                                        <div class="small text-muted mt-1">
                                            Synced: {{ $waba->last_meta_sync_at->diffForHumans() }}
                                        </div>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-1">
                                        <button type="button" class="btn btn-sm btn-outline-info btn-sync-status"
                                            data-id="{{ $waba->id }}"
                                            title="Sync Status">
                                            <i class="ti ti-refresh"></i>
                                        </button>

                                        <button type="button" class="btn btn-sm btn-outline-primary btn-approve-waba"
                                            data-id="{{ $waba->id }}"
                                            data-name="{{ $waba->account_name }}"
                                            title="Approve / Register (PIN)">
                                            <i class="ti ti-check"></i>
                                        </button>

                                        <button type="button" class="btn btn-sm btn-outline-success btn-test-send"
                                            data-id="{{ $waba->id }}"
                                            data-phone="{{ $waba->phone_number }}"
                                            data-access-token="{{ ($waba->isOauth() || $waba->isSelfService()) ? '(System Managed Token)' : $waba->getActiveToken() }}"
                                            data-waba-meta-id="{{ $waba->waba_id }}"
                                            data-phone-id="{{ $waba->phone_number_id }}"
                                            title="Test Kirim Pesan">
                                            <i class="ti ti-send"></i>
                                        </button>

                                        @if($waba->isOauth() && !empty($waba->oauth_access_token))
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-disconnect-waba"
                                            data-id="{{ $waba->id }}"
                                            data-name="{{ $waba->account_name }}"
                                            title="Disconnect WABA">
                                            <i class="ti ti-unlink"></i>
                                        </button>
                                        @endif

                                        @if(!$waba->client_id)
                                        <button type="button" class="btn btn-sm btn-outline-primary btn-assign-client"
                                            data-id="{{ $waba->id }}"
                                            data-name="{{ $waba->account_name }}"
                                            title="Assign to Client">
                                            <i class="ti ti-user-plus"></i>
                                        </button>
                                        @else
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-unassign-client"
                                            data-id="{{ $waba->id }}"
                                            data-client="{{ $waba->client->name }}"
                                            title="Unassign Client">
                                            <i class="ti ti-user-minus"></i>
                                        </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal Assign Client -->
<div class="modal fade" id="modalAssignClient" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Assign WABA to Client</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formAssignClient">
                    <input type="hidden" name="waba_id" id="assignWabaId">
                    <div class="mb-3">
                        <label class="form-label">Pilih Client</label>
                        <!-- Using simple select, in real app might need AJAX search -->
                        <select class="form-select" name="client_id" required>
                            <option value="">Pilih Client...</option>
                            @foreach(\App\Models\Client::all() as $c)
                                <option value="{{ $c->id }}">{{ $c->name }} ({{ $c->email }})</option>
                            @endforeach
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="btnConfirmAssign">Assign</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Approve / Register WABA (PIN) -->
<div class="modal fade" id="modalApprove" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary-subtle">
                <h5 class="modal-title text-primary">
                    <i class="ti ti-check me-2"></i>Approve / Register WABA
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="mb-3">Masukkan <strong>kode PIN 6 digit</strong> dari Meta untuk mendaftarkan/approve nomor WhatsApp Business.</p>
                <p class="text-muted small mb-3">WABA: <strong id="approveWabaName"></strong></p>
                <div class="mb-3">
                    <label for="approvePin" class="form-label">PIN (6 digit)</label>
                    <input type="text" class="form-control form-control-lg text-center" id="approvePin" name="pin"
                        placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" autocomplete="one-time-code">
                    <div class="form-text">Kode PIN dikirim oleh Meta ke nomor telepon WABA.</div>
                </div>
                <div class="mb-3">
                    <label for="approve_assign_client_id" class="form-label small">Setelah approve, assign ke client (opsional)</label>
                    <select class="form-select" id="approve_assign_client_id">
                        <option value="">Tidak assign</option>
                        @foreach(\App\Models\Client::orderBy('name')->get() as $c)
                            <option value="{{ $c->id }}">{{ $c->name }} ({{ $c->email }})</option>
                        @endforeach
                    </select>
                    <div class="form-text">Jika dipilih, WABA akan di-assign ke client dan paket client di-upgrade ke Dedicated.</div>
                </div>
                <input type="hidden" id="approveWabaId" name="waba_pool_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="btnConfirmApprove">
                    <i class="ti ti-check me-1"></i>Approve
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Disconnect WABA -->
<div class="modal fade" id="modalDisconnect" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Disconnect WABA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin memutuskan koneksi WABA <strong id="disconnectWabaName"></strong>?</p>
                <p class="text-muted small mb-0">Tindakan ini akan menghapus token OAuth dan memutuskan koneksi dengan Meta. WABA tidak akan bisa digunakan untuk mengirim pesan setelah ini.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="btnConfirmDisconnect">
                    <i class="ti ti-unlink me-1"></i>Ya, Disconnect
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Test Send Message Modal -->
<div class="modal fade" id="modalTestSend" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success-subtle">
                <h5 class="modal-title text-success">
                    <i class="ti ti-send me-2"></i>Test Kirim Pesan
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formTestSend">
                    <div class="row mb-3">
                        <div class="col-6">
                            <label class="form-label text-muted small mb-1">WABA ID</label>
                            <input type="text" class="form-control bg-light" id="testWabaMetaId" name="waba_id" readonly style="font-family: monospace;">
                        </div>
                        <div class="col-6">
                            <label class="form-label text-muted small mb-1">Phone Number ID</label>
                            <input type="text" class="form-control bg-light" id="testPhoneId" name="phone_number_id" readonly style="font-family: monospace;">
                        </div>
                    </div>
                    
                    <hr class="my-3">

                    <!-- Manual Input Template -->
                    <div class="row mb-3">
                        <div class="col-8">
                            <label for="testTemplateName" class="form-label">Nama Template <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="testTemplateName" name="template_name" value="hello_world" required>
                            <div class="form-text">Contoh: hello_world</div>
                        </div>
                        <div class="col-4">
                            <label for="testLanguageCode" class="form-label">Lang Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="testLanguageCode" name="language_code" value="en_US" required>
                            <div class="form-text">Ex: en_US, id</div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="testPhoneNumber" class="form-label">Nomor WhatsApp Tujuan <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="testPhoneNumber" name="phone_number" 
                            placeholder="628123456789" pattern="[0-9]{10,15}" required>
                        <div class="form-text">Format: Nomor internasional tanpa + (contoh: 628123456789)</div>
                    </div>
                    <input type="hidden" id="testWabaId" name="waba_pool_id">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-success" id="btnConfirmTestSend">
                    <i class="ti ti-send me-1"></i>Kirim Test
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="modalLoading" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-body text-center py-5">
                <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;" role="status"></div>
                <h6 class="mb-2" id="loadingMessage">Processing...</h6>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Variables
var metaState = null;
var metaRedirectUri = null;
var embeddedSignupSession = null; // SOURCE OF TRUTH for waba_id
var isProcessingOAuth = false;
var currentOAuthCode = null;

// Facebook SDK Init (Robust)
const initFacebook = function() {
    if (typeof FB !== 'undefined') {
        FB.init({
            appId: '{{ $metaAppId }}',
            cookie: true,
            xfbml: true,
            version: '{{ $metaConfigVersion }}'
        });
        enableLoginButtons();
    }
};

window.fbAsyncInit = initFacebook;

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        if (typeof FB !== 'undefined') initFacebook();
        return;
    }
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function enableLoginButtons() {
    $('#btnAddWaba').prop('disabled', false);
}

// ═══════════════════════════════════════════════════════════════════
// WA_EMBEDDED_SIGNUP Event Listener - SOURCE OF TRUTH
// ═══════════════════════════════════════════════════════════════════
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://www.facebook.com' && event.origin !== 'https://web.facebook.com') return;
    try {
        var data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
        if (data.type === 'WA_EMBEDDED_SIGNUP') {
            console.log('🎯 WA_EMBEDDED_SIGNUP Received:', data.data);
            embeddedSignupSession = {
                waba_id: data.data?.waba_id,
                phone_number_id: data.data?.phone_number_id,
                business_id: data.data?.current_business_id || data.data?.business_id,
                waba_name: data.data?.waba_name
            };
            // Wait for FB.login callback to submit with code
            showLoading('WABA Created. Waiting for authorization code...');
        }
    } catch (e) {}
});

$(document).ready(function() {
    // If FB exists (race condition), init
    if (typeof FB !== 'undefined') initFacebook();
    
    // Fetch State & Config
    fetchMetaConfig();

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

    // Show Loading
    window.showLoading = function(msg) {
        $('#loadingMessage').text(msg);
        $('#modalLoading').modal('show');
    }
    window.hideLoading = function() {
        $('#modalLoading').modal('hide');
    }

    // --- CONNECT WABA ---
    $('#btnAddWaba').click(function() {
        if (!metaState) {
            alert('Meta config not ready. Refresh page.');
            return;
        }
        launchEmbeddedSignup();
    });

    // --- OTHER HANDLERS ---
    $('.btn-sync-status').click(function() {
        let id = $(this).data('id');
        showLoading('Syncing Status...');
        $.post('{{ route("admin.waba-integration.index") }}/' + id + '/sync-status', {_token: csrfToken})
        .done(function(res) { hideLoading(); alert(res.message); location.reload(); })
        .fail(function(xhr) { hideLoading(); alert('Gagal: ' + (xhr.responseJSON?.message || 'Error')); });
    });

    // Approve / Register WABA (PIN)
    $('.btn-approve-waba').click(function() {
        var id = $(this).data('id');
        var name = $(this).data('name');
        $('#approveWabaId').val(id);
        $('#approveWabaName').text(name || 'WABA #' + id);
        $('#approvePin').val('');
        $('#approve_assign_client_id').val('');
        $('#modalApprove').modal('show');
        setTimeout(function() { $('#approvePin').focus(); }, 300);
    });

    $('#btnConfirmApprove').on('click', function() {
        var id = $('#approveWabaId').val();
        var pin = $('#approvePin').val().replace(/\D/g, '');
        if (!id) return;
        if (pin.length !== 6) {
            alert('PIN harus 6 digit.');
            return;
        }
        var btn = $(this);
        var originalHtml = btn.html();
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i>Processing...');
        $.ajax({
            url: '{{ route("admin.waba-integration.index") }}/' + id + '/approve',
            type: 'POST',
            data: {
                _token: csrfToken,
                pin: pin,
                client_id: $('#approve_assign_client_id').val() || ''
            },
            success: function(res) {
                if (res.success) {
                    alert(res.message);
                    $('#modalApprove').modal('hide');
                    location.reload();
                } else {
                    alert(res.message || 'Gagal approve');
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Terjadi kesalahan';
                alert(msg);
            },
            complete: function() {
                btn.prop('disabled', false).html(originalHtml);
            }
        });
    });

    $('.btn-assign-client').click(function() {
        $('#assignWabaId').val($(this).data('id'));
        $('#modalAssignClient').modal('show');
    });

    $('#btnConfirmAssign').click(function() {
        let id = $('#assignWabaId').val();
        let clientId = $('select[name="client_id"]').val();
        if(!clientId) return alert('Pilih client');
        
        $('#modalAssignClient').modal('hide');
        showLoading('Assigning...');
        
        $.post('{{ route("admin.waba-integration.index") }}/' + id + '/assign-client', {
            _token: csrfToken, client_id: clientId
        }).done(function(res) { hideLoading(); alert(res.message); location.reload(); })
        .fail(function(xhr) { hideLoading(); alert('Gagal: ' + (xhr.responseJSON?.message || 'Error')); });
    });

    $('.btn-unassign-client').click(function() {
        if(confirm('Unassign client?')) {
            showLoading('Unassigning...');
            $.post('{{ route("admin.waba-integration.index") }}/' + $(this).data('id') + '/unassign-client', {_token: csrfToken})
            .done(function(res) { hideLoading(); alert(res.message); location.reload(); })
            .fail(function(xhr) { hideLoading(); alert('Gagal: ' + (xhr.responseJSON?.message || 'Error')); });
        }
    });

    // Test Send Handler - Open Modal
    $(document).on('click', '.btn-test-send', function() {
        var btn = $(this);
        var id = btn.data('id');
        
        // Populate fields from data attributes
        $('#testWabaId').val(id);
        $('#testWabaMetaId').val(btn.data('waba-meta-id'));
        $('#testPhoneId').val(btn.data('phone-id'));
        
        // Reset manual inputs
        $('#testPhoneNumber').val('');
        $('#testTemplateName').val('hello_world'); // Default value
        $('#testLanguageCode').val('en_US'); // Default value
        
        $('#modalTestSend').modal('show');
    });

    // Test Send Confirmation
    $('#btnConfirmTestSend').on('click', function() {
        var btn = $(this);
        var id = $('#testWabaId').val();
        var phoneNumber = $('#testPhoneNumber').val().replace(/[^0-9]/g, '');
        var templateName = $('#testTemplateName').val();
        var languageCode = $('#testLanguageCode').val();

        if (!phoneNumber || phoneNumber.length < 10) {
            alert('Masukkan nomor WhatsApp yang valid');
            return;
        }

        if (!templateName) {
            alert('Nama template wajib diisi');
            return;
        }

        if (!languageCode) {
            alert('Language code wajib diisi');
            return;
        }

        var originalHtml = btn.html();
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i>Mengirim...');

        $.ajax({
            url: '{{ route("admin.waba-integration.index") }}/' + id + '/test-send',
            type: 'POST',
            data: {
                _token: csrfToken,
                phone_number: phoneNumber,
                access_token: null, // System managed token
                waba_id: $('#testWabaMetaId').val(),
                phone_number_id: $('#testPhoneId').val(),
                template_name: templateName,
                language_code: languageCode
            },
            success: function(response) {
                if(response.success) {
                    alert(response.message || 'Pesan test berhasil dikirim!');
                    $('#modalTestSend').modal('hide');
                } else {
                    alert(response.message || 'Gagal mengirim pesan');
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.message || 'Terjadi kesalahan server';
                alert(msg);
            },
            complete: function() {
                btn.prop('disabled', false).html(originalHtml);
            }
        });
    });

    // Disconnect WABA
    $('.btn-disconnect-waba').click(function() {
        let id = $(this).data('id');
        let name = $(this).data('name');
        $('#disconnectWabaName').text(name || 'WABA #' + id);
        $('#btnConfirmDisconnect').data('id', id);
        $('#modalDisconnect').modal('show');
    });

    $('#btnConfirmDisconnect').click(function() {
        let id = $(this).data('id');
        if (!id) return;
        
        $(this).prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i>Processing...');
        showLoading('Disconnecting WABA...');
        
        $.post('{{ route("admin.waba-integration.index") }}/' + id + '/disconnect', {
            _token: csrfToken
        })
        .done(function(res) {
            hideLoading();
            if (res.success) {
                alert(res.message);
                location.reload();
            } else {
                alert('Gagal: ' + (res.message || 'Error'));
            }
        })
        .fail(function(xhr) {
            hideLoading();
            alert('Gagal: ' + (xhr.responseJSON?.message || 'Error'));
        })
        .always(function() {
            $('#btnConfirmDisconnect').prop('disabled', false).html('<i class="ti ti-unlink me-1"></i>Ya, Disconnect');
            $('#modalDisconnect').modal('hide');
        });
    });
});

// FUNCTIONS
function fetchMetaConfig() {
    $.get('{{ route("admin.waba-integration.meta-config") }}')
    .done(function(res) {
        if(res.success) {
            metaState = res.data.state;
            metaRedirectUri = res.data.redirect_uri;
            console.log('Meta Config Loaded:', res.data);
        }
    });
}

function launchEmbeddedSignup() {
    if (isProcessingOAuth) return;
    isProcessingOAuth = true;
    embeddedSignupSession = null;
    
    // Config ID from View Variable (or could use fetched config)
    var configId = '{{ $metaConfigId ?? "" }}';
    if(!configId) {
        alert('Config ID missing');
        isProcessingOAuth = false;
        return;
    }

    // Set redirect URI
    var currentPageUri = window.location.origin + window.location.pathname;
    window.oauthRedirectUri = (currentPageUri && currentPageUri.trim() !== '') ? currentPageUri.trim() : '';

    showLoading('Launching Facebook Login...');

    FB.login(function(response) {
        console.log('FB Login Response:', response);
        if (response.authResponse) {
            handleEmbeddedSignupResponse(response);
        } else {
            isProcessingOAuth = false;
            hideLoading();
        }
    }, {
        config_id: configId,
        response_type: 'code',
        override_default_response_type: true,
        extras: {
            setup: {},
            sessionInfoVersion: 2
        }
    });
}

function handleEmbeddedSignupResponse(response) {
    var authCode = null;
    var accessToken = null;

    if (response.authResponse) {
        accessToken = response.authResponse.accessToken; // Fallback
        authCode = response.authResponse.code;
    }
    // Also check extras logic if needed (simplified here)
    
    // Check embeddedSignupSession (Source of Truth)
    if (embeddedSignupSession && embeddedSignupSession.waba_id) {
        submitWabaLinking(embeddedSignupSession, authCode, accessToken);
        return;
    }

    // Fallback: Extract from FB response if event missed
    if (response.authResponse && response.authResponse.waba_id) {
         var fallbackSession = {
            waba_id: response.authResponse.waba_id,
            phone_number_id: response.authResponse.phone_number_id
         };
         submitWabaLinking(fallbackSession, authCode, accessToken);
         return;
    }
    
    console.error('No WABA ID found');
    isProcessingOAuth = false;
    hideLoading();
    alert('Embedded Signup incomplete (No WABA ID)');
}

function submitWabaLinking(sessionInfo, code, accessToken) {
    showLoading('Connecting WABA to Pool...');
    
    // Redirect URI
    var redirectUri = window.oauthRedirectUri || '';

    $.ajax({
        url: '{{ route("admin.waba-integration.handle-embedded-signup-v2") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            waba_id: sessionInfo.waba_id,
            phone_number_id: sessionInfo.phone_number_id,
            business_id: sessionInfo.business_id,
            waba_name: sessionInfo.waba_name,
            code: code,
            access_token: accessToken,
            redirect_uri: redirectUri,
            client_id: $('#connect_assign_client_id').val() || ''
        },
        success: function(res) {
            isProcessingOAuth = false;
            hideLoading();
            alert(res.message);
            location.reload();
        },
        error: function(xhr) {
            isProcessingOAuth = false;
            hideLoading();
            alert('Error: ' + (xhr.responseJSON?.message || 'Unknown'));
        }
    });
}
</script>
@endpush