/**
 * عطاری هزارگیاه - صفحه اصلی
 * JavaScript logic برای صفحه اصلی
 */

class HezargiahApp {
    constructor() {
        this.app = document.getElementById('app');
        this.settings = {};
        this.products = [];
        this.init();
    }

    async init() {
        try {
            // بارگذاری تنظیمات و محصولات
            await this.loadSettings();
            await this.loadProducts();
            
            // رندر کردن صفحه
            this.render();
        } catch (error) {
            console.error('خطا در بارگذاری:', error);
            this.showError('خطا در بارگذاری صفحه');
        }
    }

    async loadSettings() {
        try {
            const response = await fetch('/api/settings');
            const data = await response.json();
            
            if (data.success) {
                // تبدیل آرایه به object
                this.settings = {};
                data.data.forEach(setting => {
                    this.settings[setting.section] = JSON.parse(setting.data);
                });
            }
        } catch (error) {
            console.error('خطا در بارگذاری تنظیمات:', error);
        }
    }

    async loadProducts() {
        try {
            const response = await fetch('/api/products');
            const data = await response.json();
            
            if (data.success) {
                this.products = data.data;
            }
        } catch (error) {
            console.error('خطا در بارگذاری محصولات:', error);
            this.showError('خطا در بارگذاری محصولات');
        }
    }

    render() {
        this.app.innerHTML = `
            ${this.renderHeader()}
            ${this.renderTicker()}
            ${this.renderProducts()}
            ${this.renderFooter()}
        `;
    }

    renderHeader() {
        const header = this.settings.header || {};
        return `
            <header>
                ${header.overline ? `<div class="overline">${header.overline}</div>` : ''}
                <h1>
                    ${header.title || 'عطاری'}
                    ${header.title_accent ? `<span class="title-accent"> ${header.title_accent}</span>` : ''}
                </h1>
                ${header.tagline ? `<p>${header.tagline}</p>` : ''}
                ${header.badges && header.badges.length > 0 ? `
                    <div class="badges">
                        ${header.badges.map(b => `<span class="badge">${b}</span>`).join('')}
                    </div>
                ` : ''}
            </header>
        `;
    }

    renderTicker() {
        const ticker = this.settings.ticker || {};
        if (!ticker.enabled || !ticker.items || ticker.items.length === 0) {
            return '';
        }

        return `
            <div class="ticker">
                <div class="ticker-content" style="animation-duration: ${ticker.speed || 30}s">
                    ${ticker.items.map(item => `
                        <span class="ticker-item">📢 ${item}</span>
                    `).join('')}
                    ${ticker.items.map(item => `
                        <span class="ticker-item">📢 ${item}</span>
                    `).join('')}
                </div>
            </div>
        `;
    }

    renderProducts() {
        if (this.products.length === 0) {
            return `
                <section class="products-section">
                    <div class="loading">
                        <div class="spinner"></div>
                        <p>در حال بارگذاری محصولات...</p>
                    </div>
                </section>
            `;
        }

        return `
            <section class="products-section">
                <h2>محصولات ما</h2>
                <div class="products-grid">
                    ${this.products.map(product => this.renderProductCard(product)).join('')}
                </div>
            </section>
        `;
    }

    renderProductCard(product) {
        const icon = this.getProductIcon(product.icon);
        const hasDiscount = product.old_price > product.price;

        return `
            <div class="product-card">
                <div class="product-header" style="background: linear-gradient(135deg, ${product.gradient || '#2f7d54'} 0%, ${this.lightenColor(product.gradient?.split(',')[0] || '#2f7d54')} 100%)">
                    <div class="product-icon">${icon}</div>
                    <div class="product-name">${product.name}</div>
                    <div class="product-category">${this.getCategoryName(product.category)}</div>
                </div>
                <div class="product-body">
                    ${product.description ? `
                        <div class="product-description">${product.description}</div>
                    ` : ''}
                    <div class="product-price">
                        ${this.formatPrice(product.price)} تومان
                        ${hasDiscount ? `<br><span class="old">${this.formatPrice(product.old_price)} تومان</span>` : ''}
                    </div>
                    <div class="product-actions">
                        <button class="btn-primary" onclick="app.contactViaWhatsApp('${product.wa_text || product.name}')">
                            سفارش
                        </button>
                        <button class="btn-secondary" onclick="app.toggleProductDetails(this)">
                            توضیحات
                        </button>
                    </div>
                </div>
            </div>
        `;
    }

    renderFooter() {
        const footer = this.settings.footer || {};
        const contact = this.settings.contact || {};

        return `
            <footer>
                ${footer.about ? `<p><strong>${footer.about}</strong></p>` : ''}
                <p>
                    ${contact.phone_display ? `📞 ${contact.phone_display}` : ''}
                </p>
                ${footer.copyright ? `<div class="copyright">${footer.copyright}</div>` : ''}
            </footer>
        `;
    }

    getProductIcon(icon) {
        const icons = {
            flower: '🌸',
            leaf: '🌿',
            cinnamon: '🤎',
            bottle: '🧴',
            saffron: '🏵️',
            honey: '🍯',
            oil: '🫗',
            spice: '✨'
        };
        return icons[icon] || '🌿';
    }

    getCategoryName(category) {
        const names = {
            tea: 'دمنوش',
            aragh: 'عرقیات',
            spice: 'ادویه',
            honey: 'عسل',
            oil: 'روغن'
        };
        return names[category] || category;
    }

    formatPrice(price) {
        return new Intl.NumberFormat('fa-IR').format(price);
    }

    lightenColor(color) {
        // ساده‌تر نسخه
        return color || '#5cab82';
    }

    contactViaWhatsApp(text) {
        const contact = this.settings.contact || {};
        const phone = contact.phone || '989129615925';
        const message = encodeURIComponent(text || 'سلام! می‌خواهم سفارش بدهم');
        const url = `https://wa.me/${phone}?text=${message}`;
        window.open(url, '_blank');
    }

    toggleProductDetails(btn) {
        // می‌توانید اینجا جزئیات بیشتری نشان دهید
        alert('توضیحات محصول');
    }

    showError(message) {
        this.app.innerHTML = `
            <div style="padding: 2rem; text-align: center;">
                <div class="error">${message}</div>
                <button onclick="location.reload()" class="btn-primary" style="margin-top: 1rem;">
                    تلاش دوباره
                </button>
            </div>
        `;
    }
}

// شروع اپلیکیشن
let app;
document.addEventListener('DOMContentLoaded', () => {
    app = new HezargiahApp();
});