class FilePreview extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .preview-container {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 0.5rem;
                    margin-top: 0.5rem;
                }
                .preview-item {
                    display: block;
                    background: #f3f4f6;
                    border-radius: 0.375rem;
                    padding: 0.75rem;
                    margin-bottom: 0.5rem;
                    font-size: 0.875rem;
                }
                .file-info {
                    overflow: hidden;
                }
                .file-name {
                    font-weight: 500;
                    color: #374151;
                }
                .remove-btn {
                    display: flex;
                    align-items: center;
                    padding: 0.25rem;
                    border-radius: 9999px;
                    transition: all 0.2s;
                }
                .remove-btn:hover {
                    background: rgba(239, 68, 68, 0.1);
                }
</style>
            <div class="preview-container" id="previews"></div>
        `;

        const input = document.getElementById('attachments');
        if (input) {
            input.addEventListener('change', this.updatePreviews.bind(this));
    }

    // Helper functions
    function getFileType(file) {
        if (file.type.startsWith('image/')) return 'image';
        if (file.type.startsWith('video/')) return 'video';
        if (file.type.startsWith('audio/')) return 'audio';
        return 'document';
    }

    function getFileIcon(file) {
        if (file.type === 'application/pdf') return 'file-text';
        if (file.type.includes('document') || file.name.match(/\.(docx?|txt|rtf)$/i)) return 'file-text';
        if (file.type.includes('spreadsheet') || file.name.match(/\.(xlsx?|csv)$/i)) return 'file-text';
        if (file.type.includes('presentation') || file.name.match(/\.(pptx?|key)$/i)) return 'file-text';
        if (file.type.startsWith('video/')) return 'film';
        if (file.type.startsWith('audio/')) return 'music';
        if (file.name.match(/\.(zip|rar|7z|tar|gz)$/i)) return 'archive';
        return 'file';
    }

    function 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];
    }
}

updatePreviews() {
        const input = document.getElementById('attachments');
        const previewsContainer = this.shadowRoot.getElementById('previews');
        previewsContainer.innerHTML = '';

        Array.from(input.files).forEach((file, index) => {
            const previewItem = document.createElement('div');
            previewItem.className = 'preview-item';
            const fileType = getFileType(file);
            
            previewItem.innerHTML = `
                <div class="flex items-center">
                    <div class="file-icon mr-3">
                        ${fileType === 'image' ? 
                            `<img src="${URL.createObjectURL(file)}" alt="${file.name}" class="w-10 h-10 object-cover rounded">` : 
                            `<i data-feather="${getFileIcon(file)}" class="text-gray-500"></i>`
                        }
                    </div>
                    <div class="file-info flex-1 min-w-0">
                        <div class="file-name truncate">${file.name}</div>
                        <div class="file-size text-xs text-gray-500">${formatFileSize(file.size)}</div>
                    </div>
                    <div class="remove-btn ml-2 text-red-500 hover:text-red-700 cursor-pointer" data-index="${index}">
                        <i data-feather="x"></i>
                    </div>
                </div>
            `;
previewsContainer.appendChild(previewItem);
        });

        feather.replace();

        // Add remove functionality
        this.shadowRoot.querySelectorAll('.remove-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const index = parseInt(btn.dataset.index);
                this.removeFile(index);
            });
        });
    }

    removeFile(index) {
        const input = document.getElementById('attachments');
        const files = Array.from(input.files);
        files.splice(index, 1);
        
        // Create new DataTransfer to update files
        const dataTransfer = new DataTransfer();
        files.forEach(file => dataTransfer.items.add(file));
        input.files = dataTransfer.files;
        
        this.updatePreviews();
    }
}

customElements.define('file-preview', FilePreview);