// Определяем соответствия данных объектному хранилищу
const dataMapping = {
    languages: {
        data: languageData,
        storeName: "languages",
        keyPath: "id",
        fields: ["id", "ru_name", "en_name", "zh_name"]
    },
    types: {
        data: typeData,
        storeName: "types",
        keyPath: "id",
        fields: ["id", "ru_name", "en_name", "zh_name"]
    },
    colors: {
        data: colorData,
        storeName: "colors",
        keyPath: "id",
        fields: ["id", "ru_name", "en_name", "zh_name", "hex"]
    },
    flagNames: {
        data: flagNameData,
        storeName: "flagNames",
        keyPath: ["flag_id", "language_id"], // Составной ключ
        fields: ["flag_id", "language_id", "short_name", "long_name"]
    },
    flags: {
        data: flagData,
        storeName: "flags",
        keyPath: "id",
        fields: ["id", "is_index_ISO", "resolution", "resolution_ratio", "colors", "types", "originalNames"]
    },
    flagSubdivisions: {
        data: flagSubdivisionsData,
        storeName: "flagSubdivisions",
        keyPath: "id",
        fields: ["category_id", "id", "parent_flag_id"]
    },
    flagSubdivisionNames: {
        data: flagSubdivisionNamesData,
        storeName: "flagSubdivisionNames",
        keyPath: "id",
        fields: ["id", "originalNames", "en_name", "ru_name", "zh_name"]
    },
    // Добавьте больше соответствий при необходимости
};

// Объект для отслеживания выбранных фильтров
const selectedFilters = {
    colors: new Set(),
    types: new Set(),
    languages: new Set()
};

/**
 * Инициализирует IndexedDB и загружает данные при необходимости
 * @returns {Promise<IDBDatabase>}
 */
function initDB() {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open("FlagsDatabase", 1);

        request.onupgradeneeded = function(event) {
            const db = event.target.result;

            // Создаём объектные хранилища и индексы
            Object.values(dataMapping).forEach(config => {
                if (!db.objectStoreNames.contains(config.storeName)) {
                    if (Array.isArray(config.keyPath)) {
                        const store = db.createObjectStore(config.storeName, { keyPath: config.keyPath });
                        // Создаём индексы, если необходимо
                        if (config.storeName === "flagNames") {
                            store.createIndex("flag_id", "flag_id", { unique: false });
                            store.createIndex("language_id", "language_id", { unique: false });
                        }
                        // Добавьте другие индексы при необходимости
                    } else {
                        const store = db.createObjectStore(config.storeName, { keyPath: config.keyPath });
                        // Создаём индексы
                        if (config.storeName === "languages") {
                            store.createIndex("en_name", "en_name", { unique: false });
                            store.createIndex("ru_name", "ru_name", { unique: false });
                            store.createIndex("zh_name", "zh_name", { unique: false });
                        } else if (config.storeName === "flags") {
                            store.createIndex("types", "types", { unique: false, multiEntry: true });
                            store.createIndex("colors", "colors", { unique: false, multiEntry: true });
                            // Добавьте другие индексы при необходимости
                        }
                        // Добавьте другие индексы для других хранилищ при необходимости
                    }
                }
            });
        };

        request.onsuccess = function(event) {
            const db = event.target.result;
            console.log("База данных успешно открыта");
            resolve(db);
        };

        request.onerror = function(event) {
            console.error("Не удалось открыть базу данных", event.target.error);
            reject(event.target.error);
        };
    });
}

/**
 * Добавляет данные в указанное объектное хранилище
 * @param {IDBDatabase} db - Открытая база данных
 * @param {string} storeName - Имя объектного хранилища
 * @param {Array} dataArray - Массив данных для добавления
 * @param {string|Array} keyPath - Ключевое поле или составной ключ
 * @returns {Promise<void>}
 */
function addData(db, storeName, dataArray, keyPath) {
    return new Promise((resolve, reject) => {
        const transaction = db.transaction([storeName], "readwrite");
        const store = transaction.objectStore(storeName);

        transaction.oncomplete = function() {
            console.log(`Все данные добавлены в ${storeName}`);
            resolve();
        };

        transaction.onerror = function(event) {
            console.error(`Ошибка при добавлении данных в ${storeName}:`, event.target.error);
            reject(event.target.error);
        };

        dataArray.forEach(item => {
            if (Array.isArray(keyPath)) {
                // Составной ключ
                const key = keyPath.map(k => item[k]);
                store.put(item, key);
            } else {
                store.put(item);
            }
        });
    });
}

