"""
MeshBay Node — local administration web UI (localhost:18000).

FastAPI app providing:
  - Dashboard: node status, connected peers, group overview
  - Groups: file listing, shared directory info
  - Peers: connected WebRTC/QUIC clients
  - Audit log: IP + action log for legal compliance
  - API endpoints for all data (JSON)

Served only on 127.0.0.1 — not exposed to the network.
No authentication required (localhost only).
"""

import base64
import json
import logging
import time
from html import escape
from pathlib import Path

from fastapi import FastAPI, WebSocket, WebSocketDisconnect, Query
from fastapi.responses import HTMLResponse, JSONResponse

from meshbay_node import __version__
from meshbay_common.crypto import generate_gek, wrap_gek_aes

log = logging.getLogger(__name__)


def create_ui_app(state: dict) -> FastAPI:
    app = FastAPI(
        title="MeshBay Node Admin",
        version=__version__,
        docs_url=None,
        redoc_url=None,
    )

    @app.middleware("http")
    async def _security_headers(request, call_next):
        """
        Defence in depth behind the escaping fixes for H2. This UI is unauthenticated
        on loopback, so script execution here equals full control of the node admin API.

        Note what this does and does not do: the page relies on inline <script>, so
        script-src must allow 'unsafe-inline' and CSP therefore does NOT prevent an
        injected script from running. Escaping is the actual fix. What CSP buys is
        containment — connect-src/img-src/form-action 'self'|'none' stop an injected
        script from exfiltrating the audit log or config to an external host.
        """
        response = await call_next(request)
        response.headers["Content-Security-Policy"] = (
            "default-src 'none'; "
            "style-src 'unsafe-inline'; "
            "script-src 'unsafe-inline'; "
            "connect-src 'self'; "
            "img-src 'self' data:; "
            "form-action 'none'; "
            "frame-ancestors 'none'; "
            "base-uri 'none'"
        )
        response.headers["X-Content-Type-Options"] = "nosniff"
        response.headers["Referrer-Policy"] = "no-referrer"
        return response

    # ── JSON API ─────────────────────────────────────────────────────────────

    @app.get("/api/status")
    async def api_status():
        indexes = state.get("indexes", {})
        total_files = sum(idx.count for idx in indexes.values())
        groups_ctx = state.get("groups_ctx", {})
        webrtc = state.get("webrtc")
        return {
            "version": __version__,
            "status": state.get("status", "starting"),
            "hub_url": state.get("hub_url", ""),
            "username": state.get("username", ""),
            "quic_port": state.get("quic_port", 0),
            "endpoint_hint": state.get("endpoint_hint"),
            "group_count": len(groups_ctx),
            "total_files": total_files,
            "webrtc_peers": webrtc.active_peers if webrtc else 0,
            "pk_node_ed25519": state.get("pk_node_ed25519", ""),
        }

    @app.get("/api/groups")
    async def api_groups():
        groups_ctx = state.get("groups_ctx", {})
        config = state.get("config")
        result = []
        for gid, ctx in groups_ctx.items():
            cfg = None
            if config:
                cfg = next((g for g in config.groups if g.id == gid), None)
            idx = ctx.get("index")
            result.append({
                "id": gid,
                "name": cfg.name if cfg else gid[:8],
                "shared_dir": str(ctx.get("shared_root", "")),
                "visibility": cfg.visibility if cfg else "private",
                "file_count": idx.count if idx else 0,
                "index_version": idx.version if idx else 0,
            })
        return {"groups": result}

    @app.get("/api/groups/{group_id}/files")
    async def api_group_files(group_id: str):
        groups_ctx = state.get("groups_ctx", {})
        ctx = groups_ctx.get(group_id)
        if not ctx:
            return {"files": []}
        idx = ctx.get("index")
        if not idx:
            return {"files": []}
        return {
            "files": [
                {
                    "id": e.id,
                    "name": e.name,
                    "path": e.path,
                    "size": e.size,
                    "type": e.type,
                    "added_at": e.added_at,
                }
                for e in idx.entries
            ]
        }

    @app.get("/api/peers")
    async def api_peers():
        webrtc = state.get("webrtc")
        if not webrtc:
            return {"peers": []}
        peers = []
        for pid, session in list(webrtc._sessions.items()):
            from meshbay_node.transport.webrtc_server import _get_remote_ip
            peers.append({
                "peer_id": pid,
                "user_id": session._user_id or "",
                "username": session._username or "",
                "group_id": session._group_id or "",
                "remote_ip": session._remote_ip or _get_remote_ip(session._pc),
                "state": session._pc.connectionState,
            })
        return {"peers": peers}

    @app.get("/api/audit")
    async def api_audit(
        since: float = 0,
        limit: int = 200,
        user_id: str | None = Query(default=None),
        event: str | None = Query(default=None),
    ):
        audit = state.get("audit_store")
        if not audit:
            return {"entries": []}
        entries = await audit.get_entries(
            since=since, limit=limit, user_id=user_id, event=event)
        return {
            "entries": [
                {
                    "id": e.id,
                    "timestamp": e.timestamp,
                    "user_id": e.user_id,
                    "username": e.username,
                    "ip": e.ip,
                    "event": e.event,
                    "group_id": e.group_id,
                    "detail": e.detail,
                }
                for e in entries
            ]
        }

    @app.get("/api/config")
    async def api_config():
        config = state.get("config")
        if not config:
            return {}
        return {
            "hub_url": config.hub.url,
            "username": config.hub.username,
            "quic_port": config.node.quic_port,
            "ui_port": config.node.ui_port,
            "data_dir": str(config.data_dir),
            "groups": [
                {
                    "id": g.id,
                    "name": g.name,
                    "shared_dir": g.shared_dir,
                    "visibility": g.visibility,
                }
                for g in config.groups
            ],
        }

    # ── GEK initialization (operator only, localhost) ──────────────────────

    @app.post("/api/groups/{group_id}/gek")
    async def init_gek(group_id: str):
        """Generate GEK, wrap for all group members, store, and activate."""
        groups_ctx = state.get("groups_ctx", {})
        if group_id not in groups_ctx:
            return JSONResponse({"error": "Group not hosted on this node"}, 404)

        hub = state.get("hub")
        if not hub or not hub._session:
            return JSONResponse({"error": "Hub not connected"}, 503)

        bundle_store = state.get("bundle_store")
        if not bundle_store:
            return JSONResponse({"error": "Bundle store not available"}, 503)

        await hub.ensure_fresh_token()
        session = hub._session
        members_resp = await hub._http.get(
            f"/v1/groups/{group_id}/members",
            headers=session.auth_headers,
        )
        if not members_resp.is_success:
            return JSONResponse(
                {"error": f"Failed to fetch members: {members_resp.status_code}"}, 502)
        members = members_resp.json().get("members", [])
        if not members:
            return JSONResponse({"error": "No members in group"}, 400)

        existing_gek = groups_ctx[group_id].get("gek")
        gek = existing_gek or generate_gek()

        wrapped_count = 0
        errors = []
        for member in members:
            username = member["username"]
            user_id = member["user_id"]
            try:
                pk_data = await hub.get_user_pubkeys(username)
                pk_x_raw = base64.b64decode(pk_data["pk_x25519"])
                bundle = wrap_gek_aes(gek, pk_x_raw)
                await bundle_store.store(
                    group_id, user_id,
                    bundle["pk_eph_b64"], bundle["nonce_b64"], bundle["wrapped_b64"],
                )
                wrapped_count += 1
                log.info("GEK wrapped for %s (%s)", username, user_id[:8])
            except Exception as e:
                errors.append(f"{username}: {e}")
                log.warning("Failed to wrap GEK for %s: %s", username, e)

        if wrapped_count == 0:
            return JSONResponse(
                {"error": "Failed to wrap GEK for any member", "details": errors}, 500)

        # Also store a copy wrapped for the node keystore X25519 key
        # so the daemon can reload GEK on restart without the operator's browser keys
        config = state.get("config")
        node_user_id = hub._session.user_id if hub._session else None
        pk_x_node_raw = state.get("pk_x25519_raw")
        if pk_x_node_raw and node_user_id:
            try:
                node_bundle = wrap_gek_aes(gek, pk_x_node_raw)
                await bundle_store.store(
                    group_id, f"_node_{node_user_id}",
                    node_bundle["pk_eph_b64"], node_bundle["nonce_b64"],
                    node_bundle["wrapped_b64"],
                )
                log.info("GEK also wrapped for node keystore (daemon reload)")
            except Exception as e:
                log.warning("Failed to wrap GEK for node keystore: %s", e)

        groups_ctx[group_id]["gek"] = gek
        log.info("GEK initialized for group %s — wrapped for %d/%d members",
                 group_id[:8], wrapped_count, len(members))

        webrtc = state.get("webrtc")
        if webrtc and "groups" in webrtc._ctx and group_id in webrtc._ctx["groups"]:
            webrtc._ctx["groups"][group_id]["gek"] = gek

        return {
            "status": "ok",
            "group_id": group_id,
            "wrapped_count": wrapped_count,
            "total_members": len(members),
            "errors": errors,
        }

    # ── Chat endpoints ───────────────────────────────────────────────────────

    _chat_subscribers: list[WebSocket] = []

    @app.get("/api/chat/history")
    async def chat_history(since: float = 0, limit: int = 100):
        chat_store = state.get("chat_store")
        if not chat_store:
            return {"messages": []}
        msgs = await chat_store.get_messages(since=since, limit=limit)
        return {
            "messages": [
                {
                    "id": m.id,
                    "sender_id": m.sender_id,
                    "iteration": m.iteration,
                    "timestamp": m.timestamp,
                    "thread_id": m.thread_id,
                }
                for m in msgs
            ]
        }

    @app.websocket("/ws/chat")
    async def chat_websocket(ws: WebSocket):
        await ws.accept()
        _chat_subscribers.append(ws)
        try:
            while True:
                await ws.receive_text()
        except WebSocketDisconnect:
            pass
        finally:
            _chat_subscribers.remove(ws)

    async def broadcast_chat_to_ui(msg: dict) -> None:
        payload = json.dumps(msg)
        dead = []
        for ws in _chat_subscribers:
            try:
                await ws.send_text(payload)
            except Exception:
                dead.append(ws)
        for ws in dead:
            _chat_subscribers.remove(ws)

    app.broadcast_chat = broadcast_chat_to_ui

    # ── HTML UI ──────────────────────────────────────────────────────────────

    @app.get("/", response_class=HTMLResponse)
    async def root():
        return _render_page(state)

    @app.get("/audit", response_class=HTMLResponse)
    async def audit_page():
        return _render_audit_page()

    return app


