@extends('layouts.app')

@push('head')
@verbatim
<style>
    /* ---------------------------------------------------------------------
       System Logs viewer — a bespoke (non-DataTables) reader over the
       laravel-log-reader API. Styles are scoped under .system-log so they
       never touch the shared navbar/layout. Colours use the app's semantic
       --mo-* tokens only (no raw hex except neutral row tints).
       --------------------------------------------------------------------- */
    .system-log { --log-sep-line: #ececf1; }

    /* ---- Toolbar: date picker (left) <-> search (right) ------------------ */
    .system-log .log-toolbar { margin: 18px 0 14px; gap: 12px; align-items: flex-end; }
    .system-log .log-field-label {
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--mo-muted);
    }
    .system-log .date_selector,
    .system-log .log-search {
        box-sizing: border-box;
        height: 42px;
        padding: 0 12px;
        border: 1px solid var(--mo-line);
        border-radius: var(--mo-radius);
        background: #fff;
        color: var(--mo-ink);
        font-size: 14px;
    }
    .system-log .date_selector { min-width: 170px; }
    .system-log .log-search-field { display: block; }
    .system-log .log-search { width: 320px; max-width: 100%; }
    .system-log .log-search::placeholder { color: var(--mo-muted); }
    .system-log .date_selector:focus,
    .system-log .log-search:focus {
        outline: none;
        border-color: var(--mo-interactive);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    /* ---- Severity summary / filter pills --------------------------------- */
    .system-log .log-sev-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 16px;
    }
    .system-log .log-sev {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid var(--mo-line);
        border-radius: 999px;
        background: #fff;
        color: var(--mo-ink);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background .12s, border-color .12s, color .12s;
    }
    .system-log .log-sev:hover { background: var(--mo-secondary); }
    .system-log .log-sev:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    }
    .system-log .log-sev.active {
        background: var(--mo-ink);
        border-color: var(--mo-ink);
        color: #fff;
    }
    .system-log .log-sev-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex: 0 0 auto;
        background: var(--mo-muted-strong);
    }
    .system-log .log-sev.active .log-sev-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
    .system-log .log-sev-count {
        min-width: 18px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--mo-secondary);
        color: var(--mo-muted-strong);
        font-size: 11px;
        font-weight: 700;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .system-log .log-sev.active .log-sev-count { background: rgba(255,255,255,.2); color: #fff; }
    /* Severity colour ramp (mirrors the row badges). */
    .system-log .sev-danger { background: var(--mo-error); }
    .system-log .sev-warn   { background: var(--mo-warn); }
    .system-log .sev-info   { background: var(--mo-interactive); }
    .system-log .sev-muted  { background: var(--mo-muted-strong); }

    /* ---- Table ----------------------------------------------------------- */
    /* Always let the table scroll horizontally rather than stretch the page:
       messages can contain long unbreakable tokens (URLs, IPs, file paths). */
    .system-log .responsive_table { max-width: 100%; overflow-x: auto; }
    .system-log table {
        border-collapse: collapse;
        width: 100%;
        margin: 0;
        table-layout: fixed;
    }
    .system-log thead th {
        padding: 10px 12px;
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--mo-ink);
        background: var(--mo-secondary);
        border-bottom: 2px solid var(--mo-line);
        white-space: nowrap;
    }
    .system-log tbody td {
        padding: 10px 12px;
        font-size: 14px;
        color: var(--mo-ink);
        border-bottom: 1px solid var(--log-sep-line);
        vertical-align: top;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .system-log tbody tr:hover td { background: #f7f8fb; }

    /* Left accent stripe flags problem rows for instant scanning. */
    .system-log tr.row-danger td:first-child { box-shadow: inset 3px 0 0 var(--mo-error); }
    .system-log tr.row-warn   td:first-child { box-shadow: inset 3px 0 0 var(--mo-warn); }

    /* Time cell: tabular so digits don't jitter down the column. */
    .system-log .log-time {
        font-variant-numeric: tabular-nums;
        font-size: 13px;
        color: var(--mo-muted-strong);
        white-space: nowrap;
    }

    /* Event cell: prominent action line + a muted, technical meta line. */
    .system-log .log-event { font-weight: 600; color: var(--mo-ink); line-height: 1.35; }
    .system-log .log-event.is-error { color: var(--mo-error); }
    .system-log .log-event-raw {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 13px;
        color: var(--mo-ink);
        line-height: 1.45;
        white-space: pre-wrap;
    }
    .system-log .log-metaline {
        margin-top: 3px;
        font-size: 12.5px;
        color: var(--mo-muted);
        line-height: 1.5;
    }
    .system-log .log-metaline .log-user { color: var(--mo-interactive); font-weight: 600; }
    .system-log .log-metaline .log-path,
    .system-log .log-metaline .log-ip,
    .system-log .log-metaline .log-loc {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
    }
    .system-log .log-metaline .log-ip { color: var(--mo-muted); }
    .system-log .log-sep { margin: 0 7px; color: var(--mo-line); }
    .system-log .log-empty { text-align: center; color: var(--mo-muted); padding: 28px 12px; }

    /* Severity badge (kept from the previous design; AA-verified fills). */
    .system-log .badge {
        display: inline-block;
        padding: 2px 9px;
        border-radius: 25px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .3px;
        color: #fff;
    }
    .system-log .badge.info      { background: var(--mo-interactive); }
    .system-log .badge.warning   { background: var(--mo-warn); }
    .system-log .badge.critical,
    .system-log .badge.emergency,
    .system-log .badge.error     { background: var(--mo-error); }
    .system-log .badge.notice,
    .system-log .badge.debug     { background: var(--mo-muted-strong); }
    .system-log .badge.alert     { background: var(--mo-interactive); }

    /* ---- Pager ----------------------------------------------------------- */
    .system-log .log-pager {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 14px 0 4px;
        flex-wrap: wrap;
    }
    .system-log .log-pager-info { font-size: 13px; color: var(--mo-muted); }
    .system-log .log-pager-info strong { color: var(--mo-ink); font-variant-numeric: tabular-nums; }
    .system-log .log-pager-btns { display: inline-flex; align-items: center; gap: 8px; }
    .system-log .log-pager-btn {
        min-height: 34px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--mo-line);
        border-radius: var(--mo-radius);
        background: #fff;
        color: var(--mo-interactive);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }
    .system-log .log-pager-btn:hover { background: var(--mo-secondary); }
    .system-log .log-pager-btn[disabled] { color: var(--mo-muted); cursor: default; opacity: .55; }
    .system-log .log-pager-page { font-size: 13px; color: var(--mo-ink); font-variant-numeric: tabular-nums; }

    .log-vh {
        position: absolute !important; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* ---- Mobile: stack each row as a card ------------------------------- */
    @media screen and (max-width: 720px) {
        .system-log .log-toolbar { flex-direction: column; align-items: stretch; }
        .system-log .log-search { width: 100%; }
        .system-log table { table-layout: auto; }
        .system-log thead { display: none; }
        .system-log tbody td { display: block; border-bottom: 0; padding: 4px 12px; }
        .system-log tbody tr {
            display: block;
            border: 1px solid var(--mo-line);
            border-radius: var(--mo-radius);
            margin-bottom: 10px;
            padding: 8px 0;
        }
        .system-log tbody tr:hover td { background: transparent; }
        .system-log tr.row-danger, .system-log tr.row-warn { border-left-width: 3px; }
        .system-log tr.row-danger { border-left-color: var(--mo-error); }
        .system-log tr.row-warn   { border-left-color: var(--mo-warn); }
        .system-log tr.row-danger td:first-child,
        .system-log tr.row-warn td:first-child { box-shadow: none; }
        .system-log td[data-label="Time"] { display: inline-block; }
        .system-log td[data-label="Severity"] { display: inline-block; }
    }
</style>
@endverbatim
@endpush

@section('content')
@include('includes.page_header', [
    'title'   => 'System Logs',
    'purpose' => 'Application activity and errors, newest first. Pick a date, filter by severity, or search. This page is mainly for administrators and support.',
])

<div class="system-log">
    <div class="log-toolbar mo-between">
        <div class="log-toolbar-left">
            <label class="log-date-field">
                <span class="log-field-label">Date</span>
                {{-- browser-default: opt out of Materialize's select replacement,
                     which otherwise hides the native <select> (display:none). --}}
                <select class="date_selector browser-default" id="available_log_dates" aria-label="Select log date">
                    <option value=""></option>
                </select>
            </label>
        </div>
        <div class="log-toolbar-right">
            <span class="log-field-label" aria-hidden="true">Search</span>
            <label class="log-search-field">
                <span class="log-vh">Search logs by message, user or URL</span>
                {{-- browser-default: opt out of Materialize's input restyling so
                     the field keeps its bordered box (not just a bottom rule). --}}
                <input id="logSearch" type="search" class="log-search browser-default"
                       placeholder="Search message, user or URL…" autocomplete="off">
            </label>
        </div>
    </div>

    <div class="log-sev-bar" id="logSevBar" role="group" aria-label="Filter logs by severity"></div>

    <div class="responsive_table">
        <table id="systemLogTable">
            <thead>
            <tr>
                <th scope="col" style="width: 110px;">Time</th>
                <th scope="col" style="width: 120px;">Severity</th>
                <th scope="col">Event</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <div class="log-pager" id="logPager"></div>
</div>
@endsection

@section('js')
<script>
    // jQuery + axios are provided by the app layout.
    (function () {
        var API = '{{ url(config('laravel-log-reader.api_route_path')) }}';
        var PAGE_SIZE = 50;

        // Severity display order (most urgent first) and colour class (mirrors
        // the row badges). Anything unknown falls back to the muted grey.
        var SEV_ORDER = ['EMERGENCY', 'ALERT', 'CRITICAL', 'ERROR', 'WARNING', 'NOTICE', 'INFO', 'DEBUG'];
        var SEV_DOT = {
            EMERGENCY: 'sev-danger', CRITICAL: 'sev-danger', ERROR: 'sev-danger',
            ALERT: 'sev-info', INFO: 'sev-info',
            WARNING: 'sev-warn',
            NOTICE: 'sev-muted', DEBUG: 'sev-muted'
        };
        var ROW_ACCENT = {
            EMERGENCY: 'row-danger', ALERT: 'row-danger', CRITICAL: 'row-danger', ERROR: 'row-danger',
            WARNING: 'row-warn'
        };

        var allLogs = [];   // normalized, newest-first
        var activeType = '';
        var search = '';
        var page = 1;

        function esc(s) { return $('<span>').text(s == null ? '' : String(s)).html(); }
        function cap(t) { return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase(); }
        function baseName(p) { return String(p).split('/').pop() || p; }
        function pathOf(u) {
            try { var x = new URL(u); return x.pathname + (x.search || ''); }
            catch (e) { return u; }
        }
        function debounce(fn, ms) {
            var t;
            return function () {
                var ctx = this, a = arguments;
                clearTimeout(t);
                t = setTimeout(function () { fn.apply(ctx, a); }, ms);
            };
        }

        // The app's own logs are HTML: <ul><li>Key: value</li>…</ul>. Framework
        // logs are free-form strings. Return {fields, event, raw, searchText}.
        function parseMessage(raw) {
            var tmp = document.createElement('div');
            tmp.innerHTML = raw == null ? '' : raw;
            var ul = tmp.querySelector('ul');
            if (ul) {
                var fields = {};
                ul.childNodes.forEach(function (n) {
                    var t = (n.textContent || '').trim();
                    if (!t) return;
                    var i = t.indexOf(':');
                    if (i > -1) { fields[t.slice(0, i).trim()] = t.slice(i + 1).trim(); }
                });
                var event = fields.Message || fields.Exception || '';
                return { fields: fields, event: event, raw: null, searchText: tmp.textContent || '' };
            }
            var text = tmp.textContent || (raw == null ? '' : String(raw));
            return { fields: null, event: '', raw: text, searchText: text };
        }

        // API returns oldest-first; normalize to newest-first + parsed.
        function normalize(logs) {
            return (logs || []).slice().reverse().map(function (l) {
                var p = parseMessage(l.message);
                var ts = l.timestamp || '';
                var type = (l.type || '').toUpperCase();
                return {
                    timestamp: ts,
                    time: ts.indexOf(' ') > -1 ? ts.split(' ')[1] : ts,
                    env: l.env,
                    type: type,
                    fields: p.fields,
                    event: p.event,
                    raw: p.raw,
                    searchText: (type + ' ' + ts + ' ' + p.searchText).toLowerCase()
                };
            });
        }

        function eventCellHtml(log) {
            if (!log.fields) {
                return '<div class="log-event-raw">' + esc(log.raw || '—') + '</div>';
            }
            var f = log.fields;
            var isError = !!f.Exception;
            var meta = [];
            if (f.User) { meta.push('<span class="log-user">' + esc(f.User) + '</span>'); }
            if (f.URL)  { meta.push('<span class="log-path" title="' + esc(f.URL) + '">' + esc(pathOf(f.URL)) + '</span>'); }
            if (f.Line) { meta.push('<span class="log-loc">line ' + esc(f.Line) + '</span>'); }
            if (f.File) { meta.push('<span class="log-loc" title="' + esc(f.File) + '">' + esc(baseName(f.File)) + '</span>'); }
            if (f['Client IP']) { meta.push('<span class="log-ip" title="Client IP">' + esc(f['Client IP']) + '</span>'); }
            if (log.env && log.env !== 'production') { meta.push('<span class="log-loc">' + esc(log.env) + '</span>'); }

            var html = '<div class="log-event' + (isError ? ' is-error' : '') + '">' + esc(log.event || '—') + '</div>';
            if (meta.length) {
                html += '<div class="log-metaline">' + meta.join('<span class="log-sep">·</span>') + '</div>';
            }
            return html;
        }

        function rowHtml(log) {
            var accent = ROW_ACCENT[log.type] || '';
            return '<tr class="' + accent + '">' +
                '<td data-label="Time"><span class="log-time" title="' + esc(log.timestamp) + '">' + esc(log.time) + '</span></td>' +
                '<td data-label="Severity"><span class="badge ' + esc(log.type.toLowerCase()) + '">' + esc(log.type) + '</span></td>' +
                '<td data-label="Event">' + eventCellHtml(log) + '</td>' +
                '</tr>';
        }

        function filtered() {
            return allLogs.filter(function (l) {
                if (activeType && l.type !== activeType) return false;
                if (search && l.searchText.indexOf(search) < 0) return false;
                return true;
            });
        }

        function renderSevBar() {
            var counts = {};
            allLogs.forEach(function (l) { counts[l.type] = (counts[l.type] || 0) + 1; });
            var html = '<button type="button" class="log-sev" data-type="">All' +
                '<span class="log-sev-count">' + allLogs.length + '</span></button>';
            SEV_ORDER.forEach(function (t) {
                if (!counts[t]) return;
                html += '<button type="button" class="log-sev" data-type="' + t + '">' +
                    '<span class="log-sev-dot ' + (SEV_DOT[t] || 'sev-muted') + '"></span>' +
                    cap(t) + '<span class="log-sev-count">' + counts[t] + '</span></button>';
            });
            $('#logSevBar').html(html);
            updateSevActive();
        }

        function updateSevActive() {
            $('#logSevBar .log-sev').each(function () {
                var on = String($(this).attr('data-type') || '') === activeType;
                $(this).toggleClass('active', on).attr('aria-pressed', on ? 'true' : 'false');
            });
        }

        function renderPager(total, pages, start, shown) {
            if (!total) { $('#logPager').empty(); return; }
            var from = start + 1, to = start + shown;
            $('#logPager').html(
                '<span class="log-pager-info">Showing <strong>' + from + '</strong>–<strong>' + to +
                '</strong> of <strong>' + total + '</strong></span>' +
                '<span class="log-pager-btns">' +
                '<button type="button" class="log-pager-btn" data-page="' + (page - 1) + '"' + (page <= 1 ? ' disabled' : '') + '>Previous</button>' +
                '<span class="log-pager-page">Page ' + page + ' of ' + pages + '</span>' +
                '<button type="button" class="log-pager-btn" data-page="' + (page + 1) + '"' + (page >= pages ? ' disabled' : '') + '>Next</button>' +
                '</span>'
            );
        }

        function render() {
            var rows = filtered();
            var total = rows.length;
            var pages = Math.max(1, Math.ceil(total / PAGE_SIZE));
            if (page > pages) page = pages;
            if (page < 1) page = 1;
            var start = (page - 1) * PAGE_SIZE;
            var pageRows = rows.slice(start, start + PAGE_SIZE);
            var tbody = $('#systemLogTable tbody');
            if (!total) {
                tbody.html('<tr><td colspan="3" class="log-empty">' +
                    (allLogs.length ? 'No entries match this filter or search.' :
                        'No log entries for this date.') + '</td></tr>');
            } else {
                tbody.html(pageRows.map(rowHtml).join(''));
            }
            renderPager(total, pages, start, pageRows.length);
            updateSevActive();
        }

        function renderDateSelect(dates, selected) {
            var html = '';
            (dates || []).forEach(function (d) {
                html += '<option value="' + esc(d) + '"' + (d === selected ? ' selected' : '') + '>' + esc(d) + '</option>';
            });
            $('#available_log_dates').html(html);
        }

        function load(date) {
            var url = (date !== '' && date !== undefined) ? API + '?date=' + encodeURIComponent(date) : API;
            axios.get(url)
                .then(function (response) {
                    var d = response.data.data;
                    renderDateSelect(d.available_log_dates, d.date);
                    allLogs = normalize(d.logs);
                    activeType = '';
                    search = '';
                    page = 1;
                    $('#logSearch').val('');
                    renderSevBar();
                    render();
                })
                .catch(function (error) {
                    console.log(error);
                    $('#systemLogTable tbody').html(
                        '<tr><td colspan="3" class="log-empty">Could not load logs — please retry.</td></tr>');
                    $('#logPager').empty();
                    $('#logSevBar').empty();
                });
        }

        // ---- events ----
        $('#logSevBar').on('click', '.log-sev', function () {
            activeType = String($(this).attr('data-type') || '');
            page = 1;
            render();
        });
        $('#logSearch').on('input', debounce(function () {
            search = String($(this).val() || '').trim().toLowerCase();
            page = 1;
            render();
        }, 150));
        $('#available_log_dates').on('change', function () { load($(this).val()); });
        $('#logPager').on('click', '.log-pager-btn', function () {
            if ($(this).is('[disabled]')) return;
            var p = parseInt($(this).attr('data-page'), 10);
            if (!isNaN(p)) {
                page = p;
                render();
                var t = document.querySelector('.system-log .responsive_table');
                if (t) { window.scrollTo({ top: t.getBoundingClientRect().top + window.pageYOffset - 90, behavior: 'smooth' }); }
            }
        });

        load();
    })();
</script>
@endsection