/**
 * Получает количество записей в указанном объектном хранилище
 * @param {IDBDatabase} db - Открытая база данных
 * @param {string} storeName - Имя объектного хранилища
 * @returns {Promise<number>}
 */
function getCount(db, storeName) {
    return new Promise((resolve, reject) => {
        const transaction = db.transaction([storeName], "readonly");
        const store = transaction.objectStore(storeName);
        const request = store.count();

        request.onsuccess = function(event) {
            resolve(event.target.result);
        };

        request.onerror = function(event) {
            console.error(`Ошибка при подсчёте записей в ${storeName}:`, event.target.error);
            reject(event.target.error);
        };
    });
}

/**
 * Загружает все данные в IndexedDB при необходимости
 * Данные загружаются только при первом создании базы данных
 * @param {IDBDatabase} db - Открытая база данных
 * @returns {Promise<void>}
 */
async function loadData(db) {
    try {
        // Проверяем, пусто ли объектное хранилище "languages"
        const countLanguages = await getCount(db, "languages");
        if (countLanguages === 0) {
            for (const [key, config] of Object.entries(dataMapping)) {
                await addData(db, config.storeName, config.data, config.keyPath);
            }
            console.log("Все данные успешно загружены в IndexedDB.");
        } else {
            console.log("Данные уже существуют в базе данных. Загрузка не требуется.");
        }
    } catch (error) {
        console.error("Ошибка при загрузке данных:", error);
    }
}

/**
 * Получает все записи из указанного объектного хранилища
 * @param {IDBDatabase} db - Открытая IndexedDB база данных
 * @param {string} storeName - Имя объектного хранилища
 * @returns {Promise<Array>}
 */
function getAllRecords(db, storeName) {
    return new Promise((resolve, reject) => {
        const transaction = db.transaction([storeName], "readonly");
        const store = transaction.objectStore(storeName);
        const request = store.getAll();

        request.onsuccess = function(event) {
            resolve(event.target.result);
        };

        request.onerror = function(event) {
            console.error(`Ошибка при получении данных из ${storeName}:`, event.target.error);
            reject(event.target.error);
        };
    });
}

/**
 * Заполняет фильтры на основе данных из базы
 * @param {IDBDatabase} db - Открытая база данных
 * @returns {Promise<void>}
 */
async function populateAllFilters(db) {
    await populateColorFilters(db);
    await populateTypeFilters(db);
    await populateLanguageFilters(db);
}

/**
 * Заполняет фильтр по цветам
 * @param {IDBDatabase} db - Открытая база данных
 * @returns {Promise<void>}
 */
async function populateColorFilters(db) {
    const colors = await getAllRecords(db, "colors");
    const colorFiltersDiv = document.getElementById("color-filters");

    colors.forEach(color => {
        const label = document.createElement("label");
        label.classList.add("filter-option");
        label.style.display = "flex";
        label.style.alignItems = "center";

        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.value = color.id;

        const colorSquare = document.createElement("div");
        colorSquare.style.width = "15px";
        colorSquare.style.height = "15px";
        colorSquare.style.backgroundColor = color.hex;
        colorSquare.style.margin = "0 5px";
        colorSquare.style.border = "1px solid #000";

        const colorName = document.createElement("span");
        colorName.textContent = color.en_name;

        label.appendChild(checkbox);
        label.appendChild(colorSquare);
        label.appendChild(colorName);

        colorFiltersDiv.appendChild(label);
    });
}

/**
 * Заполняет фильтр по типам
 * @param {IDBDatabase} db - Открытая база данных
 * @returns {Promise<void>}
 */
async function populateTypeFilters(db) {
    const types = await getAllRecords(db, "types");
    const typeFiltersDiv = document.getElementById("type-filters");

    types.forEach(type => {
        const label = document.createElement("label");
        label.classList.add("filter-option");
        label.innerHTML = `
            <input type="checkbox" value="${type.id}" /> ${type.en_name}
        `;
        typeFiltersDiv.appendChild(label);
    });
}

/**
 * Заполняет фильтр по языкам
 * @param {IDBDatabase} db - Открытая база данных
 * @returns {Promise<void>}
 */
