@extends('root')
@section('title', 'WhatsApp Integration')

@section('content')
<div class="container-fluid">
    {{-- Page Header - User Friendly --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('client.dashboard') }}" class="text-muted text-decoration-none">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Integrasi WhatsApp</li>
                </ol>
            </nav>
            <h1 class="h4 mb-1 fw-semibold">
                <i class="ti ti-brand-whatsapp text-success me-2"></i>Integrasi WhatsApp Business
            </h1>
            <p class="text-muted mb-0 small">
                Kelola nomor WhatsApp bisnis Anda dan hubungkan akun untuk mengirim pesan ke pelanggan.
            </p>
        </div>
    </div>

    {{-- Success Banner untuk Self Service upgrade --}}
    @if(session('package_upgraded') || request('upgraded'))
    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
        <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
                <span class="avatar avatar-lg bg-success text-white">
                    <i class="ti ti-check fs-3"></i>
                </span>
            </div>
            <div class="flex-grow-1 ms-3">
                <h5 class="alert-heading mb-1">
                    <i class="ti ti-sparkles me-2"></i>Integrasi Berhasil!
                </h5>
                <p class="mb-0">Akun Anda otomatis menggunakan paket <strong>Self Service</strong>. 
                Anda sekarang dapat mengirim pesan menggunakan WABA Anda sendiri.</p>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    {{-- Success Message dengan Detail WABA --}}
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
        <div class="d-flex align-items-start">
            <div class="flex-shrink-0">
                <span class="avatar avatar-lg bg-success text-white">
                    <i class="ti ti-check fs-3"></i>
                </span>
            </div>
            <div class="flex-grow-1 ms-3">
                <h5 class="alert-heading mb-2">
                    <i class="ti ti-brand-whatsapp me-2"></i>{{ session('success') }}
                </h5>
                @if(session('waba_id'))
                <div class="mb-2">
                    <p class="mb-1"><strong>WABA ID:</strong> <code>{{ session('waba_id') }}</code></p>
                    <p class="mb-0 text-muted small">
                        <i class="ti ti-info-circle me-1"></i>
                        Token berhasil disimpan dan WABA siap digunakan.
                    </p>
                </div>
                @endif
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    {{-- Error Message dengan Detail --}}
    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert">
        <div class="d-flex align-items-start">
            <div class="flex-shrink-0">
                <span class="avatar avatar-lg bg-danger text-white">
                    <i class="ti ti-alert-triangle fs-3"></i>
                </span>
            </div>
            <div class="flex-grow-1 ms-3">
                <h5 class="alert-heading mb-2">
                    <i class="ti ti-x me-2"></i>Gagal Menghubungkan WABA
                </h5>
                <p class="mb-0">{{ session('error') }}</p>
                @if(session('error_code'))
                <p class="mb-0 mt-2">
                    <small class="text-muted">
                        <i class="ti ti-code me-1"></i>Error Code: <code>{{ session('error_code') }}</code>
                    </small>
                </p>
                @endif
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    {{-- Meta Not Configured Warning --}}
    @if(!$isMetaConfigured)
    <div class="alert alert-warning">
        <i class="ti ti-alert-triangle me-2"></i>
        <strong>Facebook Login for Business belum dikonfigurasi.</strong> 
        Hubungi administrator untuk mengaktifkan fitur integrasi WhatsApp.
    </div>
    @endif

    {{-- Connect WhatsApp Business - Prominent CTA untuk Shared/Dedicated (belum Self Service) --}}
    @if(($oauthStatus['allowed'] ?? true) && $isMetaConfigured && $integrationStatus['package_type'] !== 'self_service')
    <div class="card border-0 shadow-sm mb-4 overflow-hidden" style="background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); border-left: 4px solid #25D366 !important;">
        <div class="card-body p-4">
            <div class="row align-items-center g-4">
                <div class="col-lg-8">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="avatar avatar-lg bg-success bg-opacity-10 text-success rounded-circle">
                            <i class="ti ti-brand-whatsapp fs-4"></i>
                        </span>
                        <div>
                            <h5 class="mb-0 fw-semibold">Hubungkan WhatsApp Business</h5>
                            <small class="text-muted">Upgrade ke Self Service dalam beberapa langkah</small>
                        </div>
                    </div>
                    <p class="text-muted mb-3">
                        Hubungkan akun WhatsApp Business Anda melalui Facebook. Proses aman dan otomatis—nomor bisnis Anda siap digunakan untuk chat dengan pelanggan.
                    </p>
                    <div class="d-flex flex-wrap gap-3 small">
                        <span class="d-flex align-items-center text-muted">
                            <i class="ti ti-check text-success me-2"></i>Nomor bisnis milik Anda
                        </span>
                        <span class="d-flex align-items-center text-muted">
                            <i class="ti ti-check text-success me-2"></i>Proses otomatis via Meta
                        </span>
                        <span class="d-flex align-items-center text-muted">
                            <i class="ti ti-check text-success me-2"></i>Token disimpan aman
                        </span>
                    </div>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <button type="button" class="btn btn-success btn-lg px-4 py-3 shadow-sm" id="btnFacebookLogin" disabled>
                        <i class="ti ti-brand-facebook me-2 fs-5"></i>
                        <span id="btnFacebookLoginText">Loading...</span>
                    </button>
                    <p class="text-muted small mt-2 mb-0">Paket otomatis berubah setelah terhubung</p>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Integration Status -->
    <div class="row mb-4">
        <div class="{{ ($oauthStatus['allowed'] ?? true) && $isMetaConfigured && $integrationStatus['package_type'] === 'self_service' ? 'col-md-6' : 'col-md-12' }}">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-light border-0 py-3">
                    <h5 class="card-title mb-0 fw-semibold">
                        <i class="ti ti-chart-dots text-primary me-2"></i>Ringkasan Akun Anda
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-sm-6 col-md-4">
                            <div class="p-3 rounded bg-light h-100">
                                <p class="text-muted small mb-1">Tipe Paket</p>
                                <span class="badge bg-info px-2 py-2">{{ $integrationStatus['package_type_label'] }}</span>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-4">
                            <div class="p-3 rounded bg-light h-100">
                                <p class="text-muted small mb-1">Mode Integrasi</p>
                                <span class="badge bg-secondary px-2 py-2">{{ ucfirst($integrationStatus['integration_mode']) }}</span>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4">
                            <div class="p-3 rounded bg-light h-100">
                                <p class="text-muted small mb-1">Pembayaran</p>
                                @if($integrationStatus['platform_handles_billing'])
                                    <span class="badge bg-info px-2 py-2">Dikelola Platform</span>
                                @else
                                    <span class="badge bg-purple px-2 py-2">Meta Direct</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Facebook Login Card: hanya tampil untuk Self Service (prominent CTA sudah di atas untuk Shared/Dedicated) --}}
        @if(($oauthStatus['allowed'] ?? true) && $isMetaConfigured && $integrationStatus['package_type'] === 'self_service')
        <div class="col-md-6">
            <div class="card h-100 border-0 shadow-sm" style="border-left: 4px solid #25D366 !important;">
                <div class="card-body">
                    <div class="d-flex align-items-start gap-3">
                        <span class="avatar avatar-lg bg-success bg-opacity-10 text-success rounded-circle flex-shrink-0">
                            <i class="ti ti-circle-check fs-4"></i>
                        </span>
                        <div>
                            <h6 class="fw-semibold mb-1 text-success">Self Service Aktif</h6>
                            <p class="text-muted small mb-0">
                                Anda menggunakan nomor bisnis sendiri. Token disimpan aman di platform.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- Activation Status Card (Hidden as per new requirement) --}}
        <div class="col-md-12 mt-3 d-none" id="activationStatusCard">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">
                        <i class="ti ti-clock me-2"></i>Status Aktivasi WhatsApp Business
                    </h5>
                </div>
                <div class="card-body">
                    <div id="activationStatusContent">
                        {{-- Content akan diisi via JavaScript --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- WABA List -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h5 class="card-title mb-0 fw-semibold">
                    <i class="ti ti-phone me-2 text-success"></i>
                    @if($integrationStatus['package_type'] === 'shared')
                        Nomor WhatsApp (Shared Pool)
                    @else
                        Nomor WhatsApp Terhubung
                    @endif
                </h5>
                <p class="text-muted small mb-0 mt-1">
                    @if($integrationStatus['package_type'] === 'shared')
                        Nomor yang tersedia untuk mengirim pesan ke pelanggan
                    @else
                        Daftar nomor bisnis yang terhubung ke akun Anda
                    @endif
                </p>
            </div>
            @if($integrationStatus['package_type'] === 'self_service' && $isMetaConfigured)
            <button type="button" class="btn btn-success btn-sm" id="btnAddWaba">
                <i class="ti ti-plus me-1"></i>Tambah Nomor
            </button>
            @endif
        </div>
        <div class="card-body">
            {{-- Package Shared: Tampilkan list WABA shared pool yang aktif --}}
            @if($integrationStatus['package_type'] === 'shared')
                <div class="alert alert-light border-0 mb-4 rounded-3" style="background: #f8f9fa;">
                    <div class="d-flex align-items-start gap-3">
                        <span class="avatar avatar-lg bg-info bg-opacity-10 text-info rounded-circle flex-shrink-0">
                            <i class="ti ti-users fs-4"></i>
                        </span>
                        <div class="flex-grow-1">
                            <h6 class="mb-1 fw-semibold">Menggunakan Shared Pool</h6>
                            <p class="text-muted mb-2 small">
                                Pesan Anda dikirim melalui nomor WhatsApp bersama yang dikelola platform. Tidak perlu menghubungkan nomor sendiri—langsung bisa kirim pesan.
                            </p>
                            @if($isMetaConfigured)
                            <a href="javascript:void(0)" class="btn btn-sm btn-outline-success" onclick="document.getElementById('btnFacebookLogin') && document.getElementById('btnFacebookLogin').click()">
                                <i class="ti ti-arrow-up me-1"></i>Upgrade ke Self Service
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
                @if($sharedWabas->isNotEmpty())
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>Akun WABA</th>
                                <th>Nomor WhatsApp</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($sharedWabas as $waba)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <span class="avatar avatar-md bg-info-subtle text-info me-3">
                                            <i class="ti ti-brand-whatsapp fs-5"></i>
                                        </span>
                                        <div>
                                            <h6 class="mb-0">{{ $waba->account_name ?: 'WhatsApp Business' }}</h6>
                                            <small class="text-muted">ID: {{ $waba->waba_id }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <strong>{{ $waba->phone_number ?: '-' }}</strong>
                                </td>
                                <td>
                                    <span class="badge bg-success-subtle text-success">
                                        <i class="ti ti-circle-check me-1"></i>Aktif
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-5">
                    <span class="avatar avatar-lg bg-light text-muted rounded-circle d-inline-flex align-items-center justify-content-center mb-3">
                        <i class="ti ti-phone-off fs-4"></i>
                    </span>
                    <p class="text-muted mb-0">Tidak ada nomor shared pool yang aktif saat ini.</p>
                    <p class="text-muted small mb-0">Hubungi administrator untuk mengaktifkan nomor.</p>
                </div>
                @endif
            
            {{-- Package Dedicated/Self Service: Tampilkan WABA terhubung --}}
            @elseif($wabas->isEmpty())
                <div class="text-center py-5 px-3">
                    <div class="mb-4">
                        <span class="avatar avatar-xl bg-success bg-opacity-10 text-success rounded-circle d-inline-flex align-items-center justify-content-center">
                            <i class="ti ti-brand-whatsapp fs-1"></i>
                        </span>
                    </div>
                    <h5 class="fw-semibold mb-2">Belum Ada Nomor Terhubung</h5>
                    <p class="text-muted mb-4 mx-auto" style="max-width: 400px;">
                        @if($integrationStatus['package_type'] === 'self_service')
                            Hubungkan nomor WhatsApp Business Anda untuk mulai mengirim pesan ke pelanggan dari Inbox.
                        @else
                            Hubungkan nomor WhatsApp Business Anda untuk upgrade ke Self Service dan gunakan nomor bisnis sendiri.
                        @endif
                    </p>
                    @if($isMetaConfigured)
                    <button type="button" class="btn btn-success btn-lg px-4" id="btnFacebookLoginEmpty" disabled>
                        <i class="ti ti-brand-facebook me-2"></i>
                        <span>Hubungkan dengan Facebook</span>
                    </button>
                    <p class="text-muted small mt-3 mb-0">Proses aman dan dipandu oleh Meta</p>
                    @endif
                </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 WhatsApp</th>
                                <th>Mode Integrasi</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 ?: 'WhatsApp Business' }}</h6>
                                            <small class="text-muted">ID: {{ $waba->waba_id }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <strong>{{ $waba->phone_number ?: '-' }}</strong>
                                        @if($waba->phone_number_id)
                                        <br><small class="text-muted">Phone ID: {{ Str::limit($waba->phone_number_id, 20) }}</small>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    @php
                                        $modeClass = match($waba->integration_mode?->value ?? 'pool') {
                                            'oauth' => 'bg-purple',
                                            'managed' => 'bg-success',
                                            default => 'bg-info',
                                        };
                                        $modeLabel = match($waba->integration_mode?->value ?? 'pool') {
                                            'oauth' => 'Self Service (OAuth)',
                                            'managed' => 'Dedicated',
                                            default => 'Shared Pool',
                                        };
                                    @endphp
                                    <span class="badge bg-info">{{ $modeLabel }}</span>
                                </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 (in_array($waba->status, ['error', 'rejected', 'banned'])) {
                                            $finalStatus = 'error';
                                            $statusLabel = 'Error/Banned';
                                        } elseif ($waba->status === 'syncing') {
                                            $finalStatus = 'syncing';
                                            $statusLabel = 'Syncing...';
                                        } elseif ($waba->status === 'active') {
                                            $finalStatus = 'active';
                                            $statusLabel = 'Active';
                                        } else {
                                            $finalStatus = 'pending';
                                            $statusLabel = 'Pending';
                                        }
                                        
                                        // Map to UI
                                        $statusClass = match($finalStatus) {
                                            'verified', 'registered', 'active' => 'bg-success-subtle text-success',
                                            'error' => 'bg-danger-subtle text-danger',
                                            'syncing' => 'bg-info-subtle text-info',
                                            'pending', 'unverified' => 'bg-warning-subtle text-warning',
                                            default => 'bg-secondary'
                                        };
                                        $statusIcon = match($finalStatus) {
                                            'verified', 'registered', 'active' => 'ti-circle-check',
                                            'error' => 'ti-alert-octagon',
                                            'syncing' => 'ti-refresh ti-spin',
                                            default => 'ti-clock'
                                        };
                                        $statusTooltip = match($finalStatus) {
                                            'verified' => 'Nomor WhatsApp Business sudah terverifikasi dan siap digunakan',
                                            'registered' => 'Nomor WhatsApp Business sudah aktif dan siap digunakan',
                                            'pending' => 'WhatsApp membutuhkan waktu untuk mengaktifkan nomor bisnis. Pesan akan tersedia setelah proses selesai.',
                                            'unverified' => 'Nomor WhatsApp Business belum terverifikasi oleh Meta',
                                            default => ''
                                        };
                                    @endphp
                                    
                                    <span class="badge {{ $statusClass }}" @if($statusTooltip) title="{{ $statusTooltip }}" data-bs-toggle="tooltip" @endif>
                                        <i class="ti {{ $statusIcon }} me-1"></i>{{ $statusLabel }}
                                    </span>
                                    
                                    @if($codeVerificationStatus)
                                        <div class="small text-muted mt-1">
                                            Code: {{ $codeVerificationStatus }}
                                        </div>
                                    @endif
                                    
                                    @if($finalStatus === 'active' && $waba->oauth_expires_at)
                                        <div class="mt-1">
                                            <small class="text-muted" style="font-size: 0.65rem;">
                                                Expires: {{ $waba->oauth_expires_at->format('d M Y') }}
                                            </small>
                                        </div>
                                    @endif
                                    
                                    @if($waba->phone_status === 'error')
                                        <div class="mt-1 text-danger small" style="font-size: 0.65rem;">
                                            Cek Meta Business Manager
                                        </div>
                                    @endif

                                    {{-- Webhook Status Badge --}}
                                    @if($waba->isOauth())
                                        <div class="mt-1">
                                            @if($waba->webhook_status === 'active' && $waba->is_subscribed)
                                                <span class="badge bg-success-subtle text-success" title="Webhook Configured & Subscribed" style="font-size: 0.65rem;">
                                                    <i class="ti ti-plug-connected me-1"></i>Webhook Active
                                                </span>
                                            @elseif($waba->webhook_status === 'failed')
                                                <span class="badge bg-danger-subtle text-danger" title="Webhook Configuration Failed" style="font-size: 0.65rem;">
                                                    <i class="ti ti-plug-x me-1"></i>Webhook Failed
                                                </span>
                                            @elseif($waba->webhook_status === 'pending')
                                                <span class="badge bg-warning-subtle text-warning" title="Webhook Pending" style="font-size: 0.65rem;">
                                                    <i class="ti ti-loader me-1"></i>Webhook Pending
                                                </span>
                                            @endif
                                        </div>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($waba->integration_mode?->value === 'oauth')
                                        <div class="d-flex justify-content-center gap-1 flex-wrap">
                                            <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 }}"
                                                data-bs-toggle="tooltip" title="Test kirim pesan">
                                                <i class="ti ti-send"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-info btn-sync-status"
                                                data-id="{{ $waba->id }}"
                                                data-bs-toggle="tooltip" title="Sinkronkan status">
                                                <i class="ti ti-refresh"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-primary btn-refresh-token"
                                                data-id="{{ $waba->id }}"
                                                data-bs-toggle="tooltip" title="Refresh token">
                                                <i class="ti ti-key"></i>
                                            </button>
                                            @if($waba->webhook_status !== 'active' || !$waba->is_subscribed)
                                            <button type="button" class="btn btn-sm btn-outline-warning btn-resync-webhook"
                                                data-id="{{ $waba->id }}"
                                                data-bs-toggle="tooltip" title="Sinkronkan webhook">
                                                <i class="ti ti-plug-connected"></i>
                                            </button>
                                            @endif
                                            <button type="button" class="btn btn-sm btn-outline-danger btn-disconnect-waba"
                                                data-waba-id="{{ $waba->id }}"
                                                data-waba-name="{{ $waba->account_name ?: $waba->phone_number }}"
                                                data-bs-toggle="tooltip" title="Putuskan koneksi">
                                                <i class="ti ti-unlink"></i>
                                            </button>
                                        </div>
                                    @else
                                        <span class="text-muted small">Dikelola Platform</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @if($integrationStatus['package_type'] === 'self_service')
                <div class="alert alert-light border mt-4 mb-0 rounded-3">
                    <div class="d-flex align-items-start gap-3">
                        <i class="ti ti-info-circle fs-4 text-info flex-shrink-0"></i>
                        <div>
                            <strong>Mode Self Service</strong>
                            <p class="mb-0 small text-muted">
                                Pesan dikirim melalui nomor bisnis Anda. Biaya dikenakan langsung oleh Meta ke Business Manager Anda.
                            </p>
                        </div>
                    </div>
                </div>
                @elseif($integrationStatus['package_type'] === 'dedicated')
                <div class="alert alert-light border mt-4 mb-0 rounded-3">
                    <div class="d-flex align-items-start gap-3">
                        <i class="ti ti-shield-check fs-4 text-success flex-shrink-0"></i>
                        <div>
                            <strong>Mode Dedicated</strong>
                            <p class="mb-0 small text-muted">
                                Nomor khusus yang dikelola platform untuk bisnis Anda. Biaya termasuk dalam paket langganan.
                            </p>
                        </div>
                    </div>
                </div>
                @endif
            @endif
        </div>
    </div>

    {{-- Tips Bantuan - Collapsible --}}
    <div class="card border-0 shadow-sm mt-4">
        <div class="card-header bg-white border-0 py-3" type="button" data-bs-toggle="collapse" data-bs-target="#tipsHelp" aria-expanded="false" style="cursor: pointer;">
            <h6 class="mb-0 text-muted fw-normal d-flex align-items-center justify-content-between">
                <span><i class="ti ti-help me-2"></i>Tips & Bantuan</span>
                <i class="ti ti-chevron-down"></i>
            </h6>
        </div>
        <div class="collapse" id="tipsHelp">
            <div class="card-body pt-0">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="p-3 rounded bg-light small">
                            <strong class="d-block mb-1"><i class="ti ti-brand-whatsapp text-success me-1"></i> Apa itu WABA?</strong>
                            <p class="mb-0 text-muted">WhatsApp Business Account adalah akun bisnis resmi untuk mengirim pesan ke pelanggan melalui WhatsApp.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="p-3 rounded bg-light small">
                            <strong class="d-block mb-1"><i class="ti ti-shield-check text-info me-1"></i> Keamanan</strong>
                            <p class="mb-0 text-muted">Token akses disimpan dengan aman. Anda tidak perlu mengelola token secara manual.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Select WABA (for redirect flow fallback) -->
