from flask import Flask, render_template_string, request, redirect, url_for, send_file, Response
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
import zipfile
import io
import tempfile

app = Flask(__name__)
DATA_FILE = 'dataasdem.json'

# Убедитесь, что REPO_ID указан в формате owner/repo_name
REPO_ID = "flpolprojects/Clients"
HF_TOKEN_WRITE = os.getenv("HF_TOKEN") # Токен для записи (нужен для загрузки DB и фото)
HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") # Токен для чтения (нужен для скачивания DB и фото)

# Если HF_TOKEN_READ не установлен, используем HF_TOKEN_WRITE для чтения
if not HF_TOKEN_READ and HF_TOKEN_WRITE:
    HF_TOKEN_READ = HF_TOKEN_WRITE
elif not HF_TOKEN_READ and not HF_TOKEN_WRITE:
     logging.error("Hugging Face токены HF_TOKEN или HF_TOKEN_READ не установлены.")
     # Приложение может работать локально, но загрузка/скачивание с HF не будет работать.

LOGO_URL = "https://cdn-avatars.huggingface.co/v1/production/uploads/67b22aaeae9b6a59f1cfb849/NQvBksXzJItYt6hfFjyaB.jpeg"

logging.basicConfig(level=logging.DEBUG)

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


def save_data(data):
    """Сохраняет данные в локальный JSON файл и загружает на HF."""
    logging.info("Попытка сохранения данных.")
    try:
        # Сортируем продукты по времени добавления перед сохранением
        # Это поможет сохранить порядок добавления, хотя список в памяти сортируется отдельно для отображения
        if 'products' in data:
             data['products'].sort(key=lambda x: x.get('added_at', ''), reverse=True)

        with open(DATA_FILE, 'w', encoding='utf-8') as file:
            json.dump(data, file, ensure_ascii=False, indent=4)
        logging.info(f"Данные успешно сохранены в локальный JSON файл '{DATA_FILE}'.")
        upload_db_to_hf()
    except Exception as e:
        logging.error(f"Ошибка при сохранении данных: {e}")
        # В случае ошибки сохранения, лучше пробросить исключение, чтобы админ получил обратную связь
        raise

def upload_db_to_hf():
    """Загружает локальный JSON файл на Hugging Face Hub."""
    if not HF_TOKEN_WRITE:
        logging.warning("HF_TOKEN_WRITE не установлен. Пропуск загрузки базы данных на Hugging Face.")
        return
    try:
        api = HfApi()
        logging.info(f"Загрузка файла '{DATA_FILE}' в репозиторий '{REPO_ID}' на Hugging Face.")
        api.upload_file(
            path_or_fileobj=DATA_FILE,
            path_in_repo=DATA_FILE,
            repo_id=REPO_ID,
            repo_type="dataset",
            token=HF_TOKEN_WRITE,
            commit_message=f"Автоматическое резервное копирование базы данных {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
        )
        logging.info("Резервная копия JSON базы успешно загружена на Hugging Face.")
    except Exception as e:
        logging.error(f"Ошибка при загрузке резервной копии '{DATA_FILE}' на Hugging Face: {e}")

def download_db_from_hf():
    """Скачивает JSON файл базы данных с Hugging Face Hub."""
    if not HF_TOKEN_READ:
        logging.warning("HF_TOKEN_READ не установлен. Пропуск скачивания базы данных с Hugging Face.")
        # Если токена нет, FileNotFoundError в load_data обработает отсутствие локального файла
        raise FileNotFoundError(f"Не удалось скачать базу данных '{DATA_FILE}' из-за отсутствия HF_TOKEN_READ.")

    try:
        logging.info(f"Скачивание файла '{DATA_FILE}' из репозитория '{REPO_ID}' на Hugging Face.")
        hf_hub_download(
            repo_id=REPO_ID,
            filename=DATA_FILE,
            repo_type="dataset",
            token=HF_TOKEN_READ,
            local_dir=".", # Скачиваем прямо в корневую директорию приложения
            local_dir_use_symlinks=False # Важно для надежности в разных окружениях
        )
        logging.info(f"JSON база '{DATA_FILE}' успешно скачана из Hugging Face.")
    except RepositoryNotFoundError as e:
        logging.error(f"Репозиторий '{REPO_ID}' не найден. Невозможно скачать базу данных.")
        raise # Пробрасываем ошибку, чтобы load_data мог ее обработать
    except Exception as e:
        logging.error(f"Ошибка при скачивании JSON базы '{DATA_FILE}' из Hugging Face: {e}")
        # Пробрасываем ошибку, чтобы load_data мог ее обработать
        raise

def periodic_backup():
    """Выполняет периодическое резервное копирование."""
    # Добавляем небольшую задержку при старте, чтобы приложение успело инициализироваться
    time.sleep(60) # Задержка в 60 секунд перед первым бэкапом
    while True:
        try:
            logging.info("Запуск периодического резервного копирования.")
            # Нет необходимости загружать данные, backup загружает локальный файл
            upload_db_to_hf()
        except Exception as e:
            logging.error(f"Ошибка во время периодического бэкапа: {e}")
        # Ждем 800 секунд (приблизительно 13.3 минуты)
        time.sleep(800)

