@extends('control-panel::layout/layout')


@section('content')
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <h4>Logs</h4>
            <p class="text-muted">From last {{ $logs['lines'] }} <b>lines</b></p>

            <div>
                @if ($logs['error'])
                    <p class="text-danger">{{ $logs['error'] }}</p>
                @else
                    <code>
                        <pre><ol id="log-ol" start="{{ $logs['start'] }}" style="padding-left: revert;" class="ms-4 lh-1 text-secondary-emphasis">
                    @foreach ($logs['data'] as $row)
<li>{{ $row }}</li>
@endforeach
                    </ol></pre>
                    </code>
                @endif
            </div>

            <br>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .json-key {
            color: #007bff;
            /* blue */
        }

        .json-string {
            color: #28a745;
            /* green */
        }

        .json-number {
            color: #fd7e14;
            /* orange */
        }

        .json-literal {
            color: #6f42c1;
            /* purple */
        }

        .url-highlight {
            color: #d6336c;
            background-color: #fff0f6;
        }
    </style>
@endpush

@push('scripts')
    <script>
        function highlightDate(element) {
            // Wrap date like [2020-06-02 11:57:59] in a span
            const dateRegex = /\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\]/g;

            element.innerHTML = element.innerHTML.replace(dateRegex, (match) => {
                return `<span class="text-info">${match}</span>`;
            });

            return element;
        }

        function highlightLogLevels(element) {
            const logLevelRegex = /\b([a-z]+\.[A-Z]+)\b/g;

            element.innerHTML = element.innerHTML.replace(logLevelRegex, (match) => {
                return `<span class="text-danger">${match}</span>`;
            });

            return element;
        }

        function highlightNumbers(element) {
            const regex = /([\s:#(])(\d+|\d+\.\d+)([\s\)]|$)/g;

            element.innerHTML = element.innerHTML.replace(regex, (match, p1, p2, p3) => {
                return `${p1}<span class="text-danger">${p2}</span>${p3}`;
            });

            return element;
        }

        function highlightController(element) {
            const regex = /(\/modules[\/-\w]+Controller.php)/g;

            element.innerHTML = element.innerHTML.replace(regex, (match) => {
                return `<span class="text-warning">${match}</span>`;
            });

            //const regexFn = /\b[\\\w]+Controller-&gt;\w+\(\)/g;
            //element.innerHTML = element.innerHTML.replace(regexFn, (match) => {
            //return `<span class="text-warning">${match}</span>`;
            //});

            return element;
        }

        function highlightRepositories(element) {
            const regex = /(\/modules[\/-\w]+Repository.php)/g;

            element.innerHTML = element.innerHTML.replace(regex, (match) => {
                return `<span class="text-info">${match}</span>`;
            });


            const regexFn = /\b[\\\w]+Repository-&gt;\w+\(\)/g;

            element.innerHTML = element.innerHTML.replace(regexFn, (match) => {
                return `<span class="text-info">${match}</span>`;
            });


            return element;
        }

        function highlightJson(element) {
            const html = element.innerHTML;

            // Match JSON-like substrings within the HTML — this allows nested HTML before/after
            const jsonRegex = /(\{[\s\S]*?\})/;

            const match = html.match(jsonRegex);
            if (!match) return element;

            const jsonHtml = match[1];

            // Only process the JSON string part — leave any surrounding HTML untouched
            const highlightedJson = jsonHtml
                .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') // escape first
                .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*")(\s*):/g, '<span class="json-key">$1</span>$3:')
                .replace(/:\s*("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*")/g, ': <span class="json-string">$1</span>')
                //.replace(/:\s*(\b-?\d+(\.\d+)?([eE][+-]?\d+)?\b)/g, ': <span class="json-number">$1</span>')
                .replace(/:\s*(\btrue\b|\bfalse\b|\bnull\b)/g, ': <span class="json-literal">$1</span>');

            // Replace original JSON in HTML with highlighted version
            element.innerHTML = html.replace(jsonRegex, highlightedJson);

            return element;
        }

        function highlightUrl(element) {
            const html = element.innerHTML;

            // Match JSON-like substrings within the HTML — this allows nested HTML before/after
            const urlPathRegex = /\s(\/api\/[^\s]+)/g;

            const match = html.match(urlPathRegex);
            if (!match) return element;

            const urlHtml = match[0];

            const highlightedUrl = urlHtml.replace(urlPathRegex, (match, p1) => {
                return ` <span class="url-highlight">${p1}</span>`;
            });

            element.innerHTML = html.replace(urlPathRegex, highlightedUrl);

            return element;
        }



        function nonBlockingLoop() {
            let current = document.getElementById('log-ol').firstElementChild;

            function processNext() {
                if (!current) return;

                highlightDate(current);
                highlightLogLevels(current);
                highlightNumbers(current);
                highlightController(current);
                highlightRepositories(current);
                highlightJson(current);
                highlightUrl(current);

                current = current.nextElementSibling;

                // Schedule the next iteration non-blockingly
                setTimeout(processNext, 0);
                // OR: use requestIdleCallback(processNext); for better responsiveness
            }

            processNext();
        }

        nonBlockingLoop();
    </script>
@endpush