{% macro chatroom_widget(config) %}
{% set show_participants = config.show_participants %}
{% set show_history = config.show_history %}
<style>
    #chatroom-widget {
        display: flex;
        gap: 1rem;
        height: 300px;
        min-height: 200px;
        margin-top: 1rem;
    }

    {% if show_participants %}
    #chatroom-sidebar {
        width: 160px;
        flex-shrink: 0;
        border-right: 1px solid #dee2e6;
        padding-right: 0.75rem;
    }

    #chatroom-sidebar h6 {
        font-size: 0.85rem;
        color: #6c757d;
        margin-bottom: 0.5rem;
    }

    #chatroom-participants {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0.9rem;
    }

    #chatroom-participants li {
        padding: 0.2rem 0;
    }
    {% endif %}

    #chatroom-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    #chatroom-messages {
        flex: 1;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 0.75rem;
        background: #fafafa;
        margin-bottom: 0.5rem;
    }

    #chatroom-messages p {
        margin-bottom: 0.4rem;
        word-break: break-word;
    }

    #chatroom-input-row {
        display: flex;
        gap: 0.5rem;
    }

    #chatroom-chat-input {
        flex: 1;
    }
</style>

<div id="chatroom-widget">
    {% if show_participants %}
    <div id="chatroom-sidebar">
        <h6>Participants</h6>
        <ul id="chatroom-participants"></ul>
    </div>
    {% endif %}

    <div id="chatroom-main">
        <div id="chatroom-messages"></div>
        <div id="chatroom-input-row">
            <input
                type="text"
                id="chatroom-chat-input"
                class="form-control"
                placeholder="Type a message…"
                autocomplete="off"
            />
            <button id="chatroom-send-btn" class="btn btn-primary">Send</button>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var ROOM_ID      = {{ config.room_id | tojson }};
        var GLOBAL_CH    = {{ config.channel | tojson }};
        var SHOW_PARTS   = {{ "true" if show_participants else "false" }};
        var SHOW_HISTORY = {{ "true" if show_history else "false" }};
        var MY_ID        = String(dallinger.identity.participantId);

        var chatSocket = null;
        var leftChat   = false;
        var firstOpen  = true;

        var wsScheme = location.protocol === "https:" ? "wss://" : "ws://";
        chatSocket = new ReconnectingWebSocket(
            wsScheme + location.host + "/chat?channel=" + GLOBAL_CH
            + "&worker_id=" + dallinger.identity.workerId
            + "&participant_id=" + MY_ID
        );

        chatSocket.onopen = function () {
            if (leftChat) return;
            chatSocket.send(GLOBAL_CH + ":" + JSON.stringify({
                type: "join_room",
                room_id: ROOM_ID,
                sender: MY_ID,
            }));
            if (firstOpen) {
                if (SHOW_HISTORY) {
                    chatSocket.send(GLOBAL_CH + ":" + JSON.stringify({
                        type: "request_state",
                        room_id: ROOM_ID,
                        sender: MY_ID,
                    }));
                }
                firstOpen = false;
            }
        };

        chatSocket.onmessage = function (event) {
            if (event.data.indexOf(GLOBAL_CH + ":") !== 0) return;
            var msg;
            try {
                msg = JSON.parse(event.data.slice(GLOBAL_CH.length + 1));
            } catch (e) { return; }

            if (String(msg.room_id) !== String(ROOM_ID)) return;

            if (msg.type === "message") {
                renderMessage(msg);
            } else if (msg.type === "occupancy_update") {
                if (SHOW_PARTS) rebuildParticipantList(msg.participants || []);
            } else if (msg.type === "history") {
                if (SHOW_HISTORY && String(msg.target_participant_id) === MY_ID) {
                    // Clear before re-rendering to avoid duplicates on reconnect.
                    document.getElementById("chatroom-messages").innerHTML = "";
                    (msg.messages || []).forEach(renderMessage);
                }
            }
        };

        window.addEventListener("beforeunload", function () {
            if (leftChat) return;
            leftChat = true;
            try {
                chatSocket.send(GLOBAL_CH + ":" + JSON.stringify({
                    type: "leave_room",
                    room_id: ROOM_ID,
                    sender: MY_ID,
                }));
            } catch (e) {}
        });

        document.getElementById("chatroom-send-btn").onclick = function () {
            var input = document.getElementById("chatroom-chat-input");
            var text  = input.value.trim();
            if (!text) return;
            chatSocket.send(GLOBAL_CH + ":" + JSON.stringify({
                type: "message",
                room_id: ROOM_ID,
                content: text,
                sender: MY_ID,
            }));
            input.value = "";
            input.focus();
        };

        document.getElementById("chatroom-chat-input").addEventListener("keypress", function (e) {
            if (e.key === "Enter") {
                document.getElementById("chatroom-send-btn").click();
                e.preventDefault();
            }
        });

        function senderLabel(senderId) {
            return String(senderId) === MY_ID ? "You" : "Participant " + senderId;
        }

        function renderMessage(msg) {
            var feed    = document.getElementById("chatroom-messages");
            var p       = document.createElement("p");
            var label   = document.createElement("strong");
            label.textContent = senderLabel(msg.sender) + ": ";
            var content = document.createTextNode(msg.content || "");
            p.appendChild(label);
            p.appendChild(content);
            feed.appendChild(p);
            feed.scrollTop = feed.scrollHeight;
        }

        function rebuildParticipantList(ids) {
            var list = document.getElementById("chatroom-participants");
            list.innerHTML = "";
            ids.forEach(function (id) {
                var li = document.createElement("li");
                li.textContent = String(id) === MY_ID ? "You" : "Participant " + id;
                list.appendChild(li);
            });
        }
    });
</script>
{% endmacro %}