@if(session('oauth_wabas'))
<div class="modal fade show d-block" id="modalSelectWaba" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-purple-subtle">
                <h5 class="modal-title">
                    <i class="ti ti-brand-whatsapp me-2"></i>Pilih WABA untuk Dihubungkan
                </h5>
                <button type="button" class="btn-close" onclick="window.location='{{ route('client.waba-integration.index') }}'"></button>
            </div>
            <div class="modal-body">
                @if($integrationStatus['package_type'] !== 'self_service')
                <div class="alert alert-info mb-4">
                    <i class="ti ti-arrow-up me-2"></i>
                    <strong>Auto Upgrade:</strong> Paket Anda akan otomatis berubah ke <strong>Self Service</strong>.
                </div>
                @endif
                
                <div class="list-group">
                    @foreach(session('oauth_wabas') as $waba)
                    <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3">
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-md bg-purple-subtle text-purple me-3">
                                <i class="ti ti-brand-whatsapp"></i>
                            </span>
                            <div>
                                <h6 class="mb-1">{{ $waba['waba_name'] ?? $waba['verified_name'] ?? 'WhatsApp Business' }}</h6>
                                <div class="text-muted small">
                                    <i class="ti ti-phone me-1"></i>{{ $waba['phone_number'] }}
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-success btn-connect-waba"
                            data-waba-id="{{ $waba['waba_id'] }}"
                            data-phone-number-id="{{ $waba['phone_number_id'] }}"
                            data-business-id="{{ $waba['business_id'] }}"
                            data-phone-number="{{ $waba['phone_number'] }}"
                            data-waba-name="{{ $waba['waba_name'] ?? $waba['verified_name'] ?? '' }}">
                            <i class="ti ti-link me-1"></i> Connect
                        </button>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Modal Disconnect Confirmation -->
