@extends('layouts.app')

@push('styles')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
    .log-terminal {
        background-color: #090d16;
        color: #e2e8f0;
        font-family: 'Fira Code', monospace;
        border-radius: 0.75rem;
    }
    .log-terminal ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .log-terminal ::-webkit-scrollbar-track {
        background: #0f172a;
    }
    .log-terminal ::-webkit-scrollbar-thumb {
        background: #334155;
        border-radius: 4px;
    }
    .log-entry {
        transition: background-color 0.15s ease-in-out;
    }
    .log-entry:hover {
        background-color: rgba(255, 255, 255, 0.03);
    }
</style>
@endpush

@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <!-- Breadcrumb & Top Bar -->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">System Logs</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">Laravel Logs</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto d-flex align-items-center gap-2">
                <button onclick="window.location.reload()" class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1">
                    <i class="bx bx-refresh fs-5"></i> Refresh
                </button>
                <button onclick="clearLogs()" class="btn btn-outline-danger btn-sm d-flex align-items-center gap-1">
                    <i class="bx bx-trash fs-5"></i> Clear Logs
                </button>
            </div>
        </div>

        <!-- Main Card -->
        <div class="card shadow-sm border-0">
            <div class="card-header bg-transparent py-3 border-bottom">
                <div class="row align-items-center g-3">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-3 bg-primary bg-gradient text-white p-2 d-flex align-items-center justify-content-center">
                                <i class="bx bx-terminal fs-3"></i>
                            </div>
                            <div>
                                <h5 class="mb-0 font-weight-bold d-flex align-items-center gap-2">
                                    Laravel Log Viewer
                                    <span class="badge bg-success text-white font-weight-normal px-2 py-1">Live</span>
                                </h5>
                                <small class="text-muted font-monospace text-break">
                                    <i class="bx bx-folder"></i> {{ $logPath ?? 'storage/logs/laravel.log' }}
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex flex-wrap align-items-center justify-content-md-end gap-2">
                            <!-- Search Input -->
                            <div class="position-relative">
                                <input type="text" id="searchInput" onkeyup="filterLogs()" placeholder="Search logs..." class="form-control form-control-sm ps-4 font-monospace" style="min-width: 200px;">
                                <i class="bx bx-search position-absolute top-50 start-0 translate-middle-y ms-2 text-muted"></i>
                            </div>
                            <!-- Level Filter -->
                            <select id="levelFilter" onchange="filterLogs()" class="form-select form-select-sm font-monospace" style="width: auto;">
                                <option value="ALL">All Levels</option>
                                <option value="INFO">INFO</option>
                                <option value="ERROR">ERROR</option>
                                <option value="WARNING">WARNING</option>
                                <option value="DEBUG">DEBUG</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body p-3">
                <!-- Stats Info Bar -->
                <div class="d-flex flex-wrap align-items-center justify-content-between text-secondary bg-light p-2.5 rounded-3 mb-3 text-xs border">
                    <div class="d-flex align-items-center gap-4">
                        <span>Total Lines: <strong class="text-dark font-monospace" id="totalLinesCount">{{ $totalLines ?? 0 }}</strong></span>
                        <span>File Size: <strong class="text-dark font-monospace">{{ $fileSize ?? 'N/A' }}</strong></span>
                    </div>
                    <div>
                        <button onclick="scrollToBottom()" class="btn btn-link btn-sm text-decoration-none p-0 font-monospace">
                            <i class="bx bx-down-arrow-alt"></i> Scroll to Bottom
                        </button>
                    </div>
                </div>

                <!-- Log Terminal Window -->
                <div class="log-terminal border shadow-sm">
                    <!-- Title Header -->
                    <div class="bg-dark px-3 py-2 border-bottom border-secondary d-flex align-items-center justify-content-between text-muted text-xs">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge rounded-circle p-1 bg-danger"> </span>
                            <span class="badge rounded-circle p-1 bg-warning"> </span>
                            <span class="badge rounded-circle p-1 bg-success"> </span>
                            <span class="ms-2 font-monospace text-light">laravel.log Console Output</span>
                        </div>
                        <span class="font-monospace text-muted">UTF-8</span>
                    </div>

                    <!-- Log Output List -->
                    <div id="logContainer" class="p-3 font-monospace" style="max-height: 600px; overflow-y: auto; font-size: 12px; line-height: 1.6;">
                        @forelse($logEntries as $index => $entry)
                            @php
                                $level = $entry['level'] ?? 'INFO';
                                $badgeBg = match($level) {
                                    'ERROR', 'CRITICAL', 'ALERT', 'EMERGENCY' => 'bg-danger text-white',
                                    'WARNING' => 'bg-warning text-dark',
                                    'DEBUG' => 'bg-info text-dark',
                                    default => 'bg-success text-white',
                                };
                                $textColor = match($level) {
                                    'ERROR', 'CRITICAL', 'ALERT', 'EMERGENCY' => 'text-danger',
                                    'WARNING' => 'text-warning',
                                    'DEBUG' => 'text-info',
                                    default => 'text-light',
                                };
                            @endphp

                            <div class="log-entry p-2.5 rounded-2 border border-secondary mb-2 bg-dark bg-opacity-50" data-level="{{ $level }}" data-text="{{ strtolower($entry['raw']) }}">
                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-1">
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="text-secondary text-xs font-monospace">#{{ $index + 1 }}</span>
                                        @if(!empty($entry['timestamp']))
                                            <span class="badge bg-secondary bg-opacity-25 text-light border border-secondary font-monospace">
                                                {{ $entry['timestamp'] }}
                                            </span>
                                        @endif
                                        <span class="badge {{ $badgeBg }} font-monospace uppercase">
                                            {{ $level }}
                                        </span>
                                    </div>
                                </div>

                                <!-- Message Text -->
                                <div class="mt-1 {{ $textColor }} text-break" style="white-space: pre-wrap;">{{ $entry['message'] }}</div>

                                <!-- JSON Context if present -->
                                @if(!empty($entry['context']))
                                    <div class="mt-2 p-2 rounded bg-black bg-opacity-75 border border-secondary text-xs">
                                        <div class="text-info font-weight-bold mb-1"><i class="bx bx-code-alt"></i> Payload / Context Data:</div>
                                        <pre class="text-success m-0 font-monospace overflow-auto" style="max-height: 250px;">{{ json_encode($entry['context'], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) }}</pre>
                                    </div>
                                @endif
                            </div>
                        @empty
                            <div class="p-5 text-center text-secondary font-monospace">
                                <i class="bx bx-file fs-1 mb-2 text-muted"></i>
                                <div>No logs found in laravel.log</div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function filterLogs() {
        const searchValue = document.getElementById('searchInput').value.toLowerCase();
        const selectedLevel = document.getElementById('levelFilter').value;
        const entries = document.querySelectorAll('.log-entry');

        entries.forEach(entry => {
            const entryLevel = entry.getAttribute('data-level');
            const entryText = entry.getAttribute('data-text');

            const matchesSearch = !searchValue || entryText.includes(searchValue);
            const matchesLevel = selectedLevel === 'ALL' || entryLevel === selectedLevel;

            if (matchesSearch && matchesLevel) {
                entry.style.display = 'block';
            } else {
                entry.style.display = 'none';
            }
        });
    }

    function scrollToBottom() {
        const container = document.getElementById('logContainer');
        if (container) {
            container.scrollTop = container.scrollHeight;
        }
    }

    async function clearLogs() {
        if (!confirm('Are you sure you want to clear the laravel.log file?')) {
            return;
        }

        try {
            const res = await fetch('{{ route("api.temperley.clear-logs") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });
            const data = await res.json();
            if (data.status) {
                window.location.reload();
            } else {
                alert('Failed to clear logs');
            }
        } catch (err) {
            console.error(err);
            alert('Error clearing logs');
        }
    }

    window.addEventListener('DOMContentLoaded', () => {
        scrollToBottom();
    });
</script>
@endpush