{% extends "layout.html" %}
{% block title %}{{ _('System Logs') }}{% endblock %}
{% block content %}
<div class="row h-100">
    <div class="col-md-3 mb-4">
        <div class="card shadow-sm">
            <div class="card-header bg-white fw-bold">Log Filter</div>
            <div class="card-body p-3">
                <!-- Step 1: Log Type -->
                <div class="mb-3">
                    <label class="form-label small fw-bold text-muted">Log Type</label>
                    <select class="form-select form-select-sm" id="logType" onchange="onTypeChange()">
                        <option value="">-- Select Type --</option>
                        <option value="limristem">Limristem Web Service</option>
                        <option value="system">System / Console</option>
                        <option value="nginx">Nginx</option>
                        <option value="php">PHP-FPM</option>
                    </select>
                </div>
                <!-- Step 2a: Nginx domain selector -->
                <div class="mb-3" id="nginxDomainDiv" style="display:none;">
                    <label class="form-label small fw-bold text-muted">Domain</label>
                    <select class="form-select form-select-sm" id="nginxDomain" onchange="onNginxDomainChange()">
                        <option value="">-- Select Domain --</option>
                        {% for domain in nginx_logs %}
                        <option value="{{ domain }}">{{ domain }}</option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Step 2b: PHP version selector -->
                <div class="mb-3" id="phpVersionDiv" style="display:none;">
                    <label class="form-label small fw-bold text-muted">PHP Version</label>
                    <select class="form-select form-select-sm" id="phpVersion" onchange="onPhpVersionChange()">
                        <option value="">-- Select Version --</option>
                        {% for ver in php_logs %}
                        <option value="{{ ver }}">PHP {{ ver }}</option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Step 2c: PHP domain selector -->
                <div class="mb-3" id="phpDomainDiv" style="display:none;">
                    <label class="form-label small fw-bold text-muted">PHP Domain</label>
                    <select class="form-select form-select-sm" id="phpDomain" onchange="onPhpDomainChange()">
                        <option value="">-- Select Target --</option>
                    </select>
                </div>
                <!-- File list -->
                <div>
                    <label class="form-label small fw-bold text-muted" id="fileListLabel" style="display:none;">Log File</label>
                    <div class="list-group list-group-flush" id="fileList" style="max-height: 50vh; overflow-y: auto;">
                        {% for file in system_logs %}
                        <a href="#" onclick="loadLog('{{ file }}', false); return false;"
                           class="list-group-item list-group-item-action py-2 px-3">
                            <span class="small text-truncate d-block" title="{{ file }}">{{ file }}</span>
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9 mb-4">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                <span id="currentLogName" class="font-monospace"><i class="fas fa-file-alt me-2"></i> Select a log file...</span>
                <button class="btn btn-xs btn-outline-light" onclick="refreshLog()"><i class="fas fa-sync-alt"></i></button>
            </div>
            <div class="card-body p-0 bg-dark">
                <pre id="logContent" class="p-3 m-0 text-success font-monospace" style="height: 70vh; overflow-y: auto; white-space: pre-wrap;">Select a log file from the left menu to view its contents.</pre>
            </div>
        </div>
    </div>
</div>

<script>
const nginxLogs = {{ nginx_logs | tojson }};
const phpLogs = {{ php_logs | tojson }};
const systemLogs = {{ system_logs | tojson }};
let currentFile = '';
let currentIsAbsolute = false;

function onTypeChange() {
    const type = document.getElementById('logType').value;
    document.getElementById('nginxDomainDiv').style.display = 'none';
    document.getElementById('phpVersionDiv').style.display = 'none';
    document.getElementById('phpDomainDiv').style.display = 'none';
    document.getElementById('fileList').innerHTML = '';
    document.getElementById('fileListLabel').style.display = 'none';

    if (type === 'limristem') {
        document.getElementById('fileListLabel').style.display = 'block';
        const list = document.getElementById('fileList');
        let html = '<a href="#" onclick="loadLog(\'system:limristem-web\', false); return false;" class="list-group-item list-group-item-action py-2 px-3 fw-bold bg-light"><span class="small text-truncate d-block text-primary"><i class="fas fa-cogs me-1"></i> Limristem Web Service (Journal)</span></a>';
        list.innerHTML = html;
        loadLog('system:limristem-web', false);
    } else if (type === 'system') {
        document.getElementById('fileListLabel').style.display = 'block';
        const list = document.getElementById('fileList');
        let html = '';
        systemLogs.forEach(function(f) {
            html += '<a href="#" onclick="loadLog(\'' + escapeJs(f) + '\', false); return false;" class="list-group-item list-group-item-action py-2 px-3"><span class="small text-truncate d-block" title="' + escapeHtml(f) + '">' + escapeHtml(f) + '</span></a>';
        });
        list.innerHTML = html;
    } else if (type === 'nginx') {
        document.getElementById('nginxDomainDiv').style.display = 'block';
    } else if (type === 'php') {
        document.getElementById('phpVersionDiv').style.display = 'block';
    }
}