<div class="modal fade" id="modalDisconnect" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger-subtle">
                <h5 class="modal-title text-danger">
                    <i class="ti ti-alert-triangle me-2"></i>Konfirmasi Disconnect
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Yakin ingin memutuskan WABA <strong id="disconnectWabaName"></strong>?</p>
                
                @if($wabas->where('integration_mode', \App\Enums\IntegrationMode::OAUTH)->count() <= 1)
                <div class="alert alert-warning">
                    <i class="ti ti-alert-circle me-2"></i>
                    <strong>Perhatian:</strong> Ini adalah satu-satunya WABA OAuth Anda. 
                    Paket akan otomatis dikembalikan ke <strong>Shared</strong>.
                </div>
                @endif
            </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>

<!-- 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="mb-4">
                    <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <h6 class="mb-2" id="loadingMessage">Menghubungkan ke Meta...</h6>
                <p class="text-muted small mb-0" id="loadingSubMessage">Mohon tunggu, jangan tutup halaman ini</p>
                <div class="progress mt-3" style="height: 4px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
                </div>
            </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">
                    <!-- Read-only Credentials -->
                    <!-- <div class="mb-3">
                        <label class="form-label text-muted small mb-1">Access Token</label>
                        <input type="text" class="form-control" id="testAccessToken" name="access_token" style="font-family: monospace; font-size: 0.8em;" title="Used for this test only" placeholder="Paste access token here">
                        <div class="form-text">Token ini bisa diedit untuk keperluan testing.</div>
                    </div> -->
                    <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>

    <!-- Modal WABA Profile -->
    <div class="modal fade" id="modalWabaProfile" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="ti ti-user-edit me-2"></i>Edit Profil WhatsApp Business</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body position-relative">
                    <div id="profileLoading" class="position-absolute top-0 start-0 w-100 h-100 bg-white d-flex justify-content-center align-items-center" style="z-index: 10; opacity: 0.8;">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status"></div>
                            <p class="mt-2">Memuat Profil...</p>
                        </div>
                    </div>

                    <form id="formWabaProfile">
                        <input type="hidden" id="profileWabaId" name="waba_id">
                        
                        <div class="d-flex align-items-center mb-4">
                            <div class="me-4 position-relative">
                                <img id="profilePreview" src="" alt="Profile Picture" class="rounded-circle border" style="width: 100px; height: 100px; object-fit: cover;">
                            </div>
                            <div class="flex-grow-1">
                                <label class="form-label">Update Foto Profil</label>
                                <input type="file" class="form-control" name="profile_picture" id="profilePictureInput" accept="image/jpeg,image/png">
                                <div class="form-text">Format: JPG, PNG. Max: 5MB. Disarankan 640x640 px.</div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">About (Status)</label>
                            <input type="text" class="form-control" name="about" id="profileAbout" maxlength="139">
                            <div class="form-text">Text status singkat yang muncul di profil.</div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Deskripsi Bisnis</label>
                            <textarea class="form-control" name="description" id="profileDescription" rows="3" maxlength="256"></textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Alamat</label>
                                <textarea class="form-control" name="address" id="profileAddress" rows="2" maxlength="256"></textarea>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control" name="email" id="profileEmail" maxlength="128">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Kategori Bisnis (Vertical)</label>
                            <select class="form-select" name="vertical" id="profileVertical">
                                <option value="">Pilih Kategori...</option>
                                <option value="AUTOMOTIVE">Automotive</option>
                                <option value="BEAUTY_AND_PERSONAL_CARE">Beauty and Personal Care</option>
                                <option value="CLOTHING_AND_APPAREL">Clothing and Apparel</option>
                                <option value="EDUCATION">Education</option>
                                <option value="ENTERTAINMENT">Entertainment</option>
                                <option value="EVENT_PLANNING_AND_SERVICE">Event Planning and Service</option>
                                <option value="FINANCE_AND_BANKING">Finance and Banking</option>
                                <option value="FOOD_AND_GROCERY">Food and Grocery</option>
                                <option value="PUBLIC_SERVICE">Public Service</option>
                                <option value="HOTEL_AND_LODGING">Hotel and Lodging</option>
                                <option value="MEDICAL_AND_HEALTH">Medical and Health</option>
                                <option value="NON_PROFIT">Non-profit</option>
                                <option value="PROFESSIONAL_SERVICES">Professional Services</option>
                                <option value="SHOPPING_AND_RETAIL">Shopping and Retail</option>
                                <option value="TRAVEL_AND_TRANSPORTATION">Travel and Transportation</option>
                                <option value="RESTAURANT">Restaurant</option>
                                <option value="OTHER">Other</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Website 1</label>
                            <input type="url" class="form-control" name="websites[]" id="profileWebsite1">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Website 2</label>
                            <input type="url" class="form-control" name="websites[]" id="profileWebsite2">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-primary" id="btnSaveProfile">
                        <i class="ti ti-device-floppy me-1"></i>Simpan Perubahan
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
{{-- Facebook SDK for JavaScript --}}
<script>
// Facebook SDK configuration
window.fbAsyncInit = function() {
    FB.init({
        appId: '{{ $metaConfig['app_id'] ?? '' }}',
        cookie: true,
        xfbml: true,
        version: '{{ $metaConfig['graph_version'] ?? 'v21.0' }}'
    });
    
    // Enable login buttons after SDK loaded
    enableLoginButtons();
};

