@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="container-fluid py-4">

    <!-- Greeting Section -->
    <div class="bg-body-tertiary p-4 rounded-4 mb-4">
        <h4 class="fw-bold mb-1">
            Welcome back, {{ session('fullname') ?? 'User' }}! 👋
        </h4>
        <p class="text-muted small mb-0">
            <i class="bi bi-calendar"></i> {{ now()->format('F d, Y') }}
        </p>
    </div>

    <!-- Filters -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <h5 class="fw-semibold mb-2 mb-md-0">Usage Overview</h5>
        <form method="GET" action="{{ route('dashboard') }}" class="d-flex align-items-center gap-2">
            <i class="bi bi-funnel-fill text-muted"></i>
            <select name="period" id="period" class="form-select form-select-sm" onchange="this.form.submit()">
                <option value="today" {{ request('period') === 'today' ? 'selected' : '' }}>Today</option>
                <option value="week" {{ request('period') === 'week' ? 'selected' : '' }}>This Week</option>
                <option value="month" {{ request('period') === 'month' || !request('period') ? 'selected' : '' }}>This Month</option>
                <option value="year" {{ request('period') === 'year' ? 'selected' : '' }}>This Year</option>
            </select>
        </form>
    </div>

    <!-- Dashboard Cards -->
    <div class="row g-4">
        <!-- Subscription Plan -->
        <div class="col-12 col-md-6 col-lg-4">
            @php
                $daysLeft = $newAnalytics['plan']['days_left'] ?? 0;
                if ($daysLeft > 3) {
                    $badgeClass = 'bg-success';
                    $badgeText = 'Active';
                    $showRenew = false;
                } elseif ($daysLeft > 0 && $daysLeft <= 3) {
                    $badgeClass = 'bg-warning text-dark';
                    $badgeText = 'Expiring Soon';
                    $showRenew = false;
                } else {
                    $badgeClass = 'bg-danger';
                    $badgeText = 'Inactive';
                    $showRenew = true;
                }
            @endphp

            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body d-flex justify-content-between align-items-center p-4">
                    <div class="d-flex align-items-center">
                        <div class="bg-primary bg-opacity-10 text-primary d-flex align-items-center justify-content-center rounded-3 me-3" style="width:48px; height:48px;">
                            <i class="fas fa-layer-group fs-4"></i>
                        </div>
                        <div>
                            <p class="text-muted small mb-1">Subscription Plan</p>
                            <h6 class="fw-semibold mb-1 d-flex align-items-center gap-2">
                                {{-- if beta tester show beta tester --}}
                                
                                {{ $newAnalytics['plan']['name'] ?? 'Free' }}
                                <span class="badge {{ $badgeClass }} text-white small">{{ $badgeText }}</span>
                            </h6>
                            <small class="text-muted">
                                {{ $daysLeft > 0 ? $daysLeft . ' days left' : 'Expired' }}
                            </small>
                        </div>
                    </div>
                    <div>
                        @if($showRenew)
                            <a href="{{ route('payments.pricing') }}" class="btn btn-sm btn-primary fw-semibold">Renew</a>
                        @else
                            <a href="{{ route('payments.pricing') }}" class="btn btn-sm btn-outline-primary fw-semibold">Upgrade</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Instances -->
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body d-flex justify-content-between align-items-center p-4">
                    <div class="d-flex align-items-center">
                        <div class="bg-success bg-opacity-10 text-success d-flex align-items-center justify-content-center rounded-3 me-3" style="width:48px; height:48px;">
                            <i class="fas fa-server fs-4"></i>
                        </div>
                        <div>
                            <p class="text-muted small mb-1">Active Instance(s)</p>
                            <h6 class="fw-semibold mb-0">{{ $newAnalytics['stats']['active_instances'] ?? 0 }} / {{ $newAnalytics['stats']['max_instances'] ?? 0 }}</h6>
                        </div>
                    </div>
                    <span class="badge bg-success-subtle text-success small">Active</span>
                </div>
                <div class="card-footer bg-transparent border-0 pt-0">
                    <a href="#" class="text-decoration-none small text-primary fw-semibold">Manage Instances</a>
                </div>
            </div>
        </div>

        <!-- Messages Sent -->
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body d-flex justify-content-between align-items-center p-4">
                    <div class="d-flex align-items-center">
                        <div class="bg-warning bg-opacity-10 text-warning d-flex align-items-center justify-content-center rounded-3 me-3" style="width:48px; height:48px;">
                            <i class="fas fa-paper-plane fs-4"></i>
                        </div>
                        <div>
                            <p class="text-muted small mb-1">Messages Sent</p>
                            <h6 class="fw-semibold mb-0">{{ number_format($newAnalytics['stats']['messages_sent'] ?? 0) }}</h6>
                        </div>
                    </div>
                    <div class="text-end small">
                        @if(($newAnalytics['stats']['messages_sent_change'] ?? 0) < 0)
                            <i class="fas fa-arrow-down text-danger me-1"></i>
                            <span class="text-danger">{{ $newAnalytics['stats']['messages_sent_change'] ?? 0 }}%</span>
                        @else
                            <i class="fas fa-arrow-up text-success me-1"></i>
                            <span class="text-success">{{ $newAnalytics['stats']['messages_sent_change'] ?? 0 }}%</span>
                        @endif
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0 pt-0">
                    <a href="{{ route('messages.view-sent-messages') }}" class="text-decoration-none small text-primary fw-semibold">View Analytics</a>
                </div>
            </div>
        </div>

        <!-- Success Rate -->
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body d-flex justify-content-between align-items-center p-4">
                    <div class="d-flex align-items-center">
                        <div class="bg-info bg-opacity-10 text-info d-flex align-items-center justify-content-center rounded-3 me-3" style="width:48px; height:48px;">
                            <i class="fas fa-check-circle fs-4"></i>
                        </div>
                        <div>
                            <p class="text-muted small mb-1">Success Rate</p>
                            <h6 class="fw-semibold mb-0">{{ $newAnalytics['stats']['success_rate'] ?? 0 }}%</h6>
                        </div>
                    </div>
                    <span class="text-success small"><i class="fas fa-arrow-up me-1"></i>3%</span>
                </div>
                <div class="card-footer bg-transparent border-0 pt-0">
                    <a href="#" class="text-decoration-none small text-primary fw-semibold">Delivery Insights</a>
                </div>
            </div>
        </div>

        <!-- API Calls Used -->
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body d-flex justify-content-between align-items-center p-4">
                    <div class="d-flex align-items-center">
                        <div class="bg-primary bg-opacity-10 text-primary d-flex align-items-center justify-content-center rounded-3 me-3" style="width:48px; height:48px;">
                            <i class="fas fa-code fs-4"></i>
                        </div>
                        <div>
                            <p class="text-muted small mb-1">API Calls Used</p>
                            <h6 class="fw-semibold mb-0">{{ number_format($newAnalytics['stats']['api_calls'] ?? 0) }}</h6>
                        </div>
                    </div>
                    <div class="text-end small">
                        @if(($newAnalytics['stats']['api_calls_change'] ?? 0) < 0)
                            <i class="fas fa-arrow-down text-danger me-1"></i>
                            <span class="text-danger">{{ $newAnalytics['stats']['api_calls_change'] ?? 0 }}%</span>
                        @else
                            <i class="fas fa-arrow-up text-success me-1"></i>
                            <span class="text-success">{{ $newAnalytics['stats']['api_calls_change'] ?? 0 }}%</span>
                        @endif
                        <div class="text-muted small">vs last month</div>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0 pt-0">
                    <a href="#" class="text-decoration-none small text-primary fw-semibold">View Usage</a>
                </div>
            </div>
        </div>

        <!-- Failed Messages -->
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body d-flex justify-content-between align-items-center p-4">
                    <div class="d-flex align-items-center">
                        <div class="bg-danger bg-opacity-10 text-danger d-flex align-items-center justify-content-center rounded-3 me-3" style="width:48px; height:48px;">
                            <i class="fas fa-times-circle fs-4"></i>
                        </div>
                        <div>
                            <p class="text-muted small mb-1">Failed Messages</p>
                            <h6 class="fw-semibold mb-0">{{ $newAnalytics['stats']['failed_messages'] ?? 0 }}</h6>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0 pt-0">
                    <a href="{{ route('messages.view-sent-messages') }}" class="text-decoration-none small text-primary fw-semibold">View Analytics</a>
                </div>
            </div>
        </div>
    </div>