function onNginxDomainChange() {
    const domain = document.getElementById('nginxDomain').value;
    const list = document.getElementById('fileList');
    list.innerHTML = '';
    document.getElementById('fileListLabel').style.display = 'none';
    if (!domain || !nginxLogs[domain]) return;
    document.getElementById('fileListLabel').style.display = 'block';
    let html = '';
    nginxLogs[domain].forEach(function(f) {
        html += '<a href="#" onclick="loadLog(\'' + escapeJs(f.path) + '\', true); return false;" class="list-group-item list-group-item-action py-2 px-3"><span class="small d-block">' + escapeHtml(f.label) + '</span></a>';
    });
    list.innerHTML = html;
}

function onPhpVersionChange() {
    const ver = document.getElementById('phpVersion').value;
    const domainSelect = document.getElementById('phpDomain');
    domainSelect.innerHTML = '<option value="">-- Select Target --</option>';
    document.getElementById('phpDomainDiv').style.display = 'none';
    document.getElementById('fileList').innerHTML = '';
    document.getElementById('fileListLabel').style.display = 'none';
    
    if (!ver || !phpLogs[ver]) return;
    
    const data = phpLogs[ver];
    if (data.global) {
        domainSelect.innerHTML += '<option value="global">Global (php' + escapeHtml(ver) + '-fpm.log)</option>';
    }
    if (data.hosts && data.hosts.length > 0) {
        data.hosts.forEach(function(h) {
            domainSelect.innerHTML += '<option value="' + escapeHtml(h.domain) + '">' + escapeHtml(h.domain) + ' (User/Host)</option>';
        });
    }
    document.getElementById('phpDomainDiv').style.display = 'block';
}

function onPhpDomainChange() {
    const ver = document.getElementById('phpVersion').value;
    const domain = document.getElementById('phpDomain').value;
    const list = document.getElementById('fileList');
    list.innerHTML = '';
    document.getElementById('fileListLabel').style.display = 'none';
    
    if (!ver || !domain || !phpLogs[ver]) return;
    
    document.getElementById('fileListLabel').style.display = 'block';
    const data = phpLogs[ver];
    let html = '';
    
    if (domain === 'global' && data.global) {
        html += '<a href="#" onclick="loadLog(\'' + escapeJs(data.global) + '\', true); return false;" class="list-group-item list-group-item-action py-2 px-3"><span class="small d-block">Global Log</span></a>';
        loadLog(data.global, true); // auto-load
    } else {
        const hostLog = data.hosts.find(h => h.domain === domain);
        if (hostLog) {
            html += '<a href="#" onclick="loadLog(\'' + escapeJs(hostLog.path) + '\', true); return false;" class="list-group-item list-group-item-action py-2 px-3"><span class="small d-block">' + escapeHtml(domain) + ' Error Log</span></a>';
            loadLog(hostLog.path, true); // auto-load
        }
    }
    list.innerHTML = html;
}

function escapeHtml(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
function escapeJs(str) {
    return JSON.stringify(String(str)).slice(1, -1);
}

async function loadLog(filename, isAbsolute) {
    currentFile = filename;
    currentIsAbsolute = isAbsolute;
    document.getElementById('currentLogName').textContent = filename.split('/').pop();
    document.getElementById('logContent').textContent = 'Loading...';
    await refreshLog();
}

async function refreshLog() {
    if (!currentFile) return;
    try {
        const response = await fetch("{{ url_for('read_log_file') }}?filename=" + encodeURIComponent(currentFile));
        const data = await response.json();
        if (data.error) {
            document.getElementById('logContent').textContent = 'Error: ' + data.error;
        } else {
            const el = document.getElementById('logContent');
            el.textContent = data.content;
            el.scrollTop = el.scrollHeight;
        }
    } catch (e) {
        document.getElementById('logContent').textContent = 'Fetch Error: ' + e;
    }
}
</script>
{% endblock %}