def _fmt_size(n: int) -> str:
    if n < 1024:
        return f"{n} B"
    if n < 1024 * 1024:
        return f"{n / 1024:.1f} KB"
    if n < 1024 * 1024 * 1024:
        return f"{n / (1024 * 1024):.1f} MB"
    return f"{n / (1024 * 1024 * 1024):.2f} GB"


def _render_page(state: dict) -> str:
    status = state.get("status", "starting")
    indexes = state.get("indexes", {})
    groups_ctx = state.get("groups_ctx", {})
    config = state.get("config")
    webrtc = state.get("webrtc")
    total_files = sum(idx.count for idx in indexes.values())
    peer_count = webrtc.active_peers if webrtc else 0
    status_color = {
        "running": "#22c55e", "error": "#ef4444",
        "waiting_for_node_key": "#f97316",
    }.get(status, "#f59e0b")

    # Groups section
    groups_html = ""
    for gid, ctx in groups_ctx.items():
        cfg = None
        if config:
            cfg = next((g for g in config.groups if g.id == gid), None)
        idx = ctx.get("index")
        name = cfg.name if cfg else gid[:8]
        shared = ctx.get("shared_root", "")
        vis = cfg.visibility if cfg else "private"
        fcount = idx.count if idx else 0
        total_size = sum(e.size for e in idx.entries) if idx else 0

        # Everything interpolated below is attacker-controlled: filenames come from
        # uploads by any group member. Rendering them raw was a stored XSS into the
        # unauthenticated localhost admin UI, i.e. full control of the node admin API
        # from the operator's browser (finding H2).
        file_rows = ""
        if idx:
            for e in sorted(idx.entries, key=lambda x: x.name):
                file_rows += (
                    f"<tr><td>{escape(e.name)}</td><td>{escape(e.type)}</td>"
                    f"<td>{_fmt_size(e.size)}</td><td>{escape(e.path or '/')}</td></tr>"
                )

        has_gek = bool(ctx.get("gek"))
        gek_badge = (
            '<span class="badge" style="background:#22c55e">GEK active</span>'
            if has_gek
            else '<span class="badge" style="background:#ef4444">No GEK</span>'
        )
        gek_label = "Re-wrap GEK for all members" if has_gek else "Initialize GEK"
        gek_color = "#3b82f6" if has_gek else "#22c55e"
        gek_action = f"""
            <div style="margin:10px 0">
              <button onclick="initGEK('{gid}')"
                id="gek-btn-{gid[:8]}"
                style="padding:8px 16px;background:{gek_color};color:#fff;border:none;
                border-radius:6px;cursor:pointer;font-size:0.85em">
                {gek_label}
              </button>
              <span id="gek-status-{gid[:8]}" class="muted" style="margin-left:8px"></span>
            </div>"""

        groups_html += f"""
        <div class="card">
          <h3>{escape(str(name))}
            <span class="badge" style="background:#6366f1">{escape(str(vis))}</span>
            {gek_badge}
          </h3>
          <p><b>Directory:</b> <code>{escape(str(shared))}</code></p>
          <p><b>Files:</b> {fcount} &mdash; <b>Total:</b> {_fmt_size(total_size)}</p>
          {gek_action}
          <p class="muted">ID: {escape(gid)}</p>
          <details><summary>File list</summary>
          <table>
            <thead><tr><th>Name</th><th>Type</th><th>Size</th><th>Path</th></tr></thead>
            <tbody>{file_rows}</tbody>
          </table>
          </details>
        </div>"""

    # Peers section
    peers_html = ""
    if webrtc:
        for pid, session in list(webrtc._sessions.items()):
            from meshbay_node.transport.webrtc_server import _get_remote_ip
            ip = session._remote_ip or _get_remote_ip(session._pc)
            peers_html += (
                f"<tr><td>{escape(session._username or session._user_id or '—')}</td>"
                f"<td>{escape(ip or '—')}</td>"
                f"<td>{escape(session._group_id[:8] if session._group_id else '—')}</td>"
                f"<td>{escape(session._pc.connectionState)}</td></tr>"
            )
    if not peers_html:
        peers_html = '<tr><td colspan="4" class="muted">No connected peers</td></tr>'

    return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MeshBay Node Admin</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
  :root {{
    --bg: #0f172a; --surface: #1e293b; --border: #334155;
    --text: #e2e8f0; --muted: #94a3b8; --accent: #3b82f6;
    --green: #22c55e; --red: #ef4444; --yellow: #f59e0b;
  }}
  * {{ box-sizing: border-box; margin: 0; padding: 0; }}
  body {{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          background: var(--bg); color: var(--text); }}
  .container {{ max-width: 1000px; margin: 0 auto; padding: 20px; }}
  h1 {{ font-size: 1.5em; margin-bottom: 20px; }}
  h2 {{ font-size: 1.2em; margin: 24px 0 12px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }}
  h3 {{ font-size: 1em; margin-bottom: 8px; }}
  .badge {{ display: inline-block; padding: 2px 8px; border-radius: 4px;
            color: #fff; font-size: 0.8em; font-weight: 600; vertical-align: middle; }}
  .stats {{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px; margin-bottom: 20px; }}
  .stat {{ background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
           padding: 16px; text-align: center; }}
  .stat .value {{ font-size: 1.8em; font-weight: 700; color: var(--accent); }}
  .stat .label {{ font-size: 0.8em; color: var(--muted); margin-top: 4px; }}
  .card {{ background: var(--surface); border: 1px solid var(--border);
           border-radius: 8px; padding: 16px; margin-bottom: 12px; }}
  table {{ width: 100%; border-collapse: collapse; font-size: 0.85em; margin-top: 8px; }}
  th, td {{ padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }}
  th {{ color: var(--muted); font-weight: 600; font-size: 0.75em; text-transform: uppercase; }}
  code {{ background: var(--border); padding: 2px 6px; border-radius: 3px; font-size: 0.85em; }}
  .muted {{ color: var(--muted); font-size: 0.85em; }}
  details summary {{ cursor: pointer; color: var(--accent); font-size: 0.85em; margin-top: 8px; }}
  a {{ color: var(--accent); text-decoration: none; }}
  a:hover {{ text-decoration: underline; }}
  nav {{ display: flex; gap: 16px; margin-bottom: 20px; }}
  nav a {{ padding: 6px 12px; border-radius: 6px; background: var(--surface);
           border: 1px solid var(--border); }}
  nav a:hover {{ background: var(--border); text-decoration: none; }}
  .footer {{ margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--border);
             font-size: 0.8em; color: var(--muted); }}
</style>
</head>
<body>
<div class="container">
  <h1>MeshBay Node <span class="badge" style="background:{status_color}">{status}</span></h1>

  <nav>
    <a href="/">Dashboard</a>
    <a href="/audit">Audit Log</a>
    <a href="/api/status">API</a>
  </nav>

  <div class="stats">
    <div class="stat"><div class="value">{len(groups_ctx)}</div><div class="label">Groups</div></div>
    <div class="stat"><div class="value">{total_files}</div><div class="label">Files</div></div>
    <div class="stat"><div class="value">{peer_count}</div><div class="label">Connected Peers</div></div>
    <div class="stat">
      <div class="value" style="font-size:1em;word-break:break-all">{state.get("username", "—")}</div>
      <div class="label">User</div>
    </div>
  </div>

  <h2>Connected Peers</h2>
  <table>
    <thead><tr><th>User</th><th>IP</th><th>Group</th><th>State</th></tr></thead>
    <tbody>{peers_html}</tbody>
  </table>

  <h2>Groups</h2>
  {groups_html or '<p class="muted">No groups configured</p>'}

  <h2>Node Configuration</h2>
  <div class="card">
    <p><b>Hub:</b> {state.get("hub_url", "—")}</p>
    <p><b>QUIC port:</b> {state.get("quic_port", "—")}</p>
    <p><b>Node ID:</b> <code>{state.get("endpoint_hint") or "—"}</code></p>
  </div>

  <h2>Link Node to Hub Account</h2>
  <div class="card">
    <p>To connect to your group from a browser, link this node to your hub account.
       Copy the key below and paste it in <b>Settings &gt; Link Node</b> on the hub.</p>
    <div style="margin:12px 0;display:flex;align-items:center;gap:8px">
      <code id="nodeKey" style="flex:1;padding:8px;word-break:break-all;background:var(--border);
        border-radius:4px;font-size:0.9em;user-select:all">{state.get("pk_node_ed25519", "—")}</code>
      <button onclick="navigator.clipboard.writeText(document.getElementById('nodeKey').textContent).then(()=>{{this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)}})"
        style="padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:6px;
        cursor:pointer;font-size:0.85em;white-space:nowrap">Copy</button>
    </div>
    <p class="muted">This is the node's Ed25519 public key. It's safe to share — it identifies
       this node but cannot be used to impersonate it.</p>
  </div>

  <div class="footer">
    MeshBay Node v{__version__} &mdash; localhost only &mdash;
    <a href="/api/status">status</a> &middot;
    <a href="/api/groups">groups</a> &middot;
    <a href="/api/peers">peers</a> &middot;
    <a href="/api/audit">audit</a> &middot;
    <a href="/api/config">config</a>
    &mdash; auto-refresh 10s
  </div>
</div>
<script>
async function initGEK(groupId) {{
  const btn = document.getElementById('gek-btn-' + groupId.slice(0,8));
  const status = document.getElementById('gek-status-' + groupId.slice(0,8));
  if (btn) btn.disabled = true;
  if (status) status.textContent = 'Initializing...';
  try {{
    const resp = await fetch('/api/groups/' + groupId + '/gek', {{ method: 'POST' }});
    const data = await resp.json();
    if (resp.ok) {{
      if (status) status.textContent = 'GEK initialized — wrapped for '
        + data.wrapped_count + '/' + data.total_members + ' members';
      if (status) status.style.color = '#22c55e';
      setTimeout(() => location.reload(), 2000);
    }} else {{
      if (status) status.textContent = data.error || 'Failed';
      if (status) status.style.color = '#ef4444';
      if (btn) btn.disabled = false;
    }}
  }} catch (e) {{
    if (status) status.textContent = 'Error: ' + e.message;
    if (status) status.style.color = '#ef4444';
    if (btn) btn.disabled = false;
  }}
}}
setTimeout(()=>location.reload(), 10000);
</script>
</body>
</html>"""


def _render_audit_page() -> str:
    return """<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MeshBay Node — Audit Log</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
  :root {
    --bg: #0f172a; --surface: #1e293b; --border: #334155;
    --text: #e2e8f0; --muted: #94a3b8; --accent: #3b82f6;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         background: var(--bg); color: var(--text); }
  .container { max-width: 1100px; margin: 0 auto; padding: 20px; }
  h1 { font-size: 1.5em; margin-bottom: 16px; }
  nav { display: flex; gap: 16px; margin-bottom: 20px; }
  nav a { padding: 6px 12px; border-radius: 6px; background: var(--surface);
          border: 1px solid var(--border); color: var(--accent); text-decoration: none; }
  nav a:hover { background: var(--border); }
  .filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
  .filters select, .filters input {
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    padding: 6px 10px; border-radius: 6px; font-size: 0.85em;
  }
  table { width: 100%; border-collapse: collapse; font-size: 0.82em; }
  th, td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--border); }
  th { color: var(--muted); font-weight: 600; font-size: 0.75em; text-transform: uppercase;
       position: sticky; top: 0; background: var(--bg); }
  .muted { color: var(--muted); }
  #count { margin-bottom: 10px; font-size: 0.85em; color: var(--muted); }
