@component('v2-cms::components.box', ['title' => 'Visualizador de Logs em Tempo Real'])
    <p class="text-muted mb-4">
        Acesse o conteúdo dos logs do Laravel (<code>storage/logs/laravel-*.log</code>) sem precisar de acesso SSH.
    </p>

    {{-- ═══════════════════════════════════════════════════════
         AVISO DE SEGURANÇA
         ═══════════════════════════════════════════════════════ --}}
    <div class="alert alert-warning d-flex gap-3 p-3 mb-4 border-0 shadow-sm" role="alert">
        <i class="bi bi-shield-lock-fill fs-4 flex-shrink-0" aria-hidden="true"></i>
        <div>
            <h4 class="alert-heading h6 fw-bold mb-1">Aviso de Segurança</h4>
            <p class="mb-0 small text-secondary">
                Logs podem conter dados sensíveis (erros de SQL, stack traces, headers).
                O acesso a esta aba é restrito ao e-mail <code>{{ config('v2.support.email') }}</code>.
            </p>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════
         BARRA DE AÇÕES
         ═══════════════════════════════════════════════════════ --}}
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3 p-3 bg-light rounded-3 border">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <div class="input-group input-group-sm" style="max-width: 320px;">
                <span class="input-group-text bg-white border-end-0" id="log-selector-icon">
                    <i class="bi bi-file-earmark-text" aria-hidden="true"></i>
                </span>
                <select id="log-file-selector"
                        class="form-select border-start-0"
                        onchange="reloadLogs()"
                        aria-label="Selecionar arquivo de log"
                        aria-describedby="log-selector-icon">
                    <option value="">Carregando...</option>
                </select>
            </div>

            <button type="button" class="btn btn-primary fw-bold d-inline-flex align-items-center gap-1"
                    id="btn-reload-logs" onclick="reloadLogs()">
                <i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Recarregar
            </button>

            <span id="log-info" class="text-muted small d-flex align-items-center gap-1">
                <i class="bi bi-info-circle" aria-hidden="true"></i>
                <span>Carregando...</span>
            </span>
        </div>

        <form id="clear-log-form" action="{{ route('v2.supportconfigs.logs.clear') }}" method="POST" class="d-inline">
            {{ csrf_field() }}
            <input type="hidden" name="file" id="clear-log-file" value="">
            <button type="submit" class="btn btn-outline-danger fw-bold d-inline-flex align-items-center gap-1"
                    onclick="return confirm('LIMPAR O ARQUIVO DE LOG?\n\nUm backup será gerado automaticamente antes da limpeza.')">
                <i class="bi bi-trash3" aria-hidden="true"></i> Limpar Log
            </button>
        </form>
    </div>

    {{-- ═══════════════════════════════════════════════════════
         GRADE DE ARQUIVOS (subgrid)
         ═══════════════════════════════════════════════════════ --}}
    <div id="log-files-summary" class="mb-3 d-none">
        <div id="log-files-grid"
             class="d-grid gap-2"
             style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));">
        </div>
        <hr class="my-2">
        <p class="text-muted small mb-0" id="log-files-total"></p>
    </div>

    {{-- ═══════════════════════════════════════════════════════
         VISUALIZADOR
         ═══════════════════════════════════════════════════════ --}}
    <div id="log-viewer" role="log" aria-live="polite" aria-label="Visualizador de logs do sistema"
         class="rounded-3 p-3"
         style="font-family: 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
                font-size: var(--text-sm); line-height: 1.5;
                max-height: 550px; overflow-y: auto;
                background: #1e1e1e !important; color: #d4d4d4 !important;
                white-space: pre-wrap; word-break: break-all;">
        <div class="text-center py-5">
            <span class="spinner-border text-light mb-3" role="status" style="width: 2.5rem; height: 2.5rem;"></span>
            <p class="text-secondary small mb-0">Carregando logs...</p>
        </div>
    </div>

    @slot('footer')
        <p class="text-muted mb-0 small d-flex align-items-center gap-2">
            <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
            Exibindo as últimas <strong>500</strong> linhas. Use o botão <strong>Recarregar</strong> para atualizar.
            Rotação diária automática com retenção de <strong>30 dias</strong>.
        </p>
    @endslot

    @push('scripts')
    <script>
        var currentLogFile = '';

        function friendlyLogName(filename) {
            if (!filename) return '';
            if (filename === 'laravel.log') return 'Log Geral';
            var match = filename.match(/laravel-(\d{4}-\d{2}-\d{2})\.log/);
            if (match) {
                var hoje = new Date();
                var dataLog = new Date(match[1] + 'T12:00:00');
                var diff = Math.round((hoje - dataLog) / 86400000);
                if (diff === 0) return 'Log Atual (' + match[1] + ')';
                if (diff === 1) return 'Log Ontem (' + match[1] + ')';
                return 'Log ' + match[1];
            }
            return filename;
        }

        function reloadLogs() {
            var viewer = document.getElementById('log-viewer');
            var info = document.getElementById('log-info');
            var btn = document.getElementById('btn-reload-logs');
            var selector = document.getElementById('log-file-selector');

            var selectedFile = selector.value || currentLogFile;

            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Carregando...';
            viewer.innerHTML = '<div class="text-center py-5">' +
                '<span class="spinner-border text-light mb-3" role="status" style="width: 2.5rem; height: 2.5rem;"></span>' +
                '<p class="text-secondary small mb-0">Carregando logs...</p></div>';

            var url = '{{ route("v2.supportconfigs.logs.tail") }}?lines=500&_=' + Date.now();
            if (selectedFile) {
                url += '&file=' + encodeURIComponent(selectedFile);
            }

            fetch(url, {
                headers: { 'Accept': 'application/json' }
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                currentLogFile = data.file || '';

                document.getElementById('clear-log-file').value = currentLogFile;

                if (data.files && data.files.length) {
                    var currentValue = selector.value;
                    selector.innerHTML = '';
                    data.files.forEach(function(f) {
                        var opt = document.createElement('option');
                        opt.value = f.name;
                        opt.textContent = friendlyLogName(f.name) + ' (' + f.size + ')';
                        selector.appendChild(opt);
                    });
                    if (currentValue) {
                        selector.value = currentValue;
                    }
                    if (!selector.value) {
                        selector.value = data.file || data.files[0].name;
                        currentLogFile = selector.value;
                        document.getElementById('clear-log-file').value = currentLogFile;
                    }

                    renderFileSummary(data.files, data.file);
                }

                var content = data.content || [];
                var lines = content.join('\n');

                var colored = lines
                    .replace(/\[ERROR\]|\[CRITICAL\]|\[ALERT\]|\[EMERGENCY\]/g,
                        '<span style="color:#f44747;font-weight:bold;">$&</span>')
                    .replace(/\[WARNING\]/g,
                        '<span style="color:#dcdcaa;font-weight:bold;">$&</span>')
                    .replace(/\[INFO\]/g,
                        '<span style="color:#6a9955;">$&</span>')
                    .replace(/\[DEBUG\]/g,
                        '<span style="color:#569cd6;">$&</span>')
                    .replace(/stack trace:/gi,
                        '<span style="color:#c586c0;font-weight:bold;">$&</span>')
                    .replace(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/g,
                        '<span style="color:#569cd6;">$&</span>');

                if (typeof DOMPurify !== 'undefined') {
                    viewer.innerHTML = DOMPurify.sanitize(colored) || '<span class="text-secondary">[ LOG VAZIO ]</span>';
                } else {
                    viewer.textContent = colored || '[ LOG VAZIO ]';
                }

                info.innerHTML = '<i class="bi bi-file-earmark-text" aria-hidden="true"></i> ' +
                    '<span>' + friendlyLogName(data.file) +
                    ' — <strong>' + data.lines + '</strong> linhas' +
                    ' — <strong>' + data.size + '</strong></span>';
            })
            .catch(function() {
                viewer.innerHTML = '<div class="alert alert-danger border-0 shadow-sm" style="margin:0; background: #3c2a2a; color: #f44747; border: 1px solid #5c3a3a !important;">' +
                    '<i class="bi bi-exclamation-triangle-fill me-1"></i> Erro ao carregar logs.</div>';
            })
            .then(function() {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Recarregar';
            });
        }

        function renderFileSummary(files, currentFile) {
            var grid = document.getElementById('log-files-grid');
            var totalEl = document.getElementById('log-files-total');
            var summary = document.getElementById('log-files-summary');

            if (!files || !files.length) {
                summary.classList.add('d-none');
                return;
            }

            summary.classList.remove('d-none');
            grid.innerHTML = '';

            var totalBytes = 0;
            files.forEach(function(f) {
                totalBytes += f.size_bytes || 0;

                var isActive = (f.name === currentFile);

                var card = document.createElement('div');
                card.className = 'd-flex align-items-center gap-2 p-2 rounded-3 border ' +
                    (isActive ? 'bg-primary text-white border-primary' : 'bg-white text-dark');
                card.setAttribute('role', 'button');
                card.setAttribute('tabindex', '0');
                card.setAttribute('aria-label', 'Visualizar ' + friendlyLogName(f.name));
                card.style.cursor = 'pointer';
                card.style.transition = 'box-shadow .15s ease';
                card.title = 'Modificado: ' + f.modified;

                card.innerHTML =
                    '<i class="bi ' + (isActive ? 'bi-file-earmark-text-fill' : 'bi-file-earmark-text') +
                    ' flex-shrink-0" aria-hidden="true"></i>' +
                    '<div class="min-w-0">' +
                        '<div class="small fw-semibold text-truncate">' +
                            friendlyLogName(f.name) +
                        '</div>' +
                        '<div class="small ' + (isActive ? 'text-white-50' : 'text-secondary') + '">' +
                            f.size +
                        '</div>' +
                    '</div>';

                card.addEventListener('click', function() {
                    document.getElementById('log-file-selector').value = f.name;
                    reloadLogs();
                });
                card.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        card.click();
                    }
                });

                grid.appendChild(card);
            });

            var totalSize = formatBytes(totalBytes);
            totalEl.textContent = files.length + ' arquivo(s) \u00B7 Total: ' + totalSize + ' \u00B7 Reten\u00E7\u00E3o: 30 dias (rota\u00E7\u00E3o di\u00E1ria)';
        }

        function formatBytes(bytes) {
            if (bytes === 0) return '0 B';
            var units = ['B', 'KB', 'MB', 'GB'];
            var i = Math.floor(Math.log(bytes) / Math.log(1024));
            i = Math.min(i, units.length - 1);
            return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + units[i];
        }

        document.addEventListener('DOMContentLoaded', function() {
            var tabTrigger = document.querySelector('button[data-bs-target="#tab_logs"]');
            if (tabTrigger) {
                tabTrigger.addEventListener('shown.bs.tab', function() {
                    reloadLogs();
                });
            }
            setTimeout(function() {
                var activeTab = document.querySelector('.tab-pane.active');
                if (activeTab && activeTab.id === 'tab_logs') {
                    reloadLogs();
                }
            }, 500);
        });
    </script>
    @endpush
@endcomponent