# --- Новая функция для загрузки фотографий и создания ZIP ---
@app.route('/download_photos')
def download_photos():
    """
    Скачивает все фотографии, указанные в базе данных, из репозитория HF Hub
    и упаковывает их в ZIP-архив для скачивания.
    """
    logging.info("Получен запрос на скачивание всех фотографий.")
    data = load_data()
    all_photo_filenames = set() # Используем set для уникальных имен файлов

    # Собираем все уникальные имена файлов фотографий из продуктов
    if 'products' in data and isinstance(data['products'], list):
        for product in data['products']:
            if 'photos' in product and isinstance(product['photos'], list):
                for photo_filename in product['photos']:
                    if photo_filename and isinstance(photo_filename, str):
                        # Удаляем возможные пробелы или другие нежелательные символы
                        cleaned_filename = photo_filename.strip()
                        if cleaned_filename:
                            all_photo_filenames.add(cleaned_filename)

    logging.info(f"Найдено {len(all_photo_filenames)} уникальных файлов фотографий в базе данных.")

    if not all_photo_filenames:
        logging.warning("В базе данных нет фотографий для скачивания. Создаю пустой ZIP.")
        # Если нет фотографий, создаем пустой ZIP с информационным файлом
        buffer = io.BytesIO()
        with zipfile.ZipFile(buffer, 'w') as zipf:
             zipf.writestr('info.txt', 'В базе данных не найдено фотографий для скачивания.')
        buffer.seek(0)
        return send_file(buffer, mimetype='application/zip', as_attachment=True, download_name='product_photos_empty.zip')

    # Используем BytesIO для создания ZIP архива в памяти
    buffer = io.BytesIO()

    # Используем TemporaryDirectory для безопасного скачивания файлов во временное место
    # Это автоматически удалит директорию и ее содержимое после выхода из блока with
    try:
        with tempfile.TemporaryDirectory() as temp_dir:
            logging.info(f"Создана временная директория для скачивания: {temp_dir}")
            downloaded_files_paths = []

            # Скачиваем каждый файл фотографии
            for filename in all_photo_filenames:
                remote_path = f"photos/{filename}"
                local_path = os.path.join(temp_dir, filename) # Сохраняем во временной директории

                # Проверяем, существует ли файл уже во временной директории (на всякий случай)
                if os.path.exists(local_path):
                     logging.debug(f"Файл уже существует во временной директории, пропуск скачивания: {local_path}")
                     downloaded_files_paths.append(local_path)
                     continue # Пропускаем скачивание, если файл уже есть

                logging.info(f"Попытка скачивания файла: {remote_path}")
                try:
                    # Скачиваем файл из HF Hub в нашу временную директорию
                    # cache_dir=None предотвращает кэширование во временной директории
                    downloaded_file_path = hf_hub_download(
                        repo_id=REPO_ID,
                        filename=remote_path,
                        repo_type="dataset",
                        token=HF_TOKEN_READ,
                        local_dir=temp_dir,
                        local_dir_use_symlinks=False,
                        cache_dir=None # Не используем кэш HF Hub для временных файлов
                    )
                    # Проверяем, что hf_hub_download вернул путь и файл существует
                    if downloaded_file_path and os.path.exists(downloaded_file_path):
                         downloaded_files_paths.append(downloaded_file_path)
                         logging.info(f"Файл успешно скачан и добавлен в список для архивации: {downloaded_file_path}")
                    else:
                         logging.warning(f"Скачивание файла {remote_path} не удалось или файл не найден по пути: {downloaded_file_path}")

                except Exception as e:
                    # Логируем ошибку для этого файла, но продолжаем скачивать остальные
                    logging.error(f"Ошибка скачивания файла {remote_path} из Hugging Face: {e}")
                    # Файл не будет добавлен в downloaded_files_paths, если произошла ошибка

            if not downloaded_files_paths:
                 logging.error("После попыток скачивания ни одного файла не было успешно загружено.")
                 return "Ошибка: Не удалось скачать ни одной фотографии.", 500 # Возвращаем ошибку, если ни один файл не скачался

            # Создаем ZIP архив из скачанных файлов
            logging.info(f"Начинаю создание ZIP архива из {len(downloaded_files_paths)} скачанных файлов.")
            with zipfile.ZipFile(buffer, 'w', zipfile.ZIP_DEFLATED) as zipf:
                for local_path in downloaded_files_paths:
                    # Добавляем файл в архив, используя только его базовое имя
                    arcname = os.path.basename(local_path)
                    try:
                        zipf.write(local_path, arcname=arcname)
                        logging.debug(f"Добавлен файл в ZIP: {arcname}")
                    except Exception as e:
                         logging.error(f"Ошибка при добавлении файла {local_path} в ZIP архив: {e}")
                         # Можно продолжить, если ошибка только с одним файлом

            # Перемещаем указатель буфера в начало
            buffer.seek(0)

            logging.info("ZIP архив успешно создан в памяти. Отправляю файл пользователю.")

            # Отправляем ZIP файл пользователю
            return send_file(
                buffer,
                mimetype='application/zip',
                as_attachment=True,
                download_name='product_photos.zip' # Имя файла, которое увидит пользователь при скачивании
            )

    except Exception as e:
        # Общая ошибка при работе с временной директорией или zip
        logging.error(f"Произошла общая ошибка при создании или скачивании ZIP архива: {e}")
        return f"Произошла ошибка при обработке фотографий: {e}", 500

# --- Конец новой функции ---


