@extends('layouts.app')

@section('title', 'Send WhatsApp Message')

@section('content')

<div class="container py-5 mt-5"> {{-- Keeps content safely below navbar and avoids overflow --}}

    <!-- Display Alerts -->
    @foreach(['success', 'error'] as $type)
        @include('components.layouts.alert', ['type' => $type])
    @endforeach

    <div class="row justify-content-center">
        <div class="col-lg-10 col-md-11">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-qr-code me-2"></i> Link Your WhatsApp Account
                    </h5>
                    <a href="{{ route('dashboard') }}" class="btn btn-light btn-sm">
                        <i class="bi bi-arrow-left"></i> Back to Dashboard
                    </a>
                </div>

                <div class="card-body py-4">
                    <div class="row g-4 align-items-center">

                        <!-- Left Column -->
                        <div class="col-md-6">
                            <!-- Status -->
                            <div id="qrStatus" class="alert alert-info d-flex align-items-center py-2">
                                <i class="bi bi-info-circle me-2"></i>
                                Loading QR code for instance <strong>{{ $instanceId }}</strong>
                            </div>

                            <!-- Instructions -->
                            <div id="qrInstructions" class="mb-3" style="display: none;">
                                {{-- <h6 class="fw-bold">How to link your device:</h6> --}}
                                <h6>Use WhatsApp on you phone to scan the code</h6>
                                <ol class="ps-3 mb-2">
                                    <li>Open WhatsApp on your phone</li>
                                    <li>Tap <strong>⋮ → Linked Devices → Link a Device</strong></li>
                                    <li>Point your camera at the QR code</li>
                                    <li>Wait for confirmation</li>
                                </ol>
                                <div class="alert alert-warning small d-flex align-items-center mb-2">
                                    <i class="bi bi-exclamation-triangle me-2"></i>
                                    Keep this page open until connection completes
                                </div>
                            </div>

                            <!-- Connection Badge -->
                            <div class="mb-2">
                                <span id="connectionStatus" class="badge bg-secondary">Loading</span>
                            </div>

                            <!-- Action Buttons -->
                            <div id="actionButtons" class="d-grid gap-2" style="display: none;">
                                <button id="refreshQrBtn" class="btn btn-outline-primary">
                                    <i class="bi bi-arrow-clockwise me-1"></i> Refresh
                                </button>
                            </div>
                        </div>

                        <!-- Right Column: QR Code -->
                        <div class="col-md-6 d-flex justify-content-center">
                            <div class="position-relative d-flex justify-content-center align-items-center border border-dashed rounded"
                                 style="width: 100%; max-width: 300px; aspect-ratio: 1 / 1;">
                                
                                <!-- Placeholder -->
                                <div id="qrPlaceholder" class="d-flex justify-content-center align-items-center w-100 h-100">
                                    <i class="bi bi-qr-code-scan fs-1 text-muted"></i>
                                </div>

                                <!-- QR Image -->
                                <img id="qrImage" src="" 
                                     class="img-fluid position-absolute top-0 start-0 w-100 h-100 rounded"
                                     style="display: none; object-fit: contain;">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection


