{% 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 */
.replying-to { font-size: 0.85em; color: #aaa; margin-top: 4px; padding-left: 20px; }
.replying-to .reply-preview { color: #aaa; }

.filter-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.filter-label {
    color: #ccc;
    font-size: 14px;
}

#chatChannelSelect {
    padding: 4px 6px;
    background: #444;
    color: #fff;
    border: none;
    border-radius: 4px;
}

.status-message {
    color: #bbb;
    margin-bottom: 12px;
    display: none;
}
{% endblock %}

{% block body %}
<div id="chat-container">
    <div class="filter-bar">
        <label for="chatChannelSelect" class="filter-label">Channel</label>
        <select id="chatChannelSelect">
            <option value="" data-translate-lang="all_channels">All Channels</option>
        </select>
    </div>
    <div id="chat-status" class="status-message"></div>
    <div class="container" id="chat-log"></div>
</div>

<script>
const CHANNEL_PRESETS = ["LongFast", "MediumSlow"];

document.addEventListener("DOMContentLoaded", async () => {
    const chatContainer = document.querySelector("#chat-log");
    const channelSelect = document.getElementById("chatChannelSelect");
    const statusMessage = document.getElementById("chat-status");
    if (!chatContainer) {
        console.error("#chat-log not found");
        return;
    }

    let lastTime = null;
    let currentChannel = "";
    const renderedPacketIds = new Set();
    const packetMap = new Map();
    let chatTranslations = {};

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

    // 🔑 helper to apply translations
    function applyTranslations(translations, root=document) {
        root.querySelectorAll("[data-translate-lang]").forEach(el => {
            const key = el.dataset.translateLang;
            if (translations[key]) el.textContent = translations[key];
        });
        root.querySelectorAll("[data-translate-lang-title]").forEach(el => {
            const key = el.dataset.translateLangTitle;
            if (translations[key]) el.title = translations[key];
        });
    }

    async function fetchChannels() {
        try {
            const res = await fetch("/api/channels");
            if (!res.ok) return [];
            const json = await res.json();
            return Array.isArray(json.channels) ? json.channels : [];
        } catch (err) {
            console.error("Channel fetch failed:", err);
            return [];
        }
    }

    function populateChannelSelect(channels) {
        if (!channelSelect) return;
        const unique = Array.from(new Set((channels || []).filter(ch => typeof ch === "string" && ch.trim().length > 0))).sort((a, b) => a.localeCompare(b));
        const prioritized = [];
        CHANNEL_PRESETS.forEach(preset => {
            const idx = unique.indexOf(preset);
            if (idx >= 0) {
                prioritized.push(unique[idx]);
                unique.splice(idx, 1);
            }
        });
        const ordered = [...new Set([...prioritized, ...unique])];
        channelSelect.innerHTML = "";
        const allOption = document.createElement("option");
        allOption.value = "";
        allOption.textContent = "All Channels";
        allOption.setAttribute("data-translate-lang", "all_channels");
        channelSelect.appendChild(allOption);
        ordered.forEach(ch => {
            const opt = document.createElement("option");
            opt.value = ch;
            opt.textContent = ch;
            channelSelect.appendChild(opt);
        });
        let preferred = currentChannel;
        if (preferred && !ordered.includes(preferred)) {
            preferred = "";
        }
        if (!preferred) {
            preferred = CHANNEL_PRESETS.find(preset => ordered.includes(preset)) || "";
        }
        channelSelect.value = preferred;
        currentChannel = channelSelect.value;
    }

    function clearChat() {
        chatContainer.innerHTML = "";
        renderedPacketIds.clear();
        packetMap.clear();
        lastTime = null;
        updateEmptyState();
    }

    function updateEmptyState() {
        if (!statusMessage) return;
        if (chatContainer.childElementCount === 0) {
            statusMessage.textContent = currentChannel
                ? `No messages for ${currentChannel} yet.`
                : "No messages yet.";
            statusMessage.style.display = "block";
        } else {
            statusMessage.textContent = "";
            statusMessage.style.display = "none";
        }
    }

    function renderPacket(packet, highlight = false) {
        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}`;

        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 data-translate-lang="replying_to"></i>
                            <strong>${escapeHtml((parent.long_name || "").trim() || `Node ${parent.from_node_id}`)}</strong>:
                            ${escapeHtml(parent.payload || "")}
                        </div>
                    </div>
                `;
            } else {
                replyHtml = `
                    <div class="replying-to">
                        <i data-translate-lang="replying_to"></i>
                        <a href="/packet/${packet.reply_id}">${packet.reply_id}</a>
                    </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="" data-translate-lang-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>
        `;
        chatContainer.prepend(div);

        // Apply translations to the newly added packet
        applyTranslations(chatTranslations, div);

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

    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);
    }

    function buildChatUrl({ since } = {}) {
        const url = new URL("/api/chat", window.location.origin);
        url.searchParams.set("limit", "100");
        if (since) url.searchParams.set("since", since);
        if (currentChannel) url.searchParams.set("channel", currentChannel);
        return url;
    }

    async function fetchInitial() {
        try {
            const resp = await fetch(buildChatUrl());
            const data = await resp.json();
            if (data?.packets?.length) renderPacketsEnsureDescending(data.packets);
            lastTime = data?.latest_import_time || lastTime;
            updateEmptyState();
        } catch(err) { console.error("Initial fetch error:", err); }
    }

    async function fetchUpdates() {
        if (!lastTime) return;
        try {
            const resp = await fetch(buildChatUrl({ since: lastTime }));
            const data = await resp.json();
            if (data?.packets?.length) renderPacketsEnsureDescending(data.packets, true);
            lastTime = data?.latest_import_time || lastTime;
        } catch(err){ console.error("Fetch updates error:", err); }
    }

    async function loadTranslations() {
        try {
            const langCode = "{{ site_config.get('site', {}).get('language','en') }}";
            const res = await fetch(`/api/lang?lang=${langCode}&section=chat`);
            chatTranslations = await res.json();
            applyTranslations(chatTranslations, document);
        } catch(err){ console.error("Chat translation load failed:", err); }
    }

    if (channelSelect) {
        channelSelect.addEventListener("change", async e => {
            currentChannel = e.target.value;
            clearChat();
            await fetchInitial();
        });
    }

    await loadTranslations();
    const channels = await fetchChannels();
    populateChannelSelect(channels);
    if (chatTranslations && channelSelect) {
        applyTranslations(chatTranslations, channelSelect.parentElement || channelSelect);
    }
    updateEmptyState();
    await fetchInitial();
    setInterval(fetchUpdates, 5000);
});
</script>
{% endblock %}