{% extends "base.html" %}

{% block title %}MCPO Logs - MCP Manager{% endblock %}
{% block page_title %}MCPO Process Logs{% endblock %}
{% block page_subtitle %}View the latest entries from the mcpo log file{% endblock %}

{% block head_extra %}
<style>
    .log-container {
        display: block;
        background-color: #263238;
        color: #eceff1;
        padding: 15px;
        border-radius: 4px;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.9em;
        min-height: 200px;
        max-height: 65vh;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-word;
        border: 1px solid rgba(0,0,0,0.2);
    }
    .card-action {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        padding: 15px 24px;
    }
    .auto-scroll-switch {
        margin-top: 5px;
    }
</style>
{% endblock %}

{% block content %}

{# MCPO Status Section #}
<div class="row">
    <div class="col s12">
        <div class="card blue-grey lighten-5">
             <div class="card-content" style="padding-bottom: 10px;">
                <span class="card-title blue-grey-text text-darken-3">Current MCPO Status</span>
                <div id="mcpo-status-indicator-logs"
                     hx-get="{{ url_for('get_mcpo_process_status_html') }}"
                     hx-trigger="load, every 5s"
                     hx-target="this"
                     hx-swap="innerHTML"
                     class="blue-grey-text text-darken-2"
                     style="min-height: 50px;">
                    <p>Loading status...</p>
                </div>
            </div>
        </div>
    </div>
</div>

{# Logs Section #}
<div class="row">
    <div class="col s12">
        <div class="card">
            <div class="card-content">
                <span class="card-title">Log File Contents</span>
                <p class="grey-text text-darken-1">
                    File path:
                    {% if mcpo_settings.log_file_path %}
                        <code>{{ mcpo_settings.log_file_path }}</code>
                        {% if log_file_path_exists %}
                            <span class="green-text text-darken-1">(File found)</span>
                        {% else %}
                            <span class="red-text text-darken-1">(File NOT found!)</span>
                        {% endif %}
                    {% else %}
                        <span class="orange-text text-darken-1">Log file path not configured in <a href="{{ url_for('ui_edit_mcpo_settings_form') }}">settings</a>.</span>
                    {% endif %}
                </p>
                {% if mcpo_settings.log_auto_refresh_enabled %}
                    <p class="grey-text text-darken-1" style="margin-bottom: 0;">
                        Auto-refresh enabled every <code>{{ mcpo_settings.log_auto_refresh_interval_seconds }}</code> seconds.
                    </p>
                {% else %}
                     <p class="grey-text text-darken-1" style="margin-bottom: 0;">
                        Auto-refresh disabled. Click "Refresh" to view the latest logs.
                    </p>
                {% endif %}

                {% set trigger_interval = "every " ~ mcpo_settings.log_auto_refresh_interval_seconds ~ "s" if mcpo_settings.log_auto_refresh_enabled else "never" %}

                <div id="mcpo-log-content-wrapper" style="margin-top: 20px;">
                     <pre class="log-container" id="log-container">
                        <code id="log-code-block"
                              hx-get="{{ url_for('api_get_logs_content_html') }}?lines=200"
                              hx-trigger="load, {{ trigger_interval }}"
                              hx-target="this"
                              hx-swap="innerHTML"
                              hx-indicator="#log-spinner">Loading logs...</code>
                     </pre>
                    <div id="log-spinner" class="htmx-indicator center-align" style="margin-top: 10px;">
                        <div class="preloader-wrapper small active">
                            <div class="spinner-layer spinner-blue-only">
                                <div class="circle-clipper left"><div class="circle"></div></div>
                                <div class="gap-patch"><div class="circle"></div></div>
                                <div class="circle-clipper right"><div class="circle"></div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-action">
                 <button class="btn waves-effect waves-light blue-grey lighten-1"
                         hx-get="{{ url_for('api_get_logs_content_html') }}?lines=200"
                         hx-target="#log-code-block"
                         hx-swap="innerHTML"
                         hx-indicator="#log-spinner">
                     <i class="material-icons left">refresh</i>Refresh Logs
                 </button>

                 <div class="switch auto-scroll-switch">
                    <label class="blue-grey-text text-darken-2">
                        Auto-scroll Off
                        <input type="checkbox" id="auto-scroll-switch" checked>
                        <span class="lever"></span>
                        On
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const logContainer = document.getElementById('log-container');
        const autoScrollSwitch = document.getElementById('auto-scroll-switch');
        
        if (!logContainer || !autoScrollSwitch) {
            console.error("Could not find required elements for auto-scrolling");
            return;
        }
        
        // Function to scroll to bottom
        function scrollToBottom() {
            if (autoScrollSwitch.checked) {
                logContainer.scrollTop = logContainer.scrollHeight;
            }
        }
        
        // Event handler after content update via HTMX
        document.body.addEventListener('htmx:afterSwap', function(event) {
            if (event.detail.target.id === 'log-code-block') {
                setTimeout(scrollToBottom, 50);
            }
        });
        
        // Initial scroll
        scrollToBottom();
        
        // Switch state change handler
        autoScrollSwitch.addEventListener('change', function() {
            if (autoScrollSwitch.checked) {
                scrollToBottom();
            }
        });
    });
    </script>

{% endblock %}