async function populateLanguageFilters(db) {
    const languages = await getAllRecords(db, "languages");
    const languageFiltersDiv = document.getElementById("language-filters");

    languages.forEach(language => {
        const label = document.createElement("label");
        label.classList.add("filter-option");
        label.innerHTML = `
            <input type="checkbox" value="${language.id}" /> ${language.en_name}
        `;
        languageFiltersDiv.appendChild(label);
    });
}

/**
 * Добавляет обработчики событий для фильтров
 */
function addFilterEventListeners() {
    // Фильтр по цветам
    const colorCheckboxes = document.querySelectorAll("#color-filters input[type='checkbox']");
    colorCheckboxes.forEach(checkbox => {
        checkbox.addEventListener("change", (event) => {
            if (event.target.checked) {
                selectedFilters.colors.add(event.target.value);
            } else {
                selectedFilters.colors.delete(event.target.value);
            }
        });
    });

    // Фильтр по типам
    const typeCheckboxes = document.querySelectorAll("#type-filters input[type='checkbox']");
    typeCheckboxes.forEach(checkbox => {
        checkbox.addEventListener("change", (event) => {
            if (event.target.checked) {
                selectedFilters.types.add(event.target.value);
            } else {
                selectedFilters.types.delete(event.target.value);
            }
        });
    });

    // Фильтр по языкам
    const languageCheckboxes = document.querySelectorAll("#language-filters input[type='checkbox']");
    languageCheckboxes.forEach(checkbox => {
        checkbox.addEventListener("change", (event) => {
            if (event.target.checked) {
                selectedFilters.languages.add(event.target.value);
            } else {
                selectedFilters.languages.delete(event.target.value);
            }
        });
    });
}

/**
 * Показать загрузочный спиннер
 */
function showLoading() {
    const spinner = document.getElementById("loading-spinner");
    if (spinner) {
        spinner.style.display = "block";
    }
}

/**
 * Скрыть загрузочный спиннер
 */
function hideLoading() {
    const spinner = document.getElementById("loading-spinner");
    if (spinner) {
        spinner.style.display = "none";
    }
}

/**
 * Обработчик для отображения данных
 * @param {IDBDatabase} db - Открытая IndexedDB база данных
 */
async function handleViewData(db) {
    const dataType = document.getElementById("data-type").value;
    const config = dataMapping[dataType];
    const searchQuery = document.getElementById("search-input").value.trim();

    if (dataType === "flags") {
        viewFlagsAsCards(db, searchQuery, selectedFilters);
    } else {
        viewData(db, config.storeName, config.fields, searchQuery);
    }
}

// Function to fetch and display data based on selected type and search query
function viewData(db, storeName, fields, searchQuery = "") {
    const output = document.getElementById("output");
    output.innerHTML = ""; // Clear previous content
    
    if (storeName === "flags") {
        // Special handling for flags: display as cards
        viewFlagsAsCards(db);
        return;
    }
    
    const transaction = db.transaction([storeName], "readonly");
    const store = transaction.objectStore(storeName);
    let request;
    
    if (searchQuery) {
        // For simplicity, perform a basic filter on the first field (e.g., 'id' or 'en_name')
        // More advanced search would require indexing and querying accordingly
        const results = [];
        store.openCursor().onsuccess = function(event) {
            const cursor = event.target.result;
            if (cursor) {
                const record = cursor.value;
                const firstField = fields[0];
                if (record[firstField] && record[firstField].toString().toLowerCase().includes(searchQuery.toLowerCase())) {
                    results.push(record);
                }
                cursor.continue();
            } else {
                displayData(results, fields);
            }
        };
    } else {
        request = store.getAll();
    
        request.onsuccess = function(event) {
            const data = event.target.result;
            displayData(data, fields);
        };
    
        request.onerror = function(event) {
            console.error("Error fetching data:", event.target.error);
        };
    }
    
}

/**
 * Функция для отображения флагов в виде карточек с учётом фильтров и поиска
 * @param {IDBDatabase} db - Открытая база данных
 * @param {string} searchQuery - Запрос поиска
 * @param {object} filters - Выбранные фильтры
 */