// Load Facebook SDK
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) 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() {
    var btnText = '{{ ($oauthStatus['has_existing_oauth'] ?? false) ? 'Tambah WABA Lain' : 'Connect WhatsApp Business' }}';
    
    $('#btnFacebookLogin, #btnFacebookLoginEmpty, #btnAddWaba').prop('disabled', false);
    $('#btnFacebookLoginText').text(btnText);
    $('#btnFacebookLoginEmpty span').text('Hubungkan dengan Facebook');
}

// Variables
var metaState = null;
var metaRedirectUri = null; // Standard redirect URI from backend
var disconnectWabaId = null;
var embeddedSignupSession = null; // Store session info from WA_EMBEDDED_SIGNUP event (SOURCE OF TRUTH!)
var isProcessingOAuth = false; // Flag to prevent double submission
var currentOAuthCode = null; // Store authResponse.code globally for all handlers
var currentAccessToken = null; // Store access_token globally for all handlers
var embeddedSignupSubmitted = false; // Prevent double submission from event

// ═══════════════════════════════════════════════════════════════════
// WA_EMBEDDED_SIGNUP Event Listener - SOURCE OF TRUTH for waba_id
// This is triggered by Meta when Embedded Signup completes
// IMPORTANT: This event provides waba_id, but NOT the auth code!
// The auth code comes from FB.login callback.
// STRATEGY: Store waba_id here, let FB.login callback handle submission
// ═══════════════════════════════════════════════════════════════════
window.addEventListener('message', function(event) {
    // Only accept messages from Facebook
    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;
        
        console.log('📨 FB Message Event Received:', data);
        
        // Handle WA_EMBEDDED_SIGNUP event - the SOURCE OF TRUTH for waba_id
        if (data.type === 'WA_EMBEDDED_SIGNUP') {
            console.log('🎯 WA_EMBEDDED_SIGNUP Event Detected!');
            console.log('   Event Data:', data.data);
            
            // Store the session (SOURCE OF TRUTH for waba_id)
            // NOTE: This event does NOT contain authResponse.code!
            // The code comes from FB.login callback, which fires separately.
            embeddedSignupSession = {
                waba_id: data.data?.waba_id || null,
                phone_number_id: data.data?.phone_number_id || null,
                business_id: data.data?.current_business_id || data.data?.business_id || null,
                waba_name: data.data?.waba_name || null
            };
            
            console.log('✅ Embedded Signup Session Stored (waiting for FB.login code):', {
                waba_id: embeddedSignupSession.waba_id,
                phone_number_id: embeddedSignupSession.phone_number_id,
                business_id: embeddedSignupSession.business_id
            });
            
            // UPDATE: Do NOT submit here immediately!
            // Wait for FB.login callback which has the authResponse.code
            // The FB.login callback will check for embeddedSignupSession and submit
            
            // Show loading status update
            if (!$('#modalLoading').hasClass('show')) {
                $('#modalLoading').modal('show');
            }
            $('#loadingMessage').text('WABA berhasil dibuat...');
            $('#loadingSubMessage').text('Menunggu authorization code dari Meta...');
        }
    } catch (e) {
        // Not a JSON message, ignore
    }
});

