@extends('layouts.app')
@section('title', 'Cola de Bots - ' . $countryName)

@push('styles')
    <style>
        .bot-table {
            font-size: 1rem;
        }
        
        .bot-table td {
            font-size: 1rem;
            padding: 12px 8px;
        }
        .bot-table td code {font-size: 1rem;}
        
        .bot-table th {
            font-size: 1rem;
        }
        
        .status-badge {
            font-size: 0.75rem;
        }
        
        .data-column {
            width: 100px;
            text-align: center;
        }
        
        .plan-column {
            width: 120px;
            text-align: center;
        }
        
        .plan-badge {
            font-size: 0.7rem;
            font-weight: bold;
            padding: 4px 8px;
        }
        
        .country-header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: #ecf0f1;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            border: 1px solid #495057;
        }
        
        .stats-card {
            border-left: 4px solid #6c757d;
        }
        
        .queue-priority {
            font-weight: bold;
            color: #ffc107;
        }
        
        /* Estilos para la funcionalidad de copiar Document ID y Key */
        .copy-document-id, .copy-document-key {
            transition: all 0.2s ease-in-out;
            border-radius: 3px;
            display: inline-block;
        }
        
        .copy-document-id:hover, .copy-document-key:hover {
            background-color: #e3f2fd !important;
            padding: 2px 4px !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .copy-document-id:active, .copy-document-key:active {
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        /* Tooltip personalizado */
        .copy-document-id::after, .copy-document-key::after {
            content: attr(title);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
            z-index: 1000;
            pointer-events: none;
        }
        
        .copy-document-id:hover::after, .copy-document-key:hover::after {
            opacity: 1;
            visibility: visible;
        }
    </style>
@endpush

@section('content')
<div id="layout-wrapper">
    @include('layouts.partials.header')
    @include('layouts.partials.sidebar')
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <!-- Header con información del país -->
                <div class="country-header">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="mb-1" style="color: #ecf0f1;">
                                <i class="fas fa-clock me-2"></i>
                                Cola de Bots - {{ $countryName }}
                            </h4>
                            <p class="mb-0" style="color: #adb5bd;">
                                Documentos con al menos un registro en cola (mostrando todos los status relacionados)
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <a href="{{ route('panelbot.index') }}" class="btn btn-light">
                                <i class="fas fa-arrow-left me-1"></i>Volver al Panel
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Estadísticas rápidas -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card stats-card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1">
                                        <p class="text-muted mb-1">Total en Cola</p>
                                        <h4 class="mb-0 queue-priority">{{ $queueBots->total() }}</h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div class="avatar-sm rounded-circle bg-soft-primary">
                                            <span class="avatar-title bg-soft-primary text-primary rounded-circle font-size-16">
                                                <i class="fas fa-hourglass-half"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1">
                                        <p class="text-muted mb-1">Página Actual</p>
                                        <h4 class="mb-0">{{ $queueBots->currentPage() }}</h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div class="avatar-sm rounded-circle bg-soft-info">
                                            <span class="avatar-title bg-soft-info text-info rounded-circle font-size-16">
                                                <i class="fas fa-list"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabla de bots en cola -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h5 class="card-title mb-0">
                                            <i class="fas fa-list-ul me-2"></i>
                                            Bots en Cola y Duplicados
                                        </h5>
                                        <small class="text-muted">
                                            Muestra todos los registros de document_id que tienen al menos uno en cola
                                        </small>
                                    </div>
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-sm btn-primary" onclick="location.reload()">
                                            <i class="fas fa-sync me-1"></i>Actualizar
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                @if($queueBots->count() > 0)
                                    <div class="table-responsive">
                                        <table class="table table-hover bot-table mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Posición</th>
                                                    <th>ID</th>
                                                    <th>Document ID</th>
                                                    <th>Key</th>
                                                    <th>Estado</th>
                                                    <th>Viajero Principal</th>
                                                    <th>Fecha de Llegada</th>
                                                    <th class="plan-column">Plan</th>
                                                    <th class="data-column">Data</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $startPosition = ($queueBots->currentPage() - 1) * $queueBots->perPage() + 1;
                                                @endphp
                                                @foreach($queueBots as $index => $bot)
                                                    <tr>
                                                        <td>
                                                            <span class="badge bg-primary">
                                                                #{{ $startPosition + $index }}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <code>{{ $bot->id }}</code>
                                                        </td>
                                                        <td>
                                                            @if($bot->document_id && $bot->document_id != 'N/A')
                                                                <code class="text-info copy-document-id" 
                                                                      style="cursor: pointer; position: relative;" 
                                                                      data-document-id="{{ $bot->document_id }}"
                                                                      title="Click para copiar Document ID">{{ $bot->document_id }}</code>
                                                            @else
                                                                <code class="text-muted">N/A</code>
                                                            @endif
                                                            @if($bot->document_id && in_array($bot->document_id, $allDocumentIds))
                                                                <br>
                                                                <span class="badge bg-danger mt-1" style="font-size: 0.65rem;">DUPLICATE</span>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if($bot->key && $bot->key != 'N/A')
                                                                <code class="text-success copy-document-key" 
                                                                      style="cursor: pointer; position: relative;" 
                                                                      data-document-key="{{ $bot->key }}"
                                                                      title="Click para copiar Key">{{ $bot->key }}</code>
                                                            @else
                                                                <code class="text-muted">N/A</code>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if($bot->status == 'IN_QUEUE')
                                                                <span class="badge bg-warning status-badge">
                                                                    {{ $bot->status }}
                                                                </span>
                                                            @elseif($bot->status == 'COMPLETED')
                                                                <span class="badge bg-success status-badge">
                                                                    {{ $bot->status }}
                                                                </span>
                                                            @elseif($bot->status == 'PROCESSING')
                                                                <span class="badge bg-info status-badge">
                                                                    {{ $bot->status }}
                                                                </span>
                                                            @elseif($bot->status == 'ERROR')
                                                                <span class="badge bg-danger status-badge">
                                                                    {{ $bot->status }}
                                                                </span>
                                                            @else
                                                                <span class="badge bg-secondary status-badge">
                                                                    {{ $bot->status }}
                                                                </span>
                                                            @endif
                                                            
                                                            @if($bot->status != 'IN_QUEUE')
                                                                <br>
                                                                <small class="text-muted" style="font-size: 0.6rem;">
                                                                    (Mostrado por duplicado)
                                                                </small>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @php
                                                                $arrivalDate = null;
                                                                $travelerInfo = null;
                                                                $planInfo = null;
                                                                
                                                                if ($bot->data && !empty($bot->data)) {
                                                                    $data = json_decode($bot->data, true);
                                                                    if (json_last_error() === JSON_ERROR_NONE && is_array($data)) {
                                                                        // Extraer información adicional para mostrar
                                                                        $travelerInfo = [
                                                                            'name' => $data['name'] ?? 'N/A',
                                                                            'country' => $data['country'] ?? 'N/A',
                                                                            'travelers_count' => isset($data['travelers']) ? count($data['travelers']) : 1
                                                                        ];
                                                                        
                                                                        // Extraer plan
                                                                        $planInfo = $data['plan'] ?? null;
                                                                        
                                                                        // Extraer arrival_date
                                                                        if (isset($data['arrival_date']) && !empty($data['arrival_date'])) {
                                                                            try {
                                                                                $arrivalDate = \Carbon\Carbon::createFromFormat('Y-m-d', $data['arrival_date']);
                                                                            } catch (\Exception $e) {
                                                                                try {
                                                                                    $arrivalDate = \Carbon\Carbon::parse($data['arrival_date']);
                                                                                } catch (\Exception $e2) {
                                                                                    $arrivalDate = null;
                                                                                }
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                            @endphp
                                                            
                                                            @if($travelerInfo)
                                                                <div>
                                                                    <span class="fw-bold text-dark">
                                                                        {{ $travelerInfo['name'] }}
                                                                    </span>
                                                                    <br>
                                                                    <small class="text-muted">
                                                                        {{ $travelerInfo['country'] }}
                                                                    </small>
                                                                </div>
                                                            @else
                                                                <span class="text-muted">Sin información</span>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if($arrivalDate)
                                                                <div>
                                                                    <span class="text-success fw-bold">
                                                                        {{ $arrivalDate->format('d/m/Y') }}
                                                                    </span>
                                                                    <br>
                                                                    <small class="text-muted">
                                                                        {{ $arrivalDate->diffForHumans() }}
                                                                    </small>
                                                                    @if($travelerInfo)
                                                                        <br>
                                                                        <small class="text-info">
                                                                            {{ $travelerInfo['travelers_count'] }} viajero(s)
                                                                        </small>
                                                                    @endif
                                                                </div>
                                                            @else
                                                                <span class="text-muted">Sin fecha de llegada</span>
                                                            @endif
                                                        </td>
                                                        <td class="plan-column">
                                                            @if($planInfo)
                                                                <span class="badge bg-info text-uppercase plan-badge">
                                                                    {{ $planInfo }}
                                                                </span>
                                                            @else
                                                                <span class="text-muted">Sin plan</span>
                                                            @endif
                                                        </td>
                                                        <td class="data-column">
                                                            @if($bot->document_id)
                                                                <a href="{{ route('panelbot.document.details', ['country' => $country, 'documentId' => $bot->document_id]) }}" 
                                                                   class="btn btn-sm btn-primary">
                                                                    <i class="fas fa-eye me-1"></i>VER
                                                                </a>
                                                            @else
                                                                <span class="text-muted">N/A</span>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if($bot->status != 'COMPLETED')
                                                                <button class="btn btn-sm btn-success mark-completed-btn" 
                                                                        data-bot-id="{{ $bot->id }}" 
                                                                        data-country="{{ $country }}"
                                                                        title="Mark as Completed">
                                                                    <i class="fas fa-check"></i> Done
                                                                </button>
                                                            @else
                                                                <span class="badge bg-success">
                                                                    <i class="fas fa-check"></i> Completed
                                                                </span>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- Paginación -->
                                    <div class="d-flex justify-content-between align-items-center p-3">
                                        <div class="text-muted">
                                            Mostrando {{ $queueBots->firstItem() }} a {{ $queueBots->lastItem() }} 
                                            de {{ $queueBots->total() }} resultados
                                        </div>
                                        <div>
                                            <div class="d-flex align-items-center">
                                                @if($queueBots->currentPage() > 1)
                                                    <a href="{{ $queueBots->previousPageUrl() }}" class="btn btn-sm btn-outline-secondary me-2">
                                                        <i class="fas fa-chevron-left me-1"></i>Previous
                                                    </a>
                                                @else
                                                    <span class="btn btn-sm btn-outline-secondary disabled me-2">
                                                        <i class="fas fa-chevron-left me-1"></i>Previous
                                                    </span>
                                                @endif
                                                
                                                <span class="text-muted mx-3">
                                                    Page {{ $queueBots->currentPage() }} of {{ $queueBots->lastPage() }}
                                                </span>
                                                
                                                @if($queueBots->hasMorePages())
                                                    <a href="{{ $queueBots->nextPageUrl() }}" class="btn btn-sm btn-outline-secondary ms-2">
                                                        Next<i class="fas fa-chevron-right ms-1"></i>
                                                    </a>
                                                @else
                                                    <span class="btn btn-sm btn-outline-secondary disabled ms-2">
                                                        Next<i class="fas fa-chevron-right ms-1"></i>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="text-center p-5">
                                        <div class="avatar-lg mx-auto mb-3">
                                            <div class="avatar-title bg-soft-success text-success rounded-circle font-size-24">
                                                <i class="fas fa-check-circle"></i>
                                            </div>
                                        </div>
                                        <h5>¡No hay bots en cola!</h5>
                                        <p class="text-muted">Actualmente no hay documentos pendientes de procesamiento para {{ $countryName }}.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.partials.footer')
    </div>
</div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Vista de cola de bots para {{ $country }} cargada');
            
            // Mark as completed functionality
            document.querySelectorAll('.mark-completed-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const botId = this.dataset.botId;
                    const country = this.dataset.country;
                    
                    // Show loading state
                    const originalContent = this.innerHTML;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
                    this.disabled = true;
                    
                    // Make AJAX request to update bot status to COMPLETED
                    fetch(`/panelbot/${country}/bot/${botId}/update-status`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({
                            status: 'COMPLETED'
                        })
                    })
                    .then(response => {
                        console.log('Response status:', response.status);
                        if (!response.ok) {
                            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('Response data:', data);
                        if (data.success) {
                            // Get references before replacing the button
                            const button = this;
                            const row = button.closest('tr');
                            const statusCell = row.querySelector('td:nth-child(4)');
                            
                            // Replace button with completed badge
                            button.outerHTML = '<span class="badge bg-success"><i class="fas fa-check"></i> Completed</span>';
                            
                            // Update status badge in the same row
                            statusCell.innerHTML = '<span class="badge bg-success status-badge">COMPLETED</span>';
                            
                            // Show success toast
                            showToast('Bot marked as completed successfully!', 'success');
                        } else {
                            // Reset button on error
                            this.innerHTML = originalContent;
                            this.disabled = false;
                            showToast('Error updating bot status: ' + (data.message || 'Unknown error'), 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error details:', error);
                        // Reset button on error
                        this.innerHTML = originalContent;
                        this.disabled = false;
                        showToast('Error updating bot status: ' + error.message, 'error');
                    });
                });
            });
            
            // Toast notification function
            function showToast(message, type) {
                const toast = document.createElement('div');
                toast.className = `alert alert-${type === 'success' ? 'success' : 'danger'} position-fixed`;
                toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
                toast.innerHTML = `
                    <div class="d-flex align-items-center">
                        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
                        ${message}
                        <button type="button" class="btn-close ms-auto" onclick="this.parentElement.parentElement.remove()"></button>
                    </div>
                `;
                document.body.appendChild(toast);
                
                // Auto remove after 3 seconds
                setTimeout(() => {
                    if (toast.parentNode) {
                        toast.remove();
                    }
                }, 3000);
            }
            
            // Iniciar auto-refresh al cargar la página
            startAutoRefresh();
        });
        
        // Variables globales para auto-refresh
        let autoRefreshInterval;
        let countdownElement;
        let currentCountry = '{{ $country }}';
        
        function startAutoRefresh() {
            let countdown = 30;
            
            // Crear elemento de countdown si no existe
            if (!countdownElement) {
                countdownElement = document.createElement('div');
                countdownElement.className = 'position-fixed bg-dark text-white p-2 rounded';
                countdownElement.style.cssText = 'bottom: 20px; right: 20px; z-index: 9999; font-size: 0.8rem;color: #000!important';
                document.body.appendChild(countdownElement);
            }
            
            function updateCountdown() {
                countdownElement.innerHTML = `
                    <i class="fas fa-sync-alt"></i> 
                    Auto-refresh: ${countdown}s
                    <button class="btn btn-sm btn-outline-light ms-2" onclick="pauseAutoRefresh()" style="font-size: 0.7rem;">
                        <i class="fas fa-pause"></i>
                    </button>
                `;
                
                if (countdown <= 0) {
                    refreshQueueData();
                    countdown = 30; // Reset countdown
                } else {
                    countdown--;
                }
            }
            
            updateCountdown(); // Mostrar inmediatamente
            autoRefreshInterval = setInterval(updateCountdown, 1000);
        }
        
        function pauseAutoRefresh() {
            if (autoRefreshInterval) {
                clearInterval(autoRefreshInterval);
                autoRefreshInterval = null;
                countdownElement.innerHTML = `
                    <i class="fas fa-pause"></i> 
                    Auto-refresh pausado
                    <button class="btn btn-sm btn-outline-light ms-2" onclick="startAutoRefresh()" style="font-size: 0.7rem;">
                        <i class="fas fa-play"></i>
                    </button>
                `;
            }
        }
        
        function refreshQueueData() {
            showToast('Actualizando datos...', 'info');
            
            fetch(`/api/panelbot/${currentCountry}/queue-data`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        updateTableContent(data.data.bots, data.data.duplicates);
                        showToast('Datos actualizados correctamente', 'success');
                    } else {
                        showToast('Error al actualizar: ' + data.message, 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('Error de conexión al actualizar', 'error');
                });
        }
        
        function updateTableContent(bots, duplicates) {
            const tbody = document.querySelector('tbody');
            if (!tbody) return;
            
            let html = '';
            bots.forEach((bot, index) => {
                const position = index + 1;
                const isDuplicate = duplicates.includes(bot.document_id);
                const data = bot.data ? JSON.parse(bot.data) : {};
                
                // Determinar el viajero principal
                let viajero = 'N/A';
                let pais = '';
                let travelersCount = 1; // Por defecto 1 viajero
                
                if (data.name) {
                    // Si hay un campo 'name' directo, usarlo
                    viajero = data.name;
                    pais = data.country || '';
                    // Si hay travelers array, usar su length, sino 1
                    travelersCount = data.travelers ? data.travelers.length : 1;
                } else if (data.travelers && data.travelers.length > 0) {
                    // Si hay array de travelers, usar el primero
                    const principal = data.travelers[0];
                    viajero = `${principal.first_name || ''} ${principal.last_name || ''}`.trim() || principal.name || 'N/A';
                    pais = principal.nationality || principal.country || '';
                    travelersCount = data.travelers.length;
                } else if (data.first_name || data.last_name) {
                    // Si hay campos first_name/last_name directos
                    viajero = `${data.first_name || ''} ${data.last_name || ''}`.trim() || 'N/A';
                    pais = data.nationality || data.country || '';
                    travelersCount = 1;
                } else {
                    // Si no hay información de viajeros, asumir 1
                    travelersCount = 1;
                }
                
                // Determinar fecha de llegada
                let fechaLlegada = 'N/A';
                let diasFromNow = '';
                if (data.arrival_date) {
                    const arrivalDate = new Date(data.arrival_date + 'T00:00:00'); // Agregar tiempo para evitar problemas de zona horaria
                    if (!isNaN(arrivalDate.getTime())) {
                        const today = new Date();
                        today.setHours(0, 0, 0, 0); // Normalizar a medianoche para comparación correcta
                        arrivalDate.setHours(0, 0, 0, 0); // Normalizar a medianoche
                        
                        const diffTime = arrivalDate - today;
                        const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24)); // Usar round en lugar de ceil
                        
                        // Formatear fecha con dos dígitos
                        const day = String(arrivalDate.getDate()).padStart(2, '0');
                        const month = String(arrivalDate.getMonth() + 1).padStart(2, '0');
                        const year = arrivalDate.getFullYear();
                        fechaLlegada = `${day}/${month}/${year}`;
                        
                        if (diffDays === 0) {
                            diasFromNow = 'Hoy';
                        } else if (diffDays === 1) {
                            diasFromNow = 'Mañana';
                        } else if (diffDays === -1) {
                            diasFromNow = 'Ayer';
                        } else if (diffDays > 0) {
                            diasFromNow = `En ${diffDays} días`;
                        } else {
                            diasFromNow = `Hace ${Math.abs(diffDays)} días`;
                        }
                    }
                }
                
                // Determinar el plan
                let planInfo = data.plan || 'NORMAL';
                
                // Determinar badge de status
                let statusBadge = '';
                if (bot.status === 'IN_QUEUE') {
                    statusBadge = '<span class="badge bg-warning status-badge">IN_QUEUE</span>';
                } else if (bot.status === 'COMPLETED') {
                    statusBadge = '<span class="badge bg-success status-badge">COMPLETED</span>';
                } else if (bot.status === 'PROCESSING') {
                    statusBadge = '<span class="badge bg-info status-badge">PROCESSING</span>';
                } else if (bot.status === 'ERROR') {
                    statusBadge = '<span class="badge bg-danger status-badge">ERROR</span>';
                } else {
                    statusBadge = '<span class="badge bg-secondary status-badge">' + bot.status + '</span>';
                }
                
                if (bot.status !== 'IN_QUEUE') {
                    statusBadge += '<br><small class="text-muted" style="font-size: 0.6rem;">(Mostrado por duplicado)</small>';
                }
                
                html += `
                    <tr>
                        <td><span class="badge bg-primary">#${position}</span></td>
                        <td><code>${bot.id}</code></td>
                        <td>
                            ${bot.document_id && bot.document_id !== 'N/A' ? 
                                `<code class="text-info copy-document-id" 
                                       style="cursor: pointer; position: relative;" 
                                       data-document-id="${bot.document_id}"
                                       title="Click para copiar Document ID">${bot.document_id}</code>` :
                                `<code class="text-muted">N/A</code>`
                            }
                            ${isDuplicate ? '<br><span class="badge bg-danger mt-1" style="font-size: 0.65rem;">DUPLICATE</span>' : ''}
                        </td>
                        <td>
                            ${bot.key && bot.key !== 'N/A' ? 
                                `<code class="text-success copy-document-key" 
                                       style="cursor: pointer; position: relative;" 
                                       data-document-key="${bot.key}"
                                       title="Click para copiar Key">${bot.key}</code>` :
                                `<code class="text-muted">N/A</code>`
                            }
                        </td>
                        <td>${statusBadge}</td>
                        <td>
                            <div>
                                <span class="fw-bold text-dark">${viajero}</span>
                                ${pais ? '<br><small class="text-muted">' + pais + '</small>' : ''}
                            </div>
                        </td>
                        <td>
                            <div>
                                <span class="text-success fw-bold">${fechaLlegada}</span>
                                ${diasFromNow ? '<br><small class="text-muted">' + diasFromNow + '</small>' : ''}
                                ${travelersCount > 0 ? '<br><small class="text-info">' + (travelersCount === 1 ? '1 viajero' : travelersCount + ' viajeros') + '</small>' : ''}
                            </div>
                        </td>
                        <td class="plan-column">
                            <span class="badge bg-info text-uppercase plan-badge">${planInfo}</span>
                        </td>
                        <td class="data-column">
                            <a href="/panelbot/${currentCountry}/document/${bot.document_id}" class="btn btn-sm btn-primary">
                                <i class="fas fa-eye me-1"></i>VER
                            </a>
                        </td>
                        <td>
                            ${bot.status !== 'COMPLETED' ? 
                                `<button class="btn btn-sm btn-success update-status-btn" data-bot-id="${bot.id}" data-status="COMPLETED">
                                    <i class="fas fa-check"></i> Done
                                </button>` : 
                                `<span class="badge bg-success">
                                    <i class="fas fa-check"></i> Completed
                                </span>`
                            }
                        </td>
                    </tr>
                `;
            });
            
            tbody.innerHTML = html;
            
            // Re-bind event listeners for new buttons and copy functionality
            bindUpdateStatusButtons();
            initCopyDocumentId();
        }
        
        function bindUpdateStatusButtons() {
            document.querySelectorAll('.update-status-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const botId = this.getAttribute('data-bot-id');
                    const newStatus = this.getAttribute('data-status');
                    
                    this.disabled = true;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
                    
                    fetch(`/panelbot/${currentCountry}/bot/${botId}/update-status`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({
                            status: newStatus
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showToast('Bot status updated successfully!', 'success');
                            // Refresh data immediately
                            refreshQueueData();
                        } else {
                            throw new Error(data.message || 'Unknown error');
                        }
                    })
                    .catch(error => {
                        this.disabled = false;
                        this.innerHTML = '<i class="fas fa-check"></i> Done';
                        showToast('Error updating bot status: ' + error.message, 'error');
                    });
                });
            });
        }
        
        // Toast notification function
        function showToast(message, type) {
            const toast = document.createElement('div');
            toast.className = `alert alert-${type === 'success' ? 'success' : type === 'info' ? 'info' : 'danger'} position-fixed`;
            toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            toast.innerHTML = `
                <div class="d-flex align-items-center">
                    <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'info' ? 'info-circle' : 'exclamation-circle'} me-2"></i>
                    ${message}
                    <button type="button" class="btn-close ms-auto" onclick="this.parentElement.parentElement.remove()"></button>
                </div>
            `;
            document.body.appendChild(toast);
            
            // Auto remove after 3 seconds
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.remove();
                }
            }, 3000);
        }

        // Copy Document ID and Key to clipboard functionality
        function initCopyDocumentId() {
            console.log('Inicializando funcionalidad de copia...');
            
            document.querySelectorAll('.copy-document-id').forEach(element => {
                element.addEventListener('click', function() {
                    const documentId = this.getAttribute('data-document-id');
                    console.log('Click en Document ID:', documentId);
                    copyToClipboardSimple(documentId, 'Document ID', this);
                });
            });
            
            document.querySelectorAll('.copy-document-key').forEach(element => {
                console.log('Elemento Key encontrado:', element);
                element.addEventListener('click', function() {
                    const documentKey = this.getAttribute('data-document-key');
                    console.log('Click en Key:', documentKey);
                    copyToClipboardSimple(documentKey, 'Key', this);
                });
            });
            
            console.log('Document IDs encontrados:', document.querySelectorAll('.copy-document-id').length);
            console.log('Keys encontradas:', document.querySelectorAll('.copy-document-key').length);
        }

        // Simplified copy function
        function copyToClipboardSimple(text, fieldName, element) {
            console.log('Intentando copiar:', text, 'Tipo:', fieldName);
            
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text).then(() => {
                    console.log('Copiado exitosamente con API moderna');
                    showToast(`${fieldName} copiado: ${text}`, 'success');
                    showVisualFeedback(element);
                }).catch(err => {
                    console.log('Error con API moderna, usando fallback:', err);
                    fallbackCopy(text, fieldName, element);
                });
            } else {
                console.log('API moderna no disponible, usando fallback');
                fallbackCopy(text, fieldName, element);
            }
        }

        function fallbackCopy(text, fieldName, element) {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-999999px';
            textArea.style.top = '-999999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            
            try {
                const successful = document.execCommand('copy');
                console.log('Resultado de execCommand:', successful);
                if (successful) {
                    showToast(`${fieldName} copiado: ${text}`, 'success');
                    showVisualFeedback(element);
                } else {
                    showToast(`Error al copiar ${fieldName}`, 'error');
                }
            } catch (err) {
                console.log('Error en fallback:', err);
                showToast(`Error al copiar ${fieldName}`, 'error');
            } finally {
                document.body.removeChild(textArea);
            }
        }

        function showVisualFeedback(element) {
            const originalColor = element.style.color;
            element.style.color = '#28a745';
            element.style.fontWeight = 'bold';
            
            const icon = document.createElement('i');
            icon.className = 'fas fa-check ms-1';
            icon.style.color = '#28a745';
            element.appendChild(icon);
            
            setTimeout(() => {
                element.style.color = originalColor;
                element.style.fontWeight = '';
                if (icon.parentNode) {
                    icon.remove();
                }
            }, 1000);
        }

        // Initialize copy functionality when page loads
        initCopyDocumentId();
    </script>
@endpush