app.py

from flask import Flask, render_template_string, request, redirect, url_for, session
import json
import os
import logging
import threading
import time
from datetime import datetime
from huggingface_hub import HfApi, hf_hub_download
from huggingface_hub.utils import RepositoryNotFoundError
from werkzeug.utils import secure_filename

app = Flask(__name__)
app.secret_key = 'your_unique_secret_key_12345'
DATA_FILE = 'data_detobuv.json'
USERS_FILE = 'users_detobuv.json'
CONFIG_FILE = 'config.json'

SYNC_FILES = [DATA_FILE, USERS_FILE, CONFIG_FILE]

REPO_ID = "Kgshop/clients"
HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")

WHOLESALE_ADDRESS = "Дордой, рынок Кербен, 9 ряд, 06 бутик"
RETAIL_ADDRESS = "Дордой Мир Обуви, номер 150"

CURRENCIES = {
    'USD': 'Доллар США ($)',
    'KGS': 'Кыргызский сом (с)'
}

logging.basicConfig(level=logging.DEBUG)

def load_config():
    try:
        with open(CONFIG_FILE, 'r', encoding='utf-8') as file:
            config = json.load(file)
            return config.get('kgs_to_usd', 89.0)
    except (FileNotFoundError, json.JSONDecodeError):
        return 89.0

def save_config(kgs_to_usd):
    with open(CONFIG_FILE, 'w', encoding='utf-8') as file:
        json.dump({'kgs_to_usd': kgs_to_usd}, file, ensure_ascii=False, indent=4)

def convert_price(price_usd, currency):
    kgs_to_usd = load_config()
    if currency == 'KGS':
        return round(price_usd * kgs_to_usd, 2)
    return round(price_usd, 2)

def load_data():
    try:
        download_db_from_hf()
        with open(DATA_FILE, 'r', encoding='utf-8') as file:
            data = json.load(file)
            logging.info("Данные успешно загружены из JSON")
            if not isinstance(data, dict) or 'products' not in data or 'categories' not in data:
                return {'products': [], 'categories': [] if not isinstance(data, list) else data}
            return data
    except FileNotFoundError:
        logging.warning("Локальный файл базы данных не найден после скачивания.")
        return {'products': [], 'categories': []}
    except json.JSONDecodeError:
        logging.error("Ошибка: Невозможно декодировать JSON файл.")
        return {'products': [], 'categories': []}
    except RepositoryNotFoundError:
        logging.error("Репозиторий не найден. Создание локальной базы данных.")
        return {'products': [], 'categories': []}
    except Exception as e:
        logging.error(f"Произошла ошибка при загрузке данных: {e}")
        return {'products': [], 'categories': []}

def save_data(data):
    try:
        with open(DATA_FILE, 'w', encoding='utf-8') as file:
            json.dump(data, file, ensure_ascii=False, indent=4)
        logging.info("Данные успешно сохранены в JSON")
        upload_db_to_hf()
    except Exception as e:
        logging.error(f"Ошибка при сохранении данных: {e}")
        raise

def load_users():
    try:
        with open(USERS_FILE, 'r', encoding='utf-8') as file:
            return json.load(file)
    except FileNotFoundError:
        return {}
    except json.JSONDecodeError:
        return {}

def save_users(users):
    with open(USERS_FILE, 'w', encoding='utf-8') as file:
        json.dump(users, file, ensure_ascii=False, indent=4)
    upload_db_to_hf()

def upload_db_to_hf():
    try:
        api = HfApi()
        for file_name in SYNC_FILES:
            if os.path.exists(file_name):
                api.upload_file(
                    path_or_fileobj=file_name,
                    path_in_repo=file_name,
                    repo_id=REPO_ID,
                    repo_type="dataset",
                    token=HF_TOKEN_WRITE,
                    commit_message=f"Автоматическое резервное копирование файла {file_name} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
                )
                logging.info(f"Резервная копия {file_name} успешно загружена на Hugging Face.")
            else:
                logging.warning(f"Файл {file_name} не найден для загрузки.")
    except Exception as e:
        logging.error(f"Ошибка при загрузке резервной копии: {e}")

def download_db_from_hf():
    try:
        api = HfApi()
        for file_name in SYNC_FILES:
            hf_hub_download(
                repo_id=REPO_ID,
                filename=file_name,
                repo_type="dataset",
                token=HF_TOKEN_READ,
                local_dir=".",
                local_dir_use_symlinks=False
            )
            logging.info(f"Файл {file_name} успешно скачан из Hugging Face.")
    except RepositoryNotFoundError as e:
        logging.error(f"Репозиторий не найден: {e}")
        raise
    except Exception as e:
        logging.error(f"Ошибка при скачивании файлов: {e}")
        raise

def periodic_backup():
    while True:
        upload_db_to_hf()
        time.sleep(800)