$(document).ready(function() {
    // Initialize Bootstrap tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (el) { return new bootstrap.Tooltip(el); });
    // Get Meta config and state when page loads
    fetchMetaConfig();

    // Facebook Login Button Click
    $('#btnFacebookLogin, #btnFacebookLoginEmpty, #btnAddWaba').on('click', function() {
        if (!metaState) {
            toastr.error('Konfigurasi Meta belum siap. Silakan refresh halaman.');
            return;
        }
        
        launchEmbeddedSignup();
    });

    // Fallback redirect flow
    $('.btn-connect-waba').on('click', function() {
        var btn = $(this);
        connectWabaFallback(btn);
    });

    // Disconnect WABA (from table and modal)
    $(document).on('click', '.btn-disconnect-waba, .btn-disconnect', function() {
        disconnectWabaId = $(this).data('waba-id') || $(this).data('id');
        var wabaName = $(this).data('waba-name') || $(this).data('name');
        $('#disconnectWabaName').text(wabaName);
        $('#modalDisconnect').modal('show');
    });

    // Confirm disconnect
    $('#btnConfirmDisconnect').on('click', function() {
        if (!disconnectWabaId) return;
        disconnectWaba(disconnectWabaId);
    });

    // Clean URL if upgraded
    if (window.location.search.includes('upgraded=1')) {
        window.history.replaceState({}, document.title, window.location.pathname);
    }

    // Refresh Token Handler
    $(document).on('click', '.btn-refresh-token', function() {
        var btn = $(this);
        var id = btn.data('id');
        
        // Confirm first? Maybe not needed for refresh, but good practice.
        if(!confirm('Generate ulang System User Token untuk WABA ini? Token lama akan diganti.')) {
            return;
        }

        var originalHtml = btn.html();
        btn.prop('disabled', true).html('<i class="spinner-border spinner-border-sm"></i>');

        $.ajax({
            url: '/client/waba-integration/' + id + '/refresh-token',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if(response.success) {
                    toastr.success(response.message || 'Token berhasil diperbarui');
                } else {
                    toastr.error(response.message || 'Gagal memperbarui token');
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.message || 'Terjadi kesalahan server';
                toastr.error(msg);
            },
            complete: function() {
                btn.prop('disabled', false).html(originalHtml);
            }
        });
    });

    // 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);
        $('#testAccessToken').val(btn.data('access-token'));
        $('#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) {
            toastr.error('Masukkan nomor WhatsApp yang valid');
            return;
        }

        if (!templateName) {
            toastr.error('Nama template wajib diisi');
            return;
        }

        if (!languageCode) {
            toastr.error('Language code wajib diisi');
            return;
        }

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

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

/**
 * Fetch Meta configuration from backend
 */
function fetchMetaConfig() {
    $.get('{{ route('client.waba-integration.meta-config') }}')
        .done(function(response) {
            if (response.success) {
                metaState = response.data.state;
                // Validate redirect_uri - jangan set jika empty string
                var backendRedirectUri = response.data.redirect_uri;
                metaRedirectUri = (backendRedirectUri && backendRedirectUri.trim() !== '') 
                    ? backendRedirectUri.trim() 
                    : null;
                
                console.log('Meta config loaded:', {
                    app_id: response.data.app_id,
                    config_id: response.data.config_id,
                    redirect_uri: metaRedirectUri || '(not set or empty)',
                    redirect_uri_original: backendRedirectUri,
                    state_length: metaState ? metaState.length : 0
                });
            }
        })
        .fail(function(xhr) {
            console.error('Failed to fetch Meta config:', xhr.responseJSON?.message);
        });
}

/**
 * Launch Facebook Embedded Signup
 * Uses Facebook SDK with WhatsApp Embedded Signup configuration
 */
function launchEmbeddedSignup() {
    // ═══════════════════════════════════════════════════════════
    // DOUBLE-SUBMISSION PREVENTION
    // Mencegah user klik berkali-kali atau refresh saat proses
    // ═══════════════════════════════════════════════════════════
    if (isProcessingOAuth) {
        console.warn('⚠️ OAuth already in progress, ignoring duplicate click');
        toastr.warning('Proses sedang berjalan. Silakan tunggu...');
        return;
    }
    
    // Check sessionStorage for recent processing
    var lastProcessing = sessionStorage.getItem('oauth_processing');
    if (lastProcessing) {
        var lastTime = parseInt(lastProcessing, 10);
        var elapsed = Date.now() - lastTime;
        // Cegah jika dalam 30 detik terakhir sudah ada proses
        if (elapsed < 30000) {
            console.warn('⚠️ Recent OAuth detected, elapsed:', elapsed, 'ms');
            toastr.warning('Proses Connect baru saja dilakukan. Tunggu beberapa saat...');
            return;
        }
    }
    
    // Set processing flag
    isProcessingOAuth = true;
    sessionStorage.setItem('oauth_processing', Date.now().toString());
    
    // Disable buttons
    $('#btnFacebookLogin, #btnFacebookLoginEmpty, #btnAddWaba').prop('disabled', true);
    
    // Reset embedded signup session for new flow
    embeddedSignupSession = null;
    embeddedSignupSubmitted = false;
    
    // Log configuration for debugging
    logEmbeddedSignupConfig();
    
    var configId = '{{ $metaConfig['config_id'] ?? '' }}';
    
    if (!configId) {
        resetOAuthProcessing();
        toastr.error('Embedded Signup Config ID belum dikonfigurasi. Hubungi administrator.');
        return;
    }
    
    $('#modalLoading').modal('show');
    $('#loadingMessage').text('Membuka Facebook Login...');
    $('#loadingSubMessage').text('Mengarahkan ke halaman autentikasi Meta...');

    console.log('Launching FB.login with config_id:', configId);

    // Gunakan URL halaman saat ini sebagai redirect_uri
    // FB SDK popup mode menggunakan URL halaman sebagai redirect_uri
    // Jika kosong, kirim empty string ke Meta (sesuai requirement)
    var currentPageUri = window.location.origin + window.location.pathname;
    
    // Simpan ke global untuk dikirim ke backend
    // Bisa empty string jika memang kosong
    window.oauthRedirectUri = (currentPageUri && currentPageUri.trim() !== '') 
        ? currentPageUri.trim() 
        : '';
    
    console.log('=== FB.login Configuration ===');
    console.log('Config ID:', configId);
    console.log('Redirect URI (current page):', currentPageUri);
    console.log('Window location:', window.location.href);
    console.log('==============================');

    // Facebook Login with Embedded Signup
    // Reference: https://developers.facebook.com/docs/whatsapp/embedded-signup
    FB.login(function(response) {
        console.log('FB.login callback received:', response);
        console.log('Full response object:', JSON.stringify(response, null, 2));
        
        if (response.authResponse) {
            // User authorized - handle the response
            handleEmbeddedSignupResponse(response);
        } else {
            // User cancelled or denied - reset processing state
            resetOAuthProcessing();
            $('#modalLoading').modal('hide');
            toastr.warning('Login dibatalkan atau ditolak.');
        }
    }, {
        // Embedded Signup configuration
        config_id: configId,
        response_type: 'code', // Standard requirement
        override_default_response_type: true, // REQUIRED: Forces SDK to return code, not token
        extras: {
            setup: {},
            sessionInfoVersion: 2
        }
        
            // featureType: 'only_waba_sharing',
    });
}

/**
 * Reset OAuth processing state
 * Called when process completes, fails, or is cancelled
 */
function resetOAuthProcessing() {
    isProcessingOAuth = false;
    currentOAuthCode = null;
    sessionStorage.removeItem('oauth_processing');
    $('#btnFacebookLogin, #btnFacebookLoginEmpty, #btnAddWaba').prop('disabled', false);
    enableLoginButtons();
}

/**
 * Handle FB.login Callback
 * 
 * IMPORTANT: This is NOT the source of truth for waba_id!
 * WA_EMBEDDED_SIGNUP event (via message listener) is the source of truth.
 * 
 * This callback is only for:
 * - Detecting if user cancelled/denied
 * - Fallback if WA_EMBEDDED_SIGNUP event was missed
 */
function handleEmbeddedSignupResponse(response) {
    console.log('📞 FB.login Callback Received');
    console.log('AuthResponse:', response.authResponse);
    console.log('Full Response:', response);

    // ═══════════════════════════════════════════════════════════════════
    // CHECK 1: Already submitted via WA_EMBEDDED_SIGNUP event?
    // If yes, just close the modal and don't do anything
    // ═══════════════════════════════════════════════════════════════════
    if (embeddedSignupSubmitted) {
        console.log('✅ Already submitted via WA_EMBEDDED_SIGNUP event. Ignoring FB.login callback.');
        // The submission is already in progress, let it complete
        return;
    }

    // ═══════════════════════════════════════════════════════════════════
    // PRIORITY: Extract CODE atau ACCESS_TOKEN from response
    // Dengan response_type: 'code', FB.login bisa mengembalikan code
    // Atau dengan response_type: 'token', bisa langsung access_token
    // ═══════════════════════════════════════════════════════════════════
    var authCode = null;
    var accessToken = null;
    
    // Try to get code or access_token from authResponse
    if (response.authResponse) {
        // Cek access_token langsung (jika response_type: 'token' atau fallback)
        accessToken = response.authResponse.accessToken || 
                     response.authResponse.access_token || 
                     response.accessToken ||
                     response.access_token ||
                     null;
        
        // Cek code (jika response_type: 'code')
        // Code bisa di berbagai tempat tergantung SDK version
        authCode = response.authResponse.code || 
                  response.code || 
                  response.authResponse.authCode ||
                  response.authCode ||
                  null;
        
        // Juga cek di extras jika ada
        if (response.authResponse.extras) {
            if (!accessToken && response.authResponse.extras.accessToken) {
                accessToken = response.authResponse.extras.accessToken;
            }
            if (!authCode && response.authResponse.extras.code) {
                authCode = response.authResponse.extras.code;
            }
        }
        
        // Cek juga di level response langsung
        if (!authCode && response.code) {
            authCode = response.code;
        }
        if (!accessToken && response.accessToken) {
            accessToken = response.accessToken;
        }
        
        console.log('🔑 Authorization Code extracted:', authCode ? (authCode.substring(0, 10) + '...') : 'NOT FOUND');
        console.log('🔑 Access Token extracted:', accessToken ? (accessToken.substring(0, 10) + '...') : 'NOT FOUND');
        
        // IMPORTANT: Store globally immediately so WA_EMBEDDED_SIGNUP handler or other code paths can use
        if (authCode) {
            currentOAuthCode = authCode;
            console.log('📝 Stored authCode in global currentOAuthCode');
        }
        if (accessToken) {
            currentAccessToken = accessToken;
            console.log('📝 Stored accessToken in global currentAccessToken');
        }
        
        // Jika tidak ada code/token di response, cek URL fragment (untuk popup mode)
        if (!authCode && !accessToken && window.location.hash) {
            var hashParams = new URLSearchParams(window.location.hash.substring(1));
            authCode = hashParams.get('code') || null;
            accessToken = hashParams.get('access_token') || null;
            
            if (authCode || accessToken) {
                console.log('🔑 Found in URL fragment:', {
                    code: authCode ? 'YES' : 'NO',
                    access_token: accessToken ? 'YES' : 'NO'
                });
            }
        }
    }

    // ═══════════════════════════════════════════════════════════════════
    // CHECK 2: Do we have embeddedSignupSession from WA_EMBEDDED_SIGNUP event?
    // This is the SOURCE OF TRUTH for waba_id
    // ═══════════════════════════════════════════════════════════════════
    if (embeddedSignupSession && embeddedSignupSession.waba_id) {
        console.log('🎯 Using embeddedSignupSession from WA_EMBEDDED_SIGNUP event');
        console.log('   waba_id:', embeddedSignupSession.waba_id);
        console.log('   phone_number_id:', embeddedSignupSession.phone_number_id || 'null');
        
        // Mark as submitted to prevent duplicate
        embeddedSignupSubmitted = true;
        
        // Priority 1: Jika ada access_token langsung, gunakan direct signup
        if (accessToken) {
            console.log('✅ Using DIRECT SIGNUP flow with access_token from FB.login');
            $('#loadingMessage').text('Menghubungkan WABA (Direct)...');
            $('#loadingSubMessage').text('Menggunakan token langsung dari Meta...');
            submitDirectSignup(accessToken, embeddedSignupSession);
        }
        // Priority 2: Jika ada code, gunakan flow dengan code exchange
        else if (authCode) {
            console.log('✅ Using CODE EXCHANGE flow with waba_id from WA_EMBEDDED_SIGNUP event');
            $('#loadingMessage').text('Menghubungkan WABA...');
            $('#loadingSubMessage').text('Memproses authorization code...');
            submitEmbeddedSignup(authCode, embeddedSignupSession);
        } 
        // Priority 3: Jika tidak ada code/token langsung, gunakan submitWabaLinking
        // Pass code dari global currentOAuthCode untuk exchange di backend
        else {
            console.log('🟡 Using submitWabaLinking with authCode for backend exchange');
            $('#loadingMessage').text('Menyimpan WABA ke sistem...');
            $('#loadingSubMessage').text('Exchange token dan konfigurasi webhook...');
            // IMPORTANT: Pass authCode as third parameter for code exchange
            // accessToken first, authCode second - backend will prioritize code exchange
            submitWabaLinking(embeddedSignupSession, currentAccessToken, currentOAuthCode);
        }
        return;
    }

    // ═══════════════════════════════════════════════════════════════════
    // FALLBACK: WA_EMBEDDED_SIGNUP event was not received
    // Try to extract from FB.login response
    // ═══════════════════════════════════════════════════════════════════
    console.log('⚠️ WA_EMBEDDED_SIGNUP event not received, trying to extract from FB.login response...');
    
    $('#loadingMessage').text('Memproses data dari Meta...');
    $('#loadingSubMessage').text('Mengekstrak informasi WABA dari response...');

    var sessionInfo = null;

    // Try authResponse.extras (some SDK versions)
    if (response.authResponse && response.authResponse.extras) {
        var extras = response.authResponse.extras;
        if (extras.waba_id) {
            sessionInfo = {
                waba_id: extras.waba_id,
                phone_number_id: extras.phone_number_id || null
            };
            console.log('Extracted from authResponse.extras:', sessionInfo);
        }
    }
    
    // Try authResponse directly
    if (!sessionInfo && response.authResponse && response.authResponse.waba_id) {
        sessionInfo = {
            waba_id: response.authResponse.waba_id,
            phone_number_id: response.authResponse.phone_number_id || null
        };
        console.log('Extracted from authResponse direct:', sessionInfo);
    }

    // ═══════════════════════════════════════════════════════════════════
    // Submit if we found waba_id
    // ═══════════════════════════════════════════════════════════════════
    if (sessionInfo && sessionInfo.waba_id) {
        // Priority 1: Jika ada access_token langsung, gunakan direct signup
        if (accessToken) {
            console.log('🚀 DIRECT SIGNUP FLOW - Submitting with access_token (from FB.login fallback)');
            embeddedSignupSubmitted = true;
            submitDirectSignup(accessToken, sessionInfo);
        }
        // Priority 2: Jika ada code, gunakan code exchange flow
        else if (authCode) {
            console.log('🚀 CODE EXCHANGE FLOW - Submitting with code (from FB.login fallback)');
            embeddedSignupSubmitted = true;
            submitEmbeddedSignup(authCode, sessionInfo);
        } 
        // Priority 3: Jika tidak ada, gunakan tech provider model dengan access_token/code jika ada
        else {
            console.log('🚀 TECH PROVIDER MODEL - Submitting WABA linking (from FB.login fallback)');
            embeddedSignupSubmitted = true;
            // Pass accessToken or authCode if available for client OAuth flow
            submitWabaLinking(sessionInfo, accessToken, authCode);
        }
        return;
    }
    
    // ═══════════════════════════════════════════════════════════════════
    // No waba_id found - Embedded Signup was not completed
    // ═══════════════════════════════════════════════════════════════════
    console.error('❌ Embedded Signup not completed - no waba_id found');
    console.log('embeddedSignupSession:', embeddedSignupSession);
    console.log('FB.login response:', JSON.stringify(response, null, 2));
    console.log('Authorization Code found:', authCode ? 'YES' : 'NO');
    
    resetOAuthProcessing();
    $('#modalLoading').modal('hide');
    toastr.error('Embedded Signup belum selesai. Silakan ulangi proses.');
}

/**
 * Submit Direct Signup - BYPASS CODE EXCHANGE
 * 
 * Uses access_token directly from Meta Signup response.
 * Faster and more reliable than code exchange flow.
 */
function submitDirectSignup(accessToken, sessionInfo) {
    $('#loadingMessage').text('Menghubungkan WABA (Direct)...');
    $('#loadingSubMessage').text('Memproses token langsung dari Meta...');
    
    console.log('=== submitDirectSignup (BYPASS CODE EXCHANGE) ===');
    console.log('Token length:', accessToken.length);
    console.log('Session Info:', sessionInfo);
    console.log('================================================');

    $.ajax({
        url: '{{ route('client.waba-integration.direct-signup') }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            access_token: accessToken,
            phone_number_id: sessionInfo.phone_number_id,
            waba_id: sessionInfo.waba_id,
            business_id: sessionInfo.business_id || '',
            state: metaState
        },
        success: function(response) {
            $('#modalLoading').modal('hide');
            
            if (response.success) {
                // Success! Reset processing and redirect
                resetOAuthProcessing();
                toastr.success(response.message);
                
                console.log('✅ Direct Signup SUCCESS:', {
                    waba_id: response.data.waba_id,
                    token_type: response.data.token_type,
                    webhook_status: response.data.webhook_status,
                    package_upgraded: response.data.package_upgraded
                });
                
                // Redirect with upgrade flag
                if (response.data.package_upgraded) {
                    window.location.href = '{{ route('client.waba-integration.index') }}?upgraded=1';
                } else {
                    window.location.reload();
                }
            } else {
                resetOAuthProcessing();
                toastr.error(response.message);
            }
        },
        error: function(xhr) {
            resetOAuthProcessing();
            $('#modalLoading').modal('hide');
            console.error('Direct Signup FAILED:', xhr.responseJSON);
            toastr.error(xhr.responseJSON?.message || 'Gagal menghubungkan WABA');
        }
    });
}

/**
 * Submit WABA Linking - TECH PROVIDER MODEL
 * 
 * Mengirim waba_id (WAJIB) dan phone_number_id (OPSIONAL).
 * Jika phone_number_id tidak ada, backend akan fetch dari Graph API.
 * Backend menggunakan global token (TIDAK ada code exchange).
 * 
 * UPDATE: Supports access_token/code if available (User Request)
 */
function submitWabaLinking(sessionInfo, accessToken = null, code = null) {
    $('#loadingMessage').text('Menghubungkan WABA ke platform...');
    $('#loadingSubMessage').text('Mengambil data WABA dari Meta API...');
    
    console.log('=== submitWabaLinking (TECH PROVIDER MODEL / FALLBACK) ===');
    console.log('waba_id:', sessionInfo.waba_id);
    console.log('phone_number_id:', sessionInfo.phone_number_id || 'NULL (will fetch from backend)');
    console.log('access_token:', accessToken ? 'YES' : 'NO');
    console.log('code:', code ? 'YES' : 'NO');
    console.log('=============================================');

    $.ajax({
        url: '{{ route("client.waba-integration.embedded-signup-v2") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            waba_id: sessionInfo.waba_id,
            phone_number_id: sessionInfo.phone_number_id || null, // Nullable!
            business_id: sessionInfo.business_id || null, // Added
            waba_name: sessionInfo.waba_name || sessionInfo.verified_name || null, // Added
            access_token: accessToken, // Added
            code: code, // Added
            state: metaState
        },
        success: function(response) {
            $('#modalLoading').modal('hide');
            
            if (response.success) {
                // Success! Reset processing and redirect
                resetOAuthProcessing();
                toastr.success(response.message);
                
                console.log('✅ WABA Linking SUCCESS:', {
                    waba_id: response.data.waba_id,
                    status: response.data.status,
                    phone_number: response.data.phone_number,
                    subscription_status: response.data.subscription_status,
                    webhook_status: response.data.webhook_status,
                    package_upgraded: response.data.package_upgraded
                });
                
                // Redirect with upgrade flag
                if (response.data.package_upgraded) {
                    window.location.href = '{{ route('client.waba-integration.index') }}?upgraded=1';
                } else {
                    window.location.reload();
                }
            } else {
                resetOAuthProcessing();
                toastr.error(response.message);
            }
        },
        error: function(xhr) {
            resetOAuthProcessing();
            $('#modalLoading').modal('hide');
            console.error('WABA Linking FAILED:', xhr.responseJSON);
            // Show specific error from Meta/backend
            toastr.error(xhr.responseJSON?.message || 'Gagal menghubungkan WABA');
        }
    });
}

