static/js/metadata.js

class MetadataGenerator {
    constructor() {
        this.init();
    }

    init() {
        this.cacheElements();
        this.attachEventListeners();
    }

    cacheElements() {
        this.metadataUrl = document.getElementById('metadataUrl');
        this.generateBtn = document.getElementById('generateBtn');
        this.metadataPreview = document.getElementById('metadataPreview');
        this.previewTitle = document.getElementById('previewTitle');
        this.previewDescription = document.getElementById('previewDescription');
        this.previewTags = document.getElementById('previewTags');
        this.previewHashtags = document.getElementById('previewHashtags');
        this.loadingOverlay = document.getElementById('loadingOverlay');
        this.toast = document.getElementById('toast');
    }

    attachEventListeners() {
        this.generateBtn.addEventListener('click', () => this.handleGenerate());
        this.metadataUrl.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') this.handleGenerate();
        });
    }

    async handleGenerate() {
        const url = this.metadataUrl.value.trim();
        
        if (!url) {
            this.showToast('Please enter a valid Instagram Reel URL', 'error');
            return;
        }
        
        this.showLoading();
        
        try {
            const response = await fetch('/generate-preview', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ url })
            });
            
            const data = await response.json();
            
            if (data.success) {
                this.displayMetadata(data);
                this.showToast('AI metadata generated successfully!', 'success');
            } else {
                throw new Error(data.error || 'Generation failed');
            }
        } catch (error) {
            this.showToast('Generation failed: ' + error.message, 'error');
        } finally {
            this.hideLoading();
        }
    }

    displayMetadata(data) {
        this.previewTitle.textContent = data.title || '-';
        this.previewDescription.textContent = data.description || '-';
        
        // Display tags
        this.previewTags.innerHTML = '';
        if (data.tags && data.tags.length > 0) {
            data.tags.slice(0, 15).forEach(tag => {
                const span = document.createElement('span');
                span.textContent = tag;
                this.previewTags.appendChild(span);
            });
        }
        
        // Display hashtags
        this.previewHashtags.innerHTML = '';
        if (data.hashtags && data.hashtags.length > 0) {
            data.hashtags.slice(0, 20).forEach(hashtag => {
                const span = document.createElement('span');
                span.textContent = hashtag;
                this.previewHashtags.appendChild(span);
            });
        }
        
        this.metadataPreview.style.display = 'block';
    }

    showLoading() {
        this.loadingOverlay.style.display = 'flex';
    }

    hideLoading() {
        this.loadingOverlay.style.display = 'none';
    }

    showToast(message, type = 'info') {
        this.toast.textContent = message;
        this.toast.className = 'toast show';
        
        if (type === 'success') {
            this.toast.style.borderLeft = '4px solid var(--success)';
        } else if (type === 'error') {
            this.toast.style.borderLeft = '4px solid var(--error)';
        }
        
        setTimeout(() => {
            this.toast.classList.remove('show');
        }, 4000);
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new MetadataGenerator();
});