@extends('layouts.admin')

@section('title', 'Logs de Sincronización de Inventario')

@section('content')
<div class="grid grid-cols-1 p-4 xl:gap-4">
    @if(session('error'))
        <div class="col-span-full rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            {{ session('error') }}
        </div>
    @endif
    @if(session('success'))
        <div class="col-span-full rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800">
            {{ session('success') }}
        </div>
    @endif
    <div class="mb-4 col-span-full">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl">Logs de Sincronización de Inventario</h1>
                <p class="text-sm text-gray-500 mt-1">
                    Última sincronización: 
                    <span class="font-medium text-gray-700">
                        {{ $lastSync ? \Carbon\Carbon::parse($lastSync)->format('d/m/Y H:i:s') : 'N/A' }}
                    </span>
                </p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('settings.index') }}" 
                   class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                    ← Volver
                </a>
                <button onclick="location.reload()" 
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    Actualizar
                </button>
            </div>
        </div>
    </div>

    {{-- Migration Warning --}}
    @if(!$tableExists)
    <div class="col-span-full mb-4">
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <div class="flex items-start">
                <svg class="w-5 h-5 text-yellow-600 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
                <div>
                    <h4 class="text-sm font-semibold text-yellow-800">Migración Pendiente</h4>
                    <p class="text-sm text-yellow-700 mt-1">
                        La tabla <code class="bg-yellow-100 px-1 rounded">inventory_sync_logs</code> no existe. 
                        Ejecuta <code class="bg-yellow-100 px-1 rounded">php artisan migrate</code> para crearla.
                        Los logs de archivo se muestran a continuación como alternativa.
                    </p>
                </div>
            </div>
        </div>
    </div>
    @endif

    @php
        $yesterdayLabel = now(\App\Models\InventorySyncLog::reportTimezone())->subDay()->format('d/m/Y');
    @endphp
    @if(($unsyncedYesterday ?? collect())->isNotEmpty())
    <div class="col-span-full mb-4">
        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
            <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-red-600 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-semibold text-red-800">Bodegas no sincronizadas ayer ({{ $yesterdayLabel }})</h4>
                    <p class="text-sm text-red-700 mt-1">
                        Estas bodegas no tuvieron una sincronización exitosa el día anterior. Los fallos se reintentan en caliente y, si persisten, una hora después.
                    </p>
                    <div class="mt-3 overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="text-left text-xs uppercase text-red-700">
                                    <th class="py-1 pr-4">Bodega</th>
                                    <th class="py-1 pr-4">Estado</th>
                                    <th class="py-1 pr-4">Intentos</th>
                                    <th class="py-1 pr-4">Último intento</th>
                                    <th class="py-1">Error</th>
                                </tr>
                            </thead>
                            <tbody class="text-red-900">
                                @foreach($unsyncedYesterday as $row)
                                <tr class="border-t border-red-100">
                                    <td class="py-2 pr-4 font-semibold">{{ $row['bodega_code'] }}</td>
                                    <td class="py-2 pr-4">{{ $row['last_status'] ? strtoupper($row['last_status']) : 'SIN INTENTO' }}</td>
                                    <td class="py-2 pr-4">{{ $row['attempt_count'] }}</td>
                                    <td class="py-2 pr-4">
                                        {{ $row['last_attempt_at'] ? \Carbon\Carbon::parse($row['last_attempt_at'])->timezone(\App\Models\InventorySyncLog::reportTimezone())->format('d/m/Y H:i:s') : '—' }}
                                    </td>
                                    <td class="py-2">{{ $row['last_error'] ?: '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Sync Progress --}}
    <div class="col-span-full mb-4">
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4" id="inventory-sync-progress" data-status-url="{{ route('settings.inventory-sync-status') }}">
            <div class="flex items-center justify-between gap-4">
                <div>
                    <h4 class="text-sm font-semibold text-gray-900">Estado de sincronización</h4>
                    <p class="text-sm text-gray-600 mt-1" data-sync-message>
                        {{ $syncStatus['message'] ?? 'No hay sincronización activa.' }}
                    </p>
                    <p class="text-xs text-gray-500 mt-1" data-sync-details>
                        @if(!empty($syncStatus['current_bodega']))
                            Bodega actual: {{ $syncStatus['current_bodega'] }}
                        @elseif(!empty($syncStatus['last_synced_at']))
                            Última finalización: {{ \Carbon\Carbon::parse($syncStatus['last_synced_at'])->format('d/m/Y H:i:s') }}
                        @else
                            Esperando una sincronización.
                        @endif
                    </p>
                </div>
                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-700" data-sync-badge>
                    {{ strtoupper($syncStatus['status'] ?? 'idle') }}
                </span>
            </div>
            <div class="mt-4">
                <div class="flex justify-between text-xs text-gray-500 mb-1">
                    <span data-sync-count>
                        {{ (int) ($syncStatus['processed_bodegas'] ?? 0) }} / {{ (int) ($syncStatus['total_bodegas'] ?? 0) }} bodegas
                    </span>
                    <span data-sync-percent>{{ (int) ($syncStatus['percentage'] ?? 0) }}%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                    <div class="h-2 rounded-full bg-blue-600 transition-all duration-500" data-sync-bar style="width: {{ (int) ($syncStatus['percentage'] ?? 0) }}%"></div>
                </div>
                @if(!empty($syncStatus['error_message']))
                    <p class="mt-3 text-sm text-red-700" data-sync-error>{{ $syncStatus['error_message'] }}</p>
                @else
                    <p class="mt-3 text-sm text-red-700 hidden" data-sync-error></p>
                @endif
            </div>
        </div>
    </div>

    {{-- Logs Display --}}
    <div class="col-span-full">
        @if($logs->isEmpty())
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-8 text-center">
                <svg class="w-12 h-12 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No hay logs de sincronización</h3>
                <p class="text-gray-500">Ejecuta una sincronización de inventario para ver los logs aquí.</p>
            </div>
        @else
            <div class="grid grid-cols-1 gap-4">
                @foreach($logs as $log)
                <div class="bg-white border-2 {{ $log->status === 'error' ? 'border-red-200' : 'border-gray-200' }} rounded-lg shadow-sm overflow-hidden">
                    {{-- Header --}}
                    <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <span class="px-3 py-1 text-xs font-semibold rounded-full 
                                    {{ $log->status === 'success' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $log->status === 'error' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $log->status === 'warning' ? 'bg-yellow-100 text-yellow-800' : '' }}">
                                    {{ strtoupper($log->status) }}
                                </span>
                                <h3 class="text-lg font-semibold text-gray-900">Bodega: {{ $log->bodega_code }}</h3>
                            </div>
                            <span class="text-sm text-gray-500">{{ $log->created_at->format('d/m/Y H:i:s') }}</span>
                        </div>
                    </div>

                    {{-- Stats --}}
                    @if($log->status === 'success')
                    <div class="px-6 py-4 grid grid-cols-4 gap-4">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-blue-600">{{ $log->skus_received }}</div>
                            <div class="text-xs text-gray-500 uppercase">SKUs Recibidos</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-green-600">{{ $log->products_updated }}</div>
                            <div class="text-xs text-gray-500 uppercase">Productos Actualizados</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-orange-600">{{ $log->products_set_to_zero }}</div>
                            <div class="text-xs text-gray-500 uppercase">Productos a Cero</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-gray-600">{{ $log->skus_received + $log->products_set_to_zero }}</div>
                            <div class="text-xs text-gray-500 uppercase">Total Procesados</div>
                        </div>
                    </div>
                    @endif

                    {{-- Error Message --}}
                    @if($log->error_message)
                    <div class="px-6 py-4 bg-red-50 border-t border-red-100">
                        <p class="text-sm text-red-800">
                            <span class="font-semibold">Error:</span> {{ $log->error_message }}
                        </p>
                    </div>
                    @endif

                    {{-- SKUs in Response (Collapsible) --}}
                    @if($log->skus_in_response && count($log->skus_in_response) > 0)
                    <div class="px-6 py-4 border-t border-gray-100">
                        <details class="group">
                            <summary class="cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900 flex items-center gap-2">
                                <svg class="w-4 h-4 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                                Ver SKUs recibidos ({{ count($log->skus_in_response) }})
                            </summary>
                            <div class="mt-3 p-4 bg-gray-50 rounded-lg max-h-60 overflow-y-auto">
                                <div class="grid grid-cols-4 gap-2">
                                    @foreach($log->skus_in_response as $sku)
                                        <span class="px-2 py-1 text-xs bg-white border border-gray-200 rounded">{{ $sku }}</span>
                                    @endforeach
                                </div>
                            </div>
                        </details>
                    </div>
                    @endif

                    {{-- SOAP Response (Collapsible) --}}
                    @if($log->soap_response)
                    <div class="px-6 py-4 border-t border-gray-100">
                        <details class="group">
                            <summary class="cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900 flex items-center gap-2">
                                <svg class="w-4 h-4 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                                Ver respuesta SOAP completa
                            </summary>
                            <div class="mt-3 p-4 bg-gray-900 rounded-lg max-h-96 overflow-auto">
                                <pre class="text-xs text-green-400 font-mono">{{ $log->soap_response }}</pre>
                            </div>
                        </details>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- File-based Logs Section --}}
    <div class="col-span-full mt-6">
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
            <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">Logs del Servidor (laravel.log)</h3>
                    <span class="text-xs text-gray-500">Últimas entradas relacionadas con inventario</span>
                </div>
            </div>
            <div class="p-4">
                @if(!empty($fileLogs))
                    <div class="bg-gray-900 rounded-lg p-4 max-h-96 overflow-auto">
                        @foreach($fileLogs as $logEntry)
                            <pre class="text-xs font-mono mb-2 whitespace-pre-wrap {{ 
                                str_contains($logEntry, 'error') || str_contains($logEntry, 'ERROR') 
                                    ? 'text-red-400' 
                                    : (str_contains($logEntry, 'warning') || str_contains($logEntry, 'WARNING') 
                                        ? 'text-yellow-400' 
                                        : 'text-green-400') 
                            }}">{{ $logEntry }}</pre>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <svg class="w-10 h-10 mx-auto text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        <p class="text-gray-500 text-sm">No se encontraron logs de inventario en el archivo de log.</p>
                        <p class="text-gray-400 text-xs mt-1">Ejecuta una sincronización para generar logs.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Trigger Sync Buttons --}}
    <div class="col-span-full mt-6">
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div class="flex items-center justify-between flex-wrap gap-4">
                <div>
                    <h4 class="text-sm font-semibold text-blue-800">Ejecutar Sincronización Manual</h4>
                    <p class="text-sm text-blue-600 mt-1">Dispara un nuevo proceso de sincronización de inventario.</p>
                </div>
                <div class="flex gap-3">
                    {{-- Async (requires Horizon) --}}
                    <form action="{{ route('settings.sync-inventory') }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" 
                                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                            Sincronizar (Async)
                        </button>
                    </form>
                    
                    {{-- Sync (runs immediately, blocks until complete) --}}
                    <form action="{{ route('settings.sync-inventory') }}?sync=1" method="POST" class="inline">
                        @csrf
                        <button type="submit" 
                                onclick="this.innerHTML='<svg class=\'animate-spin w-4 h-4 mr-2\' fill=\'none\' viewBox=\'0 0 24 24\'><circle class=\'opacity-25\' cx=\'12\' cy=\'12\' r=\'10\' stroke=\'currentColor\' stroke-width=\'4\'></circle><path class=\'opacity-75\' fill=\'currentColor\' d=\'M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\'></path></svg>Procesando...'; this.disabled=true;"
                                class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                            Sincronizar (Sync - Espera)
                        </button>
                    </form>
                </div>
            </div>
            <p class="text-xs text-blue-500 mt-3">
                <strong>Async:</strong> Requiere que Horizon esté corriendo (<code>php artisan horizon</code>). 
                <strong>Sync:</strong> Ejecuta inmediatamente y espera a que termine (puede tardar varios minutos).
            </p>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const root = document.getElementById('inventory-sync-progress');
    if (!root) {
        return;
    }

    const statusUrl = root.dataset.statusUrl;
    const message = root.querySelector('[data-sync-message]');
    const errorMessage = root.querySelector('[data-sync-error]');
    const details = root.querySelector('[data-sync-details]');
    const badge = root.querySelector('[data-sync-badge]');
    const count = root.querySelector('[data-sync-count]');
    const percent = root.querySelector('[data-sync-percent]');
    const bar = root.querySelector('[data-sync-bar]');
    let pollTimer = null;
    let wasActive = false;

    function badgeClasses(status) {
        if (status === 'running' || status === 'queued') {
            return 'px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800';
        }
        if (status === 'completed') {
            return 'px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800';
        }
        if (status === 'completed_with_errors') {
            return 'px-3 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800';
        }
        if (status === 'error') {
            return 'px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800';
        }
        if (status === 'skipped') {
            return 'px-3 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800';
        }

        return 'px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-700';
    }

    function render(data) {
        const status = data.status || 'idle';
        const processed = Number(data.processed_bodegas || 0);
        const total = Number(data.total_bodegas || 0);
        const percentage = Number(data.percentage || 0);

        message.textContent = data.message || 'No hay sincronización activa.';
        if (errorMessage) {
            if (status === 'error' && data.error_message) {
                errorMessage.textContent = data.error_message;
                errorMessage.classList.remove('hidden');
            } else {
                errorMessage.textContent = '';
                errorMessage.classList.add('hidden');
            }
        }
        details.textContent = data.current_bodega
            ? `Bodega actual: ${data.current_bodega}`
            : (data.finished_at || data.last_synced_at ? `Última finalización: ${data.finished_at || data.last_synced_at}` : 'Esperando una sincronización.');
        badge.textContent = status.toUpperCase();
        badge.className = badgeClasses(status);
        count.textContent = `${processed} / ${total} bodegas`;
        percent.textContent = `${percentage}%`;
        bar.style.width = `${percentage}%`;
        bar.className = `h-2 rounded-full transition-all duration-500 ${status === 'error' ? 'bg-red-600' : (status === 'completed' ? 'bg-green-600' : 'bg-blue-600')}`;

        if (status === 'running' || status === 'queued') {
            wasActive = true;
        }

        if (status !== 'running' && status !== 'queued' && pollTimer) {
            clearInterval(pollTimer);
            pollTimer = null;
            if (status === 'completed' && wasActive) {
                setTimeout(() => window.location.reload(), 1500);
            }
            if (status === 'completed_with_errors' && wasActive) {
                setTimeout(() => window.location.reload(), 1500);
            }
        }
    }

    async function fetchStatus() {
        try {
            const response = await fetch(statusUrl, { headers: { 'Accept': 'application/json' } });
            if (response.ok) {
                render(await response.json());
            }
        } catch (error) {
            console.warn('No se pudo consultar el progreso de inventario.', error);
        }
    }

    fetchStatus();
    pollTimer = setInterval(fetchStatus, 3000);
});
</script>
@endsection