<!-- chat.php - обновленная версия -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Chat Application</title>
    <style>
        /* Существующие стили плюс новые */
        .file-upload-area {
            border: 2px dashed #ccc;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            margin: 10px 0;
            cursor: pointer;
            transition: border-color 0.3s;
        }
        
        .file-upload-area:hover {
            border-color: #007bff;
        }
        
        .file-upload-area.dragover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        
        .message-file {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 10px;
            margin: 5px 0;
        }
        
        .file-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .file-icon {
            width: 40px;
            height: 40px;
            background: #007bff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .file-details {
            flex: 1;
        }
        
        .file-name {
            font-weight: bold;
            margin-bottom: 2px;
        }
        
        .file-size {
            font-size: 12px;
            color: #666;
        }
        
        .image-preview {
            max-width: 300px;
            max-height: 200px;
            border-radius: 8px;
            cursor: pointer;
        }
        
        .file-actions {
            display: flex;
            gap: 5px;
        }
        
        .btn-file {
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .btn-download {
            background: #28a745;
            color: white;
        }
        
        .btn-view {
            background: #007bff;
            color: white;
        }
        
        .upload-progress {
            width: 100%;
            height: 4px;
            background: #f0f0f0;
            border-radius: 2px;
            overflow: hidden;
            margin: 5px 0;
        }
        
        .upload-progress-bar {
            height: 100%;
            background: #007bff;
            transition: width 0.3s ease;
        }
        
        /* Modal для просмотра изображений */
        .image-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
        }
        
        .modal-content {
            position: relative;
            margin: auto;
            top: 50%;
            transform: translateY(-50%);
            max-width: 90%;
            max-height: 90%;
        }
        
        .close-modal {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="chatContainer">
        <div id="chatHeader">
            <h3 id="chatTitle">Chat</h3>
        </div>
        
        <div id="messagesContainer"></div>
        
        <!-- Область для загрузки файлов -->
        <div class="file-upload-area" id="fileUploadArea">
            <p>Перетащите файлы сюда или нажмите для выбора</p>
            <input type="file" id="fileInput" multiple style="display: none;">
        </div>
        
        <div id="chatInputContainer">
            <input type="text" id="messageInput" placeholder="Введите сообщение...">
            <button id="sendButton">Отправить</button>
            <button id="attachButton">📎</button>
        </div>
    </div>
    
    <!-- Modal для просмотра изображений -->
    <div id="imageModal" class="image-modal">
        <span class="close-modal">&times;</span>
        <img class="modal-content" id="modalImage">
    </div>

    <script>
        class ChatApp {
            constructor() {
                this.currentChatId = null;
                this.socket = null;
                this.setupEventListeners();
                this.setupFileUpload();
            }
            
            setupEventListeners() {
                // Существующие обработчики событий
                document.getElementById('sendButton').addEventListener('click', () => {
                    this.sendMessage();
                });
                
                document.getElementById('messageInput').addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') {
                        this.sendMessage();
                    }
                });
                
                document.getElementById('attachButton').addEventListener('click', () => {
                    document.getElementById('fileInput').click();
                });
                
                // Modal для изображений
                const modal = document.getElementById('imageModal');
                const closeModal = document.querySelector('.close-modal');
                
                closeModal.addEventListener('click', () => {
                    modal.style.display = 'none';
                });
                
                modal.addEventListener('click', (e) => {
                    if (e.target === modal) {
                        modal.style.display = 'none';
                    }
                });
            }
            
            setupFileUpload() {
                const fileInput = document.getElementById('fileInput');
                const uploadArea = document.getElementById('fileUploadArea');
                
                fileInput.addEventListener('change', (e) => {
                    this.handleFileUpload(e.target.files);
                });
                
                uploadArea.addEventListener('click', () => {
                    fileInput.click();
                });
                
                // Drag & Drop
                uploadArea.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    uploadArea.classList.add('dragover');
                });
                
                uploadArea.addEventListener('dragleave', () => {
                    uploadArea.classList.remove('dragover');
                });
                
                uploadArea.addEventListener('drop', (e) => {
                    e.preventDefault();
                    uploadArea.classList.remove('dragover');
                    this.handleFileUpload(e.dataTransfer.files);
                });
            }
            
            handleFileUpload(files) {
                Array.from(files).forEach(file => {
                    this.uploadFile(file);
                });
            }
            
            uploadFile(file) {
                const formData = new FormData();
                formData.append('file', file);
                formData.append('chatId', this.currentChatId);
                
                // Показать прогресс загрузки
                const progressElement = this.createProgressElement(file.name);
                document.getElementById('messagesContainer').appendChild(progressElement);
                
                const xhr = new XMLHttpRequest();
                
                xhr.upload.addEventListener('progress', (e) => {
                    if (e.lengthComputable) {
                        const progress = (e.loaded / e.total) * 100;
                        progressElement.querySelector('.upload-progress-bar').style.width = progress + '%';
                    }
                });
                
                xhr.addEventListener('load', () => {
                    progressElement.remove();
                    
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            // Файл успешно загружен, сообщение придет через WebSocket
                        } else {
                            alert('Ошибка загрузки: ' + response.error);
                        }
                    }
                });
                
                xhr.addEventListener('error', () => {
                    progressElement.remove();
                    alert('Ошибка загрузки файла');
                });
                
                xhr.open('POST', '/api/upload_file.php');
                xhr.send(formData);
            }
            
            createProgressElement(fileName) {
                const div = document.createElement('div');
                div.className = 'message-file';
                div.innerHTML = `
                    <div class="file-info">
                        <div class="file-icon">📤</div>
                        <div class="file-details">
                            <div class="file-name">${fileName}</div>
                            <div class="upload-progress">
                                <div class="upload-progress-bar"></div>
                            </div>
                        </div>
                    </div>
                `;
                return div;
            }
            
            renderMessage(message) {
                const messagesContainer = document.getElementById('messagesContainer');
                const messageDiv = document.createElement('div');
                messageDiv.className = 'message';
                
                let content = '';
                
                if (message.file_id) {
                    content = this.renderFileMessage(message);
                } else {
                    content = `<div class="message-text">${message.content}</div>`;
                }
                
                messageDiv.innerHTML = `
                    <div class="message-header">
                        <strong>${message.username}</strong>
                        <span class="message-time">${new Date(message.created_at).toLocaleTimeString()}</span>
                    </div>
                    ${content}
                `;
                
                messagesContainer.appendChild(messageDiv);
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
            }
            
            renderFileMessage(message) {
                const fileType = message.file_type;
                const fileName = message.original_name;
                const fileSize = this.formatFileSize(message.file_size);
                const fileId = message.file_id;
                
                if (fileType === 'image') {
                    return `
                        <div class="message-file">
                            <img src="/uploads/thumb_${message.stored_name}" 
                                 class="image-preview" 
                                 onclick="showImageModal('/uploads/${message.stored_name}')"
                                 alt="${fileName}">
                            <div class="file-actions">
                                <button class="btn-file btn-download" onclick="downloadFile(${fileId})">Скачать</button>
                            </div>
                        </div>
                    `;
                } else {
                    const icon = this.getFileIcon(fileType);
                    return `
                        <div class="message-file">
                            <div class="file-info">
                                <div class="file-icon">${icon}</div>
                                <div class="file-details">
                                    <div class="file-name">${fileName}</div>
                                    <div class="file-size">${fileSize}</div>
                                </div>
                                <div class="file-actions">
                                    <button class="btn-file btn-download" onclick="downloadFile(${fileId})">Скачать</button>
                                </div>
                            </div>
                        </div>
                    `;
                }
            }
            
            getFileIcon(fileType) {
                const icons = {
                    'document': '📄',
                    'video': '🎥',
                    'audio': '🎵',
                    'other': '📎'
                };
                return icons[fileType] || '📎';
            }
            
            formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
            
            sendMessage() {
                const input = document.getElementById('messageInput');
                const message = input.value.trim();
                
                if (message && this.currentChatId) {
                    fetch('/api/send_message.php', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({
                            chatId: this.currentChatId,
                            message: message
                        })
                    });
                    
                    input.value = '';
                }
            }
        }
        
        // Глобальные функции для обработчиков событий
        function showImageModal(imageSrc) {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('modalImage');
            modal.style.display = 'block';
            modalImg.src = imageSrc;
        }
        
        function downloadFile(fileId) {
            window.open(`/api/download_file.php?id=${fileId}`, '_blank');
        }
        
        // Инициализация приложения
        const chat = new ChatApp();
    </script>
</body>
</html>