</style>
</head>
<body>
<div class="container">
  <h1>Audit Log</h1>
  <nav><a href="/">Dashboard</a><a href="/audit">Audit Log</a></nav>

  <div class="filters">
    <select id="eventFilter">
      <option value="">All events</option>
      <option value="handshake">handshake</option>
      <option value="file_download">file_download</option>
      <option value="file_upload">file_upload</option>
      <option value="file_delete">file_delete</option>
      <option value="stream_video">stream_video</option>
      <option value="chat_message">chat_message</option>
      <option value="disconnect">disconnect</option>
      <option value="auth_failed">auth_failed</option>
    </select>
    <input id="userFilter" placeholder="Filter by user..." />
    <select id="limitSelect">
      <option value="100">100 entries</option>
      <option value="500">500 entries</option>
      <option value="1000">1000 entries</option>
    </select>
  </div>

  <div id="count"></div>
  <table>
    <thead><tr><th>Time</th><th>Event</th><th>User</th><th>IP</th><th>Group</th><th>Detail</th></tr></thead>
    <tbody id="tbody"></tbody>
  </table>
</div>
<script>
async function load() {
  const ev = document.getElementById('eventFilter').value;
  const limit = document.getElementById('limitSelect').value;
  let url = '/api/audit?limit=' + limit;
  if (ev) url += '&event=' + ev;
  const r = await fetch(url);
  const data = await r.json();
  const tbody = document.getElementById('tbody');
  document.getElementById('count').textContent = data.entries.length + ' entries';
  // textContent, not innerHTML: e.detail carries filenames chosen by group members
  // (finding H2). Building this row with string concatenation was a stored XSS.
  tbody.replaceChildren(...data.entries.map(e => {
    const tr = document.createElement('tr');
    const cells = [
      new Date(e.timestamp * 1000).toLocaleString(),
      e.event,
      e.username || (e.user_id || '').slice(0, 8),
      e.ip || '—',
      e.group_id ? e.group_id.slice(0, 8) : '—',
      e.detail || '',
    ];
    for (const value of cells) {
      const td = document.createElement('td');
      td.textContent = value;
      tr.appendChild(td);
    }
    return tr;
  }));
}
document.getElementById('eventFilter').onchange = load;
document.getElementById('limitSelect').onchange = load;
let debounceTimer;
document.getElementById('userFilter').oninput = function() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const val = this.value;
    const rows = document.querySelectorAll('#tbody tr');
    rows.forEach(r => {
      r.style.display = r.textContent.toLowerCase().includes(val.toLowerCase()) ? '' : 'none';
    });
  }, 200);
};
load();
setInterval(load, 15000);
</script>
</body>
</html>"""