import re

with open("static/js/bottom-bar.js", "r") as f:
    text = f.read()

# Update the rendering of the messages tab to include a user selector
chat_html = """
            const replyBox = document.createElement('div');
            replyBox.className = 'mt-2 border-top pt-2 border-primary-subtle';
            replyBox.innerHTML = `
                <div class="input-group input-group-sm mb-1">
                    <span class="input-group-text bg-light text-muted border-0"><i class="bi bi-person"></i></span>
                    <select id="chatRecipient" class="form-select border-0 bg-light">
                        <option value="all">Alle på vagt</option>
                        <option value="system">System (Bot)</option>
                        <option value="chef">Chef</option>
                        <option value="3">Christian Thomas</option>
                        <option value="4">Tekniker 1</option>
                    </select>
                </div>
                <div class="input-group">
                    <input type="text" id="chatInputQuick" class="form-control form-control-sm" placeholder="Skriv en besked...">
                    <button class="btn btn-outline-primary btn-sm" id="btnSendMsg"><i class="bi bi-send"></i></button>
                </div>
            `;
            
            chatContainer.appendChild(ul);
            chatContainer.appendChild(replyBox);
"""

text = re.sub(
    r"            const replyBox = document\.createElement\('div'\);\n            replyBox\.className = 'input-group mt-2 border-top pt-2 border-primary-subtle';\n            replyBox\.innerHTML = '<input type=\"text\" class=\"form-control form-control-sm\" placeholder=\"Skriv en besked\.\.\.\"><button class=\"btn btn-outline-primary btn-sm\"><i class=\"bi bi-send\"></i></button>';\n            \n            chatContainer\.appendChild\(ul\);\n            chatContainer\.appendChild\(replyBox\);",
    chat_html,
    text
)

# And update the logic that sends it
events_html = """
            if (btn.id === 'btnSendMsg') {
                const input = byId('chatInputQuick');
                const recipientObj = byId('chatRecipient');
                if (input && input.value.trim() !== '') {
                    const recipient = recipientObj ? recipientObj.options[recipientObj.selectedIndex].text : 'Alle';
                    console.log("-> Sender besked til " + recipient + ":", input.value);
                    const msgVal = input.value;
                    input.value = '';
                    const msgDiv = document.createElement('div');
                    msgDiv.className = 'mb-1 text-end';
                    msgDiv.innerHTML = '<div class="small text-muted mb-1 text-end">Til: ' + recipient + '</div><div class="d-inline-block bg-primary text-white p-2 rounded-3 text-start" style="max-width: 80%;"><strong>Mig:</strong> ' + msgVal + '</div>';
                    listContainer.insertBefore(msgDiv, listContainer.lastElementChild);
                    listContainer.scrollTop = listContainer.scrollHeight;
                }
            }
"""

text = re.sub(
    r"            if \(btn\.id === 'btnSendMsg'\) \{\n                const input = byId\('chatInputQuick'\);\n                if \(input && input\.value\.trim\(\) !== ''\) \{\n                    console\.log\(\"-> Sender besked:\", input\.value\);\n                    input\.value = '';\n                    const msgDiv = document\.createElement\('div'\);\n                    msgDiv\.className = 'mb-1 text-end';\n                    msgDiv\.innerHTML = '<div class=\"d-inline-block bg-primary text-white p-2 rounded-3\" style=\"max-width: 80%;\"><strong>Mig:</strong> ' \+ msgDiv\.textContent \+ ' \(Mock\)</div>';\n                    listContainer\.insertBefore\(msgDiv, listContainer\.lastElementChild\);\n                    listContainer\.scrollTop = listContainer\.scrollHeight;\n                \}\n            \}",
    events_html.strip(),
    text
)

with open("static/js/bottom-bar.js", "w") as f:
    f.write(text)