@extends('layouts.app')

@section('title', 'Create Instance')

@push('styles')
<style>
        /* create Instance */
         .qr-container {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            border: 1px solid #e9ecef;
        }
        .status-badge {
            font-size: 0.9rem;
            padding: 0.5em 0.8em;
        }
        #qrImage {
            transition: all 0.3s ease;
            border: 2px solid #dee2e6;
            border-radius: 10px;
        }
        .loading {
            opacity: 0.6;
            filter: blur(2px);
        }
        .instruction-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
        }
@endpush

@section('content')

    <div class="container-fluid">

        <!-- Key Metrics (Top Cards) -->
        <div class="row g-4 mb-4">
                        <div class="col-md-8">
                <!-- Instructions Card -->
                <div class="card instruction-card mb-4">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-info-circle"></i> How to Connect</h5>
                        <ol class="mb-0">
                            <li>Click "Create New Instance" below</li>
                            <li>Wait for QR code to generate</li>
                            <li>Open WhatsApp on your phone</li>
                            <li>Tap ⋮ (Menu) → Linked Devices → Link a Device</li>
                            <li>Scan the QR code shown below</li>
                            <li>Wait for connection confirmation</li>
                        </ol>
                    </div>
                </div>

                <div class="card shadow">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-plus-circle"></i> Create WhatsApp Instance
                        </h5>
                    </div>

                    <div class="card-body">
                        <!-- Create Instance Form -->
                        <form id="createInstanceForm" class="mb-4">
                            @csrf
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg" id="createBtn">
                                    <i class="bi bi-plus-circle"></i> Create New WhatsApp Instance
                                </button>
                            </div>
                        </form>

                        <!-- QR Code Display Area -->
                        <div id="qrSection" class="qr-container" style="display: none;">
                            <h5 class="text-center mb-4">
                                <i class="bi bi-qr-code"></i> Scan QR Code to Connect
                            </h5>
                            
                            <div class="alert alert-info d-flex align-items-center" id="qrStatus">
                                <i class="bi bi-info-circle me-2"></i>
                                <span>Generating QR code...</span>
                            </div>
                            
                            <div class="text-center mb-4">
                                <img id="qrImage" src="" class="img-fluid mb-3" 
                                     style="display: none; max-width: 280px; border-radius: 10px;">
                                
                                <div class="mt-3">
                                    <span id="connectionStatus" class="badge status-badge bg-secondary">Disconnected</span>
                                </div>
                            </div>

                            <div class="d-flex justify-content-center gap-2">
                                <button id="refreshQrBtn" class="btn btn-outline-primary btn-sm">
                                    <i class="bi bi-arrow-clockwise"></i> Refresh QR Code
                                </button>
                                <button id="downloadQrBtn" class="btn btn-outline-success btn-sm" style="display: none;">
                                    <i class="bi bi-download"></i> Download QR
                                </button>
                            </div>
                        </div>

                        <!-- Instance Info -->
                        <div id="instanceInfo" class="mt-4" style="display: none;">
                            <h6><i class="bi bi-info-square"></i> Instance Information</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>Instance ID:</strong><br><span id="instanceId" class="text-muted"></span></p>
                                </div>
                                <div class="col-md-6">
                                    <p><strong>Status:</strong><br><span id="instanceStatus" class="text-muted"></span></p>
                                </div>
                            </div>
                            <p><strong>Connected User:</strong><br><span id="connectedUser" class="text-muted">Not connected</span></p>
                        </div>
                    </div>
                </div>

                <!-- Back to Instances -->
                <div class="text-center mt-4">
                    <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Instances
                    </a>
                </div>
            </div>
        </div>


    </div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // API Configuration
    const API_BASE = '{{ config('services.node_api.url') }}';
    
    // Get API key from Laravel session
    const API_KEY = '{{ session('whatsapp_api_key') }}';

    let currentInstanceId = null;
    let qrPollInterval = null;

    // Check if we have an instance ID from query parameter
    const urlParams = new URLSearchParams(window.location.search);
    const instanceIdFromUrl = urlParams.get('instance');
    if (instanceIdFromUrl) {
        currentInstanceId = instanceIdFromUrl;
        document.getElementById('qrSection').style.display = 'block';
        document.getElementById('instanceInfo').style.display = 'block';
        document.getElementById('instanceId').textContent = currentInstanceId;
        startQrPolling();
    }

    // Create new instance
    document.getElementById('createInstanceForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const createBtn = document.getElementById('createBtn');
        createBtn.disabled = true;
        createBtn.innerHTML = '<i class="bi bi-arrow-repeat spinner"></i> Creating...';

        try {
            const response = await fetch('{{ route("instances.store") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                }
            });

            const data = await response.json();

            if (data.success) {
                currentInstanceId = data.instanceId;
                document.getElementById('qrSection').style.display = 'block';
                document.getElementById('instanceInfo').style.display = 'block';
                
                document.getElementById('instanceId').textContent = currentInstanceId;
                document.getElementById('instanceStatus').textContent = 'initializing';
                
                // Start polling for QR code
                startQrPolling();
                
                createBtn.innerHTML = '<i class="bi bi-check-circle"></i> Instance Created';
                createBtn.className = 'btn btn-success btn-lg';
                
            } else {
                alert('Error: ' + data.message);
                resetCreateButton();
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Failed to create instance. Make sure the API server is running.');
            resetCreateButton();
        }
    });

    function resetCreateButton() {
        const createBtn = document.getElementById('createBtn');
        createBtn.disabled = false;
        createBtn.innerHTML = '<i class="bi bi-plus-circle"></i> Create New WhatsApp Instance';
        createBtn.className = 'btn btn-primary btn-lg';
    }

    // Start polling for QR code
    function startQrPolling() {
        if (qrPollInterval) clearInterval(qrPollInterval);
        
        qrPollInterval = setInterval(async () => {
            await checkQrStatus();
        }, 2000);
        
        checkQrStatus();
    }

    // Check QR code status
    async function checkQrStatus() {
        if (!currentInstanceId) return;
        
        try {
            const response = await fetch(`/api/instances/${currentInstanceId}/qr`, {
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            
            const data = await response.json();
            
            // Update status message
            const statusElement = document.getElementById('qrStatus');
            statusElement.innerHTML = `<i class="bi bi-info-circle me-2"></i><span>${data.message}</span>`;
            document.getElementById('instanceStatus').textContent = data.status;
            
            // Handle different statuses
            switch (data.status) {
                case 'awaiting_scan':
                    statusElement.className = 'alert alert-warning d-flex align-items-center';
                    if (data.qr) {
                        document.getElementById('qrImage').style.display = 'block';
                        document.getElementById('qrImage').src = `${API_BASE}/instances/${currentInstanceId}/qr-image?t=${Date.now()}`;
                        document.getElementById('connectionStatus').className = 'badge status-badge bg-warning';
                        document.getElementById('connectionStatus').textContent = 'Awaiting Scan';
                        document.getElementById('downloadQrBtn').style.display = 'block';
                    }
                    break;
                    
                case 'connected':
                    clearInterval(qrPollInterval);
                    statusElement.className = 'alert alert-success d-flex align-items-center';
                    document.getElementById('qrImage').style.display = 'none';
                    document.getElementById('connectionStatus').className = 'badge status-badge bg-success';
                    document.getElementById('connectionStatus').textContent = 'Connected';
                    document.getElementById('connectedUser').textContent = data.user;
                    document.getElementById('downloadQrBtn').style.display = 'none';
                    break;
                    
                case 'generating_qr':
                case 'reinitializing':
                    statusElement.className = 'alert alert-info d-flex align-items-center';
                    document.getElementById('connectionStatus').className = 'badge status-badge bg-info';
                    document.getElementById('connectionStatus').textContent = data.status;
                    break;
                    
                case 'disconnected':
                    statusElement.className = 'alert alert-danger d-flex align-items-center';
                    document.getElementById('connectionStatus').className = 'badge status-badge bg-danger';
                    document.getElementById('connectionStatus').textContent = 'Disconnected';
                    break;
            }
            
        } catch (error) {
            console.error('Error checking QR status:', error);
        }
    }

    // Refresh QR code
    document.getElementById('refreshQrBtn').addEventListener('click', function() {
        if (currentInstanceId) {
            document.getElementById('qrImage').src = 
                `${API_BASE}/instances/${currentInstanceId}/qr-image?t=${Date.now()}`;
        }
    });

    // Download QR code
    document.getElementById('downloadQrBtn').addEventListener('click', function() {
        if (currentInstanceId) {
            const link = document.createElement('a');
            link.href = `${API_BASE}/instances/${currentInstanceId}/qr-image?t=${Date.now()}`;
            link.download = `whatsapp-qr-${currentInstanceId}.png`;
            link.click();
        }
    });
</script>

@endsection