{% extends "base.html" %}
{% block content %}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('.static', filename='css/mobile_custom.css') }}"/>

<style>
    /* Match gds_dviewer Log Page Design */
    body {
        background: linear-gradient(145deg, #0f172a, #1e293b) !important;
        color: #f8fafc;
        font-family: 'Inter', -apple-system, sans-serif;
    }

    .log-card {
        background: linear-gradient(145deg, rgba(20, 30, 48, 0.95), rgba(36, 59, 85, 0.9));
        border: 1px solid rgba(100, 150, 180, 0.25);
        border-radius: 12px;
        overflow: hidden;
        margin-top: 20px;
    }

    .log-card-header {
        background: transparent;
        border-bottom: 1px solid rgba(100, 150, 180, 0.2);
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .log-card-header h5 {
        margin: 0;
        color: #e2e8f0;
        font-weight: 600;
    }

    .log-card-header h5 i {
        color: #7dd3fc;
        margin-right: 8px;
    }

    .btn-log {
        background: linear-gradient(180deg, rgba(45, 55, 72, 0.95), rgba(35, 45, 60, 0.98));
        border: 1px solid rgba(100, 150, 180, 0.25);
        color: #7dd3fc;
        padding: 6px 14px;
        font-size: 12px;
        cursor: pointer;
        border-radius: 6px;
        margin-left: 8px;
    }

    .btn-log:hover {
        background: linear-gradient(180deg, rgba(55, 65, 82, 0.95), rgba(45, 55, 70, 0.98));
        color: #fff;
    }

    .btn-log.danger {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.4);
        color: #fca5a5;
    }

    .btn-log.danger:hover {
        background: rgba(239, 68, 68, 0.3);
    }

    .log-container {
        height: calc(100vh - 200px);
        min-height: 400px;
        overflow-y: auto;
        padding: 16px;
        font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
        font-size: 12px;
        line-height: 1.6;
        background: rgba(0, 0, 0, 0.3);
        color: #94a3b8;
    }

    .log-line-error { color: #f87171; }
    .log-line-warning { color: #fbbf24; }
    .log-line-info { color: #5eead4; }
    .log-line-debug { color: #94a3b8; }

    /* Tabs Styling */
    .nav-tabs {
        border-bottom: 1px solid rgba(100, 150, 180, 0.2);
        background: rgba(0, 0, 0, 0.2);
        padding: 10px 10px 0 10px;
    }

    .nav-tabs .nav-link {
        color: #94a3b8 !important;
        border: none !important;
        border-radius: 8px 8px 0 0 !important;
        padding: 10px 20px;
        font-weight: 500;
        background: transparent;
    }

    .nav-tabs .nav-link:hover {
        color: #e2e8f0 !important;
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-tabs .nav-link.active {
        color: #7dd3fc !important;
        background: rgba(20, 30, 48, 0.95) !important;
        border-bottom: 2px solid #7dd3fc !important;
    }

    .controls-bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 12px 20px;
        background: rgba(0, 0, 0, 0.2);
        border-top: 1px solid rgba(100, 150, 180, 0.2);
        gap: 12px;
    }

    .form-check-input:checked {
        background-color: #7dd3fc;
        border-color: #7dd3fc;
    }

    .form-check-label {
        color: #94a3b8;
        font-weight: 500;
    }

    @media (max-width: 768px) {
        .log-container {
            height: calc(100vh - 180px);
            min-height: 300px;
            padding: 12px;
        }
        .log-card-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }
    }

    /* Smooth Load */
    .content-cloak {
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }
    .content-cloak.visible {
        opacity: 1;
    }
</style>

<div class="container-fluid content-cloak" id="main_container" style="max-width: 1400px;">
    <div class="log-card">
        <nav>
            {{ macros.m_tab_head_start() }}
                {{ macros.m_tab_head('old', 'History', true) }}
                {{ macros.m_tab_head('new', 'Real-time', false) }}
            {{ macros.m_tab_head_end() }}
        </nav>
        
        <div class="tab-content" id="nav-tabContent">
            <!-- History Logs -->
            {{ macros.m_tab_content_start('old', true) }}
                <div class="log-container" id="log-history"></div>
            {{ macros.m_tab_content_end() }}
            
            <!-- Real-time Logs -->
            {{ macros.m_tab_content_start('new', false) }}
                <div class="log-container" id="log-realtime"></div>
                <div class="controls-bar">
                    <label class="form-check-label" for="auto_scroll">Auto Scroll</label>
                    <div class="form-check form-switch mb-0">
                        <input id="auto_scroll" name="auto_scroll" class="form-check-input" type="checkbox" checked>
                    </div>
                    <button id="clear" class="btn-log">Clear</button>
                </div>
            {{ macros.m_tab_content_end() }}
        </div>
    </div>
</div>

<script type="text/javascript">
function escapeHtml(text) {
    const div = document.createElement('div');
    div.appendChild(document.createTextNode(text));
    return div.innerHTML;
}

function formatLogLine(line) {
    let className = '';
    if (line.includes('ERROR')) className = 'log-line-error';
    else if (line.includes('WARNING')) className = 'log-line-warning';
    else if (line.includes('INFO')) className = 'log-line-info';
    else if (line.includes('DEBUG')) className = 'log-line-debug';
    return '<div class="' + className + '">' + escapeHtml(line) + '</div>';
}

$(document).ready(function() {
    $("#main_container").removeClass("container").addClass("container-fluid");
    $('#loading').show();
    setTimeout(function() {
        $('.content-cloak').addClass('visible');
    }, 100);
});

var protocol = window.location.protocol;
var socket = io.connect(protocol + "//" + document.domain + ":" + location.port + "/log");

socket.emit("start", {'package':'{{package}}'});

socket.on('on_start', function(data) {
    var container = document.getElementById("log-history");
    var lines = data.data.split('\n');
    var html = '';
    lines.forEach(function(line) {
        html += formatLogLine(line);
    });
    container.innerHTML = html || '<div class="text-muted text-center">로그가 비어 있습니다.</div>';
    container.scrollTop = container.scrollHeight;
    $('#loading').hide();
});

socket.on('add', function(data) {
    if (data.package == "{{package}}") {
        var chk = $('#auto_scroll').is(":checked");
        var container = document.getElementById("log-realtime");
        container.innerHTML += formatLogLine(data.data);
        if (chk) container.scrollTop = container.scrollHeight;
    }
});

$("#clear").click(function(e) {
    e.preventDefault(); 
    document.getElementById("log-realtime").innerHTML = '';
});
</script>
{% endblock %}