// Base class for shared UI functionality
class UIHandler {
    constructor() {
        this.elements = {};
        this.activeComponents = new Set();
        this.componentStates = new Map();
        this.observers = new Map();
        this.handleOutsideClick = this.handleOutsideClick.bind(this);
        this.handleEscapeKey = this.handleEscapeKey.bind(this);

    }

    bindElements() {
        console.error('bindElements must be implemented by child class');
    }



    // Add shared event binding
    bindComponentEvents() {

        if (!this.handlers) return;
        Object.entries(this.handlers).forEach(([elementKey, config]) => {
            const elements = this.elements[elementKey];
            if (!elements) return;

            // Handle NodeList
            if (elements instanceof NodeList || Array.isArray(elements)) {
                elements.forEach(element => {
                    this.bindEventsToElement(element, config);
                });
            }
            // Handle single element
            else {
                this.bindEventsToElement(elements, config);
            }
        });
    }

    bindEventsToElement(element, config) {
        if (typeof config === 'function') {
            // If config is a function, bind it to click event
            element.addEventListener('click', config.bind(this));
        } else if (typeof config === 'object') {
            // Handle object with multiple events
            Object.entries(config).forEach(([event, handler]) => {
                if (event !== 'forEach' && typeof handler === 'function') {
                    element.addEventListener(event, handler);
                }
            });
        }
    }
    bindEvents() {
        document.addEventListener('click', this.handleOutsideClick);
        document.addEventListener('keydown', this.handleEscapeKey);
    }

    // Component State Management
    isComponentActive(componentKey) {
        return this.activeComponents.has(componentKey);
    }

    // Add helper method for handling component state
    setComponentState(e, t, n = {}) {
        const {
            element: s,
            toggle: i,
            activeClass: r = "open",
            focusElement: o = null,
            ariaLabel: c = null,
            ariaHidden: a = null,
            cleanup: l = null
        } = n;

        if (s) {
            t ? this.activeComponents.add(e) : this.activeComponents.delete(e);
            s.classList.toggle(r, t);

            if (i) {
                i.setAttribute("aria-expanded", t.toString());
                c && i.setAttribute("aria-label", c);
            }

            if (null !== a) {
                s.setAttribute("aria-hidden", (!t).toString());
            }

            // Add null check before calling focus()
            if (o && typeof o.focus === 'function') {
                o.focus();
            }

            if (!t && l) {
                l();
            }

            this.componentStates.set(e, {
                isActive: t,
                activeClass: r,
                options: n
            });
        }
    }


    // Add keyboard navigation management
    initializeKeyboardNavigation(config) {
        this.keyboardConfig = config;

        Object.entries(config).forEach(([elementKey, keyHandlers]) => {
            const element = this.elements[elementKey];
            if (!element) return;

            element.addEventListener('keydown', (e) => {
                const handler = keyHandlers[e.key];
                if (handler) {
                    handler.call(this, e);
                }
            });
        });
    }


    handleOutsideClick(event) {
        console.error('handleOutsideClick must be implemented by child class');
    }
    handleEscapeKey(event) {
        console.error('handleEscapeKey must be implemented by child class');
    }

    // Add shared handler initialization
    initializeHandlers(handlers) {
        if (!handlers || typeof handlers !== 'object') {
            console.error('Invalid handlers configuration');
            return;
        }

        this.handlers = Object.entries(handlers).reduce((acc, [key, value]) => {
            if (typeof value === 'function') {
                acc[key] = value.bind(this);
            } else if (value.forEach) {
                acc[key] = {
                    ...value,
                    handler: value.handler?.bind(this)
                };
            } else if (typeof value === 'object') {
                acc[key] = Object.entries(value).reduce((events, [event, handler]) => {
                    events[event] = typeof handler === 'function' ? handler.bind(this) : handler;
                    return events;
                }, {});
            }
            return acc;
        }, {});
    }
    createObserver(options, callback) {
        const defaultOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0
        };

        return new IntersectionObserver(
            callback,
            { ...defaultOptions, ...options }
        );
    }

    initializeObserver(observerId, elements, options, callback) {
        if (!elements || !elements.length) return;

        // Cleanup existing observer if it exists
        this.cleanupObserver(observerId);

        // Create and store new observer
        const observer = this.createObserver(options, callback);
        this.observers.set(observerId, {
            observer,
            elements: new Set(elements)
        });

        // Start observing elements
        elements.forEach(element => {
            if (element) {
                observer.observe(element);
            }
        });

        return observer;
    }

    cleanupObserver(observerId) {
        const observerData = this.observers.get(observerId);
        if (observerData) {
            const { observer, elements } = observerData;
            elements.forEach(element => {
                if (element) {
                    observer.unobserve(element);
                }
            });
            observer.disconnect();
            this.observers.delete(observerId);
        }
    }

    cleanupAllObservers() {
        this.observers.forEach((_, observerId) => {
            this.cleanupObserver(observerId);
        });
    }

    // Optional cleanup method for removing event listeners
    cleanup() {
        document.removeEventListener('click', this.handleOutsideClick);
        document.removeEventListener('keydown', this.handleEscapeKey);
        this.cleanupComponentEvents();
        this.cleanupAllObservers();
    }
    // Add shared event cleanup
    cleanupComponentEvents() {
        Object.entries(this.handlers).forEach(([elementKey, config]) => {
            const element = this.elements[elementKey];
            if (!element) return;

            if (config.forEach && element.forEach) {
                element.forEach(item => {
                    if (item._boundHandler) {
                        item.removeEventListener('click', item._boundHandler);
                        delete item._boundHandler;
                    }
                });
            } else if (typeof config === 'object') {
                Object.entries(config).forEach(([event, handler]) => {
                    if (event !== 'forEach') {
                        element.removeEventListener(event, handler);
                    }
                });
            }
        });
    }

    handleSearchCheckboxes(form) {
        if (!form) return;

        const allCheckbox = form.querySelector('input[type="checkbox"][value="1"]');
        const otherCheckboxes = form.querySelectorAll('input[type="checkbox"]:not([value="1"])');

        if (!allCheckbox) return;

        const updateCheckboxes = (e) => {
            const checkbox = e.target;

            if (checkbox === allCheckbox) {
                // If 'all' is checked, uncheck others
                if (checkbox.checked) {
                    otherCheckboxes.forEach(cb => {
                        cb.checked = false;
                    });
                }
            } else {
                // If any other checkbox is checked, uncheck 'all'
                if (checkbox.checked) {
                    allCheckbox.checked = false;
                } else {
                    // If no other checkboxes are checked, check 'all'
                    const anyOthersChecked = Array.from(otherCheckboxes)
                        .some(cb => cb.checked);
                    if (!anyOthersChecked) {
                        allCheckbox.checked = true;
                    }
                }
            }
        };

        // Add event listeners to all checkboxes
        form.querySelectorAll('input[type="checkbox"]')
            .forEach(checkbox => {
                checkbox.addEventListener('change', updateCheckboxes);
            });

        // Store cleanup function
        form._removeCheckboxListeners = () => {
            form.querySelectorAll('input[type="checkbox"]')
                .forEach(checkbox => {
                    checkbox.removeEventListener('change', updateCheckboxes);
                });
        };
    }
}

window.UIHandler = UIHandler;