@extends('layouts.app')
@section('title', 'Procesamiento - ' . $countryName)

@push('styles')
    <style>
        .bot-table {
            font-size: 1rem;
        }
        
        .bot-table td {
            font-size: 1rem;
            padding: 12px 8px;
        }
        
        .bot-table th {
            font-size: 1rem;
        }
        
        .status-badge {
            font-size: 0.75rem;
        }
        
        .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;
        }
        
        .processing-highlight {
            font-weight: bold;
            color: #20c997;
        }
        
        .spinner-border-sm {
            animation: spin 2s linear infinite;
        }
    </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-cogs me-2"></i>
                                Bots en Procesamiento - {{ $countryName }}
                            </h4>
                            <p class="mb-0" style="color: #adb5bd;">
                                Documentos que están siendo procesados actualmente
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <a href="{{ route('panelbot.country', $country) }}" class="btn btn-light me-2">
                                <i class="fas fa-arrow-left me-1"></i>Volver
                            </a>
                            <a href="{{ route('panelbot.index') }}" class="btn btn-outline-light">
                                <i class="fas fa-home me-1"></i>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">En Procesamiento</p>
                                        <h4 class="mb-0 processing-highlight">{{ $processingBots->total() }}</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-spinner fa-spin"></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">{{ $processingBots->currentPage() }}</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-list"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabla de bots en procesamiento -->
                <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-cogs me-2"></i>
                                            Bots Actualmente en Procesamiento
                                        </h5>
                                    </div>
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-sm btn-info" onclick="location.reload()">
                                            <i class="fas fa-sync me-1"></i>Actualizar
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                @if($processingBots->count() > 0)
                                    <div class="table-responsive">
                                        <table class="table table-hover bot-table mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>ID</th>
                                                    <th>Document ID</th>
                                                    <th>Estado</th>
                                                    <th>Viajero Principal</th>
                                                    <th>Fecha de Llegada</th>
                                                    <th>Progreso</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($processingBots as $bot)
                                                    <tr>
                                                        <td>
                                                            <code>{{ $bot->id }}</code>
                                                        </td>
                                                        <td>
                                                            <code class="text-info">{{ $bot->document_id ?? 'N/A' }}</code>
                                                            @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>
                                                            <span class="badge bg-info status-badge">
                                                                <i class="fas fa-spinner fa-spin me-1"></i>
                                                                {{ $bot->status }}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            @php
                                                                $arrivalDate = null;
                                                                $travelerInfo = 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
                                                                        $travelerInfo = [
                                                                            'name' => $data['name'] ?? 'N/A',
                                                                            'country' => $data['country'] ?? 'N/A',
                                                                            'travelers_count' => isset($data['travelers']) ? count($data['travelers']) : 1
                                                                        ];
                                                                        
                                                                        // 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;
                                                                                }
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                                
                                                                // Para calcular progreso usamos la diferencia desde arrival_date hasta ahora
                                                                $minutes = 0;
                                                                if ($arrivalDate) {
                                                                    $minutes = now()->diffInMinutes($arrivalDate, false); // false para obtener valores negativos si es futuro
                                                                    $minutes = max(0, $minutes); // No valores negativos
                                                                }
                                                            @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>
                                                            <div class="progress" style="height: 6px;">
                                                                @php
                                                                    $progress = min(100, ($minutes / 10) * 100); // Asumiendo 10 min como 100%
                                                                @endphp
                                                                <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" 
                                                                     role="progressbar" 
                                                                     style="width: {{ $progress }}%">
                                                                </div>
                                                            </div>
                                                            <span class="text-muted">{{ round($progress) }}%</span>
                                                        </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 {{ $processingBots->firstItem() }} a {{ $processingBots->lastItem() }} 
                                            de {{ $processingBots->total() }} resultados
                                        </div>
                                        <div>
                                            {{ $processingBots->links() }}
                                        </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 procesamiento!</h5>
                                        <p class="text-muted">Actualmente no hay documentos siendo procesados para {{ $countryName }}.</p>
                                        <div class="mt-3">
                                            <a href="{{ route('panelbot.queue', $country) }}" class="btn btn-primary">
                                                <i class="fas fa-list me-1"></i>Ver Cola de Procesamiento
                                            </a>
                                        </div>
                                    </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 procesamiento de bots para {{ $country }} cargada');
            
            // Auto-refresh cada 15 segundos (más frecuente que la cola)
            setInterval(() => {
                location.reload();
            }, 15000);
            
            // Actualizar progreso de manera visual
            setInterval(() => {
                document.querySelectorAll('.progress-bar-animated').forEach(bar => {
                    // Pequeña animación visual
                    bar.style.opacity = '0.8';
                    setTimeout(() => {
                        bar.style.opacity = '1';
                    }, 500);
                });
            }, 3000);
        });
    </script>
@endpush