// Modern JavaScript Application - ES6+ with Modules
class DownloadApplication {
    constructor() {
        this.config = this.loadInitialData();
        this.components = new Map();
        this.state = {
            ageVerified: this.config.session.age_verified,
            downloadCount: this.config.stats.download_count,
            isLoading: false
        };
        
        this.initializeApplication();
    }
    
    loadInitialData() {
        const scriptElement = document.getElementById('initial-data');
        if (scriptElement) {
            try {
                return JSON.parse(scriptElement.textContent);
            } catch (error) {
                console.error('Failed to parse initial data:', error);
            }
        }
        return {};
    }
    
    async initializeApplication() {
        try {
            // Initialize core modules
            await this.initializeModules();
            
            // Render application
            this.render();
            
            // Start background services
            this.startServices();
            
            // Track application load
            this.analytics.track('application_loaded');
            
        } catch (error) {
            console.error('Application initialization failed:', error);
            this.showError('خطا در بارگذاری برنامه');
        }
    }
    
    async initializeModules() {
        // Core modules
        this.router = new Router();
        this.stateManager = new StateManager(this.state);
        this.analytics = new AnalyticsService(this.config);
        this.uiManager = new UIManager();
        this.downloadManager = new DownloadManager();
        this.ageGateManager = new AgeGateManager();
        
        // Register components
        this.registerComponents();
        
        // Initialize modules
        await Promise.all([
            this.router.initialize(),
            this.stateManager.initialize(),
            this.analytics.initialize()
        ]);
    }
    
    registerComponents() {
        this.components.set('banner', new BannerComponent());
        this.components.set('download', new DownloadComponent());
        this.components.set('age-gate', new AgeGateComponent());
        this.components.set('toast', new ToastComponent());
        this.components.set('debug', new DebugComponent());
    }
    
    render() {
        const appElement = document.getElementById('app');
        if (!appElement) return;
        
        appElement.innerHTML = this.generateHTML();
        this.attachEventListeners();
    }
    
    generateHTML() {
        return `
            <div class="app-container">
                <header class="app-header">
                    <div class="container">
                        <div class="hashtag-badge">${this.config.content.hashtag}</div>
                    </div>
                </header>
                
                <main class="main-content">
                    <div class="container">
                        ${this.components.get('banner').render(this.state)}
                    </div>
                </main>
                
                ${this.state.ageVerified ? '' : this.components.get('age-gate').render()}
                ${this.components.get('toast').render()}
                ${this.config.debug.enabled ? this.components.get('debug').render(this.config) : ''}
            </div>
        `;
    }
    
    attachEventListeners() {
        // Download button
        const downloadBtn = document.querySelector('[data-action="download"]');
        if (downloadBtn) {
            downloadBtn.addEventListener('click', (e) => {
                this.downloadManager.handleDownload(e);
            });
        }
        
        // Age gate
        const ageGateBtn = document.querySelector('[data-action="age-gate"]');
        if (ageGateBtn) {
            ageGateBtn.addEventListener('click', () => {
                this.ageGateManager.show();
            });
        }
    }
    
    startServices() {
        // Update download counter periodically
        setInterval(() => {
            this.updateDownloadCounter();
        }, 30000);
        
        // Monitor performance
        this.monitorPerformance();
    }
    
    async updateDownloadCounter() {
        try {
            const response = await fetch('/stats');
            const data = await response.json();
            
            this.stateManager.setState({
                downloadCount: data.download_count
            });
            
        } catch (error) {
            console.log('Counter update failed:', error);
        }
    }
    
    monitorPerformance() {
        // Performance monitoring logic
        if ('performance' in window) {
            const observer = new PerformanceObserver((list) => {
                for (const entry of list.getEntries()) {
                    this.analytics.track('performance_metric', {
                        name: entry.name,
                        value: entry.duration,
                        type: entry.entryType
                    });
                }
            });
            
            observer.observe({ entryTypes: ['measure', 'navigation', 'resource'] });
        }
    }
    
