{% extends "webapp/base.html" %}

{% block title %}Каталог{% endblock %}

{% block content %}
<div class="container py-3">
    <div class="row row-cols-2 g-3">
        {% for product in products %}
        <div class="col">
            <div class="card h-100">
                <div class="card-img-wrapper">
                    {% if product.image_path %}
                    <img src="{{ url_for('static', filename=product.image_path) }}" alt="{{ product.name }}" class="card-img-top">
                    {% else %}
                    <img src="{{ url_for('static', filename='product_images/no-image.jpg') }}" alt="Нет изображения" class="card-img-top">
                    {% endif %}
                    {% if product.quantity > 0 %}
                    <span class="quantity-badge">В наличии: {{ product.quantity }}</span>
                    {% endif %}
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{ product.name }}</h5>
                    <p class="card-text">{{ product.description }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="price">{{ product.price }}₽</span>
                        <button class="btn btn-primary btn-sm add-to-cart" 
                                data-product-id="{{ product.id }}"
                                data-product-name="{{ product.name }}"
                                data-product-price="{{ product.price }}">
                            В корзину
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let tg = window.Telegram.WebApp;
let cart = {};

// Инициализация WebApp
tg.ready();
tg.expand();

// Добавляем haptic feedback
function addHaptic() {
    if (tg.HapticFeedback) {
        tg.HapticFeedback.impactOccurred('light');
    }
}

// Обработчики кнопок
document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', function(e) {
        e.preventDefault();
        addHaptic();
        
        const productId = this.dataset.productId;
        const productName = this.dataset.productName;
        const price = parseFloat(this.dataset.productPrice);
        
        if (!cart[productId]) {
            cart[productId] = {
                quantity: 0,
                name: productName,
                price: price
            };
        }
        cart[productId].quantity++;
        
        // Анимация кнопки
        this.style.transform = 'scale(0.95)';
        setTimeout(() => {
            this.style.transform = 'scale(1)';
        }, 100);
        
        updateMainButton();
    });
});

// Обновление главной кнопки
function updateMainButton() {
    const total = Object.values(cart).reduce((sum, item) => sum + item.quantity, 0);
    const totalSum = Object.values(cart).reduce((sum, item) => sum + (item.quantity * item.price), 0);
    
    if (total > 0) {
        tg.MainButton.setText(`Оформить заказ (${total} шт. - ${totalSum}₽)`);
        tg.MainButton.onClick(function() {
            addHaptic();
            const cartData = JSON.stringify(cart);
            console.log('Sending data:', cartData);
            try {
                tg.sendData(cartData);
                setTimeout(() => {
                    tg.close();
                }, 100);
            } catch (error) {
                console.error('Error sending data:', error);
                tg.showPopup({
                    title: 'Ошибка',
                    message: 'Не удалось отправить данные',
                    buttons: [{ type: 'ok' }]
                });
            }
        });
        tg.MainButton.show();
    } else {
        tg.MainButton.hide();
    }
}

// Обработка ошибок
window.addEventListener('error', function(error) {
    console.error('Error:', error);
    tg.showPopup({
        title: 'Ошибка',
        message: error.message,
        buttons: [{ type: 'ok' }]
    });
});

// Подключаем тему Telegram
document.documentElement.style.setProperty('--tg-theme-bg-color', tg.themeParams.bg_color || '#ffffff');
document.documentElement.style.setProperty('--tg-theme-text-color', tg.themeParams.text_color || '#000000');
document.documentElement.style.setProperty('--tg-theme-hint-color', tg.themeParams.hint_color || '#999999');
document.documentElement.style.setProperty('--tg-theme-link-color', tg.themeParams.link_color || '#2481cc');
document.documentElement.style.setProperty('--tg-theme-button-color', tg.themeParams.button_color || '#2481cc');
document.documentElement.style.setProperty('--tg-theme-button-text-color', tg.themeParams.button_text_color || '#ffffff');
</script>

<style>
:root {
    --tg-theme-bg-color: #ffffff;
    --tg-theme-text-color: #000000;
    --tg-theme-hint-color: #999999;
    --tg-theme-link-color: #2481cc;
    --tg-theme-button-color: #2481cc;
    --tg-theme-button-text-color: #ffffff;
}

body {
    background-color: var(--tg-theme-bg-color);
    color: var(--tg-theme-text-color);
}

.btn-primary {
    background-color: var(--tg-theme-button-color);
    border-color: var(--tg-theme-button-color);
    color: var(--tg-theme-button-text-color);
}

.card {
    background-color: var(--tg-theme-bg-color);
    border-color: var(--tg-theme-hint-color);
}

.price {
    color: var(--tg-theme-hint-color);
    font-weight: bold;
}
</style>
{% endblock %}