</div>




        <hr class="my-4">

    <!-- Instances Section -->
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4 flex-column flex-md-row">
                <h4 class="fw-bold mb-3 mb-md-0">
                    <i class="bi bi-list-check me-2"></i>Your WhatsApp Instances
                </h4>
                <button type="button" class="btn btn-primary btn-sm" id="createInstanceBtn">
                    <i class="bi bi-plus-circle me-1"></i>Create New Instance
                </button>
            </div>

            <!-- Alerts -->
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show rounded-3">
                    <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show rounded-3">
                    <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- QR Code Modal -->
            <div class="modal fade" id="qrModal" tabindex="-1" aria-labelledby="qrModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content rounded-4 shadow">
                        <div class="modal-header border-0">
                            <h5 class="modal-title fw-bold" id="qrModalLabel">
                                <i class="bi bi-whatsapp me-2"></i>Link Your WhatsApp Account
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-info rounded-3" id="qrModalStatus">
                                <i class="bi bi-info-circle me-2"></i>Preparing QR code...
                            </div>
                            <div id="qrInstructions" class="mb-3" style="display: none;">
                                <h6 class="fw-bold">How to link your device:</h6>
                                <ol class="small">
                                    <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 connection confirmation</li>
                                </ol>
                                <div class="alert alert-warning small mb-0 rounded-3">
                                    <i class="bi bi-exclamation-triangle me-2"></i>Keep this window open until connection is complete
                                </div>
                            </div>
                            <div class="text-center mt-3">
                                <img id="qrModalImage" src="" class="img-fluid mb-3 rounded shadow-sm" style="display: none; max-width: 280px; border: 1px solid #dee2e6;">
                                <div>
                                    <span id="qrModalConnectionStatus" class="badge bg-secondary">Preparing</span>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer border-0">
                            <button type="button" class="btn btn-secondary btn-sm">Close</button>
                            <button id="refreshQrBtn" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-arrow-clockwise me-1"></i>Refresh QR
                            </button>
                            <button id="downloadQrBtn" class="btn btn-outline-success btn-sm" style="display: none;">
                                <i class="bi bi-download me-1"></i>Download QR
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Instances Container -->
            <div id="instances-container">
                @if(isset($instances['success']) && $instances['success'])
                    @if(!empty($instances['instances']))
                        <div class="row g-3 g-md-4">
                            @foreach($instances['instances'] as $instance)
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden hover-shadow">
                                        <!-- Card Header -->
                                        <div class="card-header border-0 bg-light d-flex justify-content-between align-items-center">
                                            <div class="d-flex align-items-center">
                                                <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-2" 
                                                    style="width: 40px; height: 40px;">
                                                    <i class="fas fa-server"></i>
                                                </div>
                                                <div>
                                                    <h6 class="fw-bold mb-0">Instance</h6>
                                                    <small class="text-muted">#{{ $instance['id'] }}</small>
                                                </div>
                                            </div>

                                            @php
                                                $statusColors = [
                                                    'connected' => 'success',
                                                    'awaiting_scan' => 'warning',
                                                    'initializing' => 'info',
                                                    'disconnected' => 'danger',
                                                    'reinitializing' => 'secondary'
                                                ];
                                                $statusClass = $statusColors[$instance['status']] ?? 'secondary';
                                            @endphp

                                            <span class="badge bg-{{ $statusClass }} text-capitalize px-2 py-1">
                                                <i class="fas fa-circle me-1 small"></i>{{ $instance['status'] }}
                                            </span>
                                        </div>

                                        <!-- Card Body -->
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <div class="text-muted mb-1">Created</div>
                                                <div class="fw-semibold">{{ \Carbon\Carbon::parse($instance['created_at'])->format('M j, Y g:i A') }}</div>
                                                @if(!empty($instance['connected_at']))
                                                    <div class="d-flex small mt-1">
                                                        <span class="text-muted">Connected</span>
                                                        <span class="fw-semibold ms-1">{{ \Carbon\Carbon::parse($instance['connected_at'])->format('M j, Y g:i A') }}</span>
                                                    </div>
                                                @endif
                                            </div>

                                            @if(!empty($instance['whatsapp_user_id']))
                                                <div class="mb-3">
                                                    <div class="text-muted small mb-1">WhatsApp Number</div>
                                                    <div class="fw-semibold">
                                                        <i class="fab fa-whatsapp text-success me-1"></i>
                                                        {{ cleanWhatsAppNumber($instance['whatsapp_user_id']) }}
                                                    </div>
                                                </div>
                                            @endif

                                            <div class="mb-2">
                                                <div class="text-muted small mb-1">Webhook URL</div>
                                                @if(!empty($instance['webhook_url']))
                                                    <a href="{{ $instance['webhook_url'] }}" target="_blank" class="text-decoration-none small">
                                                        <i class="bi bi-link-45deg text-primary me-1"></i>{{ $instance['webhook_url'] }}
                                                    </a>
                                                @else
                                                    <small class="text-muted">Not set</small>
                                                @endif
                                            </div>
                                        </div>

                                        @php
                                            $status = strtolower($instance['status'] ?? '');
                                        @endphp
                                        <!-- Card Footer -->
                                        <div class="card-footer bg-transparent border-0 pt-2">
                                            <div class="d-flex flex-wrap gap-2 mt-2">
                                                @if($status === 'disconnected' || $status === '' || $status === 'initializing')
                                                    <form action="{{ route('instances.reconnect', $instance['id']) }}" method="POST">
                                                        @csrf
                                                        <button type="submit" class="btn btn-sm btn-outline-primary rounded-pill">
                                                            <i class="bi bi-arrow-repeat me-1"></i>Reconnect
                                                        </button>
                                                    </form>
                                                @endif

                                                @if($instance['status'] === 'awaiting_scan')
                                                    <a href="{{ route('instances.qr-page', $instance['id']) }}" class="btn btn-sm btn-outline-warning rounded-pill">
                                                        <i class="bi bi-qr-code me-1"></i>Show QR
                                                    </a>
                                                @endif

                                                <button type="button" class="btn btn-sm btn-outline-info rounded-pill edit-webhook-btn" 
                                                    data-instance-id="{{ $instance['id'] }}" 
                                                    data-webhook-url="{{ $instance['webhook_url'] ?? '' }}"
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#editWebhookModal">
                                                    <i class="bi bi-link-45deg me-1"></i>Edit Webhook
                                                </button>

                                                <form action="{{ route('instances.destroy', $instance['id']) }}" method="POST" 
                                                    onsubmit="return confirm('Are you sure you want to delete this instance?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill">
                                                        <i class="bi bi-trash me-1"></i>Delete
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="mb-3 mb-md-4">
                                <i class="bi bi-whatsapp fs-1 text-muted"></i>
                            </div>
                            <h4 class="text-muted fw-bold">No instances found</h4>
                            <p class="text-muted small">Get started by creating your first WhatsApp instance</p>
                            <button type="button" class="btn btn-primary btn-sm mt-3" id="createFirstInstanceBtn">
                                <i class="bi bi-plus-circle me-1"></i>Create Your First Instance
                            </button>
                        </div>
                    @endif
                @else
                    <div class="alert alert-warning rounded-3">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        {{ $instances['message'] ?? 'Failed to load instances. Please check if the API server is running.' }}
                    </div>
                    <div class="text-center py-3">
                        <button type="button" class="btn btn-primary btn-lg" id="createInstanceBtnAlt">
                            <i class="bi bi-plus-circle me-1"></i>Create New Instance
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <style>
        /* Hover effect for cards */
        .hover-shadow:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
            transition: all 0.3s ease;
        }
    </style>



    <!-- Edit Webhook Modal -->
    <div class="modal fade" id="editWebhookModal" tabindex="-1" aria-labelledby="editWebhookModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="editWebhookForm" method="POST" action="">
                @csrf
                @method('PATCH')
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editWebhookModalLabel">
                            <i class="bi bi-link-45deg me-2"></i>Edit Webhook URL
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="webhookUrlInput" class="form-label">Webhook URL</label>
                            <input type="url" class="form-control" id="webhookUrlInput" name="webhook_url">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // Wait for DOM to be fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        let currentQrInstanceId = null;
        let qrPollInterval = null;
        let qrPollAttempts = 0;
        const MAX_POLL_ATTEMPTS = 30;
        
        // Initialize modal
        const qrModal = new bootstrap.Modal(document.getElementById('qrModal'));
        
        // Show QR modal when button is clicked - FIXED EVENT DELEGATION
        document.addEventListener('click', function(e) {
            // Check if the clicked element or its parent has the show-qr-btn class
            const showQrBtn = e.target.closest('.show-qr-btn');
            if (showQrBtn) {
                e.preventDefault(); // Prevent default behavior
                e.stopPropagation(); // Stop event bubbling
                
                const instanceId = showQrBtn.dataset.instanceId;
                const card = showQrBtn.closest('.card');
                const statusBadge = card ? card.querySelector('.status-badge') : null;
                const instanceStatus = statusBadge ? statusBadge.textContent.trim() : 'unknown';
                
                console.log('Show QR button clicked for instance:', instanceId, 'Status:', instanceStatus);
                showQrModal(instanceId, instanceStatus);
            }
        });
        
        // Create instance button handlers
        const createInstanceBtns = [
            document.getElementById('createInstanceBtn'),
            document.getElementById('createFirstInstanceBtn'),
            document.getElementById('createInstanceBtnAlt')
        ].filter(btn => btn !== null);
        
        createInstanceBtns.forEach(btn => {
            btn.addEventListener('click', createInstance);
        });

            // Edit Webhook Modal logic
        document.querySelectorAll('.edit-webhook-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const instanceId = btn.getAttribute('data-instance-id');
                const webhookUrl = btn.getAttribute('data-webhook-url') || '';
                const form = document.getElementById('editWebhookForm');
                form.action = `/instances/${instanceId}/webhook`; // Adjust route as needed
                document.getElementById('webhookUrlInput').value = webhookUrl;
            });
        });
        
        // Show QR modal function
        function showQrModal(instanceId, instanceStatus) {
            currentQrInstanceId = instanceId;
            console.log('Opening modal for instance:', instanceId, 'with status:', instanceStatus);
            
            // Reset modal state
            resetModal();
            
            // Show appropriate initial message based on status
            const statusElement = document.getElementById('qrModalStatus');
            if (instanceStatus === 'awaiting_scan') {
                statusElement.innerHTML = '<i class="bi bi-arrow-repeat spinner"></i> Loading QR code...';
            } else {
                statusElement.innerHTML = '<i class="bi bi-arrow-repeat spinner"></i> Preparing instance for QR code...';
            }
            
            // Show the modal
            qrModal.show();
            
            // Start polling for QR status
            startQrPolling();
        }
        
        function resetModal() {
            if (qrPollInterval) {
                clearInterval(qrPollInterval);
                qrPollInterval = null;
            }
            
            qrPollAttempts = 0;
            document.getElementById('qrModalStatus').className = 'alert alert-info';
            document.getElementById('qrModalStatus').innerHTML = '<i class="bi bi-info-circle"></i> Loading QR code...';
            document.getElementById('qrModalImage').style.display = 'none';
            document.getElementById('qrModalImage').src = '';
            document.getElementById('qrInstructions').style.display = 'none';
            document.getElementById('qrModalConnectionStatus').className = 'badge bg-secondary';
            document.getElementById('qrModalConnectionStatus').textContent = 'Loading...';
            document.getElementById('downloadQrBtn').style.display = 'none';
            document.getElementById('refreshQrBtn').style.display = 'block';
        }
        
        // Start polling for QR code
        function startQrPolling() {
            if (qrPollInterval) {
                clearInterval(qrPollInterval);
            }
            
            qrPollInterval = setInterval(async () => {
                await checkQrStatus();
            }, 2000);
            
            // Check immediately
            checkQrStatus();
        }
        
        // Check QR code status
        async function checkQrStatus() {
            if (!currentQrInstanceId) return;
            
            qrPollAttempts++;
            if (qrPollAttempts > MAX_POLL_ATTEMPTS) {
                clearInterval(qrPollInterval);
                showError('QR code not available after multiple attempts. Please try again.');
                return;
            }
            
            try {
                console.log('Checking QR status for instance:', currentQrInstanceId, 'Attempt:', qrPollAttempts);
                
                const response = await fetch(`/instances/${currentQrInstanceId}/qr`, {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                        // Removed Content-Type header for GET request
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                console.log('QR API response:', data);
                
                if (!data.success) {
                    throw new Error(data.message || data.error || 'Failed to fetch QR data');
                }
                
                updateModalWithQrData(data);
                
            } catch (error) {
                console.error('Error checking QR status:', error);
                
                // Only show error after a few attempts to avoid flickering
                if (qrPollAttempts > 2) {
                    showError(error.message);
                }
            }
        }
        
        function updateModalWithQrData(data) {
            const statusElement = document.getElementById('qrModalStatus');
            const connectionStatus = document.getElementById('qrModalConnectionStatus');
            const instructionsElement = document.getElementById('qrInstructions');
            
            // Show instructions element
            instructionsElement.style.display = 'block';
            
            switch (data.status) {
                case 'awaiting_scan':
                    statusElement.className = 'alert alert-warning';
                    connectionStatus.className = 'badge bg-warning';
                    connectionStatus.textContent = 'Awaiting Scan';
                    
                    if (data.qr) {
                        generateQrWithService(data.qr);
                        // Stop polling once we have the QR code
                        clearInterval(qrPollInterval);
                    } else {
                        statusElement.innerHTML = '<i class="bi bi-exclamation-triangle"></i> QR code not available yet. Still generating...';
                    }
                    break;
                    
                case 'connected':
                    clearInterval(qrPollInterval);
                    statusElement.className = 'alert alert-success';
                    statusElement.innerHTML = '<i class="bi bi-check-circle"></i> Connected successfully!';
                    connectionStatus.className = 'badge bg-success';
                    connectionStatus.textContent = 'Connected';
                    document.getElementById('qrModalImage').style.display = 'none';
                    document.getElementById('downloadQrBtn').style.display = 'none';
                    
                    // Auto-close modal after 3 seconds and refresh page
                    setTimeout(() => {
                        if (document.getElementById('qrModal').classList.contains('show')) {
                            qrModal.hide();
                            showToast('WhatsApp connected successfully! Refreshing page...', 'success');
                            setTimeout(() => {
                                window.location.reload();
                            }, 1500);
                        }
                    }, 3000);
                    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';
                    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';
                    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';
                    clearInterval(qrPollInterval);
                    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';
            }
        }
        
        // Use a QR code generation service
        function generateQrWithService(qrData) {
            const statusElement = document.getElementById('qrModalStatus');
            const qrImage = document.getElementById('qrModalImage');
            const instructionsElement = document.getElementById('qrInstructions');
            
            // 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';
                document.getElementById('downloadQrBtn').style.display = 'block';
                instructionsElement.style.display = 'block';
                
                statusElement.innerHTML = `
                    <i class="bi bi-check-circle text-success"></i>
                    <span>QR code ready! Scan with WhatsApp:</span>
                    <ol class="mb-0 mt-2 small">
                        <li>Open WhatsApp on your phone</li>
                        <li>Tap ⋮ → Linked Devices → Link a Device</li>
                        <li>Point camera at this code</li>
                    </ol>
                `;
            };
            
            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('qrModalStatus');
            statusElement.className = 'alert alert-danger';
            statusElement.innerHTML = `
                <i class="bi bi-exclamation-triangle"></i> 
                <strong>Error:</strong> ${message}
            `;
        }
        
        // Download QR code
        document.getElementById('downloadQrBtn').addEventListener('click', function() {
            const qrImage = document.getElementById('qrModalImage');
            if (qrImage.src) {
                const link = document.createElement('a');
                link.download = `whatsapp-qr-${currentQrInstanceId}.png`;
                link.href = qrImage.src;
                link.click();
            }
        });
        
        // Refresh QR code
        document.getElementById('refreshQrBtn').addEventListener('click', function() {
            if (currentQrInstanceId) {
                console.log('Refreshing QR code...');
                resetModal();
                startQrPolling();
            }
        });
        
        // Clean up when modal is closed
        document.getElementById('qrModal').addEventListener('hidden.bs.modal', function() {
            console.log('Modal closed, cleaning up...');
            if (qrPollInterval) {
                clearInterval(qrPollInterval);
                qrPollInterval = null;
            }
            currentQrInstanceId = null;
            qrPollAttempts = 0;
        });
        
        // Create instance function
        async function createInstance() {
            const buttons = document.querySelectorAll('#createInstanceBtn, #createFirstInstanceBtn, #createInstanceBtnAlt');
            buttons.forEach(btn => {
                btn.disabled = true;
                const originalText = btn.innerHTML;
                btn.innerHTML = '<i class="bi bi-arrow-repeat spinner"></i> Creating...';
                btn.dataset.originalText = originalText;
            });
            
            try {
                const response = await fetch('{{ route("instances.store") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                });
                
                const data = await response.json();
                
                if (data.success) {
                    showToast('Instance created successfully! Refreshing page...', 'success');
                    // Refresh the page after a short delay to show the new instance
                    setTimeout(() => {
                        window.location.reload();
                    }, 2000);
                } else {
                    throw new Error(data.message || 'Failed to create instance');
                }
            } catch (error) {
                console.error('Create instance error:', error);
                showToast(error.message, 'error');
                buttons.forEach(btn => {
                    btn.disabled = false;
                    btn.innerHTML = btn.dataset.originalText;
                });
            }
        }
        
        // Helper function to show toast notifications
        function showToast(message, type = 'info') {
            // Create toast element if it doesn't exist
            if (!document.getElementById('toast-container')) {
                const toastContainer = document.createElement('div');
                toastContainer.id = 'toast-container';
                toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
                toastContainer.style.zIndex = '9999';
                document.body.appendChild(toastContainer);
            }
            
            const toast = document.createElement('div');
            toast.className = `toast align-items-center text-white bg-${type === 'error' ? 'danger' : type} border-0`;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');
            
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="bi ${type === 'success' ? 'bi-check-circle' : type === 'error' ? 'bi-exclamation-circle' : 'bi-info-circle'} me-2"></i>
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            `;
            
            document.getElementById('toast-container').appendChild(toast);
            const bsToast = new bootstrap.Toast(toast);
            bsToast.show();
            
            // Remove toast from DOM after it's hidden
            toast.addEventListener('hidden.bs.toast', function() {
                toast.remove();
            });
        }
    });
</script>
@endpush