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

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

{% block extra_css %}
<style>
    .mqtt-monitor-page {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }
    .mqtt-monitor-page .monitor-page-title {
        margin: 0 0 16px 0;
        font-size: 1.25rem;
        font-weight: 600;
    }
</style>
{% endblock %}

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

    {% if not config %}
    <div class="alert alert-warning">
        <h5><i class="fas fa-exclamation-triangle"></i> Unable to load MQTT dashboard</h5>
        <p>Check database connectivity and that plugin migrations have been applied.</p>
    </div>
    {% else %}
    <div class="panel-body" style="padding-left: 0; padding-right: 0;">
    <h3 class="customization-section-title">Status & Recent Messages</h3>

    {% if config.enabled %}
        <div class="alert alert-success">
            <strong>MQTT is enabled</strong> - Events will be published to the broker.
        </div>
    {% else %}
        <div class="alert alert-warning">
            <strong>MQTT is disabled</strong> - No events will be published.
        </div>
    {% endif %}

    <h4>Status</h4>
    <div class="table-responsive">
        <table class="table table-striped table-condensed">
            <tbody>
                <tr>
                    <th style="width: 240px;">Bridge process (consumption loop)</th>
                    <td>
                        <span id="mqtt-bridge-heartbeat-summary"></span>
                        <span id="mqtt-bridge-heartbeat-at" style="margin-left: 8px;"></span>
                        <span id="mqtt-bridge-heartbeat-age" class="text-muted" style="margin-left: 8px;"></span>
                    </td>
                </tr>
                <tr>
                    <th>MQTT broker connection</th>
                    <td>
                        <span id="mqtt-bridge-status-value">
                            {% if bridge_status %}
                                <code>{{ bridge_status }}</code>
                            {% else %}
                                <span class="text-muted">(unknown)</span>
                            {% endif %}
                        </span>
                    </td>
                </tr>
                <tr>
                    <th>Broker connection (DB row) updated</th>
                    <td>
                        <span id="mqtt-bridge-status-updated-at">
                            <span class="text-muted">(unknown)</span>
                        </span>
                        <span id="mqtt-bridge-status-age" class="text-muted" style="margin-left: 8px;"></span>
                    </td>
                </tr>
                <tr>
                    <th>Config last updated</th>
                    <td><code>{{ config.updated_at|date:"M d, Y H:i:s" }}</code></td>
                </tr>
                <tr>
                    <th>Pending queue rows</th>
                    <td><code>{{ pending_queue_count }}</code></td>
                </tr>
                <tr>
                    <th>Last bridge config reload</th>
                    <td id="mqtt-bridge-diag-reload"><span class="text-muted">(no data yet)</span></td>
                </tr>
                <tr>
                    <th>Applied config (bridge process)</th>
                    <td id="mqtt-bridge-diag-applied"><span class="text-muted">(no data yet)</span></td>
                </tr>
                <tr>
                    <th>Last bridge error</th>
                    <td id="mqtt-bridge-diag-error"><span class="text-muted">(none)</span></td>
                </tr>
                <tr>
                    <th>Status API</th>
                    <td id="mqtt-bridge-poll-error"><span class="text-muted">Loading…</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    {% if not config.enabled %}
    <p class="help-block light-grey" style="margin-top: 8px;">
        When MQTT is disabled, the bridge process may still run and update its heartbeat; the broker line may stay disconnected.
    </p>
    {% endif %}

    <div class="customization-separation" style="margin: 10px 0;"></div>

    <div class="form-group" style="margin-bottom: 0;">
        <label style="font-weight: normal;">
            <input type="checkbox" id="mqtt-debug-toggle">
            Show debug details
        </label>
        <div class="help-block light-grey" style="margin-top: 5px;">
            Shows recent queue rows and message history for troubleshooting.
        </div>
    </div>

    <div id="mqtt-debug-details" style="display: none;">
        <h4>Diagnostics (copy)</h4>
        <pre id="mqtt-diagnostics-snapshot" style="white-space: pre-wrap; word-break: break-word; margin-bottom: 15px;">Bridge process (consumption loop)
  last_heartbeat: <span id="mqtt-diag-heartbeat-at">{% if bridge_last_heartbeat_iso %}{{ bridge_last_heartbeat_iso }}{% else %}(none){% endif %}</span>
  heartbeat_age: <span id="mqtt-diag-heartbeat-age">(unknown)</span>
  process_health: <span id="mqtt-diag-process-health">(unknown)</span>

MQTT broker
  connection: <span id="mqtt-diag-bridge-status">{% if bridge_status %}{{ bridge_status }}{% else %}(unknown){% endif %}</span>
  status_updated_at: <span id="mqtt-diag-bridge-updated-at">(unknown)</span>
  status_age: <span id="mqtt-diag-bridge-age">(unknown)</span>