@app.route('/')
def catalog():
    data = load_data()
    # Сортируем продукты по дате добавления для отображения новых сверху
    products = sorted(data.get('products', []), key=lambda x: x.get('added_at', ''), reverse=True)
    categories = data.get('categories', [])

    # HTML шаблон для каталога - остался прежним, кроме добавления LOGO_URL в header-logo
    catalog_html = '''
    <!DOCTYPE html>
    <html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Asdem - нижнее белье оптом </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>
            :root {
                --primary-color: #F48FB1;
                --secondary-color: #CE93D8;
                --text-color: #333;
                --bg-color: #FCE4EC;
                --light-text: #fff;
                --shadow-color: rgba(0, 0, 0, 0.1);
            }
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-family: 'Poppins', sans-serif;
                background-color: var(--bg-color);
                color: var(--text-color);
                line-height: 1.6;
                transition: background-color 0.3s, color 0.3s;
            }
            .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 var(--primary-color);
            }
            .header-logo {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                object-fit: cover;
                box-shadow: 0 4px 15px var(--shadow-color);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .header-logo:hover {
                transform: scale(1.1);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            }
            .header h1 {
                font-size: 1.5rem;
                font-weight: 600;
                margin-left: 15px;
                color: var(--primary-color);
            }
            .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 var(--secondary-color);
                border-radius: 8px;
                outline: none;
                box-shadow: 0 2px 5px var(--shadow-color);
                transition: all 0.3s ease;
            }
            #search-input:focus {
                border-color: var(--primary-color);
                box-shadow: 0 4px 15px rgba(244, 143, 177, 0.3);
            }
            .category-filter {
                padding: 8px 16px;
                border: 1px solid var(--secondary-color);
                border-radius: 8px;
                background-color: var(--light-text);
                color: var(--text-color);
                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: var(--primary-color);
                color: var(--light-text);
                border-color: var(--primary-color);
                box-shadow: 0 2px 10px rgba(244, 143, 177, 0.4);
            }
            .products-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); # Используем auto-fit для лучшей адаптивности
                gap: 15px;
                padding: 10px;
            }
            .product {
                background: var(--light-text);
                border-radius: 15px;
                padding: 15px;
                box-shadow: 0 4px 15px var(--shadow-color);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
                overflow: hidden;
                display: flex; # Используем flexbox для лучшего выравнивания содержимого
                flex-direction: column;
            }
            .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;
                flex-shrink: 0; # Изображение не сжимается
            }
            .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;
                flex-grow: 0; # Заголовок не растет
            }
            .product-price {
                font-size: 1.1rem;
                color: #ef4444;
                font-weight: 700;
                text-align: center;
                margin: 5px 0;
                flex-grow: 0; # Цена не растет
            }
            .product-description {
                font-size: 0.8rem;
                color: #718096;
                text-align: center;
                margin-bottom: 15px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex-grow: 0; # Описание не растет
            }
            .product-button {
                display: block;
                width: 100%;
                padding: 8px;
                border: none;
                border-radius: 8px;
                background-color: var(--primary-color);
                color: var(--light-text);
                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;
                flex-grow: 1; # Кнопки могут немного растягиваться, если нужно
                display: flex; # Используем flexbox для выравнивания текста внутри кнопки
                justify-content: center;
                align-items: center;
            }
            .product-button:hover {
                background-color: #E91E63;
                box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
                transform: translateY(-2px);
            }
            .add-to-cart {
                background-color: var(--secondary-color);
            }
            .add-to-cart:hover {
                background-color: #BA68C8;
                box-shadow: 0 4px 15px rgba(186, 104, 200, 0.4);
            }
            #cart-button {
                position: fixed;
                bottom: 20px;
                right: 20px;
                background-color: #ef4444;
                color: var(--light-text);
                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;
                display: flex; # Центрируем иконку
                justify-content: center;
                align-items: center;
            }
             #cart-button.visible {
                display: flex; # Показываем, если есть товары
            }
            .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);
                overflow: auto; # Добавляем прокрутку для модальных окон
            }
            .modal-content {
                background: var(--light-text);
                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;
            }
            @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: var(--primary-color);
            }
            .cart-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 0;
                border-bottom: 1px solid var(--secondary-color);
            }
            .cart-item img {
                width: 50px;
                height: 50px;
                object-fit: contain;
                border-radius: 8px;
                margin-right: 15px;
                flex-shrink: 0;
            }
            .cart-item > div {
                 flex-grow: 1;
                 margin-right: 10px; # Отступ между информацией и ценой
            }
            .cart-item span {
                 flex-shrink: 0; # Цена не сжимается
                 font-weight: bold;
            }

            .quantity-input, .color-select {
                width: 100%;
                max-width: 200px; # Увеличиваем максимальную ширину
                padding: 10px; # Увеличиваем отступы
                border: 1px solid var(--secondary-color);
                border-radius: 8px;
                font-size: 1rem;
                margin: 10px 0; # Увеличиваем отступы
                display: block; # Каждый элемент на новой строке
            }
            .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: var(--secondary-color);
                margin-left: 10px; # Отступ от кнопки очистки
            }
            .order-button:hover {
                background-color: #BA68C8;
                box-shadow: 0 4px 15px rgba(186, 104, 200, 0.4);
            }
             .button-group {
                 margin-top: 20px;
                 text-align: right;
             }
             .button-group .product-button {
                 display: inline-block; # Делаем кнопки строчно-блочными
                 width: auto; # Ширина по содержимому
                 margin-left: 10px;
             }


            @media (max-width: 768px) {
                 .header {
                     flex-direction: column;
                     text-align: center;
                 }
                 .header h1 {
                     margin-left: 0;
                     margin-top: 10px;
                 }
                .products-grid {
                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); # Меньший размер на мелких экранах
                }
                 .modal-content {
                     margin: 10% auto; # Больше отступ сверху на мелких экранах
                 }
                 .cart-item {
                     flex-direction: column;
                     align-items: flex-start;
                 }
                 .cart-item > div {
                      margin-bottom: 10px;
                      margin-right: 0;
                 }
                 .button-group {
                     text-align: center;
                 }
                 .button-group .product-button {
                     margin: 5px; # Отступы между кнопками
                 }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <img src="{{ logo_url }}" alt="Logo" class="header-logo"> # Используем переменную logo_url
                <h1>Каталог</h1>
            </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|e }}">{{ category|e }}</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|e }}"
                     data-description="{{ product['description']|lower|e }}"
                     data-category="{{ product.get('category', 'Без категории')|e }}">
                    {% 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]|e }}" # Экранируем filename
                             alt="{{ product['name']|e }}" # Экранируем alt текст
                             loading="lazy">
                    </div>
                    {% else %}
                     <div class="product-image">
                         <img src="https://via.placeholder.com/300?text=No+Image"
                              alt="No Image Available"
                              loading="lazy">
                     </div>
                    {% endif %}
                    <h2>{{ product['name']|e }}</h2> # Экранируем имя
                    <div class="product-price">{{ product['price']|e }} с</div> # Экранируем цену
                    <p class="product-description">{{ product['description'][:50]|e }}{% if product['description']|length > 50 %}...{% endif %}</p> # Экранируем описание
                    <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
                    <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
                </div>
                {% endfor %}
            </div>
             {% if not products %}
             <p style="text-align: center;">Нет товаров в каталоге.</p>
             {% endif %}
        </div>

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

        <div id="quantityModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('quantityModal')">×</span>
                <h2>Укажите количество и цвет</h2>
                <label for="quantityInput">Количество:</label>
                <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
                 <label for="colorSelect">Цвет:</label>
                <select id="colorSelect" class="color-select"></select>
                <button class="product-button" onclick="confirmAddToCart()">Добавить в корзину</button>
            </div>
        </div>

        <div id="cartModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('cartModal')">×</span>
                <h2>Корзина</h2>
                <div id="cartContent"></div>
                <div class="button-group"> # Используем новую группу для кнопок
                    <strong>Итого: <span id="cartTotal">0</span> с</strong>
                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</mi>
                    <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> {# jQuery не используется, можно удалить #}
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script> {# Popper не используется, можно удалить #}
        <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;

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

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

            function loadProductDetails(index) {
                 const repoId = "{{ repo_id }}"; // Получаем repo_id из jinja2
                fetch('/product/' + index)
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById('modalContent').innerHTML = data;
                        // Важно: Swiper должен быть инициализирован после того, как контент загружен и добавлен в DOM
                        // Также передаем repo_id в initializeSwiper, если он там нужен для динамических путей (хотя сейчас он в шаблоне)
                        initializeSwiper();
                    })
                    .catch(error => console.error('Ошибка загрузки деталей продукта:', error));
            }

            function initializeSwiper() {
                 // Проверяем, существует ли swiper-container перед инициализацией
                 const swiperContainer = document.querySelector('.swiper-container');
                 if (swiperContainer) {
                     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 },
                          // Убедимся, что изображения загружены перед инициализацией Swiper
                          // или отложим инициализацию до загрузки изображений в слайдах
                          // Пока используем простую инициализацию
                     });
                 } else {
                     console.warn("Swiper container not found.");
                 }
            }


            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 || !products[selectedProductIndex]) {
                    alert("Ошибка: Выберите товар для добавления.");
                    return;
                }
                const quantityInput = document.getElementById('quantityInput');
                const colorSelect = document.getElementById('colorSelect');

                const quantity = parseInt(quantityInput.value) || 1;
                const color = colorSelect.value;

                if (quantity <= 0) {
                    alert("Укажите количество больше 0");
                    quantityInput.value = 1; // Сбрасываем на 1
                    return;
                }

                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
                const product = products[selectedProductIndex];
                // Используем id товара + цвет для уникальности в корзине
                // Если у товаров есть уникальный id, лучше использовать его вместо имени
                const cartItemId = `${product.name || 'unknown'}-${color}`;

                const existingItem = cart.find(item => item.id === cartItemId);

                if (existingItem) {
                    existingItem.quantity += quantity;
                } else {
                    cart.push({
                        id: cartItemId,
                        name: product.name,
                        price: parseFloat(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();
                console.log("Товар добавлен в корзину:", cart); // Логируем для отладки
            }

            function updateCartButton() {
                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
                const cartButton = document.getElementById('cart-button');
                if (cart.length > 0) {
                    cartButton.classList.add('visible');
                } else {
                    cartButton.classList.remove('visible');
                }
                 // Можно также добавить счетчик товаров на кнопку
                 // const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
                 // cartButton.textContent = `🛒 ${totalItems}`;
            }

            function openCartModal() {
                 const repoId = "{{ repo_id }}"; // Получаем repo_id для формирования URL фото
                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
                const cartContent = document.getElementById('cartContent');
                let total = 0;

                if (cart.length === 0) {
                    cartContent.innerHTML = '<p style="text-align: center;">Корзина пуста</p>';
                    document.getElementById('cartTotal').textContent = '0';
                } else {
                    cartContent.innerHTML = cart.map((item, index) => {
                        // Проверка, что item.price является числом
                        const itemPrice = parseFloat(item.price) || 0;
                        const itemTotal = itemPrice * item.quantity;
                        total += itemTotal;

                        // Формируем URL фото, если оно есть
                        const photoUrl = item.photo ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${item.photo}` : 'https://via.placeholder.com/50?text=No+Img';
                        const photoHtml = `<img src="${photoUrl}" alt="${item.name}">`;

                        return `
                            <div class="cart-item">
                                <div style="display: flex; align-items: center;">
                                    ${photoHtml}
                                    <div>
                                        <strong>${item.name}</strong>
                                        <p>${itemPrice.toFixed(2)} с × ${item.quantity} (Цвет: ${item.color})</p>
                                    </div>
                                </div>
                                <span>${itemTotal.toFixed(2)} с</span>
                            </div>
                        `;
                    }).join('');

                    document.getElementById('cartTotal').textContent = total.toFixed(2);
                }


                document.getElementById('cartModal').style.display = 'block';
            }

            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 = parseFloat(item.price) || 0;
                    const itemTotal = itemPrice * item.quantity;
                    total += itemTotal;
                    // Убедимся, что все части строки закодированы для URL
                    const itemName = encodeURIComponent(item.name || 'Неизвестный товар');
                    const itemColor = encodeURIComponent(item.color || 'Не указан');
                    orderText += `${index + 1}. ${itemName} - ${itemPrice.toFixed(2)} с × ${item.quantity} (Цвет: ${itemColor})%0A`;
                });
                orderText += `Итого: ${total.toFixed(2)} с`;
                // Номер телефона
                const phoneNumber = '996772179559'; // Замените на актуальный номер WhatsApp
                window.open(`https://api.whatsapp.com/send?phone=${phoneNumber}&text=${orderText}`, '_blank');
                // Опционально можно очистить корзину после отправки заказа
                // clearCart();
            }

            function clearCart() {
                if (confirm("Вы уверены, что хотите очистить корзину?")) {
                    localStorage.removeItem('cart');
                    closeModal('cartModal');
                    updateCartButton();
                    console.log("Корзина очищена"); // Логируем
                }
            }

            // Закрытие модальных окон при клике вне контента
            window.onclick = function(event) {
                if (event.target.classList && event.target.classList.contains('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 => {
                    // Получаем данные из data-атрибутов
                    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 ? 'flex' : 'none'; // Используем 'flex' т.к. .product теперь flex-контейнер
                });
            }

            // Инициализация корзины при загрузке страницы
            updateCartButton();

             // Дополнительно: Сортируем продукты по дате добавления при загрузке страницы
             // Этот код должен выполняться после того, как `products` загружены из Jinja2
             // Jinja2 уже отсортировал products, но если бы они загружались через AJAX, потребовалась бы сортировка здесь.
             // filterProducts(); // Применяем фильтры по умолчанию (все категории, пустой поиск) при загрузке
        </script>
        {# Скрипты jQuery и Popper не используются в вашем текущем коде, их можно безопасно удалить #}
        {# <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> #}

    </body>
    </html>
    '''
    # Передаем logo_url как отдельную переменную, т.к. она используется напрямую в href
    return render_template_string(catalog_html, products=products, categories=categories, repo_id=REPO_ID, logo_url=LOGO_URL)


