@extends('layouts.app')

@section('title', 'Logs del Sistema')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-list-alt text-primary"></i>
                        Logs del Sistema
                    </h4>
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-info" onclick="loadStatistics()">
                            <i class="fas fa-chart-bar"></i> Estadísticas
                        </button>
                        <button type="button" class="btn btn-sm btn-warning" onclick="loadCriticalLogs()">
                            <i class="fas fa-exclamation-triangle"></i> Críticos
                        </button>
                        <button type="button" class="btn btn-sm btn-success" onclick="exportLogs()">
                            <i class="fas fa-download"></i> Exportar
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Filtros -->
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-level">
                                <option value="">Todos los niveles</option>
                                <option value="debug">Debug</option>
                                <option value="info">Info</option>
                                <option value="notice">Notice</option>
                                <option value="warning">Warning</option>
                                <option value="error">Error</option>
                                <option value="critical">Critical</option>
                                <option value="alert">Alert</option>
                                <option value="emergency">Emergency</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-module">
                                <option value="">Todos los módulos</option>
                                <option value="sistema">Sistema</option>
                                <option value="auth">Autenticación</option>
                                <option value="pagos">Pagos</option>
                                <option value="backup">Backup</option>
                                <option value="database">Base de Datos</option>
                                <option value="inventario">Inventario</option>
                                <option value="contratos">Contratos</option>
                                <option value="reportes">Reportes</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control form-control-sm" id="filter-date-from" placeholder="Desde">
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control form-control-sm" id="filter-date-to" placeholder="Hasta">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control form-control-sm" id="filter-action" placeholder="Buscar acción...">
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-sm btn-primary" onclick="applyFilters()">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Tabla de logs -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="logs-table">
                            <thead class="thead-dark">
                                <tr>
                                    <th width="10%">Nivel</th>
                                    <th width="15%">Módulo</th>
                                    <th width="25%">Mensaje</th>
                                    <th width="15%">Usuario</th>
                                    <th width="10%">IP</th>
                                    <th width="15%">Fecha</th>
                                    <th width="10%">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="logs-tbody">
                                @forelse($logs as $log)
                                <tr class="log-row" data-level="{{ $log->level }}">
                                    <td>
                                        <span class="badge badge-{{ getBadgeClass($log->level) }}">
                                            {{ strtoupper($log->level) }}
                                        </span>
                                    </td>
                                    <td>{{ getLogModule($log) }}</td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 200px;" title="{{ $log->message }}">
                                            {{ $log->message }}
                                        </div>
                                    </td>
                                    <td>{{ $log->user ? $log->user->name : 'Sistema' }}</td>
                                    <td>{{ $log->ip_address }}</td>
                                    <td>{{ $log->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-info" onclick="showLogDetail({{ $log->id }})">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted">
                                        <i class="fas fa-inbox"></i> No hay logs disponibles
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginación -->
                    @if($logs->hasPages())
                    <div class="d-flex justify-content-center">
                        {{ $logs->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para detalles del log -->
<div class="modal fade" id="logDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-info-circle"></i> Detalle del Log
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="log-detail-content">
                <!-- Contenido del log se carga aquí -->
            </div>
        </div>
    </div>
</div>

<!-- Modal de estadísticas -->
<div class="modal fade" id="statisticsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-chart-bar"></i> Estadísticas de Logs
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="statistics-content">
                <!-- Estadísticas se cargan aquí -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function applyFilters() {
    const level = document.getElementById('filter-level').value;
    const module = document.getElementById('filter-module').value;
    const dateFrom = document.getElementById('filter-date-from').value;
    const dateTo = document.getElementById('filter-date-to').value;
    const action = document.getElementById('filter-action').value;
    
    const params = new URLSearchParams();
    if (level) params.append('level', level);
    if (module) params.append('module', module);
    if (dateFrom) params.append('date_from', dateFrom);
    if (dateTo) params.append('date_to', dateTo);
    if (action) params.append('action', action);
    
    window.location.href = '{{ route("system-logs.index") }}?' + params.toString();
}

function showLogDetail(logId) {
    fetch(`/system-logs/${logId}`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const log = data.data;
            const content = `
                <div class="row">
                    <div class="col-md-6">
                        <strong>Nivel:</strong> 
                        <span class="badge badge-${getBadgeClassJs(log.level)}">${log.level.toUpperCase()}</span>
                    </div>
                    <div class="col-md-6">
                        <strong>Módulo:</strong> ${log.channel || 'N/A'}
                    </div>
                    <div class="col-md-6">
                        <strong>Usuario:</strong> ${log.user ? log.user.name : 'Sistema'}
                    </div>
                    <div class="col-md-6">
                        <strong>IP:</strong> ${log.ip_address}
                    </div>
                    <div class="col-12 mt-3">
                        <strong>Mensaje:</strong>
                        <p class="bg-light p-2 rounded">${log.message}</p>
                    </div>
                    <div class="col-12">
                        <strong>Contexto:</strong>
                        <pre class="bg-dark text-light p-3 rounded"><code>${JSON.stringify(JSON.parse(log.context || '{}'), null, 2)}</code></pre>
                    </div>
                    <div class="col-12">
                        <strong>Fecha:</strong> ${new Date(log.created_at).toLocaleString()}
                    </div>
                </div>
            `;
            document.getElementById('log-detail-content').innerHTML = content;
            $('#logDetailModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar el detalle del log');
    });
}

function loadStatistics() {
    fetch('/system-logs/statistics', {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const stats = data.data;
            const content = `
                <div class="row">
                    <div class="col-md-4 text-center">
                        <h3 class="text-primary">${stats.total}</h3>
                        <p>Total de Logs</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <h3 class="text-danger">${stats.critical}</h3>
                        <p>Logs Críticos</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <h3 class="text-warning">${stats.warnings}</h3>
                        <p>Warnings</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <h3 class="text-success">${stats.today}</h3>
                        <p>Hoy</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <h3 class="text-info">${stats.this_week}</h3>
                        <p>Esta Semana</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <h3 class="text-secondary">${stats.this_month}</h3>
                        <p>Este Mes</p>
                    </div>
                </div>
            `;
            document.getElementById('statistics-content').innerHTML = content;
            $('#statisticsModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar las estadísticas');
    });
}

function loadCriticalLogs() {
    window.location.href = '{{ route("system-logs.index") }}?level=critical';
}

function exportLogs() {
    const level = document.getElementById('filter-level').value;
    const module = document.getElementById('filter-module').value;
    const dateFrom = document.getElementById('filter-date-from').value;
    const dateTo = document.getElementById('filter-date-to').value;
    
    const params = {
        format: 'csv',
        filters: {
            level: level,
            module: module,
            date_from: dateFrom,
            date_to: dateTo
        }
    };
    
    fetch('/system-logs/export', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(params)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Exportación iniciada. Recibirá una notificación cuando esté lista.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al iniciar la exportación');
    });
}

function getBadgeClassJs(level) {
    const classes = {
        'debug': 'secondary',
        'info': 'info',
        'notice': 'primary',
        'warning': 'warning',
        'error': 'danger',
        'critical': 'danger',
        'alert': 'dark',
        'emergency': 'dark'
    };
    return classes[level] || 'secondary';
}
</script>
@endpush

@php
function getBadgeClass($level) {
    $classes = [
        'debug' => 'secondary',
        'info' => 'info',
        'notice' => 'primary',
        'warning' => 'warning',
        'error' => 'danger',
        'critical' => 'danger',
        'alert' => 'dark',
        'emergency' => 'dark'
    ];
    return $classes[$level] ?? 'secondary';
}

function getLogModule($log) {
    $context = json_decode($log->context ?? '{}', true);
    return $context['module'] ?? $log->channel ?? 'Sistema';
}
@endphp