Bridge process diagnostics (database)
  last_reload: <span id="mqtt-diag-reload-line">(no data yet)</span>
  applied_fingerprint: <span id="mqtt-diag-applied-fp">(no data yet)</span>
  applied_config_snapshot: <span id="mqtt-diag-applied-snap">(no data yet)</span>
  last_error: <span id="mqtt-diag-last-err">(none)</span>
  diagnostics_updated_at: <span id="mqtt-diag-diag-updated">(unknown)</span>

MQTT target
  broker_host: {{ config.broker_host }}
  broker_port: {{ config.broker_port }}
  client_id: {{ config.client_id }}
  keepalive: {{ config.keepalive }}
  clean_session: {{ config.clean_session }}
  username_set: {% if config.username %}true{% else %}false{% endif %}

Config
  enabled: {{ config.enabled }}
  use_hmac: {{ config.use_hmac }}
  retain_messages: {{ config.retain_messages }}
  auto_reconnect: {{ config.auto_reconnect }}
  reconnect_delay: {{ config.reconnect_delay }}
  max_reconnect_attempts: {{ config.max_reconnect_attempts }}
  log_level: {{ config.log_level }}
  log_messages_to_db: {{ config.log_messages }}

Queue
  pending_count: {{ pending_queue_count }}
  oldest_pending_created_at: {% if pending_queue_oldest %}{{ pending_queue_oldest|date:"c" }}{% else %}(none){% endif %}
  newest_pending_created_at: {% if pending_queue_newest %}{{ pending_queue_newest|date:"c" }}{% else %}(none){% endif %}

