{% extends "base.html" %}

{% block css %}
.timestamp {
    min-width: 10em;
}
.chat-packet:nth-of-type(odd) {
    background-color: #3a3a3a;
}
.chat-packet {
    border-bottom: 1px solid #555;
    padding: 8px;
    border-radius: 8px;
}
.chat-packet:nth-of-type(even) {
    background-color: #333333;
}
@keyframes flash {
    0% { background-color: #ffe066; }
    100% { background-color: inherit; }
}
.chat-packet.flash {
    animation: flash 3.5s ease-out;
}

/* Nested reply style below the message */
.replying-to {
    font-size: 0.85em;
    color: #aaa;           /* gray text */
    margin-top: 4px;
    padding-left: 20px;    /* increased indentation */

.replying-to .reply-preview {
    color: #aaa;
}


}
{% endblock %}

{% block body %}
<div id="chat-container">
    <div class="container" id="chat-log">
    </div>
</div>

<script>
const chatContainer = document.querySelector("#chat-log");
let lastTime = null;
const renderedPacketIds = new Set();
const packetMap = new Map(); // store all packets we’ve seen

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text == null ? "" : text;
  return div.innerHTML;
}

function renderPacket(packet, highlight = false) {
  // prevent duplicates
  if (renderedPacketIds.has(packet.id)) return;
  renderedPacketIds.add(packet.id);
  packetMap.set(packet.id, packet);

  const date = new Date(packet.import_time);
  const formattedTime = date.toLocaleTimeString([], {
    hour: "numeric", minute: "2-digit", second: "2-digit", hour12: true
  });
  const formattedDate = `${(date.getMonth() + 1).toString().padStart(2,"0")}/` +
                        `${date.getDate().toString().padStart(2,"0")}/` +
                        `${date.getFullYear()}`;
  const formattedTimestamp = `${formattedTime} - ${formattedDate}`;

  // Try to resolve the reply target
    let replyHtml = "";
    if (packet.reply_id) {
      const parent = packetMap.get(packet.reply_id);
      if (parent) {
        replyHtml = `
          <div class="replying-to">
            <div class="reply-preview">
              <i>Replying to: <strong>${escapeHtml((parent.long_name || "").trim() || `Node ${parent.from_node_id}`)}</strong>:
              ${escapeHtml(parent.payload || "")}</i>
            </div>
          </div>
        `;
      } else {
        // fallback if parent not loaded yet
        replyHtml = `
          <div class="replying-to">
            <i>Replying to: <a href="/packet/${packet.reply_id}">${packet.reply_id}</a></i>
          </div>
        `;
      }
    }


  const div = document.createElement("div");
  div.className = "row chat-packet" + (highlight ? " flash" : "");
  div.dataset.packetId = packet.id;
  div.innerHTML = `
    <span class="col-2 timestamp" title="${packet.import_time}">
      ${formattedTimestamp}
    </span>
    <span class="col-2 channel">
      <a href="/packet/${packet.id}" title="View packet details">✉️</a> ${escapeHtml(packet.channel || "")}
    </span>
    <span class="col-3 nodename">
      <a href="/packet_list/${packet.from_node_id}">
        ${escapeHtml((packet.long_name || "").trim() || `Node ${packet.from_node_id}`)}
      </a>
    </span>
    <span class="col-5 message">
      ${escapeHtml(packet.payload)}
      ${replyHtml}
    </span>
  `;

  // Prepend so newest messages are at the top.
  chatContainer.prepend(div);

  if (highlight) setTimeout(() => div.classList.remove("flash"), 2500);
}

function renderPacketsEnsureDescending(packets, highlight = false) {
  if (!Array.isArray(packets) || packets.length === 0) return;
  const sortedDesc = packets.slice().sort((a, b) =>
    new Date(b.import_time) - new Date(a.import_time)
  );
  for (let i = sortedDesc.length - 1; i >= 0; i--) {
    renderPacket(sortedDesc[i], highlight);
  }
}

async function fetchInitial() {
  try {
    const url = new URL("/api/chat", window.location.origin);
    url.searchParams.set("limit", "100");

    const resp = await fetch(url);
    const data = await resp.json();

    if (data && data.packets && data.packets.length > 0) {
      renderPacketsEnsureDescending(data.packets, false);
      if (data.latest_import_time) lastTime = data.latest_import_time;
    }
  } catch (err) {
    console.error("Initial fetch error:", err);
  }
}

async function fetchUpdates() {
  try {
    const url = new URL("/api/chat", window.location.origin);
    url.searchParams.set("limit", "100");
    if (lastTime) url.searchParams.set("since", lastTime);

    const resp = await fetch(url);
    const data = await resp.json();

    if (data && data.packets && data.packets.length > 0) {
      renderPacketsEnsureDescending(data.packets, true);
      if (data.latest_import_time) lastTime = data.latest_import_time;
    }
  } catch (err) {
    console.error("Fetch updates error:", err);
  }
}

// initial load
fetchInitial();
setInterval(fetchUpdates, 5000);
</script>




{% endblock %}