@extends('layouts.app')
@section('title', 'Admin — Logs système')
@section('page-title', 'Admin — Logs système')

@push('styles')
<style>
/* ── Toolbar ── */
.log-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.log-search { display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--border); border-radius:8px; padding:7px 12px; flex:1; max-width:360px; transition:border-color .2s; }
.log-search:focus-within { border-color:var(--yellow); }
.log-search input { border:none; background:none; outline:none; font-family:'Nunito',sans-serif; font-size:13px; font-weight:600; color:var(--text); width:100%; }
.log-actions { display:flex; gap:8px; }
.btn-purge { background:#FFF5F5; color:#C53030; border:1.5px solid #FEB2B2; border-radius:20px; padding:7px 18px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .15s; }
.btn-purge:hover { background:#FED7D7; }
.btn-refresh { background:var(--navy); color:#fff; border:none; border-radius:20px; padding:7px 16px; font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.btn-refresh:hover { background:var(--navy-light); }

/* ── Stats ── */
.log-stats { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.log-stat { background:#fff; border-radius:8px; border:1px solid var(--border); padding:10px 16px; display:flex; flex-direction:column; gap:2px; min-width:90px; }
.log-stat-val { font-size:20px; font-weight:800; line-height:1; }
.log-stat-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }

/* ── Tabs ── */
.log-tabs { display:flex; gap:0; background:#fff; border-radius:10px; border:1px solid var(--border); overflow:hidden; margin-bottom:14px; flex-wrap:wrap; }
.log-tab { padding:9px 16px; font-size:12px; font-weight:800; color:var(--text-muted); cursor:pointer; text-decoration:none; border-right:1px solid var(--border); display:flex; align-items:center; gap:5px; transition:background .12s,color .12s; white-space:nowrap; }
.log-tab:last-child { border-right:none; }
.log-tab:hover { background:#F4F6FB; }
.log-tab.active { background:var(--navy); color:#fff; }
.log-tab .cnt { background:rgba(255,255,255,.18); padding:1px 6px; border-radius:10px; font-size:10px; }
.log-tab:not(.active) .cnt { background:#EEF2FF; color:var(--navy); }

/* ── Info fichier ── */
.log-file-info { font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:12px; display:flex; align-items:center; gap:10px; }

/* ── Liste entrées ── */
.log-list { display:flex; flex-direction:column; gap:6px; }
.log-entry { background:#fff; border-radius:8px; border:1px solid var(--border); overflow:hidden; transition:box-shadow .15s; }
.log-entry:hover { box-shadow:0 2px 10px rgba(0,0,0,.07); }

/* Barre latérale colorée selon niveau */
.log-entry.lvl-error     { border-left:3px solid #E53E3E; }
.log-entry.lvl-critical  { border-left:3px solid #C53030; }
.log-entry.lvl-emergency { border-left:3px solid #9B2C2C; }
.log-entry.lvl-warning   { border-left:3px solid #D69E2E; }
.log-entry.lvl-info      { border-left:3px solid #3182CE; }
.log-entry.lvl-debug     { border-left:3px solid #718096; }
.log-entry.lvl-notice    { border-left:3px solid #805AD5; }

.log-entry-head { padding:10px 14px; display:flex; align-items:flex-start; gap:10px; cursor:pointer; user-select:none; }
.log-entry-head:hover { background:#FAFBFF; }
.log-level { flex-shrink:0; font-size:10px; font-weight:800; padding:2px 8px; border-radius:4px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.lvl-badge-error, .lvl-badge-critical, .lvl-badge-emergency { background:#FFF5F5; color:#C53030; border:1px solid #FEB2B2; }
.lvl-badge-warning  { background:#FFFFF0; color:#B7791F; border:1px solid #FAF089; }
.lvl-badge-info     { background:#EBF8FF; color:#2B6CB0; border:1px solid #BEE3F8; }
.lvl-badge-debug    { background:#F7FAFC; color:#718096; border:1px solid #E2E8F0; }
.lvl-badge-notice   { background:#FAF5FF; color:#6B46C1; border:1px solid #E9D8FD; }

.log-datetime { font-size:11px; font-weight:700; color:var(--text-muted); font-family:monospace; white-space:nowrap; flex-shrink:0; }
.log-message { font-size:13px; font-weight:600; color:var(--text); flex:1; word-break:break-word; line-height:1.4; }
.log-env { font-size:10px; font-weight:700; color:var(--text-muted); background:#F4F6FB; padding:1px 6px; border-radius:4px; flex-shrink:0; }
.log-expand { flex-shrink:0; color:var(--text-muted); transition:transform .2s; font-size:11px; margin-top:1px; }
.log-entry.open .log-expand { transform:rotate(180deg); }

.log-trace { display:none; border-top:1px solid var(--border); background:#1A2340; }
.log-entry.open .log-trace { display:block; }
.log-trace pre { padding:12px 16px; font-size:11px; line-height:1.6; color:#A0AEC0; font-family:'Courier New',monospace; white-space:pre-wrap; word-break:break-all; margin:0; max-height:300px; overflow-y:auto; }
.log-trace pre::-webkit-scrollbar { width:4px; height:4px; }
.log-trace pre::-webkit-scrollbar-thumb { background:#4A5568; border-radius:2px; }

/* Highlight search */
mark { background:#FEF08A; color:inherit; border-radius:2px; padding:0 1px; }

.log-empty { padding:60px; text-align:center; color:var(--text-muted); font-size:13px; font-weight:600; background:#fff; border-radius:12px; border:1px solid var(--border); }
.log-empty svg { stroke:var(--border); margin:0 auto 12px; display:block; }

.alert-success { background:#F0FFF4; border:1px solid #9AE6B4; color:#276749; padding:10px 16px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
</style>
@endpush

@section('content')

@if(session('success'))
<div class="alert-success">
    <svg viewBox="0 0 24 24" width="14" height="14" style="stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0;"><polyline points="20 6 9 17 4 12"/></svg>
    {{ session('success') }}
</div>
@endif

{{-- Toolbar --}}
<div class="log-toolbar">
    <form method="GET" action="{{ route('admin.logs.index') }}" style="display:flex;align-items:center;gap:8px;flex:1;">
        @if($level !== 'tous') <input type="hidden" name="level" value="{{ $level }}"> @endif
        <div class="log-search">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--text-muted);fill:none;stroke-width:2;flex-shrink:0;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" name="q" value="{{ $search }}" placeholder="Rechercher dans les logs…">
        </div>
        @if($search)
        <a href="{{ route('admin.logs.index', ['level' => $level]) }}" style="font-size:12px;font-weight:700;color:var(--text-muted);text-decoration:none;">✕ Effacer</a>
        @endif
    </form>
    <div class="log-actions">
        <a href="{{ route('admin.logs.index', ['level' => $level, 'q' => $search]) }}" class="btn-refresh">
            <svg viewBox="0 0 24 24" style="width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
            Actualiser
        </a>
        <form method="POST" action="{{ route('admin.logs.purge') }}"
              onsubmit="return confirm('⚠️ Purger tous les logs ? Cette action est irréversible.')">
            @csrf
            <button type="submit" class="btn-purge">
                <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M9 6V4h6v2"/></svg>
                Purger les logs
            </button>
        </form>
    </div>
</div>

{{-- Stats --}}
<div class="log-stats">
    <div class="log-stat">
        <span class="log-stat-val" style="color:var(--navy);">{{ $counts['tous'] }}</span>
        <span class="log-stat-label">Total</span>
    </div>
    @foreach(['ERROR'=>['#E53E3E','Erreurs'],'CRITICAL'=>['#9B2C2C','Critiques'],'EMERGENCY'=>['#742A2A','Urgences'],'WARNING'=>['#D69E2E','Warnings'],'NOTICE'=>['#805AD5','Notices'],'INFO'=>['#3182CE','Info'],'DEBUG'=>['#718096','Debug']] as $lvl=>[$color,$label])
    @if(($counts[$lvl] ?? 0) > 0)
    <div class="log-stat" style="border-left:3px solid {{ $color }};">
        <span class="log-stat-val" style="color:{{ $color }};">{{ $counts[$lvl] ?? 0 }}</span>
        <span class="log-stat-label">{{ $label }}</span>
    </div>
    @endif
    @endforeach
</div>

{{-- Info fichier --}}
<div class="log-file-info">
    <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
    <span>storage/logs/laravel.log</span>
    <span>•</span>
    <span>{{ $fileSize > 0 ? number_format($fileSize / 1024, 1) . ' Ko' : 'vide' }}</span>
    @if($fileDate)
    <span>•</span>
    <span>Modifié {{ \Carbon\Carbon::createFromTimestamp($fileDate)->diffForHumans() }}</span>
    @endif
    @if(count($entries) > 0)
    <span>•</span>
    <span>{{ count($entries) }} entrée(s) affichée(s){{ $counts['tous'] > 500 ? ' (500 max)' : '' }}</span>
    @endif
</div>

{{-- Tabs filtre --}}
<div class="log-tabs">
    <a href="{{ route('admin.logs.index', ['level' => 'tous', 'q' => $search]) }}"
       class="log-tab {{ $level === 'tous' ? 'active' : '' }}">
        Tous <span class="cnt">{{ $counts['tous'] }}</span>
    </a>
    @foreach(['ERROR'=>'Erreurs','CRITICAL'=>'Critiques','EMERGENCY'=>'Urgences','WARNING'=>'Warnings','NOTICE'=>'Notices','INFO'=>'Info','DEBUG'=>'Debug'] as $lvl=>$lbl)
    @if(($counts[$lvl] ?? 0) > 0 || $level === strtolower($lvl))
    <a href="{{ route('admin.logs.index', ['level' => strtolower($lvl), 'q' => $search]) }}"
       class="log-tab {{ $level === strtolower($lvl) ? 'active' : '' }}">
        {{ $lbl }} <span class="cnt">{{ $counts[$lvl] ?? 0 }}</span>
    </a>
    @endif
    @endforeach
</div>

{{-- Liste des logs --}}
@if(empty($entries))
<div class="log-empty">
    <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
    @if($search)
        Aucun résultat pour « {{ $search }} »
    @else
        Aucun log — le fichier est vide ou aucune erreur n'a été enregistrée.
    @endif
</div>
@else
<div class="log-list">
    @foreach($entries as $i => $entry)
    @php
        $lvlKey = strtolower($entry['level']);
        $hasTrace = trim($entry['trace']) !== '';
        $msgDisplay = $search
            ? preg_replace('/(' . preg_quote($search, '/') . ')/i', '<mark>$1</mark>', e($entry['message']))
            : e($entry['message']);
    @endphp
    <div class="log-entry lvl-{{ $lvlKey }}" id="entry-{{ $i }}">
        <div class="log-entry-head" onclick="toggleEntry({{ $i }})">
            <span class="log-level lvl-badge-{{ in_array($lvlKey,['error','critical','emergency']) ? 'error' : $lvlKey }}">
                {{ $entry['level'] }}
            </span>
            <span class="log-datetime">{{ $entry['datetime'] }}</span>
            <span class="log-message">{!! $msgDisplay !!}</span>
            <span class="log-env">{{ $entry['env'] }}</span>
            @if($hasTrace)
            <span class="log-expand">
                <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><path d="M6 9l6 6 6-6"/></svg>
            </span>
            @endif
        </div>
        @if($hasTrace)
        <div class="log-trace">
            <pre>{{ trim($entry['trace']) }}</pre>
        </div>
        @endif
    </div>
    @endforeach
</div>
@endif

@endsection

@push('scripts')
<script>
function toggleEntry(i) {
    const el = document.getElementById('entry-' + i);
    if (el) el.classList.toggle('open');
}

// Auto-ouvre le premier entry ERROR/CRITICAL si présent
document.addEventListener('DOMContentLoaded', function() {
    const first = document.querySelector('.log-entry.lvl-error, .log-entry.lvl-critical, .log-entry.lvl-emergency');
    if (first && first.querySelector('.log-trace')) {
        first.classList.add('open');
    }
});
</script>
@endpush