@extends('layouts.base')

@section('content')
@section('breadcrumb')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('front.index') }}">Tableau de bord</a></li>
            <li class="breadcrumb-item active" aria-current="page">Logs système</li>
        </ol>
    </nav>
@endsection

<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1 text-primary">
                        <i class="fas fa-file-alt me-2"></i>Logs système
                    </h1>
                    <p class="text-muted mb-0">Consultez les logs des 2 dernières semaines</p>
                </div>
                <div>
                    <button class="btn btn-outline-secondary" onclick="location.reload()">
                        <i class="fas fa-sync-alt me-2"></i>Actualiser
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total logs
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $logs->count() }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-file-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                Erreurs
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $errorCount }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Avertissements
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $warningCount }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Informations
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $infoCount }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-info-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <form method="GET" action="{{ route('developer.logs.index') }}" class="row g-3">
                        <div class="col-md-3">
                            <label for="level" class="form-label">Niveau</label>
                            <select class="form-select" id="level" name="level">
                                <option value="">Tous les niveaux</option>
                                <option value="error" {{ request('level') == 'error' ? 'selected' : '' }}>Erreur</option>
                                <option value="warning" {{ request('level') == 'warning' ? 'selected' : '' }}>Avertissement</option>
                                <option value="info" {{ request('level') == 'info' ? 'selected' : '' }}>Information</option>
                                <option value="debug" {{ request('level') == 'debug' ? 'selected' : '' }}>Debug</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="date" class="form-label">Date</label>
                            <input type="date" class="form-control" id="date" name="date" value="{{ request('date') }}">
                        </div>
                        <div class="col-md-4">
                            <label for="search" class="form-label">Rechercher</label>
                            <input type="text" class="form-control" id="search" name="search" 
                                   placeholder="Rechercher dans les messages..." value="{{ request('search') }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search me-2"></i>Filtrer
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Logs Table -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-list me-2"></i>Liste des logs
                    </h6>
                </div>
                <div class="card-body">
                    @if($logs->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 80px;">Niveau</th>
                                        <th style="width: 150px;">Date/Heure</th>
                                        <th style="width: 200px;">Contexte</th>
                                        <th>Message</th>
                                        <th style="width: 100px;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($logs as $log)
                                        <tr>
                                            <td>
                                                @php
                                                    $levelClass = match($log['level']) {
                                                        'error' => 'bg-danger',
                                                        'warning' => 'bg-warning',
                                                        'info' => 'bg-info',
                                                        'debug' => 'bg-secondary',
                                                        default => 'bg-light'
                                                    };
                                                @endphp
                                                <span class="badge {{ $levelClass }} text-white">
                                                    {{ strtoupper($log['level']) }}
                                                </span>
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ \Carbon\Carbon::parse($log['date'])->format('d/m/Y H:i:s') }}
                                                </small>
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ $log['context'] ?? 'N/A' }}
                                                </small>
                                            </td>
                                            <td>
                                                <div class="log-message" style="max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                                    {{ $log['message'] }}
                                                </div>
                                            </td>
                                            <td>
                                                <button class="btn btn-sm btn-outline-primary" 
                                                        onclick="showLogDetail('{{ addslashes(json_encode($log)) }}')"
                                                        title="Voir le détail">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Aucun log trouvé</h5>
                            <p class="text-muted">Aucun log ne correspond aux critères de recherche.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Log Detail Modal -->
<div class="modal fade" id="logDetailModal" tabindex="-1" aria-labelledby="logDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logDetailModalLabel">Détail du log</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="logDetailContent">
                    <!-- Content will be populated by JavaScript -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-primary" onclick="copyLogToClipboard()">
                    <i class="fas fa-copy me-2"></i>Copier
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.border-left-primary {
    border-left: 0.25rem solid #4e73df !important;
}
.border-left-danger {
    border-left: 0.25rem solid #e74a3b !important;
}
.border-left-warning {
    border-left: 0.25rem solid #f6c23e !important;
}
.border-left-info {
    border-left: 0.25rem solid #36b9cc !important;
}
.log-message:hover {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}
</style>

<script>
function showLogDetail(logData) {
    const log = JSON.parse(logData);
    const content = `
        <div class="row">
            <div class="col-md-6">
                <strong>Niveau:</strong> 
                <span class="badge bg-${getLevelColor(log.level)} text-white">${log.level.toUpperCase()}</span>
            </div>
            <div class="col-md-6">
                <strong>Date:</strong> ${new Date(log.date).toLocaleString('fr-FR')}
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-12">
                <strong>Contexte:</strong> ${log.context || 'N/A'}
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-12">
                <strong>Message:</strong>
                <pre class="bg-light p-3 mt-2" style="white-space: pre-wrap; word-wrap: break-word;">${log.message}</pre>
            </div>
        </div>
        ${log.stack ? `
        <hr>
        <div class="row">
            <div class="col-12">
                <strong>Stack trace:</strong>
                <pre class="bg-light p-3 mt-2" style="white-space: pre-wrap; word-wrap: break-word; max-height: 300px; overflow-y: auto;">${log.stack}</pre>
            </div>
        </div>
        ` : ''}
    `;
    
    document.getElementById('logDetailContent').innerHTML = content;
    document.getElementById('logDetailModal').style.display = 'block';
    new bootstrap.Modal(document.getElementById('logDetailModal')).show();
}

function getLevelColor(level) {
    switch(level) {
        case 'error': return 'danger';
        case 'warning': return 'warning';
        case 'info': return 'info';
        case 'debug': return 'secondary';
        default: return 'light';
    }
}

function copyLogToClipboard() {
    const logContent = document.getElementById('logDetailContent').textContent;
    navigator.clipboard.writeText(logContent).then(function() {
        // Show success message
        const button = event.target;
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check me-2"></i>Copié!';
        button.classList.remove('btn-primary');
        button.classList.add('btn-success');
        
        setTimeout(() => {
            button.innerHTML = originalText;
            button.classList.remove('btn-success');
            button.classList.add('btn-primary');
        }, 2000);
    }).catch(function(err) {
        console.error('Erreur lors de la copie: ', err);
        alert('Erreur lors de la copie');
    });
}
</script>
@endsection