@app.route('/')
def catalog():
    data = load_data()
    products = data['products']
    categories = data['categories']
    is_authenticated = 'user' in session
    selected_currency = session.get('currency', 'USD') if is_authenticated else 'USD'
    kgs_to_usd = load_config()

    catalog_html = '''
    <!DOCTYPE html>
    <html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Детская обувь оптом и в розницу</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-family: 'Poppins', sans-serif;
                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
                color: #2d3748;
                line-height: 1.6;
                transition: background 0.3s, color 0.3s;
            }
            body.dark-mode {
                background: linear-gradient(135deg, #1a202c, #2d3748);
                color: #e2e8f0;
            }
            .container {
                max-width: 1300px;
                margin: 0 auto;
                padding: 20px;
            }
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 0;
                border-bottom: 1px solid #e2e8f0;
            }
            .header h1 {
                font-size: 1.5rem;
                font-weight: 600;
            }
            .auth-links {
                display: flex;
                gap: 15px;
            }
            .auth-links a {
                color: #3b82f6;
                text-decoration: none;
                font-weight: 500;
            }
            .auth-links a:hover {
                text-decoration: underline;
            }
            .theme-toggle {
                background: none;
                border: none;
                font-size: 1.5rem;
                cursor: pointer;
                color: #4a5568;
                transition: color 0.3s ease;
            }
            .theme-toggle:hover {
                color: #3b82f6;
            }
            .filters-container {
                margin: 20px 0;
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                justify-content: center;
            }
            .search-container {
                margin: 20px 0;
                text-align: center;
            }
            #search-input {
                width: 90%;
                max-width: 600px;
                padding: 12px 18px;
                font-size: 1rem;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
                outline: none;
                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
                transition: all 0.3s ease;
            }
            #search-input:focus {
                border-color: #3b82f6;
                box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
            }
            .category-filter {
                padding: 8px 16px;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
                background-color: #fff;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                font-size: 0.9rem;
                font-weight: 400;
            }
            .category-filter.active, .category-filter:hover {
                background-color: #3b82f6;
                color: white;
                border-color: #3b82f6;
                box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
            }
            .products-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(200px, 1fr));
                gap: 15px;
                padding: 10px;
            }
            .product {
                background: #fff;
                border-radius: 15px;
                padding: 15px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
                overflow: hidden;
            }
            body.dark-mode .product {
                background: #2d3748;
                color: #fff;
            }
            .product:hover {
                transform: translateY(-5px) scale(1.02);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            }
            .product-image {
                width: 100%;
                aspect-ratio: 1;
                background-color: #fff;
                border-radius: 10px;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .product-image img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                transition: transform 0.3s ease;
            }
            .product-image img:hover {
                transform: scale(1.1);
            }
            .product h2 {
                font-size: 1rem;
                font-weight: 600;
                margin: 10px 0;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .product-price {
                font-size: 1.1rem;
                color: #ef4444;
                font-weight: 700;
                text-align: center;
                margin: 5px 0;
            }
            .product-description {
                font-size: 0.8rem;
                color: #718096;
                text-align: center;
                margin-bottom: 15px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            body.dark-mode .product-description {
                color: #a0aec0;
            }
            .product-button {
                display: block;
                width: 100%;
                padding: 8px;
                border: none;
                border-radius: 8px;
                background-color: #3b82f6;
                color: white;
                font-size: 0.8rem;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                margin: 5px 0;
                text-align: center;
                text-decoration: none;
            }
            .product-button:hover {
                background-color: #2563eb;
                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
                transform: translateY(-2px);
            }
            .add-to-cart {
                background-color: #10b981;
            }
            .add-to-cart:hover {
                background-color: #059669;
                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
            }
            #cart-button {
                position: fixed;
                bottom: 20px;
                right: 20px;
                background-color: #ef4444;
                color: white;
                border: none;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
                cursor: pointer;
                display: none;
                box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1000;
            }
            .modal {
                display: none;
                position: fixed;
                z-index: 1001;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.5);
                backdrop-filter: blur(5px);
            }
            .modal-content {
                background: #fff;
                margin: 5% auto;
                padding: 20px;
                border-radius: 15px;
                width: 90%;
                max-width: 700px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                animation: slideIn 0.3s ease-out;
                overflow-y: auto;
                max-height: 80vh;
            }
            body.dark-mode .modal-content {
                background: #2d3748;
                color: #e2e8f0;
            }
            @keyframes slideIn {
                from { transform: translateY(-50px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
            .close {
                float: right;
                font-size: 1.5rem;
                color: #718096;
                cursor: pointer;
                transition: color 0.3s;
            }
            .close:hover {
                color: #2d3748;
            }
            body.dark-mode .close {
                color: #a0aec0;
            }
            body.dark-mode .close:hover {
                color: #fff;
            }
            .cart-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 0;
                border-bottom: 1px solid #e2e8f0;
            }
            body.dark-mode .cart-item {
                border-bottom: 1px solid #4a5568;
            }
            .cart-item img {
                width: 50px;
                height: 50px;
                object-fit: contain;
                border-radius: 8px;
                margin-right: 15px;
            }
            .quantity-input, .color-select {
                width: 100%;
                max-width: 150px;
                padding: 8px;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
                font-size: 1rem;
                margin: 5px 0;
            }
            .clear-cart {
                background-color: #ef4444;
            }
            .clear-cart:hover {
                background-color: #dc2626;
                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
            }
            .order-button {
                background-color: #10b981;
            }
            .order-button:hover {
                background-color: #059669;
                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
            }
            .store-address {
                padding: 10px;
                text-align: center;
                font-style: italic;
                color: #666;
            }
            .currency-select {
                padding: 8px;
                border-radius: 8px;
                border: 1px solid #e2e8f0;
                font-size: 1rem;
            }
            .remove-item-button {
                background: none;
                border: none;
                color: #ef4444;
                cursor: pointer;
                font-size: 1rem;
                margin-left: 10px;
            }
            .remove-item-button:hover {
                color: #dc2626;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h1>Каталог</h1>
                <div class="auth-links">
                    {% if is_authenticated %}
                    <span>Добро пожаловать, {{ session['user'] }}!</span>
                    <form method="POST" action="{{ url_for('set_currency') }}" style="display: inline;">
                        <select name="currency" class="currency-select" onchange="this.form.submit()">
                            {% for code, name in currencies.items() %}
                            <option value="{{ code }}" {% if code == selected_currency %}selected{% endif %}>{{ name }}</option>
                            {% endfor %}
                        </select>
                    </form>
                    <a href="{{ url_for('logout') }}">Выйти</a>
                    {% else %}
                    <a href="{{ url_for('login') }}">Войти</a>
                    <a href="{{ url_for('register') }}">Регистрация</a>
                    {% endif %}
                </div>
                <button class="theme-toggle" onclick="toggleTheme()">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
            <div class="store-address">Опт: {{ wholesale_address }} | Розница: {{ retail_address }}</div>
            <div class="filters-container">
                <button class="category-filter active" data-category="all">Все категории</button>
                {% for category in categories %}
                <button class="category-filter" data-category="{{ category }}">{{ category }}</button>
                {% endfor %}
            </div>
            <div class="search-container">
                <input type="text" id="search-input" placeholder="Поиск товаров...">
            </div>
            <div class="products-grid" id="products-grid">
                {% for product in products %}
                <div class="product"
                     data-name="{{ product['name']|lower }}"
                     data-description="{{ product['description']|lower }}"
                     data-category="{{ product.get('category', 'Без категории') }}">
                    {% if product.get('photos') and product['photos']|length > 0 %}
                    <div class="product-image">
                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}"
                             alt="{{ product['name'] }}"
                             loading="lazy">
                    </div>
                    {% endif %}
                    <h2>{{ product['name'] }}</h2>
                    {% if is_authenticated %}
                    <div class="product-price">{{ convert_price(product['price'], selected_currency) }} {{ selected_currency }}</div>
                    {% else %}
                    <div class="product-price">Цена доступна после входа</div>
                    {% endif %}
                    <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
                    <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
                    {% if is_authenticated %}
                    <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Product Modal -->
        <div id="productModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('productModal')">×</span>
                <div id="modalContent"></div>
            </div>
        </div>

        <!-- Quantity and Color Modal -->
        <div id="quantityModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('quantityModal')">×</span>
                <h2>Укажите количество и цвет</h2>
                <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
                <select id="colorSelect" class="color-select"></select>
                <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
            </div>
        </div>

        <!-- Cart Modal -->
        <div id="cartModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('cartModal')">×</span>
                <h2>Корзина</h2>
                <div id="cartContent"></div>
                <div style="margin-top: 20px; text-align: right;">
                    <strong>Итого: <span id="cartTotal">0</span> {{ selected_currency }}</strong>
                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
                </div>
            </div>
        </div>

        <button id="cart-button" onclick="openCartModal()">🛒</button>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
        <script>
            const products = {{ products|tojson }};
            let selectedProductIndex = null;
            const selectedCurrency = '{{ selected_currency }}';
            const kgsToUsd = {{ kgs_to_usd|tojson }};

            function toggleTheme() {
                document.body.classList.toggle('dark-mode');
                const icon = document.querySelector('.theme-toggle i');
                icon.classList.toggle('fa-moon');
                icon.classList.toggle('fa-sun');
                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
            }

            if (localStorage.getItem('theme') === 'dark') {
                document.body.classList.add('dark-mode');
                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
            }

            // Автоматическая авторизация из localStorage
            const storedUser = localStorage.getItem('user');
            if (storedUser && !{{ is_authenticated|tojson }}) {
                fetch('/auto_login', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ login: storedUser })
                }).then(response => {
                    if (response.ok) window.location.reload();
                });
            }

            function openModal(index) {
                loadProductDetails(index);
                document.getElementById('productModal').style.display = "block";
            }

            function closeModal(modalId) {
                document.getElementById(modalId).style.display = "none";
            }

            function loadProductDetails(index) {
                fetch('/product/' + index)
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById('modalContent').innerHTML = data;
                        initializeSwiper();
                    })
                    .catch(error => console.error('Ошибка:', error));
            }

            function initializeSwiper() {
                new Swiper('.swiper-container', {
                    slidesPerView: 1,
                    spaceBetween: 20,
                    loop: true,
                    grabCursor: true,
                    pagination: { el: '.swiper-pagination', clickable: true },
                    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
                    zoom: { maxRatio: 3 }
                });
            }

            function openQuantityModal(index) {
                selectedProductIndex = index;
                const product = products[index];
                const colorSelect = document.getElementById('colorSelect');
                colorSelect.innerHTML = '';
                if (product.colors && product.colors.length > 0) {
                    product.colors.forEach(color => {
                        const option = document.createElement('option');
                        option.value = color;
                        option.text = color;
                        colorSelect.appendChild(option);
                    });
                } else {
                    const option = document.createElement('option');
                    option.value = 'Нет цвета';
                    option.text = 'Нет цвета';
                    colorSelect.appendChild(option);
                }
                document.getElementById('quantityModal').style.display = 'block';
                document.getElementById('quantityInput').value = 1;
            }

            function confirmAddToCart() {
                if (selectedProductIndex === null) return;
                const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
                const color = document.getElementById('colorSelect').value;
                if (quantity <= 0) {
                    alert("Укажите количество больше 0");
                    return;
                }
                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
                const product = products[selectedProductIndex];
                const cartItemId = `${product.name}-${color}`;
                const existingItem = cart.find(item => item.id === cartItemId);

                if (existingItem) {
                    existingItem.quantity += quantity;
                } else {
                    cart.push({
                        id: cartItemId,
                        name: product.name,
                        price: product.price,
                        photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
                        quantity: quantity,
                        color: color
                    });
                }

                localStorage.setItem('cart', JSON.stringify(cart));
                closeModal('quantityModal');
                updateCartButton();
            }

            function updateCartButton() {
                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
                document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none';
            }

            function openCartModal() {
                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
                const cartContent = document.getElementById('cartContent');
                let total = 0;

                cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => {
                    const itemPrice = selectedCurrency === 'KGS' ? (item.price * kgsToUsd) : item.price;
                    const itemTotal = itemPrice * item.quantity;
                    total += itemTotal;
                    return `
                        <div class="cart-item" data-item-id="${item.id}">
                            <div style="display: flex; align-items: center;">
                                ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''}
                                <div>
                                    <strong>${item.name}</strong>
                                    <p>${itemPrice.toFixed(2)} ${selectedCurrency} × ${item.quantity} (Цвет: ${item.color})</p>
                                </div>
                            </div>
                            <span>${itemTotal.toFixed(2)} ${selectedCurrency}</span>
                            <button class="remove-item-button" onclick="removeItemFromCart('${item.id}')">×</button>
                        </div>
                    `;
                }).join('');

                document.getElementById('cartTotal').textContent = total.toFixed(2);
                document.getElementById('cartModal').style.display = 'block';
            }

            function removeItemFromCart(itemId) {
                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
                cart = cart.filter(item => item.id !== itemId);
                localStorage.setItem('cart', JSON.stringify(cart));
                openCartModal();
                updateCartButton();
            }

            function orderViaWhatsApp() {
                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
                if (cart.length === 0) {
                    alert("Корзина пуста!");
                    return;
                }
                let total = 0;
                let orderText = "Заказ:%0A";
                cart.forEach((item, index) => {
                    const itemPrice = selectedCurrency === 'KGS' ? (item.price * kgsToUsd) : item.price;
                    const itemTotal = itemPrice * item.quantity;
                    total += itemTotal;
                    orderText += `${index + 1}. ${item.name} - ${itemPrice.toFixed(2)} ${selectedCurrency} × ${item.quantity} (Цвет: ${item.color})%0A`;
                });
                orderText += `Итого: ${total.toFixed(2)} ${selectedCurrency}%0A`;
                orderText += `Страна: {{ session.get('country', 'Не указана') }}%0A`;
                orderText += `Город: {{ session.get('city', 'Не указан') }}`;
                window.open(`https://api.whatsapp.com/send?phone=996555360556&text=${orderText}`, '_blank');
            }

            function clearCart() {
                localStorage.removeItem('cart');
                closeModal('cartModal');
                updateCartButton();
            }

            window.onclick = function(event) {
                if (event.target.className === 'modal') event.target.style.display = "none";
            }

            document.getElementById('search-input').addEventListener('input', filterProducts);
            document.querySelectorAll('.category-filter').forEach(filter => {
                filter.addEventListener('click', function() {
                    document.querySelectorAll('.category-filter').forEach(f => f.classList.remove('active'));
                    this.classList.add('active');
                    filterProducts();
                });
            });

            function filterProducts() {
                const searchTerm = document.getElementById('search-input').value.toLowerCase();
                const activeCategory = document.querySelector('.category-filter.active').dataset.category;
                document.querySelectorAll('.product').forEach(product => {
                    const name = product.getAttribute('data-name');
                    const description = product.getAttribute('data-description');
                    const category = product.getAttribute('data-category');
                    const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm);
                    const matchesCategory = activeCategory === 'all' || category === activeCategory;
                    product.style.display = matchesSearch && matchesCategory ? 'block' : 'none';
                });
            }

            updateCartButton();
        </script>
    </body>
    </html>
    '''
    return render_template_string(catalog_html, products=products, categories=categories,
                                repo_id=REPO_ID, is_authenticated=is_authenticated,
                                wholesale_address=WHOLESALE_ADDRESS, retail_address=RETAIL_ADDRESS,
                                session=session, convert_price=convert_price,
                                selected_currency=selected_currency, currencies=CURRENCIES,
                                kgs_to_usd=kgs_to_usd)