Plugin
  version: {% if plugin_version %}{{ plugin_version }}{% else %}(unknown){% endif %}</pre>

        {% if recent_queue_events %}
            <h4>Recent Queue Rows (PostgreSQL)</h4>
            <div class="table-responsive">
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Topic</th>
                            <th>Processed</th>
                            <th>QoS</th>
                            <th>Retain</th>
                            <th>Created</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for ev in recent_queue_events %}
                        <tr>
                            <td>{{ ev.id }}</td>
                            <td><code>{{ ev.topic }}</code></td>
                            <td>
                                {% if ev.processed %}
                                    <span class="label label-success">Yes</span>
                                {% else %}
                                    <span class="label label-warning">No</span>
                                {% endif %}
                            </td>
                            <td>{{ ev.qos }}</td>
                            <td>{{ ev.retain }}</td>
                            <td>{{ ev.created_at|date:"M d, Y H:i:s" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="text-muted">No recent MQTT queue rows found.</p>
        {% endif %}

        {% if recent_messages %}
            <h4>Recent MQTT Messages</h4>
            <div class="table-responsive">
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr>
                            <th>Topic</th>
                            <th>Status</th>
                            <th>QoS</th>
                            <th>Sent At</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for message in recent_messages %}
                        <tr>
                            <td>{{ message.topic }}</td>
                            <td>
                                {% if message.success %}
                                    <span class="label label-success">Success</span>
                                {% else %}
                                    <span class="label label-danger">Failed</span>
                                {% endif %}
                            </td>
                            <td>{{ message.qos }}</td>
                            <td>{{ message.sent_at|date:"M d, Y H:i:s" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
{% if config %}
<script>
(function() {
    function setDebugVisible(visible) {
        var details = document.getElementById('mqtt-debug-details');
        if (!details) return;
        details.style.display = visible ? 'block' : 'none';
    }

    function initDebugToggle() {
        var cb = document.getElementById('mqtt-debug-toggle');
        if (!cb) return;

        var saved = null;
        try { saved = localStorage.getItem('nemo_mqtt_debug_details'); } catch (e) { saved = null; }
        var initial = saved === '1';
        cb.checked = initial;
        setDebugVisible(initial);

        cb.addEventListener('change', function() {
            var on = !!cb.checked;
            setDebugVisible(on);
            try { localStorage.setItem('nemo_mqtt_debug_details', on ? '1' : '0'); } catch (e) { /* ignore */ }
        });
    }

    function formatAge(seconds) {
        if (seconds < 60) return Math.round(seconds) + 's ago';
        if (seconds < 3600) return Math.round(seconds / 60) + 'm ago';
        if (seconds < 86400) return Math.round(seconds / 3600) + 'h ago';
        return Math.round(seconds / 86400) + 'd ago';
    }

    var HEARTBEAT_OK_MAX_AGE_SEC = 60;

    function renderBridgeHeartbeat(iso) {
        var summaryEl = document.getElementById('mqtt-bridge-heartbeat-summary');
        var atEl = document.getElementById('mqtt-bridge-heartbeat-at');
        var ageEl = document.getElementById('mqtt-bridge-heartbeat-age');
        var diagAt = document.getElementById('mqtt-diag-heartbeat-at');
        var diagAge = document.getElementById('mqtt-diag-heartbeat-age');
        var diagHealth = document.getElementById('mqtt-diag-process-health');
        if (!summaryEl || !atEl || !ageEl) return;

        if (!iso) {
            summaryEl.innerHTML = '<span class="label label-default">No reports yet</span>';
            atEl.innerHTML = '';
            ageEl.textContent = '';
            if (diagAt) diagAt.textContent = '(none)';
            if (diagAge) diagAge.textContent = '(n/a)';
            if (diagHealth) diagHealth.textContent = 'no_data';
            return;
        }
        var d = new Date(iso);
        if (isNaN(d.getTime())) {
            summaryEl.innerHTML = '<span class="text-muted">(invalid)</span>';
            atEl.innerHTML = '';
            ageEl.textContent = '';
            if (diagAt) diagAt.textContent = '(invalid)';
            if (diagAge) diagAge.textContent = '(unknown)';
            if (diagHealth) diagHealth.textContent = 'unknown';
            return;
        }
        var ageSeconds = (Date.now() - d.getTime()) / 1000;
        var isStale = ageSeconds > HEARTBEAT_OK_MAX_AGE_SEC;
        summaryEl.innerHTML = isStale
            ? '<span class="label label-warning">Stale</span>'
            : '<span class="label label-success">Running</span>';
        atEl.innerHTML = '<code>' + d.toLocaleString() + '</code>';
        ageEl.textContent = '(' + formatAge(ageSeconds) + (isStale ? ', stale' : '') + ')';
        ageEl.className = isStale ? 'text-warning' : 'text-muted';
        if (diagAt) diagAt.textContent = d.toISOString();
        if (diagAge) diagAge.textContent = formatAge(ageSeconds) + (isStale ? ' (stale)' : '');
        if (diagHealth) diagHealth.textContent = isStale ? 'stale' : 'running_ok';
    }

    function renderBridgeStatus(status) {
        var el = document.getElementById('mqtt-bridge-status-value');
        if (!el) return;
        if (status === 'connected' || status === 'disconnected') {
            el.innerHTML = '<code>' + status + '</code>';
        } else {
            el.innerHTML = '<span class="text-muted">(unknown)</span>';
        }

        var diag = document.getElementById('mqtt-diag-bridge-status');
        if (diag) diag.textContent = status || '(unknown)';
    }

    function renderBridgeUpdatedAt(iso) {
        var el = document.getElementById('mqtt-bridge-status-updated-at');
        var ageEl = document.getElementById('mqtt-bridge-status-age');
        if (!el) return;
        if (!iso) {
            el.innerHTML = '<span class="text-muted">(unknown)</span>';
            if (ageEl) ageEl.textContent = '';
            var diagUpdated = document.getElementById('mqtt-diag-bridge-updated-at');
            var diagAge = document.getElementById('mqtt-diag-bridge-age');
            if (diagUpdated) diagUpdated.textContent = '(unknown)';
            if (diagAge) diagAge.textContent = '(unknown)';
            return;
        }
        var d = new Date(iso);
        if (isNaN(d.getTime())) {
            el.innerHTML = '<span class="text-muted">(unknown)</span>';
            if (ageEl) ageEl.textContent = '';
            var diagUpdated2 = document.getElementById('mqtt-diag-bridge-updated-at');
            var diagAge2 = document.getElementById('mqtt-diag-bridge-age');
            if (diagUpdated2) diagUpdated2.textContent = '(unknown)';
            if (diagAge2) diagAge2.textContent = '(unknown)';
            return;
        }
        el.innerHTML = '<code>' + d.toLocaleString() + '</code>';
        if (ageEl) {
            var ageSeconds = (Date.now() - d.getTime()) / 1000;
            var isStale = ageSeconds > 60;
            ageEl.textContent = '(' + formatAge(ageSeconds) + (isStale ? ', stale' : '') + ')';
            ageEl.className = isStale ? 'text-warning' : 'text-muted';
        }

        var diagUpdatedOk = document.getElementById('mqtt-diag-bridge-updated-at');
        var diagAgeOk = document.getElementById('mqtt-diag-bridge-age');
        if (diagUpdatedOk) diagUpdatedOk.textContent = d.toISOString();
        if (diagAgeOk) {
            var ageSeconds2 = (Date.now() - d.getTime()) / 1000;
            var isStale2 = ageSeconds2 > 60;
            diagAgeOk.textContent = formatAge(ageSeconds2) + (isStale2 ? ' (stale)' : '');
        }
    }

    function formatDiagIso(iso) {
        if (!iso) return '';
        var d = new Date(iso);
        if (isNaN(d.getTime())) return iso;
        return d.toLocaleString();
    }

    function renderDiagnosticsPayload(data) {
        var diag = (data && data.diagnostics) || {};
        var reason = diag.last_reload_reason;
        var at = diag.last_reload_at;
        var reloadText = '(no data yet)';
        if (reason || at) {
            reloadText = (reason || '(unknown reason)');
            if (at) reloadText += ' — ' + formatDiagIso(at);
        }
        var reloadEl = document.getElementById('mqtt-bridge-diag-reload');
        if (reloadEl) {
            reloadEl.textContent = '';
            if (reloadText === '(no data yet)') {
                var spR = document.createElement('span');
                spR.className = 'text-muted';
                spR.textContent = reloadText;
                reloadEl.appendChild(spR);
            } else {
                var codeR = document.createElement('code');
                codeR.textContent = reloadText;
                reloadEl.appendChild(codeR);
            }
        }

        var fp = diag.applied_fingerprint;
        var fpStr = '(no data yet)';
        if (fp && typeof fp === 'object') {
            fpStr = 'id=' + (fp.id != null ? fp.id : '?') + ', updated_at=' + (fp.updated_at || '(null)');
        }
        var appliedEl = document.getElementById('mqtt-bridge-diag-applied');
        if (appliedEl) {
            var snap = diag.applied_config_snapshot;
            var line = fpStr;
            if (snap && typeof snap === 'object') {
                line += '; snapshot id=' + (snap.id != null ? snap.id : '?');
                if (snap.updated_at) line += ' @ ' + snap.updated_at;
            } else if (fp) {
                line += '; snapshot (disabled or none)';
            }
            appliedEl.textContent = '';
            var codeA = document.createElement('code');
            codeA.textContent = line;
            appliedEl.appendChild(codeA);
        }

        var err = diag.last_error;
        var errEl = document.getElementById('mqtt-bridge-diag-error');
        if (errEl) {
            errEl.textContent = '';
            if (err) {
                var spE = document.createElement('span');
                spE.className = 'text-danger';
                var codeE = document.createElement('code');
                codeE.textContent = String(err);
                spE.appendChild(codeE);
                errEl.appendChild(spE);
            } else {
                var spN = document.createElement('span');
                spN.className = 'text-muted';
                spN.textContent = '(none)';
                errEl.appendChild(spN);
            }
        }

        var dr = document.getElementById('mqtt-diag-reload-line');
        if (dr) dr.textContent = reloadText;
        var dfp = document.getElementById('mqtt-diag-applied-fp');
        if (dfp) dfp.textContent = fpStr;
        var ds = document.getElementById('mqtt-diag-applied-snap');
        if (ds) {
            try {
                ds.textContent = diag.applied_config_snapshot
                    ? JSON.stringify(diag.applied_config_snapshot)
                    : '(none)';
            } catch (e) {
                ds.textContent = '(unavailable)';
            }
        }
        var de = document.getElementById('mqtt-diag-last-err');
        if (de) de.textContent = err ? String(err) : '(none)';
        var du = document.getElementById('mqtt-diag-diag-updated');
        if (du) du.textContent = diag.diagnostics_updated_at ? formatDiagIso(diag.diagnostics_updated_at) : '(unknown)';
    }

    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-bridge-poll-error');
                if (pollEl) {
                    pollEl.textContent = '';
                    var spOk = document.createElement('span');
                    spOk.className = 'text-muted';
                    spOk.textContent = 'OK';
                    pollEl.appendChild(spOk);
                }
                renderBridgeHeartbeat(data && data.last_heartbeat);
                renderBridgeStatus(data && data.status);
                renderBridgeUpdatedAt(data && data.updated_at);
                renderDiagnosticsPayload(data);
            })
            .catch(function(err) {
                var pollEl = document.getElementById('mqtt-bridge-poll-error');
                var msg = (err && err.message) ? err.message : 'request failed';
                if (pollEl) {
                    pollEl.textContent = '';
                    var spPe = document.createElement('span');
                    spPe.className = 'text-danger';
                    var codePe = document.createElement('code');
                    codePe.textContent = msg;
                    spPe.appendChild(codePe);
                    pollEl.appendChild(spPe);
                }
            });
    }

    initDebugToggle();
    {% if bridge_last_heartbeat_iso %}
    renderBridgeHeartbeat('{{ bridge_last_heartbeat_iso|escapejs }}');
    {% else %}
    renderBridgeHeartbeat(null);
    {% endif %}
    poll();
    setInterval(poll, 2000);
})();
</script>
{% endif %}
{% endblock %}