export function createMessageElement(message, formatTimestamp) {
    const messageDiv = document.createElement('div');
    let messageClass = 'chat-bubble';

    if (message.type === 'system') {
        messageClass += ' message-system';
    } else if (message.isSelf) {
        messageClass += ' message-self';
    } else {
        messageClass += ' message-other';
    }

    messageDiv.className = messageClass;
    messageDiv.dataset.messageId = message.id;

    const contentHTML = message.type === 'file' && message.content.startsWith('data:image/')
        ? `
            <div class="message-image-container">
                <img src="${message.content}" class="message-image" alt="${message.fileName || '\u56fe\u7247'}">
                ${message.fileName ? `<div class="message-image-name">${message.fileName}</div>` : ''}
            </div>
        `
        : `
            <div class="message-text">
                ${message.content}
            </div>
        `;

    messageDiv.innerHTML = `
        <div class="message-header">
            <img src="${message.senderAvatar}" class="message-avatar">
            <div>
                <span class="message-sender">${message.senderName}</span>
                <span class="message-time">${formatTimestamp(message.timestamp)}</span>
            </div>
        </div>
        <div class="message-content">
            ${contentHTML}
        </div>
    `;

    return messageDiv;
}

export function renderChatMessagesInto(container, messages, formatTimestamp) {
    if (!container) return;

    container.innerHTML = '';

    const startTimeElement = document.createElement('div');
    startTimeElement.className = 'text-center text-xs text-gray-500 my-4';
    const startTime = messages[0]?.timestamp || new Date().toISOString();
    startTimeElement.textContent = `\u901a\u8bdd\u5f00\u59cb ${formatTimestamp(startTime)}`;
    container.appendChild(startTimeElement);

    messages.forEach(message => {
        container.appendChild(createMessageElement(message, formatTimestamp));
    });

    container.scrollTop = container.scrollHeight;
}