@app.route('/product/<int:index>')
def product_detail(index):
    data = load_data()
    products = data['products']
    is_authenticated = 'user' in session
    selected_currency = session.get('currency', 'USD') if is_authenticated else 'USD'
    try:
        product = products[index]
    except IndexError:
        return "Продукт не найден", 404
    detail_html = '''
    <div class="container" style="padding: 20px;">
        <h2 style="font-size: 1.8rem; font-weight: 600; margin-bottom: 20px;">{{ product['name'] }}</h2>
        <div class="swiper-container" style="max-width: 400px; margin: 0 auto 20px;">
            <div class="swiper-wrapper">
                {% if product.get('photos') %}
                {% for photo in product['photos'] %}
                <div class="swiper-slide" style="background-color: #fff; display: flex; justify-content: center; align-items: center;">
                    <div class="swiper-zoom-container">
                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}"
                             alt="{{ product['name'] }}"
                             style="max-width: 100%; max-height: 300px; object-fit: contain;">
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <div class="swiper-slide">
                    <img src="https://via.placeholder.com/300" alt="No Image">
                </div>
                {% endif %}
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
        {% if is_authenticated %}
        <p><strong>Цена:</strong> {{ convert_price(product['price'], selected_currency) }} {{ selected_currency }}</p>
        {% else %}
        <p><strong>Цена:</strong> Доступна после входа</p>
        {% endif %}
        <p><strong>Описание:</strong> {{ product['description'] }}</p>
        <p><strong>Доступные цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
    </div>
    '''
    return render_template_string(detail_html, product=product, repo_id=REPO_ID,
                                is_authenticated=is_authenticated, convert_price=convert_price,
                                selected_currency=selected_currency)