    showError(message) {
        this.components.get('toast').show(message, 'error');
    }
    
    showSuccess(message) {
        this.components.get('toast').show(message, 'success');
    }
}

// Component Classes
class BannerComponent {
    render(state) {
        return `
            <div class="banner-grid">
                <div class="content-column">
                    <h1 class="main-title">${this.config.content.title}</h1>
                    <p class="main-description">${this.config.content.description}</p>
                    
                    <div class="features-grid">
                        ${this.config.features.map(feature => `
                            <div class="feature-card">
                                <span class="feature-icon">✨</span>
                                <span class="feature-text">${feature}</span>
                            </div>
                        `).join('')}
                    </div>
                    
                    <div class="info-cards">
                        <div class="info-card">
                            <div class="info-icon">📁</div>
                            <div class="info-content">
                                <div class="info-label">حجم فایل</div>
                                <div class="info-value">${this.config.download.file_size}</div>
                            </div>
                        </div>
                        <div class="info-card">
                            <div class="info-icon">📱</div>
                            <div class="info-content">
                                <div class="info-label">نسخه اندروید</div>
                                <div class="info-value">${this.config.download.android_version}</div>
                            </div>
                        </div>
                        <div class="info-card">
                            <div class="info-icon">🔞</div>
                            <div class="info-content">
                                <div class="info-label">رده سنی</div>
                                <div class="info-value">${this.config.download.age_required}</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="download-section">
                        ${this.getDownloadButton(state)}
                    </div>
                </div>
                
                <div class="media-column">
                    <div class="media-container">
                        <img src="${this.config.media.background_gif}" 
                             alt="پیش‌نمایش بازی" 
                             class="preview-media"
                             loading="lazy">
                        <div class="media-overlay">
                            <div class="play-indicator">
                                <div class="play-icon">▶</div>
                                <span>پیش‌نمایش بازی</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    getDownloadButton(state) {
        if (this.config.security.age_gate && !state.ageVerified) {
            return `
                <div class="age-gate-prompt">
                    <button class="download-btn age-gate-btn" data-action="age-gate">
                        <span class="btn-icon">🔞</span>
                        <span class="btn-text">تأیید سن برای دانلود</span>
                    </button>
                    <p class="age-gate-hint">برای دسترسی به محتوا باید ۱۸ سال یا بیشتر داشته باشید</p>
                </div>
            `;
        }
        
        return `
            <div class="download-ready">
                <a href="/download" class="download-btn primary-download-btn" data-action="download">
                    <span class="btn-icon">📥</span>
                    <span class="btn-text">دانلود مستقیم</span>
                    <span class="btn-subtext">${this.config.download.file_size}</span>
                </a>
                <div class="download-meta">
                    <div class="download-stats">
                        <span class="stat">
                            <span class="stat-icon">📊</span>
                            <span class="stat-text">تعداد دانلود: <strong>${state.downloadCount}</strong></span>
                        </span>
                        <span class="stat">
                            <span class="stat-icon">⚡</span>
                            <span class="stat-text">سرعت بالا</span>
                        </span>
                    </div>
                    <p class="download-note">فایل APK اصلی - نصب مستقیم و امن</p>
                </div>
            </div>
        `;
    }
}

class DownloadManager {
    async handleDownload(event) {
        event.preventDefault();
        
        try {
            // Show loading state
            this.setLoadingState(true);
            
            // Track download attempt
            this.analytics.track('download_initiated');
            
            // Optimistic UI update
            this.updateCounterOptimistically();
            
            // Navigate to download
            window.location.href = event.target.href;
            
        } catch (error) {
            console.error('Download failed:', error);
            this.showToast('خطا در دانلود فایل', 'error');
            this.setLoadingState(false);
        }
    }
    
    setLoadingState(loading) {
        const btn = document.querySelector('[data-action="download"]');
        if (btn) {
            btn.classList.toggle('loading', loading);
            btn.disabled = loading;
        }
    }
    
    updateCounterOptimistically() {
        const counterElement = document.querySelector('.download-stats strong');
        if (counterElement) {
            const currentCount = parseInt(counterElement.textContent) || 0;
            counterElement.textContent = currentCount + 1;
        }
    }
}

class AgeGateManager {
    constructor() {
        this.modal = null;
    }
    
    show() {
        this.modal = document.getElementById('ageGateModal');
        if (this.modal) {
            this.modal.classList.add('active');
            document.body.style.overflow = 'hidden';
            this.attachModalEvents();
        }
    }
    
    hide() {
        if (this.modal) {
            this.modal.classList.remove('active');
            document.body.style.overflow = '';
        }
    }
    
    attachModalEvents() {
        const closeBtn = this.modal?.querySelector('.modal-close');
        const cancelBtn = this.modal?.querySelector('[data-action="cancel"]');
        const confirmBtn = this.modal?.querySelector('[data-action="confirm"]');
        
        closeBtn?.addEventListener('click', () => this.hide());
        cancelBtn?.addEventListener('click', () => this.hide());
        confirmBtn?.addEventListener('click', () => this.verifyAge());
    }
    
    async verifyAge() {
        try {
            const response = await fetch('/verify-age', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    age_confirmed: 'true',
                    csrf_token: this.config.session.csrf_token
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                this.hide();
                window.location.reload();
            } else {
                this.showToast('خطا در تأیید سن', 'error');
            }
            
        } catch (error) {
            console.error('Age verification failed:', error);
            this.showToast('خطا در ارتباط با سرور', 'error');
        }
    }
}

// Additional component classes would be defined here...
class Router { initialize() { return Promise.resolve(); } }
class StateManager { 
    constructor(state) { this.state = state; }
    initialize() { return Promise.resolve(); }
    setState(newState) { this.state = { ...this.state, ...newState }; }
}
class AnalyticsService {
    constructor(config) { this.config = config; }
    initialize() { return Promise.resolve(); }
    track(event, data = {}) { 
        if (this.config.analytics.enabled) {
            console.log('Analytics:', event, data);
        }
    }
}
class UIManager {}
class ToastComponent {
    render() { return '<div class="toast-container" id="toastContainer"></div>'; }
    show(message, type = 'success') {
        const container = document.getElementById('toastContainer');
        if (!container) return;
        
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        toast.innerHTML = `
            <span class="toast-icon">${this.getIcon(type)}</span>
            <span class="toast-message">${message}</span>
        `;
        
        container.appendChild(toast);
        setTimeout(() => toast.classList.add('show'), 100);
        
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 300);
        }, 4000);
    }
    getIcon(type) {
        const icons = { success: '✅', error: '❌', warning: '⚠️', info: '💡' };
        return icons[type] || '💡';
    }
}
class DebugComponent {
    render(config) {
        return `
            <div class="debug-panel">
                <div class="debug-header">
                    <h4>System Debug Information</h4>
                    <button class="debug-toggle" onclick="DebugPanel.toggle()">نمایش/مخفی</button>
                </div>
                <div class="debug-content" id="debugContent">
                    <pre>${JSON.stringify(config, null, 2)}</pre>
                </div>
            </div>
        `;
    }
}

// Global debug panel handler
window.DebugPanel = {
    toggle() {
        const content = document.getElementById('debugContent');
        if (content) {
            content.classList.toggle('show');
        }
    }
};

// Initialize application when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
        window.app = new DownloadApplication();
    });
} else {
    window.app = new DownloadApplication();
}

// Error boundary for the application
window.addEventListener('error', (event) => {
    console.error('Application error:', event.error);
    
    const toast = new ToastComponent();
    toast.show('خطایی در برنامه رخ داد', 'error');
});

// Service Worker Registration
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
            .then(registration => {
                console.log('SW registered: ', registration);
            })
            .catch(registrationError => {
                console.log('SW registration failed: ', registrationError);
            });
    });
}