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

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Connect WhatsApp Business',
        'links' => [['url' => route('client.dashboard'), 'label' => 'Dashboard']],
        'current' => 'WABA Signup'
    ])

    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card">
                <div class="card-body p-5 text-center">
                    <div class="mb-4">
                        <span class="avatar avatar-xl bg-primary-lt text-primary rounded-circle">
                            <i class="ti ti-brand-whatsapp fs-1"></i>
                        </span>
                    </div>
                    
                    <h2 class="mb-3">Hubungkan WhatsApp Business Account</h2>
                    <p class="text-muted mb-4">
                        Hubungkan akun WhatsApp Business Anda dengan mudah menggunakan Facebook Login. 
                        Pastikan Anda memiliki akses admin ke halaman Facebook Business Manager yang akan dihubungkan.
                    </p>

                    <div id="initial-state">
                        <button id="btnLogin" onclick="launchWhatsAppSignup()" class="btn btn-primary btn-lg w-100">
                            <i class="ti ti-brand-facebook me-2"></i> Login with Facebook
                        </button>
                    </div>

                    <!-- Status Loading / Progress -->
                    <div id="status-container" class="mt-4 text-start p-3 bg-light rounded d-none">
                        <div class="d-flex align-items-center mb-2">
                            <div class="spinner-border spinner-border-sm me-2 text-primary" role="status"></div>
                            <strong id="status-title">Processing...</strong>
                        </div>
                        <div id="status-log" class="text-muted small font-monospace" style="max-height: 150px; overflow-y: auto;"></div>
                    </div>

                    <!-- WABA Selection List -->
                    <div id="waba-list-container" class="mt-4 text-start d-none">
                        <h4 class="mb-3">Pilih Akun WhatsApp</h4>
                        <div id="waba-list" class="list-group list-group-flush border rounded mb-3">
                            <!-- Items inserted here -->
                        </div>
                        <button onclick="saveSelection()" id="btn-connect" class="btn btn-success w-100">
                            Connect Selected Account
                        </button>
                    </div>

                    <!-- Success State -->
                    <div id="success-state" class="mt-4 d-none">
                        <div class="alert alert-success border-0 bg-success-lt">
                            <i class="ti ti-circle-check fs-2 mb-2 d-block"></i>
                            <strong>Integrasi Berhasil!</strong>
                            <p class="mb-0 mt-2">Akun WhatsApp Business Anda telah terhubung dan siap digunakan.</p>
                        </div>
                        <a href="{{ route('client.dashboard') }}" class="btn btn-outline-primary mt-3">Kembali ke Dashboard</a>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-3">
                <a href="{{ route('client.dashboard') }}" class="text-muted small">
                    <i class="ti ti-arrow-left me-1"></i> Kembali ke Dashboard
                </a>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    window.fbAsyncInit = function() {
        console.log("FB Init Params:", {
            appId: '{{ $config['app_id'] }}',
            config_id: '{{ $config['config_id'] }}', // Log config id too for verification
            version: '{{ $config['graph_version'] }}'
        });

        FB.init({
            appId            : '{{ $config['app_id'] }}',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : '{{ $config['graph_version'] }}'
        });
    };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    
    // Hints captured from events
    let hintWabaId = null;
    let hintPhoneId = null; 

    // WA_EMBEDDED_SIGNUP Event Listener
    window.addEventListener('message', function(event) {
        if (event.origin !== 'https://www.facebook.com' && event.origin !== 'https://web.facebook.com') return;
        try {
            const data = JSON.parse(event.data);
            if (data.type === 'WA_EMBEDDED_SIGNUP') {
                 console.log('WA_EMBEDDED_SIGNUP event:', data);
                 if (data.waba_id) hintWabaId = data.waba_id;
                 if (data.phone_number_id) hintPhoneId = data.phone_number_id;
            }
        } catch (e) {}
    });

    function launchWhatsAppSignup() {
        document.getElementById('initial-state').classList.add('d-none');
        document.getElementById('status-container').classList.remove('d-none');
        document.getElementById('status-log').innerHTML = 'Creating secure connection...';
        
        // Exact config from reference
        FB.login(function (response) {
            console.log('FB.login response:', response);
            if (response.authResponse) {
                const code = response.authResponse.code;
                if (code) {
                    document.getElementById('status-log').innerHTML = 'Authenticating with Meta...';
                    exchangeCode(code);
                } else {
                    resetState('No authorization code received.');
                }
            } else {
                resetState('Login cancelled.');
            }
        }, {
            config_id: '{{ $config['config_id'] }}',
            response_type: 'code',
            override_default_response_type: true,
            scope: 'whatsapp_business_management, whatsapp_business_messaging' 
        });
    }

    async function exchangeCode(code) {
        try {
            const response = await fetch('{{ route('client.waba-signup.exchange-token') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify({ 
                    code: code,
                    waba_id: hintWabaId,
                    phone_number_id: hintPhoneId 
                })
            });
            const data = await response.json();

            if (data.success) {
                document.getElementById('status-title').innerText = 'Setup in Progress';
                document.getElementById('status-log').innerHTML = 'Synchronizing WhatsApp Business Account...<br><small class="text-muted">This may take up to 30 seconds.</small>';
                startPollingStatus();
            } else {
                throw new Error(data.message);
            }
        } catch (error) {
            resetState('Setup Failed: ' + error.message);
        }
    }

    function startPollingStatus() {
        let attempts = 0;
        const maxAttempts = 20; // 1 min (3s interval)
        
        const pollInterval = setInterval(async () => {
            attempts++;
            try {
                const response = await fetch('{{ route('client.waba-signup.check-status') }}');
                const data = await response.json();

                if (data.status === 'connected') {
                    clearInterval(pollInterval);
                    showSuccess(data.waba);
                } else {
                    if (attempts >= maxAttempts) {
                        clearInterval(pollInterval);
                        resetState('Synchronization timed out. Please check dashboard later.');
                    }
                }
            } catch (e) {
                console.error("Polling error", e);
            }
        }, 3000);
    }

    function showSuccess(waba) {
        document.getElementById('status-container').classList.add('d-none');
        document.getElementById('success-state').classList.remove('d-none');
        
        // Update success text
        const successMsg = document.querySelector('#success-state .alert p');
        if(successMsg && waba) {
            successMsg.innerText = `Connected: ${waba.name} (${waba.phone})`;
        }
    }

    function resetState(errorMsg) {
        document.getElementById('initial-state').classList.remove('d-none');
        document.getElementById('status-container').classList.add('d-none');
        if (errorMsg) {
            alert(errorMsg);
        }
    }
</script>
@endpush