@extends('layouts.app')

@section('title', 'Error Logs | Admin')

@section('content')
<div style="max-width: 1400px; margin: 0 auto; padding: 24px;">

    {{-- Header --}}
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px;">
        <div style="display: flex; align-items: center; gap: 12px;">
            <a href="{{ route('admin.dashboard') }}" class="action-btn">
                <i class="bi bi-arrow-left"></i> <span>Dashboard</span>
            </a>
            <h1 style="font-size: 22px; font-weight: 700; margin: 0;">
                <i class="bi bi-bug-fill" style="color: #e61e1e; margin-right: 8px;"></i>Error Logs
            </h1>
        </div>
        <div style="display: flex; gap: 8px; align-items: center;">
            <span style="font-size: 13px; color: var(--text-secondary);">{{ count($lines) }} entries shown</span>
            <a href="{{ route('admin.logs') }}" class="action-btn">
                <i class="bi bi-arrow-clockwise"></i> <span>Refresh</span>
            </a>
            <button class="action-btn" onclick="copyAll()">
                <i class="bi bi-clipboard"></i> <span>Copy All</span>
            </button>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" action="{{ route('admin.logs') }}"
        style="display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: flex-end;">

        <div style="flex: 1; min-width: 200px;">
            <label style="display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">Search</label>
            <input type="text" name="filter" value="{{ $filter }}"
                placeholder="Filter by keyword…"
                style="width: 100%; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 8px 12px; font-size: 13px;">
        </div>

        <div>
            <label style="display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">Level</label>
            <select name="level"
                style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer;">
                <option value="" {{ $level === '' ? 'selected' : '' }}>All levels</option>
                <option value="ERROR"   {{ $level === 'ERROR'   ? 'selected' : '' }}>ERROR</option>
                <option value="WARNING" {{ $level === 'WARNING' ? 'selected' : '' }}>WARNING</option>
                <option value="INFO"    {{ $level === 'INFO'    ? 'selected' : '' }}>INFO</option>
                <option value="DEBUG"   {{ $level === 'DEBUG'   ? 'selected' : '' }}>DEBUG</option>
            </select>
        </div>

        <div>
            <label style="display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">Show</label>
            <select name="limit"
                style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer;">
                @foreach([50, 100, 200, 500] as $n)
                <option value="{{ $n }}" {{ $limit == $n ? 'selected' : '' }}>{{ $n }} lines</option>
                @endforeach
            </select>
        </div>

        <button type="submit" class="action-btn action-btn-primary">
            <i class="bi bi-search"></i> <span>Filter</span>
        </button>
    </form>

    {{-- Log lines --}}
    @if(empty($lines))
        <div style="text-align: center; padding: 60px; color: var(--text-secondary);">
            <i class="bi bi-check-circle" style="font-size: 48px; color: #22c55e; display: block; margin-bottom: 12px;"></i>
            No log entries found{{ $filter || $level ? ' matching your filter' : '' }}.
        </div>
    @else
        <div id="logOutput" style="font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.6; background: #0a0a0a; border: 1px solid var(--border-color); border-radius: 10px; overflow: auto; max-height: calc(100vh - 260px); padding: 12px 16px;">
            @foreach($lines as $line)
                @php
                    $color = '#aaa';
                    if (str_contains($line, '.ERROR:'))   $color = '#f87171';
                    elseif (str_contains($line, '.WARNING:')) $color = '#fbbf24';
                    elseif (str_contains($line, '.INFO:'))    $color = '#6ee7b7';
                    elseif (str_contains($line, '.DEBUG:'))   $color = '#93c5fd';
                @endphp
                <div class="log-line" style="color: {{ $color }}; border-bottom: 1px solid #1a1a1a; padding: 3px 0; white-space: pre-wrap; word-break: break-all;">{{ $line }}</div>
            @endforeach
        </div>
    @endif

</div>

<script>
function copyAll() {
    const text = Array.from(document.querySelectorAll('.log-line'))
        .map(el => el.textContent).join('\n');
    navigator.clipboard.writeText(text).then(() => showToast('Copied to clipboard', 'success'));
}

// Auto-scroll to top (newest entries are at top)
document.getElementById('logOutput')?.scrollTo(0, 0);
</script>
@endsection