@app.route('/set_currency', methods=['POST'])
def set_currency():
    if 'user' in session:
        currency = request.form.get('currency')
        if currency in CURRENCIES:
            session['currency'] = currency
    return redirect(url_for('catalog'))

@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        login = request.form.get('login')
        password = request.form.get('password')
        first_name = request.form.get('first_name')
        last_name = request.form.get('last_name')
        country = request.form.get('country')
        city = request.form.get('city')
        purchase_type = request.form.get('purchase_type')

        if purchase_type == 'retail':
            return render_template_string('''
                <h2>Мы продаем только оптом</h2>
                <p><a href="{{ url_for('register') }}">Назад к регистрации</a></p>
            ''')

        users = load_users()
        if login in users:
            return "Пользователь с таким логином уже существует", 400

        users[login] = {
            'password': password,
            'first_name': first_name,
            'last_name': last_name,
            'country': country,
            'city': city,
            'purchase_type': purchase_type
        }
        save_users(users)
        session['user'] = login
        session['country'] = country
        session['city'] = city
        session['currency'] = 'USD'
        return redirect(url_for('catalog'))

    return render_template_string('''
    <!DOCTYPE html>
    <html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Регистрация</title>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
        <style>
            body {
                font-family: 'Poppins', sans-serif;
                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
                padding: 20px;
            }
            .container {
                max-width: 500px;
                margin: 0 auto;
                background: #fff;
                padding: 20px;
                border-radius: 15px;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            }
            h2 {
                text-align: center;
                margin-bottom: 20px;
            }
            label {
                display: block;
                margin: 10px 0 5px;
            }
            input, select {
                width: 100%;
                padding: 10px;
                margin-bottom: 15px;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
            }
            button {
                width: 100%;
                padding: 10px;
                background-color: #3b82f6;
                color: white;
                border: none;
                border-radius: 8px;
                cursor: pointer;
            }
            button:hover {
                background-color: #2563eb;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h2>Регистрация</h2>
            <form method="POST">
                <label>Логин:</label>
                <input type="text" name="login" required>
                <label>Пароль:</label>
                <input type="password" name="password" required>
                <label>Имя:</label>
                <input type="text" name="first_name" required>
                <label>Фамилия:</label>
                <input type="text" name="last_name" required>
                <label>Страна:</label>
                <input type="text" name="country" required>
                <label>Город:</label>
                <input type="text" name="city" required>
                <label>Тип покупки:</label>
                <select name="purchase_type" required>
                    <option value="wholesale">Оптом</option>
                    <option value="retail">В розницу</option>
                </select>
                <button type="submit">Зарегистрироваться</button>
            </form>
            <p style="text-align: center; margin-top: 15px;">
                <a href="{{ url_for('login') }}">Уже есть аккаунт? Войти</a>
            </p>
        </div>
        <script>
            document.querySelector('form').addEventListener('submit', function() {
                const login = document.querySelector('input[name="login"]').value;
                localStorage.setItem('user', login);
            });
        </script>
    </body>
    </html>
    ''')

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        login = request.form.get('login')
        password = request.form.get('password')
        users = load_users()

        if login in users and users[login]['password'] == password:
            session['user'] = login
            session['country'] = users[login]['country']
            session['city'] = users[login]['city']
            session['currency'] = 'USD'
            return redirect(url_for('catalog'))
        return "Неверный логин или пароль", 401

    return render_template_string('''
    <!DOCTYPE html>
    <html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Вход</title>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
        <style>
            body {
                font-family: 'Poppins', sans-serif;
                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
                padding: 20px;
            }
            .container {
                max-width: 500px;
                margin: 0 auto;
                background: #fff;
                padding: 20px;
                border-radius: 15px;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            }
            h2 {
                text-align: center;
                margin-bottom: 20px;
            }
            label {
                display: block;
                margin: 10px 0 5px;
            }
            input {
                width: 100%;
                padding: 10px;
                margin-bottom: 15px;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
            }
            button {
                width: 100%;
                padding: 10px;
                background-color: #3b82f6;
                color: white;
                border: none;
                border-radius: 8px;
                cursor: pointer;
            }
            button:hover {
                background-color: #2563eb;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h2>Вход</h2>
            <form method="POST">
                <label>Логин:</label>
                <input type="text" name="login" required>
                <label>Пароль:</label>
                <input type="password" name="password" required>
                <button type="submit">Войти</button>
            </form>
            <p style="text-align: center; margin-top: 15px;">
                <a href="{{ url_for('register') }}">Нет аккаунта? Зарегистрироваться</a>
            </p>
        </div>
        <script>
            document.querySelector('form').addEventListener('submit', function() {
                const login = document.querySelector('input[name="login"]').value;
                localStorage.setItem('user', login);
            });
        </script>
    </body>
    </html>
    ''')

