{% extends 'admin/custom_base.html' %}

{% block head_css %}{{ super() }}
<style>
  .console-wrap {
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
    min-height: 400px;
    overflow: hidden;
  }
  .console-bar {
    background: #161616;
    border-bottom: 1px solid #2a2a2a;
    padding: .45rem .85rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
    font-size: .75rem;
    color: #888;
  }
  .console-bar .dot {
    width: 8px; height: 8px; border-radius: 50%; background: #333; flex-shrink: 0;
  }
  .console-bar .dot.live { background: #22c55e; box-shadow: 0 0 5px #22c55e99; }
  .console-bar .dot.away { background: #f59e0b; box-shadow: 0 0 5px #f59e0b66; }
  .console-bar .sep { flex: 1; }
  .console-bar button {
    background: #222; border: 1px solid #383838; color: #bbb;
    font-size: .7rem; padding: 2px 9px; border-radius: 4px; cursor: pointer;
  }
  .console-bar button:hover { background: #2e2e2e; }
  .console-bar .status-text { font-size: .68rem; }
  #log {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .75rem;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: .77rem;
    line-height: 1.5;
    color: #d4d4d4;
    white-space: pre-wrap;
    word-break: break-all;
  }
</style>
{% endblock %}

{% block body %}
{{ super() }}
<div class="container-fluid" style="padding:1.25rem 1.5rem 0;">
  <div class="d-flex align-items-center mb-3" style="gap:.75rem;">
    <h4 style="margin:0;font-weight:800;">Console</h4>
    <span style="font-size:.75rem;color:#666;" id="info"></span>
  </div>
  <div class="console-wrap">
    <div class="console-bar">
      <span class="dot" id="dot"></span>
      <span class="status-text" id="status-text">connecting…</span>
      <span class="sep"></span>
      <button onclick="logEl.textContent='';">Clear</button>
      <button onclick="logEl.scrollTop=logEl.scrollHeight">↓ Bottom</button>
    </div>
    <div id="log"></div>
  </div>
</div>

<script>
  const logEl = document.getElementById('log');
  const dot   = document.getElementById('dot');
  const stxt  = document.getElementById('status-text');
  const info  = document.getElementById('info');

  let totalBytes = 0;
  let retryDelay = 1000;
  let ws = null;

  function atBottom() {
    return logEl.scrollHeight - logEl.scrollTop - logEl.clientHeight < 80;
  }

  function append(text) {
    if (!text) return;
    const wasBot = atBottom();
    logEl.textContent += text;
    totalBytes += text.length;
    info.textContent = (totalBytes / 1024).toFixed(0) + ' KB';
    if (wasBot) logEl.scrollTop = logEl.scrollHeight;
  }

  function connect() {
    const proto = location.protocol === 'https:' ? 'wss' : 'ws';
    ws = new WebSocket(proto + '://' + location.host + '/admin/ws/console');

    ws.onopen = function() {
      dot.className = 'dot live';
      stxt.textContent = 'live';
      retryDelay = 1000;
    };

    ws.onmessage = function(e) {
      append(e.data);
    };

    ws.onclose = function() {
      dot.className = 'dot away';
      stxt.textContent = 'reconnecting in ' + (retryDelay / 1000).toFixed(0) + 's…';
      setTimeout(connect, retryDelay);
      retryDelay = Math.min(retryDelay * 2, 16000);
    };

    ws.onerror = function() {
      dot.className = 'dot';
      stxt.textContent = 'error';
    };
  }

  document.addEventListener('visibilitychange', function() {
    if (!document.hidden && ws && ws.readyState === WebSocket.CLOSED) {
      connect();
    }
  });

  connect();
</script>
{% endblock %}