@app.route('/product/<int:index>')
def product_detail(index):
    data = load_data()
    products = data.get('products', []) # Используем .get() с дефолтом []
    try:
        product = products[index]
    except (IndexError, TypeError): # Добавляем TypeError на случай, если products не список
        logging.error(f"Попытка доступа к несуществующему индексу продукта: {index}")
        return "Продукт не найден", 404

    # HTML шаблон для деталей продукта
    detail_html = '''
    <div class="container" style="padding: 20px;">
        <h2 style="font-size: 1.8rem; font-weight: 600; margin-bottom: 20px;">{{ product['name']|e }}</h2> {# Экранируем имя #}
        <div class="swiper-container" style="max-width: 400px; margin: 0 auto 20px;">
            <div class="swiper-wrapper">
                {% if product.get('photos') and product['photos']|length > 0 %}
                {% 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|e }}" {# Экранируем filename #}
                             alt="{{ product['name']|e }}" {# Экранируем alt текст #}
                             style="max-width: 100%; max-height: 300px; object-fit: contain;">
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <div class="swiper-slide" style="background-color: #fff; display: flex; justify-content: center; align-items: center;">
                    <div class="swiper-zoom-container">
                         <img src="https://via.placeholder.com/300?text=No+Image" alt="No Image Available" style="max-width: 100%; max-height: 300px; object-fit: contain;">
                    </div>
                </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', 'Без категории')|e }}</p> {# Экранируем категорию #}
        <p><strong>Цена:</strong> {{ product.get('price', 'N/A')|e }} с</p> {# Экранируем цену, добавляем дефолт #}
        <p><strong>Описание:</strong> {{ product.get('description', 'Нет описания')|e }}</p> {# Экранируем описание, добавляем дефолт #}
        <p><strong>Доступные цвета:</strong> {{ product.get('colors', ['Не указан'])|join(', ')|e }}</p> {# Экранируем цвета, добавляем дефолт #}
    </div>
    '''
    return render_template_string(detail_html, product=product, repo_id=REPO_ID)


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

    # Убедимся, что категории уникальны и сортированы (необязательно, но полезно)
    categories = sorted(list(set(c for c in categories if isinstance(c, str) and c.strip())))
    # Обновляем данные после возможной очистки категорий
    data['categories'] = categories


    if request.method == 'POST':
        action = request.form.get('action')
        logging.debug(f"Админ: Получено действие POST - {action}")

        if action == 'add_category':
            category_name = request.form.get('category_name')
            if category_name and isinstance(category_name, str) and category_name.strip():
                cleaned_name = category_name.strip()
                if cleaned_name not in categories:
                    categories.append(cleaned_name)
                    categories.sort() # Сортируем после добавления
                    data['categories'] = categories # Обновляем в словаре data
                    save_data(data)
                    logging.info(f"Админ: Добавлена категория '{cleaned_name}'.")
                else:
                     logging.warning(f"Админ: Попытка добавить существующую категорию '{cleaned_name}'.")
                # Всегда перенаправляем после POST запроса
                return redirect(url_for('admin'))
            else:
                logging.warning("Админ: Попытка добавить пустую или некорректную категорию.")
                return "Ошибка: Не указано название категории или оно некорректно.", 400

        elif action == 'delete_category':
            try:
                category_index = int(request.form.get('category_index'))
                if 0 <= category_index < len(categories):
                    deleted_category = categories.pop(category_index)
                    # Обновляем в словаре data перед сохранением
                    data['categories'] = categories
                    # Проходим по продуктам и меняем удаленную категорию на "Без категории"
                    for product in products:
                        if product.get('category') == deleted_category:
                            product['category'] = 'Без категории'
                    save_data(data)
                    logging.info(f"Админ: Удалена категория '{deleted_category}'.")
                    return redirect(url_for('admin'))
                else:
                    logging.warning(f"Админ: Попытка удалить категорию по некорректному индексу {category_index}.")
                    return "Ошибка: Некорректный индекс категории.", 400
            except (ValueError, TypeError):
                 logging.error("Админ: Получен некорректный индекс категории для удаления.")
                 return "Ошибка: Некорректный индекс категории.", 400


        elif action == 'add':
            name = request.form.get('name', '').strip()
            price_str = request.form.get('price', '').strip()
            description = request.form.get('description', '').strip()
            category = request.form.get('category', 'Без категории').strip()
            photos_files = request.files.getlist('photos')
            colors_list = request.form.getlist('colors') # Получаем список цветов

            if not name or not price_str or not description:
                logging.warning("Админ: Попытка добавить товар с незаполненными обязательными полями.")
                return "Ошибка: Заполните все обязательные поля (Название, Цена, Описание).", 400

            try:
                 # Заменяем запятую на точку для корректного преобразования в float
                 price = float(price_str.replace(',', '.'))
                 if price < 0:
                      raise ValueError("Цена не может быть отрицательной")
            except (ValueError, TypeError):
                 logging.warning(f"Админ: Попытка добавить товар с некорректной ценой: '{price_str}'.")
                 return "Ошибка: Некорректное значение цены.", 400

            photos_list = []
            if photos_files:
                logging.info(f"Админ: Получено {len(photos_files)} файлов для загрузки.")
                api = HfApi()
                uploads_dir = 'uploads' # Временная директория для сохранения перед загрузкой на HF
                os.makedirs(uploads_dir, exist_ok=True) # Убедимся, что директория существует

                for photo in photos_files[:10]: # Ограничиваем до 10 файлов
                    if photo and photo.filename:
                        original_filename = secure_filename(photo.filename)
                        # Добавляем timestamp к имени файла, чтобы избежать коллизий
                        timestamp = datetime.now().strftime("%Y%m%d%H%M%S%f")
                        photo_filename = f"{timestamp}_{original_filename}"
                        temp_path = os.path.join(uploads_dir, photo_filename)

                        try:
                            photo.save(temp_path)
                            logging.debug(f"Админ: Файл сохранен локально: {temp_path}")

                            # Загружаем файл на Hugging Face
                            logging.info(f"Админ: Загрузка фото '{photo_filename}' на Hugging Face...")
                            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"Добавлено фото {photo_filename} для товара '{name}'"
                            )
                            logging.info(f"Админ: Фото '{photo_filename}' успешно загружено на Hugging Face.")
                            photos_list.append(photo_filename) # Добавляем имя файла в список для JSON

                        except Exception as e:
                            logging.error(f"Админ: Ошибка загрузки фото '{original_filename}' на Hugging Face: {e}")
                            # Продолжаем, даже если один файл не загрузился

                        finally:
                            # Удаляем временный файл после попытки загрузки
                            if os.path.exists(temp_path):
                                os.remove(temp_path)
                                logging.debug(f"Админ: Временный файл удален: {temp_path}")

            # Очищаем и фильтруем список цветов
            cleaned_colors = [color.strip() for color in colors_list if color and color.strip()]

            new_product = {
                'name': name,
                'price': price,
                'description': description,
                # Проверяем, существует ли выбранная категория, иначе "Без категории"
                'category': category if category in categories else 'Без категории',
                'photos': photos_list,
                'colors': cleaned_colors,
                'added_at': datetime.now().isoformat() # Добавляем метку времени
            }
            products.append(new_product)
            save_data(data) # Сохраняем обновленные данные
            logging.info(f"Админ: Товар '{name}' успешно добавлен.")
            return redirect(url_for('admin')) # Перенаправляем на ту же страницу после добавления

        elif action == 'edit':
            try:
                index = int(request.form.get('index'))
                if not (0 <= index < len(products)):
                     logging.warning(f"Админ: Попытка редактирования продукта по некорректному индексу {index}.")
                     return "Ошибка: Некорректный индекс продукта.", 400

                product = products[index] # Получаем продукт по индексу

                name = request.form.get('name', '').strip()
                price_str = request.form.get('price', '').strip()
                description = request.form.get('description', '').strip()
                category = request.form.get('category', 'Без категории').strip()
                photos_files = request.files.getlist('photos')
                colors_list = request.form.getlist('colors')

                if not name or not price_str or not description:
                    logging.warning(f"Админ: Попытка редактирования товара {index} с незаполненными обязательными полями.")
                    return "Ошибка: Заполните все обязательные поля (Название, Цена, Описание).", 400

                try:
                    price = float(price_str.replace(',', '.'))
                    if price < 0:
                         raise ValueError("Цена не может быть отрицательной")
                except (ValueError, TypeError):
                    logging.warning(f"Админ: Попытка редактирования товара {index} с некорректной ценой: '{price_str}'.")
                    return "Ошибка: Некорректное значение цены.", 400

                # Обновляем текстовые поля и категорию
                product['name'] = name
                product['price'] = price
                product['description'] = description
                product['category'] = category if category in categories else 'Без категории'

                # Обновляем цвета
                product['colors'] = [color.strip() for color in colors_list if color and color.strip()]

                # Обработка новых фотографий (заменяем существующие, если новые загружены)
                if photos_files and any(photo.filename for photo in photos_files):
                    logging.info(f"Админ: Получено {len(photos_files)} новых файлов для товара {index} для загрузки.")
                    new_photos_list = []
                    api = HfApi()
                    uploads_dir = 'uploads'
                    os.makedirs(uploads_dir, exist_ok=True)

                    for photo in photos_files[:10]:
                        if photo and photo.filename:
                            original_filename = secure_filename(photo.filename)
                            timestamp = datetime.now().strftime("%Y%m%d%H%M%S%f")
                            photo_filename = f"{timestamp}_{original_filename}"
                            temp_path = os.path.join(uploads_dir, photo_filename)

                            try:
                                photo.save(temp_path)
                                logging.debug(f"Админ: Файл сохранен локально: {temp_path}")
                                logging.info(f"Админ: Загрузка нового фото '{photo_filename}' на Hugging Face...")
                                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"Обновлено фото {photo_filename} для товара '{name}' (индекс {index})"
                                )
                                logging.info(f"Админ: Новое фото '{photo_filename}' успешно загружено.")
                                new_photos_list.append(photo_filename) # Добавляем новое имя в список
                            except Exception as e:
                                logging.error(f"Админ: Ошибка загрузки нового фото '{original_filename}' для товара {index}: {e}")
                            finally:
                                if os.path.exists(temp_path):
                                    os.remove(temp_path)
                                    logging.debug(f"Админ: Временный файл удален: {temp_path}")

                    # Заменяем старый список фото на новый
                    product['photos'] = new_photos_list
                    logging.info(f"Админ: Список фото для товара {index} обновлен.")

                save_data(data) # Сохраняем обновленные данные
                logging.info(f"Админ: Товар '{name}' (индекс {index}) успешно обновлен.")
                return redirect(url_for('admin')) # Перенаправляем после редактирования

            except (ValueError, TypeError):
                 logging.error("Админ: Получен некорректный индекс продукта для редактирования.")
                 return "Ошибка: Некорректный индекс продукта.", 400


        elif action == 'delete':
            try:
                index = int(request.form.get('index'))
                if 0 <= index < len(products):
                    deleted_product_name = products[index]['name']
                    del products[index]
                    save_data(data) # Сохраняем обновленные данные
                    logging.info(f"Админ: Товар '{deleted_product_name}' (индекс {index}) успешно удален.")
                    return redirect(url_for('admin')) # Перенаправляем после удаления
                else:
                    logging.warning(f"Админ: Попытка удаления продукта по некорректному индексу {index}.")
                    return "Ошибка: Некорректный индекс продукта.", 400
            except (ValueError, TypeError):
                 logging.error("Админ: Получен некорректный индекс продукта для удаления.")
                 return "Ошибка: Некорректный индекс продукта.", 400

        # Если action не распознан
        logging.warning(f"Админ: Получен нераспознанный action POST: {action}")
        return "Неизвестное действие.", 400

    # GET запрос - отображение админ-панели
    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>
            :root {
                --primary-color: #F48FB1;
                --secondary-color: #CE93D8;
                --text-color: #333;
                --bg-color: #FCE4EC;
                --light-text: #fff;
                --shadow-color: rgba(0, 0, 0, 0.1);
            }
            body {
                font-family: 'Poppins', sans-serif;
                background: var(--bg-color);
                color: var(--text-color);
                padding: 20px;
            }
            .container {
                max-width: 1200px;
                margin: 0 auto;
            }
            .header {
                display: flex;
                align-items: center;
                padding: 15px 0;
                border-bottom: 1px solid var(--primary-color);
                margin-bottom: 20px;
            }
            .header-logo {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                object-fit: cover;
                box-shadow: 0 4px 15px var(--shadow-color);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                margin-right: 15px;
            }
            .header-logo:hover {
                transform: scale(1.1);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            }
            h1, h2 {
                font-weight: 600;
                margin-bottom: 20px;
                color: var(--primary-color);
            }
            form {
                background: var(--light-text);
                padding: 20px;
                border-radius: 15px;
                box-shadow: 0 4px 15px var(--shadow-color);
                margin-bottom: 30px;
            }
            label {
                font-weight: 500;
                margin-top: 15px;
                display: block;
                margin-bottom: 5px;
            }
            input[type="text"], input[type="number"], textarea, select {
                width: 100%;
                padding: 12px;
                margin-bottom: 10px; # Уменьшен отступ снизу
                border: 1px solid var(--secondary-color);
                border-radius: 8px;
                font-size: 1rem;
                transition: all 0.3s ease;
                box-sizing: border-box; # Включаем padding и border в общую ширину
            }
             input[type="file"] {
                width: 100%;
                padding: 12px 0; # Отступы для input file
                margin-bottom: 10px;
             }

            input:focus, textarea:focus, select:focus {
                border-color: var(--primary-color);
                box-shadow: 0 0 5px rgba(244, 143, 177, 0.3);
                outline: none;
            }
             .button-group {
                 margin-top: 20px;
             }
            button {
                padding: 12px 20px;
                border: none;
                border-radius: 8px;
                background-color: var(--primary-color);
                color: var(--light-text);
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                margin-right: 10px; # Отступ между кнопками
                margin-top: 10px; # Отступ сверху
            }
            button:hover {
                background-color: #E91E63;
                box-shadow: 0 4px 15px rgba(233, 30, 99, 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 {
                display: grid;
                gap: 20px;
                margin-top: 20px;
            }
            .product-item, .category-item {
                background: var(--light-text);
                padding: 20px;
                border-radius: 15px;
                box-shadow: 0 4px 15px var(--shadow-color);
            }
             .category-item {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
             }
             .category-item h3 {
                 margin: 0; # Убираем отступ у заголовка категории
                 flex-grow: 1;
                 margin-right: 10px;
             }
             .category-item form {
                 margin: 0;
                 padding: 0;
                 box-shadow: none;
                 background: none;
             }

            .edit-form {
                margin-top: 15px;
                padding: 15px;
                background: #f7fafc;
                border-radius: 10px;
                box-shadow: none; # Убираем тень у вложенной формы
            }
            .color-input-group {
                display: flex;
                gap: 10px;
                align-items: center; # Выравнивание по центру
                margin-bottom: 10px; # Отступ между группами цветов
            }
             .color-input-group input[type="text"] {
                 flex-grow: 1; # Инпут занимает доступное место
                 margin-bottom: 0; # Убираем нижний отступ у инпута внутри группы
             }
             .remove-color-btn {
                 background-color: #9E9E9E; # Серый цвет для кнопки удаления
                 margin: 0; # Убираем отступы
                 padding: 10px;
                 border-radius: 50%; # Делаем круглый
                 width: 30px;
                 height: 30px;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 font-size: 0.8rem;
             }
             .remove-color-btn:hover {
                 background-color: #757575;
                 box-shadow: none;
                 transform: none;
             }

            .add-color-btn {
                background-color: var(--secondary-color);
                 margin-right: 10px; # Отступ от следующей кнопки
                 margin-top: 0; # Убираем верхний отступ
            }
            .add-color-btn:hover {
                background-color: #BA68C8;
            }
             .product-photos {
                 display: flex;
                 flex-wrap: wrap;
                 gap: 10px;
                 margin-top: 10px;
             }
             .product-photos img {
                 max-width: 80px; # Уменьшаем размер превью
                 height: auto;
                 border-radius: 5px;
                 border: 1px solid #eee;
             }
             details summary {
                cursor: pointer;
                font-weight: 600;
                color: var(--primary-color);
                margin-top: 15px;
             }
             details summary:focus {
                 outline: none;
             }
             details[open] summary {
                 margin-bottom: 15px;
             }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                 <img src="{{ logo_url }}" alt="Logo" class="header-logo"> {# Используем переменную logo_url #}
                <h1>Админ-панель</h1>
            </div>

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

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

            <h2>Список категорий (всего: {{ categories|length }})</h2> {# Показываем количество #}
            {% if categories %}
            <div class="category-list">
                {% for category in categories %}
                <div class="category-item">
                    <h3>{{ category|e }}</h3> {# Экранируем #}
                    <form method="POST" style="display: inline-block;"> {# Используем inline-block #}
                        <input type="hidden" name="action" value="delete_category">
                        <input type="hidden" name="category_index" value="{{ loop.index0 }}">
                        <button type="submit" class="delete-button" onclick="return confirm('Вы уверены, что хотите удалить категорию "{{ category|e }}"?');">Удалить</button> {# Добавляем подтверждение #}
                    </form>
                </div>
                {% endfor %}
            </div>
             {% else %}
             <p>Нет добавленных категорий.</p>
             {% endif %}


            <h2>Управление базой данных и файлами</h2> {# Обновленный заголовок #}
             <div class="button-group"> {# Группируем кнопки #}
                <form method="POST" action="{{ url_for('backup') }}" style="display: inline-block; margin-right: 10px;">
                    <button type="submit">Создать копию базы (HF)</button>
                </form>
                <form method="GET" action="{{ url_for('download') }}" style="display: inline-block; margin-right: 10px;">
                    <button type="submit">Скачать базу (JSON)</button>
                </form>
                <form method="GET" action="{{ url_for('download_photos') }}" style="display: inline-block;"> {# Ссылка на новый эндпоинт #}
                    <button type="submit">Скачать все фото (ZIP)</button>
                </form>
             </div>

            <h2>Список товаров (всего: {{ products|length }})</h2> {# Показываем количество #}
             {% if products %}
            <div class="product-list">
                {% for product in products %}
                <div class="product-item">
                    <h3>{{ product['name']|e }}</h3> {# Экранируем #}
                    <p><strong>Категория:</strong> {{ product.get('category', 'Без категории')|e }}</p> {# Экранируем #}
                    <p><strong>Цена:</strong> {{ product.get('price', 'N/A')|e }} с</p> {# Экранируем #}
                    <p><strong>Описание:</strong> {{ product.get('description', 'Нет описания')|e }}</p> {# Экранируем #}
                    <p><strong>Цвета:</strong> {{ product.get('colors', ['Не указан'])|join(', ')|e }}</p> {# Экранируем #}
                    {% if product.get('photos') and product['photos']|length > 0 %}
                    <div class="product-photos"> {# Применяем класс для галереи фото #}
                        {% for photo in product['photos'] %}
                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo|e }}" {# Экранируем filename #}
                             alt="{{ product['name']|e }}" {# Экранируем alt текст #}
                             loading="lazy">
                        {% 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']|e }}" required> {# Экранируем #}
                            <label>Цена:</label>
                            <input type="number" name="price" step="0.01" value="{{ product['price']|e }}" required> {# Экранируем #}
                            <label>Описание:</label>
                            <textarea name="description" rows="4" required>{{ product['description']|e }}</textarea> {# Экранируем #}
                            <label>Категория:</label>
                            <select name="category">
                                <option value="Без категории" {% if product.get('category', 'Без категории') == 'Без категории' %}selected{% endif %}>Без категории</option>
                                {% for category in categories %}
                                <option value="{{ category|e }}" {% if product.get('category') == category %}selected{% endif %}>{{ category|e }}</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|e }}"> {# Экранируем #}
                                     <button type="button" class="remove-color-btn" onclick="removeColorInput(this)">x</button>
                                </div>
                                {% endfor %}
                                 {# Если нет цветов, добавляем один пустой инпут при открытии для удобства #}
                                 {% if not product.get('colors') %}
                                 <div class="color-input-group">
                                     <input type="text" name="colors" placeholder="Например: Красный">
                                      <button type="button" class="remove-color-btn" onclick="removeColorInput(this)">x</button>
                                 </div>
                                 {% endif %}
                            </div>
                            <button type="button" class="add-color-btn" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')">Добавить цвет</button>
                             <div class="button-group">
                                <button type="submit">Сохранить</button>
                             </div>
                        </form>
                    </details>
                     <div class="button-group" style="text-align: left;"> {# Выравниваем кнопку удаления #}
                        <form method="POST" style="display: inline-block;"> {# Используем inline-block #}
                            <input type="hidden" name="action" value="delete">
                            <input type="hidden" name="index" value="{{ loop.index0 }}">
                            <button type="submit" class="delete-button" onclick="return confirm('Вы уверены, что хотите удалить товар "{{ product['name']|e }}"?');">Удалить товар</button> {# Добавляем подтверждение #}
                        </form>
                     </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
             <p>Нет добавленных товаров.</p>
            {% endif %}
        </div>
        <script>
             // Функция для добавления поля ввода цвета
            function addColorInput(containerId) {
                const container = document.getElementById(containerId);
                const newInputGroup = document.createElement('div');
                newInputGroup.className = 'color-input-group';
                newInputGroup.innerHTML = `
                    <input type="text" name="colors" placeholder="Например: Красный">
                    <button type="button" class="remove-color-btn" onclick="removeColorInput(this)">x</button>
                `;
                container.appendChild(newInputGroup);
            }

             // Функция для удаления поля ввода цвета
            function removeColorInput(buttonElement) {
                const inputGroup = buttonElement.parentElement;
                inputGroup.remove();
                // Опционально: если удалили последний инпут, можно добавить пустой
                // const container = inputGroup.parentElement;
                // if (container.children.length === 0) {
                //     addColorInput(container.id);
                // }
            }

             // Добавляем начальную кнопку удаления для существующих полей цвета при загрузке
             document.addEventListener('DOMContentLoaded', function() {
                 document.querySelectorAll('.color-input-group').forEach(function(group) {
                     if (!group.querySelector('.remove-color-btn')) {
                         const removeButton = document.createElement('button');
                         removeButton.type = 'button';
                         removeButton.className = 'remove-color-btn';
                         removeButton.textContent = 'x';
                         removeButton.onclick = function() { removeColorInput(this); };
                         group.appendChild(removeButton);
                     }
                 });
             });
        </script>
    </body>
    </html>
    '''
     # Передаем logo_url как отдельную переменную
    return render_template_string(admin_html, products=products, categories=categories, repo_id=REPO_ID, logo_url=LOGO_URL)


@app.route('/backup', methods=['POST'])
def backup():
    """Вручную создает резервную копию базы данных на Hugging Face."""
    logging.info("Получен запрос на ручное резервное копирование.")
    try:
        # Нет необходимости загружать данные здесь, просто загружаем локальный файл
        upload_db_to_hf()
        return "Резервная копия базы данных успешно создана на Hugging Face.", 200
    except Exception as e:
        logging.error(f"Ошибка ручного резервного копирования: {e}")
        return f"Произошла ошибка при создании резервной копии: {e}", 500

@app.route('/download', methods=['GET'])
def download():
    """Вручную скачивает базу данных с Hugging Face."""
    logging.info("Получен запрос на ручное скачивание базы данных.")
    try:
        download_db_from_hf()
        # Вместо простого сообщения, отправляем сам файл для скачивания
        return send_file(DATA_FILE, as_attachment=True, download_name=DATA_FILE)
    except FileNotFoundError:
         return f"Файл '{DATA_FILE}' не найден локально после попытки скачивания. Репозиторий может быть пуст или не существует.", 404
    except RepositoryNotFoundError:
         return f"Репозиторий '{REPO_ID}' не найден на Hugging Face.", 404
    except Exception as e:
        logging.error(f"Ошибка ручного скачивания базы данных: {e}")
        return f"Произошла ошибка при скачивании базы данных: {e}", 500


if __name__ == '__main__':
    # Запускаем периодический бэкап в отдельном потоке
    logging.info("Запуск потока периодического резервного копирования.")
    backup_thread = threading.Thread(target=periodic_backup, daemon=True)
    backup_thread.start()

    # При старте приложения пытаемся загрузить данные
    logging.info("Попытка загрузки данных при старте приложения.")
    try:
        load_data()
        logging.info("Данные успешно загружены или инициализированы при старте.")
    except Exception as e:
        logging.error(f"Критическая ошибка при загрузке/инициализации базы данных при старте: {e}")
        # Приложение может продолжить работу с пустой базой, но нужно уведомить

    # Запускаем Flask приложение
    logging.info("Запуск Flask приложения.")
    # debug=True следует использовать только при разработке.
    # Для production используйте продакшн-сервер (Gunicorn, uWSGI и т.д.)
    app.run(debug=True, host='0.0.0.0', port=7860)