@app.route('/auto_login', methods=['POST'])
def auto_login():
    data = request.get_json()
    login = data.get('login')
    users = load_users()
    if login in users:
        session['user'] = login
        session['country'] = users[login]['country']
        session['city'] = users[login]['city']
        session['currency'] = 'USD'
        return "OK", 200
    return "Ошибка авторизации", 401

@app.route('/logout')
def logout():
    session.pop('user', None)
    session.pop('country', None)
    session.pop('city', None)
    session.pop('currency', None)
    return redirect(url_for('catalog'))

@app.route('/admin', methods=['GET', 'POST'])
def admin():
    data = load_data()
    products = data['products']
    categories = data['categories']
    users = load_users()
    kgs_to_usd = load_config()

    if request.method == 'POST':
        action = request.form.get('action')

        if action == 'add_category':
            category_name = request.form.get('category_name')
            if category_name and category_name not in categories:
                categories.append(category_name)
                save_data(data)
                return redirect(url_for('admin'))
            return "Ошибка: Категория уже существует или не указано название", 400

        elif action == 'delete_category':
            category_index = int(request.form.get('category_index'))
            deleted_category = categories.pop(category_index)
            for product in products:
                if product.get('category') == deleted_category:
                    product['category'] = 'Без категории'
            save_data(data)
            return redirect(url_for('admin'))

        elif action == 'add':
            name = request.form.get('name')
            price = request.form.get('price')
            description = request.form.get('description')
            category = request.form.get('category')
            photos_files = request.files.getlist('photos')
            colors = request.form.getlist('colors')
            photos_list = []

            if photos_files:
                for photo in photos_files[:10]:
                    if photo and photo.filename:
                        photo_filename = secure_filename(photo.filename)
                        uploads_dir = 'uploads'
                        os.makedirs(uploads_dir, exist_ok=True)
                        temp_path = os.path.join(uploads_dir, photo_filename)
                        photo.save(temp_path)
                        api = HfApi()
                        api.upload_file(
                            path_or_fileobj=temp_path,
                            path_in_repo=f"photos/{photo_filename}",
                            repo_id=REPO_ID,
                            repo_type="dataset",
                            token=HF_TOKEN_WRITE,
                            commit_message=f"Добавлено фото для товара {name}"
                        )
                        photos_list.append(photo_filename)
                        if os.path.exists(temp_path):
                            os.remove(temp_path)

            if not name or not price or not description:
                return "Ошибка: Заполните все обязательные поля", 400

            price = float(price.replace(',', '.'))
            new_product = {
                'name': name,
                'price': price,
                'description': description,
                'category': category if category in categories else 'Без категории',
                'photos': photos_list,
                'colors': colors if colors else []
            }
            products.append(new_product)
            save_data(data)
            return redirect(url_for('admin'))

        elif action == 'edit':
            index = int(request.form.get('index'))
            name = request.form.get('name')
            price = request.form.get('price')
            description = request.form.get('description')
            category = request.form.get('category')
            photos_files = request.files.getlist('photos')
            colors = request.form.getlist('colors')

            if photos_files and any(photo.filename for photo in photos_files):
                new_photos_list = []
                for photo in photos_files[:10]:
                    if photo and photo.filename:
                        photo_filename = secure_filename(photo.filename)
                        uploads_dir = 'uploads'
                        os.makedirs(uploads_dir, exist_ok=True)
                        temp_path = os.path.join(uploads_dir, photo_filename)
                        photo.save(temp_path)
                        api = HfApi()
                        api.upload_file(
                            path_or_fileobj=temp_path,
                            path_in_repo=f"photos/{photo_filename}",
                            repo_id=REPO_ID,
                            repo_type="dataset",
                            token=HF_TOKEN_WRITE,
                            commit_message=f"Обновлено фото для товара {name}"
                        )
                        new_photos_list.append(photo_filename)
                        if os.path.exists(temp_path):
                            os.remove(temp_path)
                products[index]['photos'] = new_photos_list

            products[index]['name'] = name
            products[index]['price'] = float(price.replace(',', '.'))
            products[index]['description'] = description
            products[index]['category'] = category if category in categories else 'Без категории'
            products[index]['colors'] = colors if colors else []
            save_data(data)
            return redirect(url_for('admin'))

        elif action == 'delete':
            index = int(request.form.get('index'))
            del products[index]
            save_data(data)
            return redirect(url_for('admin'))

        elif action == 'set_exchange_rate':
            kgs_to_usd = float(request.form.get('kgs_to_usd').replace(',', '.'))
            save_config(kgs_to_usd)
            upload_db_to_hf()
            return redirect(url_for('admin'))

        elif action == 'delete_user':
            login = request.form.get('login')
            if login in users:
                del users[login]
                save_users(users)
            return redirect(url_for('admin'))

    admin_html = '''
    <!DOCTYPE html>
    <html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Админ-панель</title>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
        <style>
            body {
                font-family: 'Poppins', sans-serif;
                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
                color: #2d3748;
                padding: 20px;
            }
            .container {
                max-width: 1200px;
                margin: 0 auto;
            }
            .header {
                padding: 15px 0;
                border-bottom: 1px solid #e2e8f0;
            }
            h1, h2 {
                font-weight: 600;
                margin-bottom: 20px;
            }
            form {
                background: #fff;
                padding: 20px;
                border-radius: 15px;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                margin-bottom: 30px;
            }
            label {
                font-weight: 500;
                margin-top: 15px;
                display: block;
            }
            input, textarea, select {
                width: 100%;
                padding: 12px;
                margin-top: 5px;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
                font-size: 1rem;
                transition: all 0.3s ease;
            }
            input:focus, textarea:focus, select:focus {
                border-color: #3b82f6;
                box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
                outline: none;
            }
            button {
                padding: 12px 20px;
                border: none;
                border-radius: 8px;
                background-color: #3b82f6;
                color: white;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                margin-top: 15px;
            }
            button:hover {
                background-color: #2563eb;
                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
                transform: translateY(-2px);
            }
            .delete-button {
                background-color: #ef4444;
            }
            .delete-button:hover {
                background-color: #dc2626;
                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
            }
            .product-list, .category-list, .user-list {
                display: grid;
                gap: 20px;
            }
            .product-item, .category-item, .user-item {
                background: #fff;
                padding: 20px;
                border-radius: 15px;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            }
            .edit-form {
                margin-top: 15px;
                padding: 15px;
                background: #f7fafc;
                border-radius: 10px;
            }
            .color-input-group {
                display: flex;
                gap: 10px;
                margin-top: 5px;
            }
            .add-color-btn {
                background-color: #10b981;
            }
            .add-color-btn:hover {
                background-color: #059669;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h1>Админ-панель</h1>
            </div>

            <h1>Установка курса KGS к USD</h1>
            <form method="POST">
                <input type="hidden" name="action" value="set_exchange_rate">
                <label>Курс KGS к USD (1 USD = ? KGS):</label>
                <input type="number" name="kgs_to_usd" step="0.01" value="{{ kgs_to_usd }}" required>
                <button type="submit">Сохранить</button>
            </form>

            <h1>Добавление товара</h1>
            <form method="POST" enctype="multipart/form-data">
                <input type="hidden" name="action" value="add">
                <label>Название товара:</label>
                <input type="text" name="name" required>
                <label>Цена (USD):</label>
                <input type="number" name="price" step="0.01" required>
                <label>Описание:</label>
                <textarea name="description" rows="4" required></textarea>
                <label>Категория:</label>
                <select name="category">
                    <option value="Без категории">Без категории</option>
                    {% for category in categories %}
                    <option value="{{ category }}">{{ category }}</option>
                    {% endfor %}
                </select>
                <label>Фотографии (до 10):</label>
                <input type="file" name="photos" accept="image/*" multiple>
                <label>Цвета:</label>
                <div id="color-inputs">
                    <div class="color-input-group">
                        <input type="text" name="colors" placeholder="Например: Красный">
                    </div>
                </div>
                <button type="button" class="add-color-btn" onclick="addColorInput()">Добавить цвет</button>
                <button type="submit">Добавить товар</button>
            </form>

            <h1>Управление категориями</h1>
            <form method="POST">
                <input type="hidden" name="action" value="add_category">
                <label>Название категории:</label>
                <input type="text" name="category_name" required>
                <button type="submit">Добавить</button>
            </form>

            <h2>Список категорий</h2>
            <div class="category-list">
                {% for category in categories %}
                <div class="category-item">
                    <h3>{{ category }}</h3>
                    <form method="POST" style="display: inline;">
                        <input type="hidden" name="action" value="delete_category">
                        <input type="hidden" name="category_index" value="{{ loop.index0 }}">
                        <button type="submit" class="delete-button">Удалить</button>
                    </form>
                </div>
                {% endfor %}
            </div>

            <h2>Управление базой данных</h2>
            <form method="POST" action="{{ url_for('backup') }}" style="display: inline;">
                <button type="submit">Создать копию</button>
            </form>
            <form method="GET" action="{{ url_for('download') }}" style="display: inline;">
                <button type="submit">Скачать базу</button>
            </form>

            <h2>Список товаров</h2>
            <div class="product-list">
                {% for product in products %}
                <div class="product-item">
                    <h3>{{ product['name'] }}</h3>
                    <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
                    <p><strong>Цена:</strong> {{ product['price'] }} USD ({{ convert_price(product['price'], 'KGS') }} KGS)</p>
                    <p><strong>Описание:</strong> {{ product['description'] }}</p>
                    <p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
                    {% if product.get('photos') and product['photos']|length > 0 %}
                    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                        {% for photo in product['photos'] %}
                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}"
                             alt="{{ product['name'] }}"
                             style="max-width: 100px; border-radius: 10px;">
                        {% endfor %}
                    </div>
                    {% endif %}
                    <details>
                        <summary>Редактировать</summary>
                        <form method="POST" enctype="multipart/form-data" class="edit-form">
                            <input type="hidden" name="action" value="edit">
                            <input type="hidden" name="index" value="{{ loop.index0 }}">
                            <label>Название:</label>
                            <input type="text" name="name" value="{{ product['name'] }}" required>
                            <label>Цена (USD):</label>
                            <input type="number" name="price" step="0.01" value="{{ product['price'] }}" required>
                            <label>Описание:</label>
                            <textarea name="description" rows="4" required>{{ product['description'] }}</textarea>
                            <label>Категория:</label>
                            <select name="category">
                                <option value="Без категории" {% if product.get('category', 'Без категории') == 'Без категории' %}selected{% endif %}>Без категории</option>
                                {% for category in categories %}
                                <option value="{{ category }}" {% if product.get('category') == category %}selected{% endif %}>{{ category }}</option>
                                {% endfor %}
                            </select>
                            <label>Фотографии (до 10):</label>
                            <input type="file" name="photos" accept="image/*" multiple>
                            <label>Цвета:</label>
                            <div id="edit-color-inputs-{{ loop.index0 }}">
                                {% for color in product.get('colors', []) %}
                                <div class="color-input-group">
                                    <input type="text" name="colors" value="{{ color }}">
                                </div>
                                {% endfor %}
                            </div>
                            <button type="button" class="add-color-btn" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')">Добавить цвет</button>
                            <button type="submit">Сохранить</button>
                        </form>
                    </details>
                    <form method="POST">
                        <input type="hidden" name="action" value="delete">
                        <input type="hidden" name="index" value="{{ loop.index0 }}">
                        <button type="submit" class="delete-button">Удалить</button>
                    </form>
                </div>
                {% endfor %}
            </div>

            <h2>Список пользователей</h2>
            <div class="user-list">
                {% for login, user in users.items() %}
                <div class="user-item">
                    <p><strong>Логин:</strong> {{ login }}</p>
                    <p><strong>Имя:</strong> {{ user['first_name'] }}</p>
                    <p><strong>Фамилия:</strong> {{ user['last_name'] }}</p>
                    <p><strong>Страна:</strong> {{ user['country'] }}</p>
                    <p><strong>Город:</strong> {{ user['city'] }}</p>
                    <form method="POST">
                        <input type="hidden" name="action" value="delete_user">
                        <input type="hidden" name="login" value="{{ login }}">
                        <button type="submit" class="delete-button">Удалить</button>
                    </form>
                </div>
                {% endfor %}
            </div>
        </div>
        <script>
            function addColorInput(containerId = 'color-inputs') {
                const container = document.getElementById(containerId);
                const newInput = document.createElement('div');
                newInput.className = 'color-input-group';
                newInput.innerHTML = '<input type="text" name="colors" placeholder="Например: Красный">';
                container.appendChild(newInput);
            }
        </script>
    </body>
    </html>
    '''
    return render_template_string(admin_html, products=products, categories=categories,
                                repo_id=REPO_ID, users=users, kgs_to_usd=kgs_to_usd,
                                convert_price=convert_price)

@app.route('/backup', methods=['POST'])
def backup():
    upload_db_to_hf()
    return "Резервная копия создана.", 200

@app.route('/download', methods=['GET'])
def download():
    download_db_from_hf()
    return "База данных скачана.", 200

if __name__ == '__main__':
    backup_thread = threading.Thread(target=periodic_backup, daemon=True)
    backup_thread.start()
    try:
        load_data()
    except Exception as e:
        logging.error(f"Не удалось загрузить базу данных: {e}")
    app.run(debug=True, host='0.0.0.0', port=7860)