document.addEventListener('DOMContentLoaded', () => {
    const toastElements = document.querySelectorAll('.js-app-toast');
    toastElements.forEach((element) => {
        if (window.bootstrap && window.bootstrap.Toast) {
            const toast = new window.bootstrap.Toast(element);
            toast.show();
        }
    });

    const accessCodeInput = document.getElementById('access_code');
    const pinInput = document.getElementById('pin');
    document.querySelectorAll('[data-fill-login]').forEach((button) => {
        button.addEventListener('click', () => {
            if (accessCodeInput) {
                accessCodeInput.value = button.dataset.code || '';
            }
            if (pinInput) {
                pinInput.value = button.dataset.pin || '';
                pinInput.focus();
                pinInput.select();
            }
        });
    });

    document.querySelectorAll('form[data-confirm]').forEach((form) => {
        form.addEventListener('submit', (event) => {
            const message = form.getAttribute('data-confirm') || '¿Deseas continuar?';
            if (!window.confirm(message)) {
                event.preventDefault();
            }
        });
    });

    const searchInput = document.getElementById('product-search');
    const categoryButtons = document.querySelectorAll('[data-filter-category]');
    const categorySections = document.querySelectorAll('[data-category-section]');
    const productCards = document.querySelectorAll('[data-product-card]');
    const emptySearchState = document.getElementById('empty-search-state');
    let activeCategory = 'all';

    const applyCatalogFilters = () => {
        if (!categorySections.length) {
            return;
        }

        const query = (searchInput?.value || '').trim().toLowerCase();
        let visibleCount = 0;

        categorySections.forEach((section) => {
            const sectionCategory = section.getAttribute('data-category-section') || '';
            const cards = section.querySelectorAll('[data-product-card]');
            let sectionVisibleCards = 0;

            cards.forEach((card) => {
                const matchesCategory = activeCategory === 'all' || card.getAttribute('data-category') === activeCategory;
                const haystack = (card.getAttribute('data-search') || '').toLowerCase();
                const matchesSearch = query === '' || haystack.includes(query);
                const shouldShow = matchesCategory && matchesSearch;
                const wrapper = card.closest('.product-col');
                if (wrapper) {
                    wrapper.classList.toggle('d-none', !shouldShow);
                }
                if (shouldShow) {
                    sectionVisibleCards += 1;
                    visibleCount += 1;
                }
            });

            const sectionShouldShow = (activeCategory === 'all' || sectionCategory === activeCategory) && sectionVisibleCards > 0;
            section.classList.toggle('d-none', !sectionShouldShow);
        });

        if (emptySearchState) {
            emptySearchState.classList.toggle('d-none', visibleCount > 0);
        }
    };

    categoryButtons.forEach((button) => {
        button.addEventListener('click', () => {
            activeCategory = button.getAttribute('data-filter-category') || 'all';
            categoryButtons.forEach((candidate) => {
                const isActive = candidate === button;
                candidate.classList.toggle('is-active', isActive);
                if (isActive) {
                    candidate.classList.remove('btn-outline-secondary');
                    candidate.classList.add('btn-dark');
                } else {
                    candidate.classList.remove('btn-dark');
                    candidate.classList.add('btn-outline-secondary');
                }
            });
            applyCatalogFilters();
        });
    });

    if (searchInput) {
        searchInput.addEventListener('input', applyCatalogFilters);
    }

    if (productCards.length) {
        applyCatalogFilters();
    }

    const printButton = document.getElementById('print-receipt');
    if (printButton) {
        printButton.addEventListener('click', () => {
            window.print();
        });
    }
});