script.js

const chatMessages = document.getElementById('chat-messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
const imageInput = document.getElementById('image-input');
const sendImageButton = document.getElementById('send-image-button');
const fileInput = document.getElementById('file-input');
const clearHistoryButton = document.getElementById('clear-history-button');
const uploadedFilesList = document.getElementById('uploaded-files-list');
const uploadProgress = document.getElementById('upload-progress');

let deviceName = 'Connecting...'; // Placeholder until server assigns a name
let ws = null;

// 获取服务器地址
function getServerAddress() {
    // 如果是本地文件，使用localhost
    if (window.location.protocol === 'file:') {
        return 'localhost';
    }
    // 否则使用当前页面的主机名
    return window.location.hostname;
}

// 初始化WebSocket连接
function initWebSocket() {
    const serverAddress = getServerAddress();
    const wsUrl = `ws://${serverAddress}:8097`; // Changed port from 8080 to 8097
    
    console.log(`Connecting to WebSocket server at: ${wsUrl}`);
    ws = new WebSocket(wsUrl);

    ws.onopen = () => {
        console.log('Connected to WebSocket server');
    };

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        if (data.type === 'init' && data.deviceName) {
            deviceName = data.deviceName;
            console.log(`Device name assigned by server: ${deviceName}`);
        } else if (data.type === 'historyCleared') {
            chatMessages.innerHTML = ''; // Clear the chat display
            console.log('Chat history has been cleared.');
        } else if (data.type === 'fileUploaded') {
            // Update the file list only (no chat notification)
            fetchAndDisplayFiles();
        }
        else {
            displayMessage(data.message, data.type, data.sender, data.timestamp);
        }
    };

    ws.onclose = () => {
        console.log('Disconnected from WebSocket server');
        // 可以添加重连逻辑
    };

    ws.onerror = (error) => {
        console.error('WebSocket error:', error);
    };
}

// 事件监听器
sendButton.addEventListener('click', () => {
    sendMessage();
});

messageInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

sendImageButton.addEventListener('click', () => {
    imageInput.click(); // 触发隐藏的文件输入点击
});


clearHistoryButton.addEventListener('click', () => {
    if (confirm('Are you sure you want to delete all chat history? This cannot be undone.')) {
        if (ws && ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({ type: 'clearHistory' }));
        }
    }
});

imageInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            sendImage(e.target.result); // 发送base64编码的图片
        };
        reader.readAsDataURL(file);
    }
});

fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
        uploadFileWithProgress(file);
    }
});

function sendMessage() {
    const message = messageInput.value.trim();
    if (message) {
        ws.send(JSON.stringify({ type: 'text', message: message, sender: deviceName }));
        messageInput.value = '';
    }
}

function sendImage(imageData) {
    if (imageData) {
        ws.send(JSON.stringify({ type: 'image', message: imageData, sender: deviceName }));
    }
}

function uploadFileWithProgress(file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('sender', deviceName); // Include sender name

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);

    // Show progress bar
    uploadProgress.style.display = 'block';
    uploadProgress.value = 0;

    xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            uploadProgress.value = percentComplete;
        }
    };

    xhr.onload = () => {
        // Hide progress bar
        uploadProgress.style.display = 'none';
        if (xhr.status === 200) {
            console.log('File uploaded successfully');
            // The server will broadcast the 'fileUploaded' message,
            // so the file list will be updated automatically.
            // We can optionally clear the file input
            fileInput.value = '';
        } else {
            console.error('File upload failed:', xhr.responseText);
            alert('File upload failed.');
        }
    };

    xhr.onerror = () => {
        uploadProgress.style.display = 'none';
        console.error('An error occurred during the file upload.');
        alert('An error occurred during the file upload.');
    };

    xhr.send(formData);
}

function displayMessage(content, type, sender, timestamp) {
    const messageElement = document.createElement('div');
    messageElement.classList.add('message');

    const isSentByMe = sender === deviceName;

    if (isSentByMe) {
        messageElement.classList.add('sent');
    } else {
    messageElement.classList.add('received');
    // Apply dynamic background color for received messages
    messageElement.style.backgroundColor = generateColor(sender);
}

const messageHeader = document.createElement('div');
messageHeader.classList.add('message-header');

    const senderSpan = document.createElement('span');
    senderSpan.classList.add('sender-name');
    senderSpan.textContent = sender;
    messageHeader.appendChild(senderSpan);

    if (timestamp) {
        const timeSpan = document.createElement('span');
        timeSpan.classList.add('timestamp');
        const time = new Date(timestamp);
        timeSpan.textContent = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        messageHeader.appendChild(timeSpan);
    }
    
    messageElement.appendChild(messageHeader);

    const messageContent = document.createElement('div');
    messageContent.classList.add('message-content');

    if (type === 'image') {
        const imgElement = document.createElement('img');
        imgElement.src = content;
        messageContent.appendChild(imgElement);
    }
    else {
        const textNode = document.createTextNode(content);
        messageContent.appendChild(textNode);
    }
    
    messageElement.appendChild(messageContent);
    chatMessages.appendChild(messageElement);
    chatMessages.scrollTop = chatMessages.scrollHeight; // 自动滚动到底部
}

