@extends('layouts.app')

@section('title', 'Panel de Sincronización CAPI')
@section('header', 'Sincronización con CAPI')

@section('content')
<div class="container-fluid">
    {{-- Breadcrumb de navegación --}}
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Sincronización CAPI</li>
        </ol>
    </nav>

    {{-- Tarjetas de estadísticas --}}
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-2">Proyectos</h6>
                            <h2 class="fw-bold mb-0" id="totalProjects">{{ $stats['total_projects'] }}</h2>
                        </div>
                        <div class="bg-light p-3 rounded-circle">
                            <i class="fas fa-building fa-2x" style="color: var(--carza-primary);"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-2">Unidades</h6>
                            <h2 class="fw-bold mb-0" id="totalUnits">{{ $stats['total_units'] }}</h2>
                        </div>
                        <div class="bg-light p-3 rounded-circle">
                            <i class="fas fa-cubes fa-2x" style="color: var(--carza-primary);"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-2">Última Sincronización</h6>
                            <h6 class="fw-bold mb-0" id="lastSync">
                                @if($stats['last_sync'])
                                    {{ $stats['last_sync']->completed_at?->format('d/m/Y H:i') }}
                                @else
                                    Nunca
                                @endif
                            </h6>
                        </div>
                        <div class="bg-light p-3 rounded-circle">
                            <i class="fas fa-clock fa-2x" style="color: var(--carza-primary);"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-2">Jobs Pendientes</h6>
                            <h2 class="fw-bold mb-0" id="pendingJobs">{{ $stats['pending_jobs'] }}</h2>
                        </div>
                        <div class="bg-light p-3 rounded-circle">
                            <i class="fas fa-tasks fa-2x" style="color: var(--carza-primary);"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Panel de sincronización --}}
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="mb-0 fw-semibold">Sincronización con CAPI</h5>
                
                <div class="d-flex gap-2">
                    <button type="button" 
                            class="btn btn-outline-carza" 
                            id="syncButton"
                            onclick="startSync()"
                            {{ $stats['pending_jobs'] > 0 ? 'disabled' : '' }}>
                        <i class="fas fa-sync-alt me-1"></i>
                        <span>Sincronizar Ahora</span>
                    </button>
                    
                    <button type="button" 
                            class="btn btn-outline-dark" 
                            id="refreshButton"
                            onclick="refreshStatus()">
                        <i class="fas fa-redo-alt me-1"></i>
                        Actualizar
                    </button>
                </div>
            </div>

            {{-- Barra de progreso (oculta inicialmente) --}}
            <div id="progressContainer" style="display: none;" class="mb-4">
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted" id="progressStatus">Iniciando sincronización...</span>
                    <span class="text-muted" id="progressPercentage">0%</span>
                </div>
                <div class="progress" style="height: 10px;">
                    <div id="progressBar" 
                         class="progress-bar" 
                         role="progressbar" 
                         style="width: 0%; background-color: var(--carza-primary);"
                         aria-valuenow="0" 
                         aria-valuemin="0" 
                         aria-valuemax="100">
                    </div>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <small class="text-muted" id="progressDetails"></small>
                    <small class="text-muted" id="progressTime"></small>
                </div>
            </div>

            {{-- Mensajes de alerta --}}
            <div id="syncMessage"></div>

            {{-- Historial de sincronizaciones --}}
            <div class="mt-4">
                <h6 class="fw-semibold mb-3">Historial de Sincronizaciones</h6>
                <div class="table-responsive">
                    <table class="table table-hover align-middle carza-table" id="historyTable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Tipo</th>
                                <th>Estado</th>
                                <th>Inicio</th>
                                <th>Fin</th>
                                <th>Duración</th>
                                <th>Procesados</th>
                                <th class="text-end">Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="historyBody">
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">
                                    Cargando historial...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.breadcrumb {
    background: transparent;
    padding: 0;
}

.breadcrumb-item a {
    color: var(--carza-dark);
}

.breadcrumb-item.active {
    color: var(--carza-primary);
}

