@extends('ops.layout')
@section('title', 'Log Files')

@section('content')

<div class="flex gap-4" style="min-height:70vh;">

    {{-- File list --}}
    <div class="card p-4 w-64 flex-shrink-0">
        <div class="text-xs font-bold mb-3" style="color:#8b949e;">{{ trans('ops.log_files_title') }}</div>

        @if($logFiles->isEmpty())
            <p class="text-xs" style="color:#8b949e;">{{ trans('ops.no_log_files') }}</p>
        @else
            @foreach($logFiles as $file)
                <button
                    onclick="loadLog('{{ $file['name'] }}')"
                    class="log-btn w-full text-start py-2 px-2 rounded hover:bg-gray-800 block mb-1"
                    data-name="{{ $file['name'] }}"
                    style="color:#c9d1d9;"
                >
                    <div style="color:#58a6ff; font-size:.8rem;">{{ $file['name'] }}</div>
                    <div style="color:#8b949e; font-size:.65rem;">
                        {{ number_format($file['size'] / 1024, 1) }} KB
                        &mdash; {{ $file['modified']->format('Y-m-d H:i') }}
                    </div>
                </button>
            @endforeach
        @endif
    </div>

    {{-- Viewer --}}
    <div class="card p-4 flex-1 flex flex-col">
        <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-3">
                <span id="current-file" class="text-sm font-bold" style="color:#e6edf3;">{{ trans('ops.select_file_from_list') }}</span>
                <span id="file-size" class="text-xs" style="color:#8b949e;"></span>
            </div>
            <div class="flex gap-2 items-center">
                <label class="text-xs" style="color:#8b949e;">{{ trans('ops.last_lines') }}</label>
                <select id="lines-select" onchange="reloadLog()" class="text-xs px-2 py-1 rounded" style="width:80px;">
                    <option value="100">{{ trans('ops.lines_unit', ['count' => 100]) }}</option>
                    <option value="200" selected>{{ trans('ops.lines_unit', ['count' => 200]) }}</option>
                    <option value="500">{{ trans('ops.lines_unit', ['count' => 500]) }}</option>
                    <option value="1000">{{ trans('ops.lines_unit', ['count' => 1000]) }}</option>
                </select>
                <button onclick="reloadLog()" class="btn-primary px-3 py-1 rounded text-xs">↻ {{ trans('ops.refresh') }}</button>
                <button onclick="clearViewer()" class="px-3 py-1 rounded text-xs" style="background:#21262d; color:#8b949e; border:1px solid #30363d;">{{ trans('ops.clear') }}</button>
            </div>
        </div>

        {{-- Log level filter --}}
        <div class="flex gap-2 mb-3 flex-wrap">
            @foreach(['ALL','DEBUG','INFO','NOTICE','WARNING','ERROR','CRITICAL','ALERT','EMERGENCY'] as $level)
                <label class="flex items-center gap-1 text-xs cursor-pointer">
                    <input type="checkbox" class="level-filter" value="{{ $level }}" {{ $level === 'ALL' ? 'checked' : '' }} onchange="applyFilter()">
                    <span style="color:{{ match($level) {
                        'DEBUG' => '#8b949e',
                        'INFO' => '#58a6ff',
                        'NOTICE' => '#79c0ff',
                        'WARNING' => '#d29922',
                        'ERROR' => '#f85149',
                        'CRITICAL', 'ALERT', 'EMERGENCY' => '#ff7b72',
                        default => '#c9d1d9'
                    } }};">{{ $level }}</span>
                </label>
            @endforeach
        </div>

        <div id="terminal-wrap" class="terminal p-3 flex-1" style="max-height:60vh; overflow-y:auto;">
            <span style="color:#8b949e;">{{ trans('ops.select_file_to_view') }}</span>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    let currentFile = null;

    const levelColors = {
        DEBUG:     '#8b949e',
        INFO:      '#58a6ff',
        NOTICE:    '#79c0ff',
        WARNING:   '#d29922',
        ERROR:     '#f85149',
        CRITICAL:  '#ff7b72',
        ALERT:     '#ff7b72',
        EMERGENCY: '#ff7b72',
    };

    async function loadLog(filename, lines) {
        currentFile = filename;
        lines = lines || document.getElementById('lines-select').value;

        document.getElementById('current-file').textContent = filename;
        document.getElementById('terminal-wrap').innerHTML = '<span style="color:#8b949e;">' + {!! json_encode(trans('ops.loading')) !!} + '</span>';

        // Highlight active button
        document.querySelectorAll('.log-btn').forEach(b => b.classList.remove('bg-gray-700'));
        const btn = document.querySelector(`.log-btn[data-name="${filename}"]`);
        if (btn) btn.classList.add('bg-gray-700');

        try {
            const url = `{{ route('ops.logs.show') }}?file=${encodeURIComponent(filename)}&lines=${lines}`;
            const res = await fetch(url, { headers: {'X-Requested-With':'XMLHttpRequest'} });
            const data = await res.json();

            if (!res.ok) {
                document.getElementById('terminal-wrap').innerHTML = `<span style="color:#f85149;">${data.error}</span>`;
                return;
            }

            document.getElementById('file-size').textContent = formatBytes(data.size);
            renderLog(data.content);
        } catch (e) {
            document.getElementById('terminal-wrap').innerHTML = `<span style="color:#f85149;">${{ json_encode(trans('ops.connection_failed') . ' ') }}: ${e.message}</span>`;
        }
    }

    function renderLog(raw) {
        const lines   = raw.split('\n');
        const wrap    = document.getElementById('terminal-wrap');
        const selectedLevels = getSelectedLevels();

        wrap.innerHTML = '';
        lines.forEach(line => {
            const span = document.createElement('div');
            span.textContent = line;
            span.style.borderBottom = '1px solid #1a1f27';
            span.style.padding = '1px 0';

            // Colour by log level
            const levelMatch = line.match(/\.(DEBUG|INFO|NOTICE|WARNING|ERROR|CRITICAL|ALERT|EMERGENCY):/);
            const level = levelMatch ? levelMatch[1] : null;
            span.style.color = level ? (levelColors[level] || '#c9d1d9') : '#c9d1d9';
            span.dataset.level = level || 'ALL';

            // Filter visibility
            if (!shouldShow(level, selectedLevels)) span.style.display = 'none';

            wrap.appendChild(span);
        });

        // Scroll to bottom
        wrap.scrollTop = wrap.scrollHeight;
    }

    function getSelectedLevels() {
        const checked = [...document.querySelectorAll('.level-filter:checked')].map(c => c.value);
        return checked.includes('ALL') ? null : checked;
    }

    function shouldShow(level, selected) {
        if (!selected) return true;
        return level ? selected.includes(level) : selected.includes('ALL');
    }

    function applyFilter() {
        const selected = getSelectedLevels();
        document.querySelectorAll('#terminal-wrap > div').forEach(el => {
            const level = el.dataset.level;
            el.style.display = shouldShow(level === 'ALL' ? null : level, selected) ? '' : 'none';
        });
    }

    function reloadLog() {
        if (currentFile) loadLog(currentFile);
    }

    function clearViewer() {
        currentFile = null;
        document.getElementById('current-file').textContent = {!! json_encode(trans('ops.select_file_from_list')) !!};
        document.getElementById('file-size').textContent = '';
        document.getElementById('terminal-wrap').innerHTML = '<span style="color:#8b949e;">' + {!! json_encode(trans('ops.select_file_to_view')) !!} + '</span>';
    }

    function formatBytes(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / 1024 / 1024).toFixed(2) + ' MB';
    }

    // Handle ALL checkbox toggling others
    document.querySelector('.level-filter[value="ALL"]').addEventListener('change', function () {
        document.querySelectorAll('.level-filter:not([value="ALL"])').forEach(c => {
            c.checked = !this.checked;
        });
        applyFilter();
    });
</script>
@endpush