// Function to generate a consistent, light, semi-transparent color based on a string
function generateColor(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    let color = '#';
    for (let i = 0; i < 3; i++) {
        const value = (hash >> (i * 8)) & 0xFF;
        // Ensure light colors (e.g., between 150 and 255)
        const lightValue = Math.floor(150 + (value / 255) * 105);
        color += ('00' + lightValue.toString(16)).substr(-2);
    }
    // Convert hex to RGBA for semi-transparency
    const r = parseInt(color.substring(1, 3), 16);
    const g = parseInt(color.substring(3, 5), 16);
    const b = parseInt(color.substring(5, 7), 16);
    // Use a low alpha value for semi-transparency (e.g., 0.3 to 0.5)
    return `rgba(${r}, ${g}, ${b}, 0.4)`; // 0.4 for a light, semi-transparent feel
}

// Function to fetch and display uploaded files
async function fetchAndDisplayFiles() {
    try {
        const response = await fetch('/files');
        const files = await response.json();
        uploadedFilesList.innerHTML = ''; // Clear existing list

        if (files.length === 0) {
            const listItem = document.createElement('li');
            listItem.textContent = 'No files uploaded yet.';
            uploadedFilesList.appendChild(listItem);
        } else {
            const fileTypeEmojis = {
                'image': '🖼️',
                'pdf': '📄',
                'document': '📝',
                'archive': '📦',
                'audio': '🎵',
                'video': '🎬',
                'unknown': '❓'
            };

            files.forEach(file => {
                const listItem = document.createElement('li');
                
                const fileTypeIndicator = document.createElement('span');
                fileTypeIndicator.classList.add('file-type-indicator');
                fileTypeIndicator.textContent = `${fileTypeEmojis[file.type] || '❓'} `;
                listItem.appendChild(fileTypeIndicator);

                const fileLink = document.createElement('a');
                fileLink.href = file.url;
                fileLink.textContent = file.name;
                fileLink.target = '_blank';
                fileLink.download = file.name; // Suggest download name
                listItem.appendChild(fileLink);

                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.classList.add('delete-file-button');
                deleteButton.dataset.uniqueFileName = file.url.split('/').pop(); // Store unique filename
                deleteButton.addEventListener('click', async () => {
                    if (confirm(`Are you sure you want to delete "${file.name}"?`)) {
                        await deleteFile(deleteButton.dataset.uniqueFileName);
                    }
                });
                listItem.appendChild(deleteButton);
                uploadedFilesList.appendChild(listItem);
            });
        }
    } catch (error) {
        console.error('Error fetching uploaded files:', error);
        const listItem = document.createElement('li');
        listItem.textContent = 'Error loading files.';
        uploadedFilesList.appendChild(listItem);
    }
}

// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
    initWebSocket();
    fetchAndDisplayFiles(); // Fetch and display files on load
    setupMobileTabs(); // Set up mobile tab switching
});

// Function to set up mobile tab switching
function setupMobileTabs() {
    const chatTab = document.getElementById('chat-tab');
    const filesTab = document.getElementById('files-tab');
    const chatContainer = document.querySelector('.chat-container');
    const filesContainer = document.querySelector('.file-management-section');

    chatTab.addEventListener('click', () => {
        chatTab.classList.add('active');
        filesTab.classList.remove('active');
        chatContainer.style.display = 'flex';
        filesContainer.style.display = 'none';
    });

    filesTab.addEventListener('click', () => {
        filesTab.classList.add('active');
        chatTab.classList.remove('active');
        filesContainer.style.display = 'flex';
        chatContainer.style.display = 'none';
    });
}

// Function to delete a file
async function deleteFile(uniqueFileName) {
    try {
        const response = await fetch(`/files/${uniqueFileName}`, {
            method: 'DELETE'
        });
        if (response.ok) {
            console.log(`File ${uniqueFileName} deleted successfully.`);
            fetchAndDisplayFiles(); // Refresh the list
        } else {
            const errorData = await response.json();
            console.error('Failed to delete file:', errorData.error);
            alert(`Failed to delete file: ${errorData.error}`);
        }
    } catch (error) {
        console.error('Error deleting file:', error);
        alert('An error occurred while trying to delete the file.');
    }
}