@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const instanceId = "{{ $instanceId }}"; // Get instance ID from Blade
        let checkStatusInterval = null;
        let isConnected = false;
        let lastStatus = '';
        
        if (!instanceId) {
            showError('Instance ID is missing');
            return;
        }
        
        console.log('Loading QR for instance:', instanceId);
        
        // Start checking QR status
        checkQrStatus();
        
        // Set up interval to check status every 2 seconds
        checkStatusInterval = setInterval(checkQrStatus, 2000);
        
        // Download QR code
        document.getElementById('downloadQrBtn').addEventListener('click', function() {
            const qrImage = document.getElementById('qrImage');
            if (qrImage.src) {
                const link = document.createElement('a');
                link.download = `whatsapp-qr-${instanceId}.png`;
                link.href = qrImage.src;
                link.click();
            }
        });
        
        // Refresh QR code
        document.getElementById('refreshQrBtn').addEventListener('click', function() {
            clearInterval(checkStatusInterval);
            document.getElementById('qrStatus').className = 'alert alert-info';
            document.getElementById('qrStatus').innerHTML = '<i class="bi bi-arrow-repeat spinner"></i> Refreshing QR code...';
            document.getElementById('qrImage').style.display = 'none';
            document.getElementById('connectionStatus').className = 'badge bg-secondary';
            document.getElementById('connectionStatus').textContent = 'Refreshing';
            document.getElementById('qrInstructions').style.display = 'none';
            
            checkQrStatus();
            checkStatusInterval = setInterval(checkQrStatus, 2000);
        });
        
        async function checkQrStatus() {
            try {
                console.log('Checking QR status for instance:', instanceId);
                
                const response = await fetch(`/instances/${instanceId}/qr`, {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                console.log('QR API response:', data);
                
                // Log status changes for debugging
                if (data.status !== lastStatus) {
                    console.log('Status changed:', lastStatus, '→', data.status);
                    lastStatus = data.status;
                }
                
                if (!data.success) {
                    throw new Error(data.message || data.error || 'Failed to fetch QR data');
                }
                
                updatePageWithQrData(data);
                
            } catch (error) {
                console.error('Error checking QR status:', error);
                showError(error.message);
            }
        }
        
        function updatePageWithQrData(data) {
            const statusElement = document.getElementById('qrStatus');
            const connectionStatus = document.getElementById('connectionStatus');
            const instructionsElement = document.getElementById('qrInstructions');
            const actionButtons = document.getElementById('actionButtons');
            
            actionButtons.style.display = 'block';
            
            switch (data.status) {
                case 'awaiting_scan':
                    statusElement.className = 'alert alert-warning';
                    statusElement.innerHTML = '<i class="bi bi-qr-code"></i> Scan the QR code with WhatsApp to connect';
                    connectionStatus.className = 'badge bg-warning';
                    connectionStatus.textContent = 'Awaiting Scan';
                    instructionsElement.style.display = 'block';
                    
                    if (data.qr) {
                        generateQrImage(data.qr);
                    } else {
                        statusElement.innerHTML = '<i class="bi bi-exclamation-triangle"></i> QR code not available yet';
                    }
                    break;
                    
                case 'connected':
                    // Only process connected state if we haven't already
                    if (!isConnected) {
                        isConnected = true;
                        statusElement.className = 'alert alert-success';
                        statusElement.innerHTML = '<i class="bi bi-check-circle"></i> Connected successfully! Redirecting to dashboard...';
                        connectionStatus.className = 'badge bg-success';
                        connectionStatus.textContent = 'Connected';
                        instructionsElement.style.display = 'none';
                        document.getElementById('qrImage').style.display = 'none';
                        
                        // Hide action buttons
                        actionButtons.style.display = 'none';
                        
                        // Stop checking status
                        clearInterval(checkStatusInterval);
                        console.log('Connection established, stopping polling');
                        
                        // Show success message and redirect after delay
                        setTimeout(() => {
                            console.log('Redirecting to dashboard');
                            window.location.href = '{{ route('dashboard') }}';
                        }, 2000);
                    }
                    break;
                    
                case 'initializing':
                    statusElement.className = 'alert alert-info';
                    statusElement.innerHTML = '<i class="bi bi-arrow-repeat spinner"></i> Initializing WhatsApp instance...';
                    connectionStatus.className = 'badge bg-info';
                    connectionStatus.textContent = 'Initializing';
                    instructionsElement.style.display = 'none';
                    break;
                    
                case 'reinitializing':
                    statusElement.className = 'alert alert-info';
                    statusElement.innerHTML = '<i class="bi bi-arrow-repeat spinner"></i> Reinitializing instance...';
                    connectionStatus.className = 'badge bg-info';
                    connectionStatus.textContent = 'Reinitializing';
                    instructionsElement.style.display = 'none';
                    break;
                    
                case 'disconnected':
                    statusElement.className = 'alert alert-danger';
                    statusElement.innerHTML = '<i class="bi bi-exclamation-triangle"></i> Instance is disconnected. Try reconnecting first.';
                    connectionStatus.className = 'badge bg-danger';
                    connectionStatus.textContent = 'Disconnected';
                    instructionsElement.style.display = 'none';
                    clearInterval(checkStatusInterval);
                    break;
                    
                default:
                    statusElement.className = 'alert alert-info';
                    statusElement.innerHTML = `<i class="bi bi-info-circle"></i> ${data.message || 'Processing...'}`;
                    connectionStatus.className = 'badge bg-info';
                    connectionStatus.textContent = data.status || 'Unknown';
                    instructionsElement.style.display = 'none';
            }
        }
        
        function generateQrImage(qrData) {
            const statusElement = document.getElementById('qrStatus');
            const qrImage = document.getElementById('qrImage');
            
            // URL encode the QR data
            const encodedData = encodeURIComponent(qrData);
            
            // Use a reliable QR code generation service
            const qrServiceUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodedData}&format=png&margin=10&qzone=1`;
            
            statusElement.innerHTML = '<i class="bi bi-arrow-repeat spinner"></i> Generating QR code...';
            
            // Preload the image
            const img = new Image();
            img.onload = function() {
                qrImage.src = qrServiceUrl;
                qrImage.style.display = 'block';
                
                statusElement.innerHTML = `
                    <i class="bi bi-check-circle text-success"></i>
                    <span>QR code ready!.</span>
                `;
            };
            
            img.onerror = function() {
                statusElement.innerHTML = `
                    <i class="bi bi-exclamation-triangle text-danger"></i>
                    <span>Failed to load QR image. Please try refreshing.</span>
                `;
            };
            
            img.src = qrServiceUrl;
        }
        
        function showError(message) {
            const statusElement = document.getElementById('qrStatus');
            statusElement.className = 'alert alert-danger';
            statusElement.innerHTML = `
                <i class="bi bi-exclamation-triangle"></i> 
                <strong>Error:</strong> ${message}
            `;
            document.getElementById('actionButtons').style.display = 'block';
        }

        // Debug function to manually check status
        window.debugStatus = function() {
            console.log('=== MANUAL STATUS CHECK ===');
            console.log('Instance ID:', instanceId);
            console.log('Is connected:', isConnected);
            console.log('Last status:', lastStatus);
            checkQrStatus();
        };
    });
</script>
@endpush