/**
 * Debug: Log config being used
 */
function logEmbeddedSignupConfig() {
    console.log('=== Embedded Signup Configuration ===');
    console.log('App ID:', '{{ $metaConfig['app_id'] ?? 'NOT SET' }}');
    console.log('Config ID:', '{{ $metaConfig['config_id'] ?? 'NOT SET' }}');
    console.log('Graph Version:', '{{ $metaConfig['graph_version'] ?? 'NOT SET' }}');
    console.log('Redirect URI (from config):', '{{ $metaConfig['redirect_uri'] ?? 'NOT SET' }}');
    console.log('Redirect URI (from state):', metaRedirectUri || 'NOT LOADED YET');
    console.log('Current Page URL:', window.location.href);
    console.log('=====================================');
}

/**
 * Submit Embedded Signup data to backend
 * 
 * PENTING: redirect_uri HARUS sama dengan URL halaman saat FB.login() dipanggil
 */
function submitEmbeddedSignup(code, sessionInfo) {
    $('#loadingMessage').text('Menghubungkan WABA...');
    $('#loadingSubMessage').text('Memproses authorization code...');
    
    // Gunakan redirect_uri yang sama dengan saat FB.login()
    // Jika kosong, kirim empty string ke Meta (sesuai requirement)
    var redirectUri = (window.oauthRedirectUri && window.oauthRedirectUri.trim() !== '') 
        ? window.oauthRedirectUri.trim() 
        : '';
    
    // Bisa empty string - Meta API menerima empty string
    if (!redirectUri || redirectUri.trim() === '') {
        console.log('ℹ️ redirect_uri is empty, will send empty string to Meta');
        redirectUri = '';
    }
    
    console.log('=== submitEmbeddedSignup ===');
    console.log('Code length:', code.length);
    console.log('Session Info:', sessionInfo);
    console.log('Redirect URI:', redirectUri);
    console.log('============================');

    // Log the exact payload being sent for debugging
    console.log('📦 Submitting Embedded Signup Payload:', {
        code: code ? code.substring(0, 10) + '...' : null,
        redirect_uri: redirectUri,
        redirect_uri_original: window.oauthRedirectUri,
        session_info: sessionInfo
    });

    $.ajax({
        url: '{{ route('client.waba-integration.embedded-signup') }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            code: code,
            phone_number_id: sessionInfo.phone_number_id,
            waba_id: sessionInfo.waba_id,
            state: metaState,
            redirect_uri: redirectUri  // Kirim redirect_uri (bisa empty string)
        },
        success: function(response) {
            $('#modalLoading').modal('hide');
            
            if (response.success) {
                // Qontak-style: Show activation status instead of immediate reload
                resetOAuthProcessing();
                toastr.success(response.message || 'Pengajuan WhatsApp Business berhasil dikirim');
                
                // Display activation status if available
                // SIMPLIFIED: Just reload page instead of polling
                if (response.data?.package_upgraded) {
                    window.location.href = '{{ route('client.waba-integration.index') }}?upgraded=1';
                } else {
                    window.location.reload();
                }
            } else {
                resetOAuthProcessing();
                toastr.error(response.message || 'Gagal menghubungkan WABA');
            }
        },
        error: function(xhr) {
            resetOAuthProcessing();
            $('#modalLoading').modal('hide');
            toastr.error(xhr.responseJSON?.message || 'Gagal menghubungkan WABA');
        }
    });
}