async function viewFlagsAsCards(db, searchQuery = "", filters = { colors: new Set(), types: new Set(), languages: new Set() }) {
    try {
        showLoading(); // Отображаем спиннер загрузки

        // Получаем все необходимые данные
        const flags = await getAllRecords(db, "flags");
        const flagNames = await getAllRecords(db, "flagNames");
        const colors = await getAllRecords(db, "colors");

        // Создаём карты для быстрого доступа
        const flagNamesMap = flagNames.reduce((map, name) => {
            if (!map[name.flag_id]) {
                map[name.flag_id] = [];
            }
            map[name.flag_id].push(name);
            return map;
        }, {});

        const colorsMap = colors.reduce((map, color) => {
            map[color.id] = color;
            return map;
        }, {});

        // Фильтруем флаги по запросу поиска и выбранным фильтрам
        let filteredFlags = flags.filter(flag => {
            // **Поиск**
            let matchesSearch = true;
            if (searchQuery) {
                const lowerSearch = searchQuery.toLowerCase();

                if (flag.id.toLowerCase().includes(lowerSearch)) {
                    matchesSearch = true;
                } else {
                    const namesForFlag = flagNamesMap[flag.id] || [];
                    matchesSearch = namesForFlag.some(nameObj => {
                        const shortName = (nameObj.short_name || "").toLowerCase();
                        const longName = (nameObj.long_name || "").toLowerCase();
                        return shortName.includes(lowerSearch) || longName.includes(lowerSearch);
                    });
                }
            }

            if (!matchesSearch) return false;

            // **Фильтрация по Цветам**
            if (filters.colors.size > 0) {
                const flagColors = new Set(flag.colors);
                const commonColors = [...filters.colors].some(color => flagColors.has(color));
                if (!commonColors) return false;
            }

            // **Фильтрация по Типам**
            if (filters.types.size > 0) {
                const flagTypes = new Set(flag.types);
                const commonTypes = [...filters.types].some(type => flagTypes.has(type));
                if (!commonTypes) return false;
            }

            // **Фильтрация по Языкам**
            if (filters.languages.size > 0) {
                const namesForFlag = flagNamesMap[flag.id] || [];
                const hasMatchingLanguage = namesForFlag.some(nameObj => filters.languages.has(nameObj.language_id));
                if (!hasMatchingLanguage) return false;
            }

            return true;
        });

        // Очищаем предыдущий вывод
        const output = document.getElementById("output");
        output.innerHTML = "";

        // Обрабатываем случай, когда нет совпадений
        if (filteredFlags.length === 0) {
            output.innerHTML = "<p>Нет флагов, соответствующих выбранным фильтрам.</p>";
            hideLoading(); // Скрываем спиннер загрузки
            return;
        }

        // Создаём DocumentFragment для оптимизации DOM
        const fragment = document.createDocumentFragment();

        // Итерация по отфильтрованным флагам и создание карточек
        for (const flag of filteredFlags) {
            // Создаём элемент карточки
            const card = document.createElement("div");
            card.className = "flag_card";

            // Индекс флага
            const flagIndex = document.createElement("span");
            flagIndex.className = "flag_index";
            flagIndex.textContent = flag.id;
            card.appendChild(flagIndex);

            // Изображение флага
            const flagImgDiv = document.createElement("div");
            flagImgDiv.className = "flag_img";
            const img = document.createElement("img");

            if (flag.parent_flag_id) {
                // Используем изображение родительского флага
                img.src = `flags/PNG-1200/PNG-0.5/${flag.parent_flag_id}-0.5-1200.png`; // Путь к изображению родительского флага
                img.alt = `Флаг ${flag.parent_flag_id}`;
            } else {
                // Собственное изображение флага
                img.src = `flags/PNG-1200/PNG-0.5/${flag.id}-0.5-1200.png`; // Путь к изображению флага
                img.alt = `Флаг ${flag.id}`;
            }

            img.onerror = function() {
                this.src = 'https://placehold.co/400'; // Путь к вашей заглушке
                this.alt = 'Изображение недоступно';
            };

            flagImgDiv.appendChild(img);
            card.appendChild(flagImgDiv);

            // Краткое название флага
            const shortName = document.createElement("div");
            shortName.className = "flag_shortname";

            const enNameObj = flagNamesMap[flag.id]?.find(fn => fn.language_id === "en");
            shortName.textContent = enNameObj ? enNameObj.short_name : "N/A";
            card.appendChild(shortName);

            // Полное название флага
            const longName = document.createElement("div");
            longName.className = "flag_longname";
            longName.textContent = flag.originalNames && flag.originalNames.length > 0 
                ? flag.originalNames[0].original_name 
                : "N/A";
            card.appendChild(longName);

            // Названия флага на разных языках
            const namesContainer = document.createElement("div");
            namesContainer.className = "flag_names_container";

            const namesForFlag = flagNamesMap[flag.id] || [];

            for (const nameObj of namesForFlag) {
                const langSpan = document.createElement("span");
                langSpan.className = "flag_original_lang";

                // Получаем название языка
                const languageTitle = await getLanguageTitle(db, nameObj.language_id);
                langSpan.title = languageTitle; // Всплывающая подсказка с названием языка
                langSpan.textContent = nameObj.language_id;
                namesContainer.appendChild(langSpan);

                const nameSpan = document.createElement("span");
                nameSpan.textContent = nameObj.short_name || nameObj.long_name || "N/A";
                namesContainer.appendChild(nameSpan);
            }

            card.appendChild(namesContainer);

            // Цвета флага
            const colorsContainer = document.createElement("div");
            colorsContainer.className = "flag_colors_container";

            for (const colorId of flag.colors) {
                const colorObj = colorsMap[colorId];
                if (colorObj) {
                    const colorDiv = document.createElement("div");
                    colorDiv.className = "flag_color";
                    colorDiv.title = colorObj.en_name; // Всплывающая подсказка с названием цвета
                    colorDiv.style.backgroundColor = colorObj.hex;
                    colorsContainer.appendChild(colorDiv);
                }
            }

            card.appendChild(colorsContainer);

            // Добавляем карточку в фрагмент
            fragment.appendChild(card);
        }

        // Добавляем все карточки в контейнер вывода
        output.appendChild(fragment);
        hideLoading();
    }
    catch (error){
        console.log(error);
    }
}