.progress {
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.3s ease;
    background: linear-gradient(90deg, var(--carza-primary) 0%, #a62e3f 100%);
}

@keyframes progress-bar-stripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

.progress-bar.processing {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: progress-bar-stripes 1s linear infinite;
}
</style>
@endpush

@push('scripts')
<script>
let statusInterval = null;
let isSyncing = false;

document.addEventListener('DOMContentLoaded', function() {
    refreshStatus();
    loadHistory();
    
    // Actualizar estado cada 5 segundos si hay sincronización activa
    setInterval(function() {
        if (isSyncing) {
            refreshStatus();
        }
    }, 5000);
});

function refreshStatus() {
    fetch('{{ route("sync.status") }}')
        .then(response => response.json())
        .then(data => {
            updateStats(data);
            updateSyncButton(data.current_job);
            
            if (data.current_job) {
                isSyncing = true;
                showProgress(data.current_job);
            } else {
                isSyncing = false;
                hideProgress();
            }
        })
        .catch(error => {
            console.error('Error obteniendo estado:', error);
        });
}

function updateStats(data) {
    document.getElementById('totalProjects').textContent = data.total_projects || 0;
    document.getElementById('totalUnits').textContent = data.total_units || 0;
    document.getElementById('pendingJobs').textContent = data.pending_jobs || 0;
    
    if (data.last_sync) {
        const lastSync = new Date(data.last_sync);
        document.getElementById('lastSync').textContent = lastSync.toLocaleString('es-MX');
    }
}

function updateSyncButton(currentJob) {
    const button = document.getElementById('syncButton');
    const pendingJobs = parseInt(document.getElementById('pendingJobs').textContent);
    
    if (currentJob || pendingJobs > 0) {
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Sincronizando...';
    } else {
        button.disabled = false;
        button.innerHTML = '<i class="fas fa-sync-alt me-1"></i>Sincronizar Ahora';
    }
}

function showProgress(job) {
    const container = document.getElementById('progressContainer');
    const bar = document.getElementById('progressBar');
    const percentage = document.getElementById('progressPercentage');
    const status = document.getElementById('progressStatus');
    const details = document.getElementById('progressDetails');
    const timeEl = document.getElementById('progressTime');
    
    container.style.display = 'block';
    
    bar.style.width = job.progress + '%';
    bar.classList.add('processing');
    percentage.textContent = job.progress + '%';
    
    status.textContent = `Procesando ${job.type === 'all' ? 'todo' : job.type}...`;
    details.textContent = `Procesados: ${job.processed} de ${job.total || '?'}`;
    
    if (job.duration) {
        timeEl.textContent = `Tiempo: ${job.duration}`;
    }
}

function hideProgress() {
    const container = document.getElementById('progressContainer');
    const bar = document.getElementById('progressBar');
    
    container.style.display = 'none';
    bar.classList.remove('processing');
}

function startSync() {
    if (isSyncing) {
        showMessage('warning', 'Ya hay una sincronización en progreso. Espera a que termine.');
        return;
    }
    
    Swal.fire({
        title: '¿Iniciar sincronización?',
        text: 'Se actualizarán todos los datos desde CAPI. Esto puede tomar varios minutos.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#862633',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, sincronizar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            performSync();
        }
    });
}

function performSync() {
    fetch('{{ route("sync.start") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            type: 'all',
            force: true
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage('success', data.message);
            refreshStatus();
            loadHistory();
        } else {
            if (response.status === 409) {
                showMessage('warning', data.message);
            } else {
                showMessage('danger', data.message);
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showMessage('danger', 'Error al iniciar la sincronización');
    });
}

function loadHistory() {
    fetch('{{ route("sync.history") }}')
        .then(response => response.json())
        .then(data => {
            renderHistory(data);
        })
        .catch(error => {
            console.error('Error cargando historial:', error);
        });
}

function renderHistory(jobs) {
    const tbody = document.getElementById('historyBody');
    
    if (jobs.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="8" class="text-center text-muted py-4">
                    No hay historial de sincronizaciones
                </td>
            </tr>
        `;
        return;
    }
    
    let html = '';
    jobs.forEach(job => {
        let statusBadge = '';
        switch(job.status) {
            case 'completed':
                statusBadge = '<span class="badge bg-success">Completado</span>';
                break;
            case 'processing':
                statusBadge = '<span class="badge bg-primary">En progreso</span>';
                break;
            case 'pending':
                statusBadge = '<span class="badge bg-warning">Pendiente</span>';
                break;
            case 'failed':
                statusBadge = '<span class="badge bg-danger">Fallido</span>';
                break;
            default:
                statusBadge = '<span class="badge bg-secondary">Desconocido</span>';
        }
        
        html += `
            <tr>
                <td>#${job.id}</td>
                <td>${job.type}</td>
                <td>${statusBadge}</td>
                <td>${job.started_at || '-'}</td>
                <td>${job.completed_at || '-'}</td>
                <td>${job.duration || '-'}</td>
                <td>${job.processed}</td>
                <td class="text-end">
                    ${job.error ? 
                        `<button class="btn btn-sm btn-outline-danger" 
                                 onclick="showError('${job.error.replace(/'/g, "\\'")}')"
                                 title="Ver error">
                            <i class="fas fa-exclamation-triangle"></i>
                        </button>` : 
                        '<span class="text-muted">-</span>'
                    }
                </td>
            </tr>
        `;
    });
    
    tbody.innerHTML = html;
}

function showMessage(type, message) {
    const container = document.getElementById('syncMessage');
    
    container.innerHTML = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    setTimeout(() => {
        container.innerHTML = '';
    }, 5000);
}

function showError(error) {
    Swal.fire({
        title: 'Error de sincronización',
        text: error,
        icon: 'error',
        confirmButtonColor: '#862633'
    });
}
</script>
@endpush