/**
 * Fetch WABA list via code - TWO STEP FLOW
 * 
 * Step 1: Exchange code for token (one-time OAuth)
 * Step 2: Fetch WABA list from stored session (read-only, idempotent)
 */
function fetchWabaListViaCode(code) {
    // Jika kosong, kirim empty string ke Meta (sesuai requirement)
    var redirectUri = (window.oauthRedirectUri && window.oauthRedirectUri.trim() !== '') 
        ? window.oauthRedirectUri.trim() 
        : '';
    
    // Bisa empty string - Meta API menerima empty string
    if (!redirectUri || redirectUri.trim() === '') {
        console.log('ℹ️ redirect_uri is empty, will send empty string to Meta');
        redirectUri = '';
    }
    
    console.log('=== fetchWabaListViaCode (TWO-STEP FLOW) ===');
    console.log('Step 1: Exchange Token');
    console.log('Code length:', code.length);
    console.log('Redirect URI:', redirectUri);
    console.log('=============================================');
    
    // Step 1: Exchange code for token
    $.ajax({
        url: '{{ route('client.waba-integration.exchange-token') }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            code: code,
            state: metaState,
            redirect_uri: redirectUri  // Kirim redirect_uri (bisa empty string)
        },
        success: function(response) {
            console.log('Step 1 SUCCESS:', response);
            
            if (response.success) {
                // Token stored! Check if WABAs already returned
                if (response.data.wabas && response.data.wabas.length > 0) {
                    // WABAs already in response, show modal directly
                    $('#modalLoading').modal('hide');
                    showWabaSelectionModal(response.data.wabas);
                } else {
                    // Step 2: Fetch WABA list from session
                    fetchWabaListFromSession();
                }
            } else {
                resetOAuthProcessing();
                $('#modalLoading').modal('hide');
                toastr.error(response.message);
            }
        },
        error: function(xhr) {
            console.error('Step 1 FAILED:', xhr.responseJSON);
            resetOAuthProcessing();
            $('#modalLoading').modal('hide');
            
            var errorMessage = xhr.responseJSON?.message || 'Gagal menyimpan token OAuth';
            toastr.error(errorMessage);
        }
    });
}
// ----------------------------------------------------------------------------
// Sync Status Handling
// ----------------------------------------------------------------------------
$(document).ready(function() {
    $('.btn-sync-status').click(function() {
        var btn = $(this);
        var id = btn.data('id');
        var originalHtml = btn.html();
        
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin"></i>');
        
        $.post('{{ url("client/waba-integration") }}/' + id + '/sync-status', {
            _token: '{{ csrf_token() }}'
        })
        .done(function(response) {
            if (response.success) {
                toastr.success(response.message);
                // Reload page to update status badge
                setTimeout(function() {
                    window.location.reload();
                }, 1000);
            } else {
                toastr.error(response.message);
                btn.prop('disabled', false).html(originalHtml);
            }
        })
        .fail(function(xhr) {
            toastr.error(xhr.responseJSON?.message || 'Gagal sinkronisasi status');
            btn.prop('disabled', false).html(originalHtml);
        });
    });
});


/**
 * Step 2: Fetch WABA list from stored session (READ-ONLY)
 * This is idempotent - can be called multiple times
 */
function fetchWabaListFromSession() {
    console.log('=== Step 2: Fetch WABA from Session ===');
    
    $.ajax({
        url: '{{ route('client.waba-integration.fetch-waba') }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#modalLoading').modal('hide');
            
            if (response.success) {
                if (response.data.wabas && response.data.wabas.length > 0) {
                    showWabaSelectionModal(response.data.wabas);
                } else {
                    resetOAuthProcessing();
                    toastr.warning('WABA berhasil terhubung, tapi belum ada nomor telepon. Silakan tambahkan nomor di Meta Business Suite.');
                    // Reload page to show updated status
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000);
                }
            } else {
                resetOAuthProcessing();
                toastr.error(response.message);
            }
        },
        error: function(xhr) {
            resetOAuthProcessing();
            $('#modalLoading').modal('hide');
            toastr.error(xhr.responseJSON?.message || 'Gagal mengambil daftar WABA');
        }
    });
}

/**
 * Show WABA selection modal dynamically
 */
