components/upload-card.js

class UploadCard extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        const icon = this.getAttribute('icon') || 'upload';
        const title = this.getAttribute('title') || 'Upload';
        const description = this.getAttribute('description') || 'Upload your content';

        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    transition: all 0.3s ease;
                    transform: translateY(0);
                }
                .card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
                }
                .upload-icon {
                    transition: all 0.3s ease;
                }
                .card:hover .upload-icon {
                    transform: scale(1.1);
                }
                .file-upload-label {
                    cursor: pointer;
                    transition: all 0.3s ease;
                }
                .file-upload-label:hover {
                    background-color: #f8fafc;
                }
            </style>
            <div class="card bg-white rounded-xl shadow-md overflow-hidden animate-fade-in-up ${this.getAttribute('class') || ''}">
                <div class="p-6 text-center">
                    <div class="upload-icon bg-blue-100 text-blue-600 rounded-full p-4 w-16 h-16 flex items-center justify-center mx-auto mb-4">
                        <i data-feather="${icon}" class="w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">${title}</h3>
                    <p class="text-gray-600 mb-4">${description}</p>
                    
                    ${this.getInputTemplate(title.toLowerCase())}
                </div>
            </div>
        `;

        // Initialize feather icons
        setTimeout(() => {
            const icons = this.shadowRoot.querySelectorAll('[data-feather]');
            icons.forEach(icon => feather.replace(icon));
        }, 100);
    }
    getInputTemplate(type) {
        if (type.includes('text') || type.includes('input')) {
            return `
                <div class="mt-4">
                    <textarea id="text-input" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                              rows="4" placeholder="Paste your text here..."></textarea>
                    <button onclick="processTextContent()" class="mt-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300 w-full">
                        Process Text
                    </button>
                </div>
            `;
        } else if (type.includes('link') || type.includes('youtube') || type.includes('video')) {
            return `
                <div class="mt-4">
                    <input id="url-input" type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                           placeholder="Paste URL here...">
                    <button onclick="processUrlContent()" class="mt-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300 w-full">
                        Process URL
                    </button>
                </div>
            `;
        } else {
            return `
                <div class="mt-4">
                    <label class="file-upload-label block border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:border-blue-400 transition duration-300">
                        <input type="file" class="file-upload-input hidden" accept="${this.getAcceptAttribute(type)}" onchange="handleFileUpload(event, '${type}')">
                        <span class="text-gray-600">Click to upload or drag and drop</span>
                        <span class="block text-sm text-gray-500 mt-1">${this.getFileTypes(type)}</span>
                    </label>
                    <div id="upload-progress" class="hidden mt-2">
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
                        </div>
                        <p id="progress-text" class="text-xs text-gray-500 mt-1 text-center">Processing...</p>
                    </div>
                </div>
            `;
        }
}

    getAcceptAttribute(type) {
        if (type.includes('pdf') || type.includes('document')) {
            return '.pdf,.doc,.docx,.ppt,.pptx,.txt';
        } else if (type.includes('audio')) {
            return '.mp3,.wav,.ogg,.m4a';
        } else if (type.includes('image')) {
            return '.jpg,.jpeg,.png,.gif';
        }
        return '*';
    }

    getFileTypes(type) {
        if (type.includes('pdf') || type.includes('document')) {
            return 'PDF, Word, PowerPoint, TXT';
        } else if (type.includes('audio')) {
            return 'MP3, WAV, OGG, M4A';
        } else if (type.includes('image')) {
            return 'JPG, PNG, GIF';
        }
        return 'Any file type';
    }
}

customElements.define('upload-card', UploadCard);