/**
 * Асинхронно получает название языка из базы данных
 * @param {IDBDatabase} db - Открытая база данных
 * @param {string} language_id - ID языка
 * @returns {Promise<string>} - Название языка
 */
async function getLanguageTitle(db, language_id) {
    return new Promise((resolve, reject) => {
        const transaction = db.transaction(["languages"], "readonly");
        const store = transaction.objectStore("languages");
        const request = store.get(language_id);

        request.onsuccess = function(event) {
            const language = event.target.result;
            if (language) {
                const title = language.en_name || "Unknown Language";
                resolve(title);
            } else {
                resolve("Unknown Language");
            }
        };

        request.onerror = function(event) {
            console.error(`Ошибка при получении языка с ID "${language_id}":`, event.target.error);
            resolve("Unknown Language"); // Возвращаем значение по умолчанию
        };
    });
}

/**
 * Отображает данные в виде таблицы (не меняется)
 * @param {Array} data - Массив данных
 * @param {Array} fields - Поля для отображения
 */
function displayData(data, fields) {
    const output = document.getElementById("output");
    output.innerHTML = ""; // Очищаем предыдущий вывод

    if (data.length === 0) {
        output.innerHTML = "<p>No data found.</p>";
        return;
    }

    const table = document.createElement("table");
    const thead = document.createElement("thead");
    const tbody = document.createElement("tbody");

    // Создаём заголовок таблицы
    const headerRow = document.createElement("tr");
    fields.forEach(field => {
        const th = document.createElement("th");
        th.textContent = field;
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);

    // Создаём строки данных
    data.forEach(item => {
        const row = document.createElement("tr");
        fields.forEach(field => {
            const td = document.createElement("td");
            let value = item[field];
            if (Array.isArray(value)) {
                value = value.join(", ");
            } else if (typeof value === 'object' && value !== null) {
                value = JSON.stringify(value);
            }
            td.textContent = value || "-";
            row.appendChild(td);
        });
        tbody.appendChild(row);
    });

    table.appendChild(thead);
    table.appendChild(tbody);
    output.appendChild(table);
}

/**
 * Создаёт динамические поля формы на основе выбранных полей
 * @param {Array} fields - Поля для создания
 * @param {Object} record - Текущая запись (для обновления)
 */
function createFormFields(fields, record = {}) {
    const form = document.getElementById("record-form");
    form.innerHTML = ""; // Очищаем существующие поля формы

    fields.forEach(field => {
        // Пропускаем поля, которые являются объектами или массивами
        if (typeof record[field] === "object" && record[field] !== null) {
            return;
        }

        const label = document.createElement("label");
        label.textContent = `${field}: `;
        const input = document.createElement("input");
        input.type = "text";
        input.name = field;
        input.value = record[field] || "";
        label.appendChild(input);
        form.appendChild(label);
        form.appendChild(document.createElement("br"));
    });
}

/**
 * Получает первичный ключ на основе keyPath
 * @param {Object} config - Конфигурация объекта хранилища
 * @param {Object} record - Текущая запись
 * @returns {string|Array} - Первичный ключ
 */
function getPrimaryKey(config, record) {
    if (Array.isArray(config.keyPath)) {
        return config.keyPath.map(k => record[k]);
    } else {
        return record[config.keyPath];
    }
}

/**
 * Добавляет обработчики событий для различных элементов управления
 */
function setupEventListeners() {
    // Кнопка Вывода Данных
    document.getElementById("view-data").addEventListener("click", async () => {
        const db = await initDB();
        handleViewData(db);
    });

    // Кнопка Поиска
    document.getElementById("search-button").addEventListener("click", async () => {
        const db = await initDB();
        handleViewData(db);
    });

    // Кнопка Очистки Поиска
    document.getElementById("clear-search").addEventListener("click", async () => {
        document.getElementById("search-input").value = "";
        const db = await initDB();
        handleViewData(db);
    });

    // Кнопка Применения Фильтров
    document.getElementById("apply-filters").addEventListener("click", async () => {
        const db = await initDB();
        handleViewData(db);
    });

    // Кнопка Очистки Фильтров
    document.getElementById("clear-filters").addEventListener("click", async () => {
        // Снимаем все чекбоксы
        const allCheckboxes = document.querySelectorAll("#filters input[type='checkbox']");
        allCheckboxes.forEach(checkbox => {
            checkbox.checked = false;
        });

        // Очищаем выбранные фильтры
        selectedFilters.colors.clear();
        selectedFilters.types.clear();
        selectedFilters.languages.clear();

        const db = await initDB();
        handleViewData(db);
    });
}


/**
 * Показывает/обновляет данные в зависимости от выбранного типа данных и применённых фильтров
 * @param {IDBDatabase} db - Открытая база данных
 */
async function handleViewData(db) {
    const dataType = document.getElementById("data-type").value;
    const config = dataMapping[dataType];
    const searchQuery = document.getElementById("search-input").value.trim();

    if (dataType === "flags") {
        viewFlagsAsCards(db, searchQuery, selectedFilters);
    } else {
        viewData(db, config.storeName, config.fields, searchQuery);
    }
}

/**
 * Инициализирует и загружает данные, затем устанавливает обработчики событий
 */
async function initializeApp() {
    try {
        const db = await initDB();
        await loadData(db);
        await populateAllFilters(db);
        addFilterEventListeners();
        setupEventListeners(); // Настраиваем обработчики для остальных кнопок
        console.log("Приложение инициализировано успешно.");
        handleViewData(db); // Отображаем данные по умолчанию
    } catch (error) {
        console.error("Ошибка при инициализации приложения:", error);
    }
}

/**
 * Настраивает реализуемую фильтрацию в реальном времени (опционально)
 * @param {IDBDatabase} db - Открытая база данных
 */
function setupRealTimeFiltering(db) {
    let debounceTimer;
    const searchInput = document.getElementById("search-input");

    searchInput.addEventListener("input", () => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            handleViewData(db);
        }, 300); // Задержка в 300 мс
    });
}

/**
 * Инициализирует и загружает приложение
 */
async function initializeApp() {
    try {
        const db = await initDB();
        await loadData(db);
        await populateAllFilters(db);
        addFilterEventListeners();
        setupEventListeners(); // Настраиваем обработчики для остальных кнопок
        setupRealTimeFiltering(db); // Настраиваем фильтрацию в реальном времени
        console.log("Приложение инициализировано успешно.");
        handleViewData(db); // Отображаем данные по умолчанию
    } catch (error) {
        console.error("Ошибка при инициализации приложения:", error);
    }
}

// Запускаем инициализацию приложения при загрузке страницы
document.addEventListener("DOMContentLoaded", initializeApp);