function showWabaSelectionModal(wabas) {
    // Build modal HTML
    var modalHtml = `
        <div class="modal fade show d-block" id="modalSelectWabaDynamic" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-purple-subtle">
                        <h5 class="modal-title">
                            <i class="ti ti-brand-whatsapp me-2"></i>Pilih WABA untuk Dihubungkan
                        </h5>
                        <button type="button" class="btn-close" onclick="$('#modalSelectWabaDynamic').remove()"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-info mb-4">
                            <i class="ti ti-arrow-up me-2"></i>
                            <strong>Auto Upgrade:</strong> Paket Anda akan otomatis berubah ke <strong>Self Service</strong>.
                        </div>
                        <div class="list-group" id="wabaListDynamic"></div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if any
    $('#modalSelectWabaDynamic').remove();
    
    // Add modal to body
    $('body').append(modalHtml);
    
    // Populate WABA list
    var listHtml = '';
    wabas.forEach(function(waba) {
        listHtml += `
            <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3">
                <div class="d-flex align-items-center">
                    <span class="avatar avatar-md bg-purple-subtle text-purple me-3">
                        <i class="ti ti-brand-whatsapp"></i>
                    </span>
                    <div>
                        <h6 class="mb-1">${waba.waba_name || waba.verified_name || 'WhatsApp Business'}</h6>
                        <div class="text-muted small">
                            <i class="ti ti-phone me-1"></i>${waba.phone_number}
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-success btn-connect-waba-dynamic"
                    data-waba-id="${waba.waba_id}"
                    data-phone-number-id="${waba.phone_number_id}"
                    data-business-id="${waba.business_id}"
                    data-phone-number="${waba.phone_number}"
                    data-waba-name="${waba.waba_name || waba.verified_name || ''}">
                    <i class="ti ti-link me-1"></i> Connect
                </button>
            </div>
        `;
    });
    
    $('#wabaListDynamic').html(listHtml);
    
    // Bind click event
    $('.btn-connect-waba-dynamic').on('click', function() {
        var btn = $(this);
        connectWabaDynamic(btn);
    });
}

/**
 * Connect WABA from dynamic modal
 */
function connectWabaDynamic(btn) {
    var originalHtml = btn.html();
    btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin"></i>');
    
    $.post('{{ route('client.waba-integration.oauth.connect') }}', {
        _token: '{{ csrf_token() }}',
        waba_id: btn.data('waba-id'),
        phone_number_id: btn.data('phone-number-id'),
        business_id: btn.data('business-id'),
        phone_number: btn.data('phone-number'),
        waba_name: btn.data('waba-name')
    }).done(function(response) {
        if (response.success) {
            toastr.success(response.message);
            $('#modalSelectWabaDynamic').remove();
            
            if (response.data.package_upgraded) {
                window.location.href = '{{ route('client.waba-integration.index') }}?upgraded=1';
            } else {
                window.location.reload();
            }
        } else {
            toastr.error(response.message);
            btn.prop('disabled', false).html(originalHtml);
        }
    }).fail(function(xhr) {
        toastr.error(xhr.responseJSON?.message || 'Gagal menghubungkan WABA');
        btn.prop('disabled', false).html(originalHtml);
    });
}

/**
 * Connect WABA from redirect flow (fallback)
 */
function connectWabaFallback(btn) {
    var originalHtml = btn.html();
    btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin"></i>');
    
    $.post('{{ route('client.waba-integration.oauth.connect') }}', {
        _token: '{{ csrf_token() }}',
        waba_id: btn.data('waba-id'),
        phone_number_id: btn.data('phone-number-id'),
        business_id: btn.data('business-id'),
        phone_number: btn.data('phone-number'),
        waba_name: btn.data('waba-name')
    }).done(function(response) {
        if (response.success) {
            toastr.success(response.message);
            
            if (response.data.package_upgraded) {
                window.location.href = '{{ route('client.waba-integration.index') }}?upgraded=1';
            } else {
                window.location.reload();
            }
        } else {
            toastr.error(response.message);
            btn.prop('disabled', false).html(originalHtml);
        }
    }).fail(function(xhr) {
        toastr.error(xhr.responseJSON?.message || 'Gagal menghubungkan WABA');
        btn.prop('disabled', false).html(originalHtml);
    });
}

/**
 * Qontak-style: Display activation status card
 */
function displayActivationStatus(data) {
    if (!data || !data.activation_status) {
        $('#activationStatusCard').hide();
        return;
    }

    // $('#activationStatusCard').show(); // Hidden as per requirement
    
    const status = data.activation_status;
    const message = data.message || '';
    const actionMessage = data.action_message || '';
    const allowsRetry = data.allows_retry || false;
    const wabaPoolId = data.waba_pool_id;
    const pollCount = data.poll_count || 0;
    const maxPolls = data.max_polls || 15;

    let statusIcon = '';
    let statusClass = '';
    let statusBadge = '';

    switch(status) {
        case 'submitted':
            statusIcon = 'ti-clock';
            statusClass = 'text-info';
            statusBadge = 'bg-info';
            break;
        case 'in_review':
            statusIcon = 'ti-loader ti-spin';
            statusClass = 'text-warning';
            statusBadge = 'bg-warning';
            break;
        case 'active':
            statusIcon = 'ti-circle-check';
            statusClass = 'text-success';
            statusBadge = 'bg-success';
            break;
        case 'action_required':
            statusIcon = 'ti-alert-triangle';
            statusClass = 'text-danger';
            statusBadge = 'bg-danger';
            break;
        default:
            statusIcon = 'ti-info-circle';
            statusClass = 'text-muted';
            statusBadge = 'bg-secondary';
    }

    let html = `
        <div class="d-flex align-items-start">
            <div class="flex-shrink-0">
                <span class="avatar avatar-lg ${statusBadge} text-white">
                    <i class="ti ${statusIcon} fs-3"></i>
                </span>
            </div>
            <div class="flex-grow-1 ms-3">
                <h6 class="mb-2 ${statusClass}">
                    <span class="badge ${statusBadge} me-2">${status.toUpperCase().replace('_', ' ')}</span>
                    Status Aktivasi
                </h6>
                <p class="mb-2">${message}</p>
                ${actionMessage ? `<p class="text-muted small mb-2">${actionMessage}</p>` : ''}
                ${status === 'in_review' ? `
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar ${statusBadge}" role="progressbar" 
                             style="width: ${Math.min(100, (pollCount / maxPolls) * 100)}%"
                             aria-valuenow="${pollCount}" aria-valuemin="0" aria-valuemax="${maxPolls}">
                        </div>
                    </div>
                    <p class="text-muted small mb-0">
                        <i class="ti ti-refresh me-1"></i>
                        Memproses aktivasi... (${pollCount}/${maxPolls})
                    </p>
                ` : ''}
                ${allowsRetry ? `
                    <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="retryActivation(${wabaPoolId})">
                        <i class="ti ti-refresh me-1"></i>Retry Aktivasi
                    </button>
                ` : ''}
            </div>
        </div>
    `;

    $('#activationStatusContent').html(html);
}

/**
 * Poll activation status (Qontak-style)
 */
function pollActivationStatus() {
    $.get('{{ route('client.waba-integration.status') }}')
        .done(function(response) {
            if (response.success && response.data.activation_status) {
                // If active, check if we really need to reload
                if (response.data.activation_status === 'active') {
                    // Check if this WABA is already in the list
                    // We check for the test-send button which contains the data-id
                    var wabaId = response.data.waba_pool_id;
                    var isWabaVisible = $('.btn-test-send[data-id="' + wabaId + '"]').length > 0;
                    
                    if (isWabaVisible) {
                        // WABA is active AND already visible on screen.
                        // No need to reload or show the activation status card (it's old news).
                        console.log('✅ WABA ' + wabaId + ' is already active and visible. Stopping polling.');
                        $('#activationStatusCard').hide();
                        return;
                    }

                    // WABA is active but NOT visible yet. Show success and reload to fetch it.
                    displayActivationStatus(response.data);
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000);
                    
                } else {
                    // Not active yet (e.g. in_review, submitted, action_required)
                    displayActivationStatus(response.data);
                    
                    // Continue polling if still in review
                    if (response.data.activation_status === 'in_review') {
                        setTimeout(pollActivationStatus, 10000); // Poll every 10 seconds
                    }
                }
            } else {
                $('#activationStatusCard').hide();
            }
        })
        .fail(function() {
            // Silent fail - don't show error to user
        });
}

/**
 * Retry activation
 */
function retryActivation(wabaPoolId) {
    if (!confirm('Apakah Anda yakin ingin melakukan retry aktivasi?')) {
        return;
    }

    $.post('{{ route('client.waba-integration.retry-activation') }}', {
        _token: '{{ csrf_token() }}',
        waba_pool_id: wabaPoolId
    })
    .done(function(response) {
        if (response.success) {
            toastr.success(response.message || 'Retry aktivasi berhasil dimulai');
            displayActivationStatus(response);
            // Start polling again
            setTimeout(pollActivationStatus, 5000);
        } else {
            toastr.error(response.message || 'Gagal melakukan retry aktivasi');
        }
    })
    .fail(function(xhr) {
        toastr.error(xhr.responseJSON?.message || 'Gagal melakukan retry aktivasi');
    });
}

// Check activation status on page load
// DISABLED: Causes excessive API calls (polling every 10 seconds indefinitely)
// Activation status is now shown inline in the WABA list
// $(document).ready(function() {
//     pollActivationStatus();
// });

/**
 * Disconnect WABA
 */
function disconnectWaba(wabaId) {
    var btn = $('#btnConfirmDisconnect');
    btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i>Processing...');
    
    $.post('{{ route('client.waba-integration.oauth.disconnect') }}', {
        _token: '{{ csrf_token() }}',
        waba_id: wabaId
    }).done(function(response) {
        if (response.success) {
            toastr.success(response.message);
            
            if (response.data.downgraded) {
                toastr.info('Paket dikembalikan ke ' + response.data.new_package);
            }
            
            window.location.reload();
        } else {
            toastr.error(response.message);
        }
    }).fail(function(xhr) {
        toastr.error(xhr.responseJSON?.message || 'Gagal memutuskan WABA');
    }).always(function() {
        btn.prop('disabled', false).html('<i class="ti ti-unlink me-1"></i>Ya, Disconnect');
        $('#modalDisconnect').modal('hide');
    });
}

/**
 * PROFIL WABA LOGIC
 */
$(document).on('click', '.btn-profile', function() {
    var id = $(this).data('id');
    var modal = $('#modalWabaProfile');
    var form = $('#formWabaProfile');
    var loading = $('#profileLoading');
    
    // Reset form
    form[0].reset();
    $('#profilePreview').attr('src', '');
    $('#profileWabaId').val(id);
    
    // Show Modal
    modal.modal('show');
    loading.show();

    // Fetch Profile
    $.get('/client/waba-integration/' + id + '/profile')
        .done(function(response) {
            if(response.success) {
                var data = response.data;
                
                $('#profileAbout').val(data.about || '');
                $('#profileDescription').val(data.description || '');
                $('#profileAddress').val(data.address || '');
                $('#profileEmail').val(data.email || '');
                $('#profileVertical').val(data.vertical || '');
                
                if (data.websites && data.websites.length > 0) {
                    $('#profileWebsite1').val(data.websites[0] || '');
                    if (data.websites.length > 1) {
                        $('#profileWebsite2').val(data.websites[1] || '');
                    }
                }
                
                $('#profilePreview').attr('src', data.profile_picture_url || 'https://via.placeholder.com/100?text=No+Image');
            }
        })
        .fail(function(xhr) {
             toastr.error('Gagal mengambil data profil');
             modal.modal('hide');
        })
        .always(function() {
            loading.hide();
        });
});

/**
 * Handle Profile Picture Preview
 */
$('#profilePictureInput').on('change', function(e) {
    var file = e.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#profilePreview').attr('src', e.target.result);
        }
        reader.readAsDataURL(file);
    }
});

/**
 * Create/Update Profile
 */
$('#btnSaveProfile').on('click', function() {
    var form = $('#formWabaProfile')[0];
    var formData = new FormData(form);
    var id = $('#profileWabaId').val();
    var btn = $(this);
    
    // Manual validation usually handled by HTML5 or Backend, 
    // but we can check if file size > 5MB here if we want.
    
    btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i>Menyimpan...');

    $.ajax({
        url: '/client/waba-integration/' + id + '/profile',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                toastr.success(response.message);
                $('#modalWabaProfile').modal('hide');
            } else {
                toastr.error(response.message);
            }
        },
        error: function(xhr) {
            var msg = xhr.responseJSON?.message || 'Gagal menyimpan profil';
            // Show validation errors
             if (xhr.responseJSON?.errors) {
                var errors = xhr.responseJSON.errors;
                var firstError = Object.values(errors)[0][0];
                msg = firstError;
            }
            toastr.error(msg);
        },
        complete: function() {
             btn.prop('disabled', false).html('<i class="ti ti-device-floppy me-1"></i>Simpan Perubahan');
        }
    });
});

/**
 * Handle Resync Webhook
 */
$(document).on('click', '.btn-resync-webhook', function() {
    var btn = $(this);
    var id = btn.data('id');
    var originalHtml = btn.html();
    
    btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin"></i>');
    
    $.ajax({
        url: '/client/waba-integration/' + id + '/resync-webhook',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                toastr.success(response.message);
                // Reload page to show updated status
                setTimeout(function() {
                    window.location.reload();
                }, 1000);
            } else {
                toastr.error(response.message);
                btn.prop('disabled', false).html(originalHtml);
            }
        },
        error: function(xhr) {
            toastr.error(xhr.responseJSON?.message || 'Gagal sinkronisasi webhook');
            btn.prop('disabled', false).html(originalHtml);
        }
    });
});


</script>
@endpush

@push('styles')
<style>
.bg-purple-subtle {
    background-color: rgba(111, 66, 193, 0.1) !important;
}
.text-purple {
    color: #6f42c1 !important;
}
.btn-purple {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
}
.btn-purple:hover {
    background-color: #5a32a3;
    border-color: #5a32a3;
    color: #fff;
}
.btn-outline-purple {
    color: #6f42c1;
    border-color: #6f42c1;
}
.btn-outline-purple:hover {
    background-color: #6f42c1;
    color: #fff;
}
.border-purple {
    border-color: #6f42c1 !important;
}
</style>
@endpush