<!-- Chat Content Fragment -->
<!-- Uses classes from components.rcss -->

<div class="app-content">
    <div class="app-bar">
        <div class="app-bar-nav" onclick="goBackToMessages()">
            <img src="../../icons/back.tga" style="width: 28px; height: 28px;"/>
        </div>
        <div class="list-item-avatar" id="chat-avatar" style="background-color: #9C27B0; width: 40px; height: 40px; margin-right: 12px;">S</div>
        <div class="list-item-content" style="flex: 1;">
            <span class="list-item-title" id="chat-name">Sarah</span>
            <span class="list-item-subtitle" style="color: #4CAF50;">Online</span>
        </div>
        <div class="btn-icon" onclick="startCall()">
            <img src="../../icons/phone.tga" style="width: 28px; height: 28px;"/>
        </div>
    </div>

    <!-- Messages Area -->
    <div class="chat-container" id="messages-area" style="flex: 1; overflow: auto;">
        <div class="chat-timestamp">Today</div>

        <div class="chat-bubble chat-bubble-received">
            Hey! How are you doing?
        </div>

        <div class="chat-bubble chat-bubble-sent">
            I'm good! Just finished some work.
        </div>

        <div class="chat-bubble chat-bubble-received">
            Nice! Are you coming to the party tonight?
        </div>

        <div class="chat-bubble chat-bubble-sent">
            Yeah, I'll be there around 8pm
        </div>

        <div class="chat-bubble chat-bubble-received">
            Perfect! Can't wait to see you there!
        </div>

        <div class="chat-bubble chat-bubble-sent">
            Same here! Should I bring anything?
        </div>

        <div class="chat-bubble chat-bubble-received">
            Just yourself! Maybe some snacks if you want
        </div>

        <div class="chat-bubble chat-bubble-received">
            Hey! Are you coming to the party tonight?
        </div>
    </div>

    <!-- Input Area -->
    <div class="chat-input-container">
        <div class="btn-icon" onclick="attachFile()">
            <img src="../../icons/add.tga" style="width: 28px; height: 28px;"/>
        </div>
        <input type="text" class="chat-input" id="message-input" placeholder="Message"/>
        <div class="chat-send-btn" onclick="sendMessage()">
            <img src="../../icons/send.tga" style="width: 28px; height: 28px;"/>
        </div>
    </div>
</div>

<script>
function goBackToMessages()
    print("[Chat] Going back to messages")
    if shellGoBack then
        shellGoBack()
    end
end

function startCall()
    print("[Chat] Starting call")
    if showToast then
        showToast("Calling Sarah...")
    end
    if shellNavigateTo then
        shellNavigateTo("calling")
    end
end

function attachFile()
    print("[Chat] Attach file")
    if showToast then
        showToast("Attach file")
    end
end

function sendMessage()
    local doc = shell_document
    if doc then
        local input = doc:GetElementById("message-input")
        if input and input.value and input.value ~= "" then
            local msg = input.value
            print("[Chat] Sending: " .. msg)

            local area = doc:GetElementById("messages-area")
            if area then
                local new_msg = [[<div class="chat-bubble chat-bubble-sent">]] .. msg .. [[</div>]]
                area.inner_rml = area.inner_rml .. new_msg
            end

            input.value = ""

            if showToast then
                showToast("Message sent")
            end
        end
    end
end

print("[Chat] Content loaded")
</script>
