{% extends "base.html" %}
{% load static %}

<!-- Template Debug: This template is being processed -->

{% block title %}{{ title }}{% endblock %}

{% block extra_css %}
<style>
    .monitor-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .monitor-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding: 12px 15px;
        background: #2d2d2d;
        border-radius: 6px;
        color: #e0e0e0;
    }
    
    .monitor-header h1 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .status-card {
        background: #2d2d2d;
        border-radius: 6px;
        padding: 16px 20px;
        color: #e0e0e0;
    }
    .status-card .status-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #3d3d3d;
    }
    .status-card .status-row:last-child { border-bottom: none; }
</style>
{% endblock %}

{% block content %}
<div class="monitor-container">
    <div class="monitor-header">
        <h1>{{ title }}</h1>
    </div>

    {% if mqtt_config %}
    <div class="status-card">
        <div class="status-row">
            <strong>HMAC</strong>
            {% if mqtt_config.use_hmac %}
                <span class="badge badge-success">Enabled (SHA-256)</span>
            {% else %}
                <span class="badge badge-warning">Disabled</span>
            {% endif %}
        </div>
        <div class="status-row">
            <strong>Authentication</strong>
            {% if mqtt_config.username %}
                <span class="badge badge-info">Username/Password</span>
            {% else %}
                <span class="badge badge-secondary">None</span>
            {% endif %}
        </div>
        <div class="status-row">
            <strong>Connection</strong>
            <span id="mqtt-bridge-connection-badge">
                {% if broker_connected == 'connected' %}
                    <span class="badge badge-success">Connected</span>
                {% elif broker_connected == 'disconnected' %}
                    <span class="badge badge-danger">Disconnected</span>
                {% else %}
                    <span class="badge badge-secondary">Unknown</span>
                {% endif %}
            </span>
        </div>
        <div class="status-row">
            <strong>Last reload</strong>
            <span id="mqtt-monitor-reload" class="text-muted small">—</span>
        </div>
        <div class="status-row">
            <strong>Last error</strong>
            <span id="mqtt-monitor-error" class="text-muted small">—</span>
        </div>
        <div class="status-row">
            <strong>Status API</strong>
            <span id="mqtt-monitor-poll" class="text-muted small">Loading…</span>
        </div>
    </div>
    {% else %}
    <div class="alert alert-warning mb-3">
        <h5><i class="fas fa-exclamation-triangle"></i> No MQTT Configuration Found</h5>
        <p>Please configure MQTT settings in the NEMO admin interface.</p>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
(function() {
    function renderBridgeStatus(status) {
        var el = document.getElementById('mqtt-bridge-connection-badge');
        if (!el) return;
        if (status === 'connected') {
            el.innerHTML = '<span class="badge badge-success">Connected</span>';
        } else if (status === 'disconnected') {
            el.innerHTML = '<span class="badge badge-danger">Disconnected</span>';
        } else {
            el.innerHTML = '<span class="badge badge-secondary">Unknown</span>';
        }
    }

    function renderMonitorDiagnostics(data) {
        var diag = (data && data.diagnostics) || {};
        var rel = document.getElementById('mqtt-monitor-reload');
        if (rel) {
            var r = diag.last_reload_reason || '';
            var a = diag.last_reload_at || '';
            rel.textContent = (r || a) ? (r + (a ? ' @ ' + a : '')) : '(no data yet)';
        }
        var er = document.getElementById('mqtt-monitor-error');
        if (er) {
            er.textContent = diag.last_error ? String(diag.last_error) : '(none)';
            er.className = diag.last_error ? 'text-danger small' : 'text-muted small';
        }
    }

    function poll() {
        fetch("{% url 'mqtt_plugin:bridge_status' %}", { credentials: 'same-origin', cache: 'no-store' })
            .then(function(r) {
                if (!r.ok) throw new Error('HTTP ' + r.status);
                return r.json();
            })
            .then(function(data) {
                var pollEl = document.getElementById('mqtt-monitor-poll');
                if (pollEl) {
                    pollEl.textContent = 'OK';
                    pollEl.className = 'text-muted small';
                }
                renderBridgeStatus(data && data.status);
                renderMonitorDiagnostics(data);
            })
            .catch(function(err) {
                var pollEl = document.getElementById('mqtt-monitor-poll');
                if (pollEl) {
                    pollEl.textContent = (err && err.message) ? err.message : 'request failed';
                    pollEl.className = 'text-danger small';
                }
            });
    }

    poll();
    setInterval(poll, 2000);
})();
</script>
{% endblock %}