class FeedBlock {
    static LOADING_QUIPS = JSON.parse(feedSettings.quips);
    constructor(container){

        this.cache = window.jvbCache;
        this.eventHandlers = new Map();

        this.rendered = {};

        // Store container references
        this.container = container;
        this.a11y = window.jvbA11y;


        //For tracking cache and current requests
        this.currentRequest = null;
        this.timeoutId = null;

        // Initialize Config
        this.initConfig();


        // Setup error handler
        this.error = window.jvbError;

        this.resetState();
        this.state.firstLoad = false;
        this.state.URLProcessed = false;
        this.highlightGot = false;

        this.selectorInstances = {};

        this.elements = {
            filters: this.container.querySelector('form.feed-filters'),
            selected: this.container.querySelector('.selected-items'),
            clearFilters: this.container.querySelector('button.clear-filters'),
            grid: this.container.querySelector('.feed-grid'),
            loadMore: this.container.querySelector('button.load-more'),
            spinner: this.container.querySelector('.loading-spinner'),
            loading: this.container.querySelector('.feed-overlay'),
            matchAll: this.container.querySelector('.filter-actions .toggle-text'),
        }
        this.filters = {
            content: this.getCurrentContent(),
            taxonomies: {},
            favourites: false,
            orderby: 'date',
            order: 'desc',
        }

        this.feed = {
            imageLoadThreshold: 5,
            lazyLoadOffset: '100px',
            gallery: [],
            loaded: 0,
            intersectionObserver: null,
            templates: new Map()
        }
        this.imageObserver = null;
        this.resizeObserver = null;

        this.highlight = null;
        //Loading settings
        this.loadingIndex = 0;
        this.quips = this.initializeQuips();
        this.loadingMessage = this.container.querySelector('.loading-message');
        this.dotsElement = this.container.querySelector('.loading-dots');
        this.quipInterval = null;
        this.loadingOptions = {
            loadingMessages: {},
            cycleInterval: 2000, //time between loading messages
        }

        this.initFilters();
        if(this.container.dataset.gallery){
            this.initGallery();
            this.setupGalleryAccessibility();
        }
        this.initListeners();
        if(!this.state.URLProcessed){
            this.updateFilters();
        }

        this.selectedListeners = this.checkSelectedClicks.bind(this);
        this.updateSelectedListeners();
    }

    initConfig() {
        // Get settings from container data attribute
        const settings = JSON.parse(this.container.dataset.settings || '{}');
        let content = Array.from(this.container.querySelectorAll('input[name="content"]')).map(content=> content.value);
        this.config = {
            api: feedSettings.apiUrl,
            nonce: feedSettings.nonce,
            currentUser: jvbSettings.currentUser || null,

            content: content[0],
            contentTypes: content,
            taxonomies: Array.from(this.container.querySelectorAll('.jvb-selector')).map(taxonomy => taxonomy.dataset.taxonomy),

            // Source information for analytics
            source: this.container.dataset.source || '',
            context: this.container.dataset.context || '',

            // Optional highlight
            highlight: null,

            // Gallery mode
            isGallery: this.container.dataset.gallery || false,
            showAuthor: !this.container.dataset.gallery || true,
            showDate: this.container.dataset.gallery || false,


            // User preferences
            viewMode: localStorage.getItem('feedViewMode') || 'grid',
        }

        if(settings.isGallery){
            this.config.highlight = this.getHighlight();
        }
    }

    initFilters(){
        this.updateContentFor(this.getCurrentContent());
    }

    checkSelectedClicks(e){
        if(e.target.closest('.remove-item')){
            let tag = e.target.closest('.selected-item');

            // Uncheck checkbox if it exists
            let taxonomy = tag.dataset.taxonomy;
            this.clearSelectedTerm(tag.dataset.id, taxonomy);
            // Remove tag
            tag.remove();

            // Update clear filters button visibility
            this.updateClearFiltersButton();
            this.updateFilters();
            this.updateSelectedListeners();
        }
    }

    updateSelectedListeners(){
        this.elements.selected.removeEventListener('click', this.selectedListeners);
        if(this.elements.selected.children.length>0){
            this.elements.selected.addEventListener('click', this.selectedListeners);
        }
    }

    handleFilterChange(e){
        if(e.target.closest('.jvb-selector')){
            return;
        }
        this.resetPage();
        if(e.target.name === 'content'){
            let content = e.target.value;
            this.updateContentFor(content);
        }
        this.updateFilters();
    }
    handleLoadMore(){
        if (this.state.loading || !this.state.hasMore) {
            return;
        }
        this.fetchFeed();
    }
    initListeners(){
        window.addEventListener('popstate', this.handlePopState.bind(this));
        this.addEvent(this.elements.filters, 'change', (e) => this.handleFilterChange(e));
        this.addEvent(this.elements.filters, 'submit', e => e.preventDefault());
        this.addEvent(this.elements.loadMore, 'click', () => this.handleLoadMore());
        this.addEvent(this.elements.clearFilters, 'click', () => this.clearSelectedTaxonomies());
        if(this.config.isGallery){
            this.addEvent(this.elements.grid, 'click', (e) =>this.handleGalleryOpen(e));
        }

        // Intersection observer for lazy loading
        if ('IntersectionObserver' in window) {
            this.imageObserver = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        this.loadImage(entry.target);
                        this.imageObserver.unobserve(entry.target);
                    }
                });
            }, {
                rootMargin: this.feed.lazyLoadOffset,
                threshold: 0.1
            });
        }
        // Resize observer for responsive images
        if ('ResizeObserver' in window) {
            this.resizeObserver = new ResizeObserver(window.debounce(() => {
                this.updateImageSizes();
            }, 250));

            // Observe the container
            this.resizeObserver.observe(this.container);
        } else {
            // Fallback to window resize
            window.addEventListener('resize', window.debounce(() => {
                this.updateImageSizes();
            }, 250));
        }
    }
    handleGalleryOpen(e){
        const feedImage = e.target.closest('.feed-image');
        if(feedImage){
            const item = feedImage.closest('.feed-item');
            if(item) {
                const index = Array.from(this.container.querySelectorAll('.feed-item')).indexOf(item);
                if(index !== -1){
                    this.openGallery(index);
                }
            }
        }
    }
    initGallery(){
        this.gallery = {
            items: this.getGalleryItems() || [],
            index: 0,
            touchStart: null,
            touchEnd: null,
            minSwipe: 50,
            modal: this.createGalleryModal(),
            keyHandler: null,
            loading: false
        }
        document.body.appendChild(this.gallery.modal);
    }

    /**
     * Handle browser history navigation
     */
    handlePopState(e) {
        if (e.state && e.state.filters) {
            if(this.processURLFilters()){

                // Load items with updated filters
                this.resetPage();
                this.fetchFeed();

                // Announce to screen readers
                this.a11y.announce('Feed filters updated from browser history.');
            }
        }
    }

    processURLFilters(){
        const params = new URLSearchParams(window.location.search);
        if (!params.toString()) {
            return false; // No parameters to process
        }
        // Initialize content type
        const content = params.get('f_content');
        params.delete('f_content');
        if (content && this.elements.filters.querySelector(`input[value="${content}"]`)) {
            this.elements.filters.querySelector(`input[value="${content}"]`).checked = true;
            this.filters.content = content;
        }

        // Initialize order
        const order = params.get('f_order');
        params.delete('f_order');
        if (order && this.elements.filters.querySelector(`input[name="order"][value="${order}"]`)) {
            this.elements.filters.querySelector(`input[name="order"][value="${order}"]`).checked = true;
            this.filters.order = order;
        }

        // Initialize orderby
        const orderby = params.get('f_orderby');
        params.delete('f_orderby');
        if (orderby && this.elements.filters.querySelector(`input[name="orderby"][value="${orderby}"]`)) {
            this.elements.filters.querySelector(`input[name="orderby"][value="${orderby}"]`).checked = true;
            this.filters.orderby = orderby;
        }

        // Initialize favourites filter
        if (params.get('f_favourites') === 'true' && this.config.currentUser !== null) {
            params.delete('f_favourites');
            const favCheckbox = this.elements.filters.querySelector(`input[name="favourites_only"]`);
            if (favCheckbox) favCheckbox.checked = true;
            this.filters.favourites = true;
        }

        // Initialize match, if present
        if(params.get('f_match') === 'all'){
            params.delete('f_match');
            this.elements.matchAll.querySelector('input').checked = true;
        }

        window.removeChildren(this.elements.selected);

        let filters = JSON.parse(JSON.stringify(this.filters));
        let unprocessed = {};
        for (var [key, value] of Object.entries(Object.fromEntries(params))) {
            if (key.startsWith('f_') ) {
                var taxName = key.replace('f_', '');
                let cache = this.cache.getItem(taxName+'List');
                if(!Object.keys(filters['taxonomies']).includes(taxName)){
                    filters.taxonomies[taxName] = {};
                }

                // Handle both single values and comma-separated values
                const termIds = value.includes(',') ? value.split(',') : [value];
                termIds.forEach(termId=>{
                    if(cache && cache.hasOwnProperty(termId)){
                        filters.taxonomies[taxName][termId] = cache[termId].name;
                        let tag = this.createFilterTag(taxName, termId, cache[termId].name);
                        this.elements.selected.appendChild(tag);
                    }else{
                        if(!unprocessed.hasOwnProperty(taxName)){
                            unprocessed[taxName] = [];
                        }
                        unprocessed[taxName].push(termId);
                    }
                });
            }
        }

        this.filters = filters;

        if(!isEmptyObject(unprocessed)){
            this.fetchTermDetails(unprocessed);
        }

        if(this.config.isGallery){
            this.getHighlight();
        }

        this.updateContentFor(content);
        this.updateSelectedListeners();
        return true;

    }

    async loadFromURL() {

        if(this.processURLFilters()){
            // Announce to screen readers
            this.a11y.announce('Feed filters updated from URL.');
        }
        return true;
    }

    //We already checked the cache, now fetch the remaining term information
    async fetchTermDetails(terms) {
        let params = new URLSearchParams(terms);

        // Otherwise fetch the term details
        try {
            // Format the URL - might need to adjust based on your API structure
            const url = `${this.config.api}terms/check?`+params.toString();

            const termData = await this.cache.fetchWithCache(
                url, {
                    method: 'GET',
                },
                {
            });

            for(const [taxonomy, terms] of Object.entries(termData.terms)){
                if(!this.filters.taxonomies.hasOwnProperty(taxonomy)){
                    this.filters.taxonomies[taxonomy] = {};
                }

                this.cache.setItem(taxonomy+'List', terms, taxonomy);

                for(const [termId, termData] of Object.entries(terms)){
                    this.filters.taxonomies[taxonomy][termId] = termData.name;
                    let tag = this.createFilterTag(taxonomy, termId, termData.name);
                    this.elements.selected.appendChild(tag);
                }
                this.updateSelectedListeners();
            }

        } catch (error) {
            console.error(`Error fetching term details for ${terms}:`, error);

        }
    }

    //State Management
    nextPage(hasMore = true){
        this.state.page++;
        this.state.hasMore = hasMore;
    }
    resetPage(hasMore = true){
        this.state.page = 1;
        this.state.hasMore = hasMore;
    }
    resetState() {
        this.state = {
            page: 1,
            loading: false,
            hasMore: true,
            retries: {
                count: 0,
                max: 3,
                delay: 1000
            }
        }
    }

    updateFilters(reset = true){
        let updated = false;
        let content = this.getCurrentContent();
        let favourites = this.getFavouritesOnly();
        let order = this.getCurrentOrder();
        let orderby = this.getCurrentOrderby();
        let taxonomies = this.getSelectedTaxonomies();

        if(this.filters.content !== content ||
            this.filters.favourites !== favourites ||
            this.filters.order !== order ||
            this.filters.orderby !== orderby ||
            this.filters.taxonomies !== taxonomies ){
            updated = true;
        }
        (this.filters.content !== content)??this.updateContentFor(this.filters.content);

        this.filters.content = content;
        this.filters.favourites = favourites;
        this.filters.order = order;
        this.filters.orderby = orderby;
        this.filters.taxonomies = taxonomies;

        if(this.state.firstLoad){
            this.updateURL();
        }else{
            this.state.firstLoad = true;
        }


        if(reset){
            this.resetPage();
        }
        this.fetchFeed();
    }
    getCurrentContent(){
        return this.elements.filters.querySelector('input[name="content"]:checked').value;
    }
    getFavouritesOnly(){
        return this.elements.filters.querySelector('input[name="favourites_only"]')?.checked ??false;
    }
    getCurrentOrder(){
        return this.elements.filters.querySelector('input[name="order"]:checked').value;
    }
    getCurrentOrderby(){
        return this.elements.filters.querySelector('input[name="orderby"]:checked').value;
    }

    getCurrentTaxonomies(){
        let taxonomies = this.filters.taxonomies;
        let out = {};
        if(!isEmptyObject(taxonomies)){
            for(var [tax, terms] of Object.entries(taxonomies)){
                if(!isEmptyObject(terms)){
                    out[tax] =  Object.values(terms);
                }
            }
        }
        return out;
    }
    updateContentFor(content){

        this.elements.filters.querySelectorAll('.jvb-selector').forEach(tax=> {
            tax.hidden = !tax.dataset.for.includes(content);
            //Ensure any selected Taxonomies are removed
            if(!tax.dataset.for.includes(content)){
                this.clearSelectedTerms(tax);
            }
            //TODO: Ensure clean up of filtered out window.jvbTaxonomySelector instances?
            //Maybe cache them?
            let taxonomy = tax.dataset.taxonomy;
            if(tax.dataset.for.includes(content)){
                if(!this.selectorInstances.hasOwnProperty(taxonomy)){
                    this.selectorInstances[taxonomy] = new window.jvbTaxonomySelector(tax, {
                        multiple: true,
                        feed: true,
                        selected: this.filters[taxonomy]??{},
                        onClose: () => this.setSelectedTerms(taxonomy)
                    });
                }
            }else if(this.selectorInstances.hasOwnProperty(taxonomy)){
                this.clearSelectedTerms(taxonomy);
                delete this.selectorInstances[taxonomy];
            }
        });
        this.elements.filters.querySelectorAll('input[data-for]').forEach(toggle=>{
            toggle.hidden = !toggle.dataset.for.includes(content);
        });
        this.elements.filters.querySelectorAll('input[name="order"]').forEach(order=>{
            order.hidden = this.filters.orderby === 'random';
        });
    }
    updateURL(){
        const params = new URLSearchParams();

        let taxonomies = this.filters.taxonomies;
        if(!isEmptyObject(taxonomies)){
            for(var [tax, terms] of Object.entries(taxonomies)){
                if(!isEmptyObject(terms)){
                    params.set('f_'+tax, Object.keys(terms));
                }

            }
        }

        // Clone to avoid modifying original
        let filters = JSON.parse(JSON.stringify(this.filters));
        delete filters.taxonomies;
        for(const [key, value] of Object.entries(filters)){
            if(value !== false){
                params.set('f_'+key, value);
            }
        }
        if(this.elements.matchAll.querySelector('input:checked')){
            params.set('f_match', 'all');
        }
        const newUrl = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
        history.pushState({ filters }, '', newUrl);
    }

    /**
     * Feed Fetching
     * @param reset clear grid
     * @param force force cache busting
     * @returns {Promise<void>}
     */
    async fetchFeed(reset = false, force = false){
        if(this.state.loading){
            return;
        }

        this.updateLoading(true);
        try{
            // Track URL processing
            if(this.state.page === 1){
                reset = true;
                await this.loadFromURL();
            }

            const params = this.buildFilterRequest();
            if(this.elements.matchAll.querySelector('input:checked')){
                params.append('match', true);
            }
            params.append('page', this.state.page);
            params.append('source', this.config.source);
            params.append('context', this.config.context);
            if(this.config.highlight){
                params.append('highlight', JSON.stringify(this.config.highlight));
            }

            //fetch data with cache busting
            const data = await this.cache.fetchWithCache(
                `${this.config.api}feed?${params.toString()}`,
                {
                    method: 'GET',
                },
                {
                    context: 'feed',
                    forceRefresh: true,
                    // forceRefresh: force,
                }
            )

			console.log(data, 'Fetched data: ');

            //Clear grid on first page
            if(this.state.page === 1){
                window.removeChildren(this.elements.grid);
            }

            //Handle empty results
            if(!data || !data.items || data.items.length === 0){
                if(this.state.page === 1){
                    this.showEmptyState();
                }
                this.state.hasMore = false;
            }else{
                this.state.hasMore = data.hasMore;
                if(this.state.hasMore){
                    this.nextPage();
                }
                //Render items
                this.renderItems(data.items, this.state.page > 1);

            }

        }catch(error){
            this.handleError(error);
        }finally{
            this.updateLoading(false);
            this.elements.loadMore.hidden = !this.state.hasMore;
        }

    }

    buildFilterRequest(){
        // Clone to avoid modifying original
        const filters = JSON.parse(JSON.stringify(this.filters));

        if(filters.taxonomies && !isEmptyObject(filters.taxonomies)){
            let temp = {};
            for(var [tax, terms] of Object.entries(filters.taxonomies)){
                if(!isEmptyObject(terms)){
                    temp[tax] =Object.keys(terms);
                }
            }
            delete filters.taxonomies;
            if(!isEmptyObject(temp)){
                filters.taxonomies =   JSON.stringify(temp);
            }
        }else{
            delete filters.taxonomies;
        }


        if(!filters.favourites){
            delete filters.favourites;
        }
        return new URLSearchParams(filters);
    }


    handleError(error){
        return this.error.handleApiError(
            error,
            {
                component: 'Feed Block',
                action: 'loaditems'
            },
            () => this.fetchFeed()
        );
    }



    getHighlight() {
        if(!this.config.highlight){
            const searchParams = new URLSearchParams(window.location.search);

            // Check for content type parameters
			this.config.contentTypes.forEach(type => {
				if (searchParams.has(type)) {
					this.config.highlight = {};
					this.config.highlight[type] = searchParams.get(type);
				}
			});
        }
        return this.config.highlight;
    }

    /**
     * Loading
     */
    updateLoading(loading) {
        this.state.loading = loading;
        if (loading) {
            this.showLoading();

            let content = this.filters.content;
            content = (content === 'artwork') ? content : content+'s';
            let tax = '';
            let taxonomies = this.getCurrentTaxonomies();
            if(!isEmptyObject(taxonomies)){
                let total = 0;
                total = Object.values(taxonomies).map((tax)=> total+tax.length);
                let all = [];
                let join = (total[0] === 2) ? ' and ' : ', ';
                tax = Object.values(taxonomies).map((tax) => all.push(tax.join(join)));
                tax = all.join(', ');
                let index = tax.lastIndexOf(',')+1;
                if(index> 0){
                    tax = tax.substr(0, index)+' and'+tax.substr(index);
                }

            }


            this.a11y.announce(`Checking for more ${tax} ${content}...`);
        } else {
            this.hideLoading();
        }

        // Update loading spinner
        this.elements.spinner.hidden = !loading;

        // Update load more button
        this.elements.loadMore.disabled = loading;

    }


    /**
     * Show the loading overlay
     */
    showLoading() {
        this.hideBody();
        this.elements.loading.classList.add('active');
        this.startQuipCycle();
        document.body.classList.add('loading');
    }

    /**
     * Hide the loading overlay
     */
    hideLoading() {
        this.showBody();
        this.container.classList.remove('active');
        this.stopQuipCycle();
        document.body.classList.remove('loading');
    }


    /**
     * Start cycling through loading messages
     */
    startQuipCycle() {
        if (this.quipInterval) {
            clearInterval(this.quipInterval);
        }

        if (!this.quips.length) return;

        // Set initial message
        this.updateMessage(this.quips[0]);
        this.container.classList.remove('changing');

        this.quipInterval = setInterval(() => {
            this.container.classList.add('changing');

            setTimeout(() => {
                this.loadingIndex = (this.loadingIndex + 1) % this.quips.length;
                this.updateMessage(this.quips[this.loadingIndex]);

                setTimeout(() => {
                    this.container.classList.remove('changing');
                }, 50);
            }, 350);
        }, this.loadingOptions.cycleInterval);
    }

    /**
     * Stop cycling through loading messages
     */
    stopQuipCycle() {
        if (this.quipInterval) {
            clearInterval(this.quipInterval);
            this.quipInterval = null;
        }
    }

    /**
     * Update the loading message
     */
    updateMessage(quipData) {
        if (!this.loadingMessage) return;

        const icon = feedSettings?.icons?.[quipData.icon] || '';
        this.loadingMessage.innerHTML = `${icon}<p>${quipData.quip}</p>`;
    }

    /**
     * Set a custom loading message
     */
    setMessage(message, icon = null) {
        if (!this.loadingMessage) return;

        this.stopQuipCycle();

        const iconHtml = icon ? feedSettings?.icons?.[icon] || '' : '';
        this.loadingMessage.innerHTML = `${iconHtml}<p>${message}</p>`;
    }

    /**
     * Shuffle an array (Fisher-Yates algorithm)
     */
    shuffleArray(array) {
        const newArray = [...array];
        for (let i = newArray.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
        }
        return newArray;
    }

    /**
     * Initialize quips for loading messages
     */
    initializeQuips() {
        // Map pstyle, artstyle, etc. to their base types for quips
        const typeMapping = {
            'pstyle': 'style',
            'artstyle': 'style',
            'arttheme': 'theme',
            'artmedium': 'style',
            'artform': 'style',
            'placement': 'style',
            'colour': 'style'
        };

        // Gather all quips based on content types and taxonomies
        const allQuips = [];

        // Add content type quips
        if (FeedBlock.LOADING_QUIPS[this.filters.content]) {
            FeedBlock.LOADING_QUIPS[this.filters.content].forEach(quip => {
                allQuips.push({
                    icon: this.filters.content,
                    quip: quip
                });
            });
        }

        // Add taxonomy quips
        if(this.filters.taxonomies && !isEmptyObject(this.filters.taxonomies)){
            Object.keys(this.filters.taxonomies).forEach(taxonomy => {
                const baseType = typeMapping[taxonomy] || taxonomy;
                if (FeedBlock.LOADING_QUIPS[baseType]) {
                    FeedBlock.LOADING_QUIPS[baseType].forEach(quip => {
                        allQuips.push({
                            icon: taxonomy,
                            quip: quip
                        });
                    });
                }
            });
        }


        // Shuffle the quips array
        return this.shuffleArray(allQuips);
    }

    /**
     * Feed Grid
     */

    renderItems(items, append = false) {
        // Reset if not appending
        if (!append) {
            window.removeChildren(this.elements.grid);
            this.feed.loaded = 0;
            this.feed.gallery = [];
        }

        // Add items to gallery if in gallery mode
        if (this.config.isGallery) {
            this.feed.gallery = this.feed.gallery.concat(items);
        }

        // Bail early if no items
        if (items.length === 0) {
            this.a11y.announceUpdate(0, append);
            return;
        }

        // Use DocumentFragment for better performance
        const fragment = document.createDocumentFragment();

        // Process items in batches for better performance
        const batchSize = 10;
        const processBatch = (startIndex) => {
            const endIndex = Math.min(startIndex + batchSize, items.length);

            // Process this batch
            for (let i = startIndex; i < endIndex; i++) {
                const item = items[i];
                const element = this.createItemElement(item);
                fragment.appendChild(element);

                // Lazy load images beyond threshold
                if (this.feed.loaded >= this.feed.imageLoadThreshold && this.imageObserver) {
                    this.imageObserver.observe(element);
                } else {
                    this.loadImage(element);
                }

                this.feed.loaded++;
            }

            // If we have more items, process next batch in next frame
            if (endIndex < items.length) {
                requestAnimationFrame(() => {
                    processBatch(endIndex);
                });
            } else {
                // All batches processed, append fragment
                this.elements.grid.appendChild(fragment);
                if(this.container.dataset.gallery){
					console.log(this.getGalleryItems());
                    this.updateGalleryItems(this.getGalleryItems());
                    //pagination already updated, so it'll be page 2
                    if(this.getHighlight() && !this.highlightGot){
                        this.highlightGot = true;
                        this.openGallery(0);
                    }
                }
                this.a11y.makeNavigable(this.elements.grid.querySelectorAll('.feed-item:not([data-keyboard-nav])'));
                this.a11y.announceItems(items.length, append, this.state.hasMore);
            }
        };

        // Start processing the first batch
        if (items.length > 0) {
            processBatch(0);
        } else {
            this.a11y.announceUpdate(0, append);
        }
    }

    /**
     * Load image for an item
     */
    loadImage(element) {
        const img = element.querySelector('img');
        if (!img) return;
        const size = this.getImageSize();
        img.src = img.dataset[size] || img.dataset.src;
        delete img.dataset.src;

        element.setAttribute('data-loaded', 'true');
    }

    /**
     * Update image sizes based on screen width
     */
    updateImageSizes() {
        const size = this.getImageSize();

        // Update only visible images that aren't already loaded with the right size
        const items = this.elements.grid.querySelectorAll('.feed-item[data-loaded="true"]');
        items.forEach(item => {
            const img = item.querySelector('img');
            if (img && img.dataset[size] && img.src !== img.dataset[size]) {
                img.src = img.dataset[size];
            }
        });
    }

    /**
     * Create an element for a feed item
     */
    createItemElement(item) {

        if(!this.rendered[item.icon]){
            this.rendered[item.icon] = new Map();
        }

        if(this.rendered[item.icon].has(item.id)){
            return this.rendered[item.icon].get(item.id);
        }

        const favourited = window.isFavourited(item.icon, item.id)??false;
        const template = window.getTemplate('feed-item');

        // Set unique attributes
        template.id = `${item.icon}-${item.id}`;
        template.classList.add(item.icon);

		if (item.umami_view) {
			this.buildUmamiData(template, item.umami_view);
		}

		let favouriteButton = template.querySelector('button.favourite');
		[
			favouriteButton.dataset.id,
			favouriteButton.dataset.type,
			favouriteButton.dataset.artist,
			favouriteButton.title
		] = [
			item.id,
			item.icon,
			item.user_id,
			(favourited) ? 'Remove from Favourites' : 'Add to Favourites'
		];

		let order = item.order;
		let single = template.querySelector('.item');
		let list = template.querySelector('.item-list');
		let img = template.querySelector('.feed-images');
		let summary = template.querySelector('summary');
		let info = template.querySelector('.item-info');

		for (let [index, id] of Object.entries(order)){
			let target;
			let config = item[id];
			if (id === 'title') {
				target = template.querySelector('h3 a');
				if (item.title !== '') {
					[
						target.textContent,
						target.href,
						target.url
					] = [
						item.title,
						item.url,
						`Learn more about this ${item.icon}`
					];
					if (item.icon !== '') {
						target.closest('h3').prepend(window.getIcon(item.icon));
					}
					if (item.umami_click) {
						this.buildUmamiData(target, item.umami_click);
					}
				} else {
					target.remove();
				}
			} else if (Object.hasOwn(config, 'terms')) {
				//Taxonomy list
				if (config.terms.length === 0) {
					continue;
				}
				let taxonomy = list.cloneNode(true);
				let label = taxonomy.querySelector('.label');
				let termList = taxonomy.querySelector('ul');
				let listItem = taxonomy.querySelector('li');

				if (config.label) {
					label.textContent = config.label;
				}
				if (config.icon) {
					label.prepend(window.getIcon(config.icon));
				}
				if (!config.label && !config.icon){
					label.remove();
				}

				config.terms.forEach(term => {
					let termItem = listItem.cloneNode(true);
					let link = termItem.querySelector('a');
					[
						link.href,
						link.title,
						link.textContent
					] = [
						term.url,
						`Learn more about ${term.title}`,
						term.title
					];
					if (term.umami_click.length > 0) {
						this.buildUmamiData(link, term.umami_click);
					}
					termList.append(termItem);
				});

				listItem.remove();
				info.appendChild(taxonomy);
			} else if (Object.hasOwn(config, 'value') && config.value !== '') {
				let itemInfo = single.cloneNode(true);
				let label = itemInfo.querySelector('.label');
				let link = itemInfo.querySelector('a');
				let p = itemInfo.querySelector('p');
				if (Object.hasOwn(config, 'label')) {
					label.textContent = config.label;
				}
				if (Object.hasOwn(config, 'icon')) {
					label.prepend(window.getIcon(config.icon));
				}
				if (!Object.hasOwn(config, 'icon') && !Object.hasOwn(config, 'label')) {
					label.remove();
				}
				if (Object.hasOwn(config, 'url')) {
					p.remove();
					[
						link.textContent,
						link.href,
						link.title
					] = [
						config.value,
						config.url,
						`Learn more about ${config.value}`
					];
				} else {
					link.remove();
					p.textContent = config.value;
				}
				info.appendChild(itemInfo);
			} else if (id === 'image') {
				let images = summary.querySelector('.feed-images');
				let img = images.querySelector('a');

				let main = img.cloneNode(true);
				main.href = item.url;
				main.classList.add('feed-image');
				this.buildImageData(main.querySelector('img'), item.image);
				images.append(main);

				if (item.content?.length > 0) {
					images.classList.add('multi');
					item.content.forEach(c => {
						let image = img.cloneNode(true);
						image.href = c.url;
						let itemImg = image.querySelector('img');
						itemImg.src = c.image.small;
						itemImg.alt = c.image.alt;
						images.append(image);
					});
				}
				img.remove();
			}
		}
		single.remove();
		list.remove();

        this.rendered[item.icon].set(item.id, template);

        return template;
    }

    buildImageData(img, data){
		if (typeof data.tiny !== 'string') {
			return;
		}
        [
            img.src,
            img.dataset.small,
            img.dataset.medium,
            img.dataset.large,
            img.alt
        ] =
        [
            data.tiny,
            data.small,
            data.medium,
            data.large,
            data.alt
        ];
    }

    buildUmamiData(item, data){
        for(let [key, value] of Object.entries(data)){
            item.dataset[key] = value;
        }
    }

    /**
     * Show empty state
     */
    showEmptyState() {
        const message = this.filters.favourites
            ? `<div class="feed-empty-state">
                <h3>♡ BLANK CANVAS ♡</h3>
                <p>You haven't fallen in love with any pieces... yet!</p>
                <p>Hit that heart icon when something stops your scroll.</p>
                <p>Your dream collection is waiting to start.</p>
            </div>`
            : `<div class="feed-empty-state">
                <h3>NOTHING HERE...</h3>
                <p>Try tweaking those filters.</p>
                <p>Edmonton's got talent - let's find it.</p>
            </div>`;

        this.elements.grid.innerHTML = message;
        this.a11y.announceEmpty(this.filters.favourites);
    }

    /**
     * Clear the grid
     */
    clearGrid() {
        this.a11y.announce('Items cleared.');
        window.removeChildren(this.elements.grid);
        this.feed.loaded = 0;
    }

    /**
     * Get image size based on screen width
     */
    getImageSize() {
        const width = window.innerWidth;
        if (width > 1024) return 'medium';
        if (width > 500) return 'medium';
        return 'small';
    }

    /**
     * Get gallery items for the gallery modal
     */
    getGalleryItems() {
        return Array.from(this.container.querySelectorAll('.feed-item'))
            .map(item => {
                const img = item.querySelector('img');
                if (!img) return null;

                return {
                    id: item.querySelector('button.favourite').dataset.id,
                    small: img.dataset.small || img.src,
                    large: img.dataset.medium || img.src,
                    full: img.dataset.full || img.src,
                    alt: img.alt || '',
                    fav: item.querySelector('button.favourite')?.cloneNode(true),
                    info: item.querySelector('.item-info')?.cloneNode(true)
                };
            })
            .filter(Boolean);
    }

    /**
     * Clean up resources when component is destroyed
     */
    addEvent(element, event, handler, options) {
        if (!element) return;

        const boundHandler = handler.bind(this);
        element.addEventListener(event, boundHandler, options);

        // Store for cleanup
        if (!this.eventHandlers.has(element)) {
            this.eventHandlers.set(element, []);
        }
        this.eventHandlers.get(element).push({ event, handler: boundHandler });
    }
    destroy() {
        // Clean up observers
        if (this.imageObserver) {
            this.imageObserver.disconnect();
            this.imageObserver = null;
        }

        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
            this.resizeObserver = null;
        }

        // Clean up all event listeners
        this.eventHandlers.forEach((handlers, element) => {
            handlers.forEach(({ event, handler }) => {
                element.removeEventListener(event, handler);
            });
        });
        this.eventHandlers.clear();

        // Clean up timers
        if (this.quipInterval) {
            clearInterval(this.quipInterval);
        }

        if (this.timeoutId) {
            clearTimeout(this.timeoutId);
        }

        // Clear template cache and other state
        this.feed.templates.clear();
        this.feed.gallery = [];
        this.feed.loaded = 0;
    }
    /** Extra Term Handling **/

    getSelectedTaxonomies(){
        let taxonomies = {};
        for(var [taxonomy, instance] of Object.entries(this.selectorInstances)){
            taxonomies[taxonomy] = instance.selectedItems;
        }
        return taxonomies;
    }
    /**
     * Get selected values for a taxonomy
     */
    getSelectedTerms(taxonomy) {
        const selectedItems = this.elements.selected.querySelectorAll(
            `.selected-item[data-taxonomy="${taxonomy}"]`
        );

        return Array.from(selectedItems).map(item => item.dataset.id);
    }

    clearSelectedTaxonomies(){
        window.removeChildren(this.elements.selected);
        if(!isEmptyObject(this.selectorInstances)){
            for(var [taxonomy, instance] of Object.entries(this.selectorInstances)){
                instance.selectedItems = {};
            }
        }

        this.elements.matchAll.querySelector(input).checked = false;

        this.filters.taxonomies = {};
        this.updateFilters();
    }
    setSelectedTerms(taxonomy){
        if(this.selectorInstances[taxonomy]){
            let selected = this.selectorInstances[taxonomy].selectedItems;
            if(!isEmptyObject(selected)){

                this.filters.taxonomies[taxonomy] = selected;
                for(var [id, name] of Object.entries(selected)){
                    this.elements.selected.appendChild(this.createFilterTag(taxonomy, id, name));
                }
                this.updateFilters();
                this.updateSelectedListeners();
            }else{
                delete this.filters.taxonomies[taxonomy];
            }

        }
    }
    clearSelectedTerm(termId, taxonomy){
        let container = this.container.querySelector('.filters');
        let input = container.querySelector(`li[data-id="${termId}"] input`);
        input.checked = false
        delete this.selectorInstances[taxonomy].selectedItems[termId];
    }
    clearSelectedTerms(taxonomy){

        if(!isEmptyObject(this.filters.taxonomies) && this.filters.taxonomies.hasOwnProperty(taxonomy)){
            delete this.filters.taxonomies[taxonomy];
        }
        if(!isEmptyObject(this.selectorInstances) && this.selectorInstances.hasOwnProperty(taxonomy)){
            this.selectorInstances[taxonomy].selectedItems = {};
        }


        const selectedItems = this.elements.selected.querySelectorAll(
            `.selected-item[data-taxonomy="${taxonomy}"]`
        );

        if(selectedItems.length > 0){
            selectedItems.forEach(item => {
                item.remove();
            });
        }

        // Update clear filters button visibility
        this.updateClearFiltersButton();
    }
    updateClearFiltersButton(){
        if (!this.elements.clearFilters) return;

        let filters = this.elements.selected.children.length;

        const hasFilters = filters > 0;

        const hasMultiple = filters > 1;

        this.elements.clearFilters.hidden = !hasFilters;

        this.elements.filters.classList.toggle('has-filters', hasFilters);

        this.elements.matchAll.hidden = !hasMultiple;
    }


    /**
     * Create a filter tag element
     */
    createFilterTag(taxonomy, id, name) {
        const tag = window.getTemplate('selectedTerm');

        tag.dataset.taxonomy = taxonomy;
        tag.dataset.id = id;
        let icon = window.getIcon(taxonomy);
        let span = tag.querySelector('span');
        let button = tag.querySelector('button');
        tag.prepend(icon);
        span.classList.add('filter-name');
        span.classList.remove('item-name');
        [span.textContent, button.remove] =
            [escapeHtml(name), `Remove ${escapeHtml(name)}`];



        return tag;
    }

    /**
     * Gallery
     **/
    openGallery(index){
        this.gallery.index = index;
        this.gallery.modal.showModal();
        this.hideBody();

        this.bindGalleryEvents();
        //show current image
        this.updateDisplay(index);
        //preload adjacent images
        this.preloadImages();

        // Announce initial state
        this.a11y.announce(`Image ${this.gallery.index + 1} of ${this.gallery.items.length}. Use arrow keys to navigate.`)
        this.a11y.trapFocus(this.gallery.modal);

    }

    /**
     * Create the modal element
     */
    createGalleryModal() {
        const modal = document.createElement('dialog');
        modal.className = 'gallery-modal';
        modal.setAttribute('aria-modal', 'true');
        modal.setAttribute('aria-label', 'Image Gallery');

        modal.innerHTML = `
        <button class="gallery-close" aria-label="Close gallery">
          ${jvbSettings.icons.close}
        </button>

        <button class="gallery-nav gallery-prev" aria-label="Previous image">
          ${jvbSettings.icons.prev}
        </button>

        <button class="gallery-nav gallery-next" aria-label="Next image">
             ${jvbSettings.icons.next}
        </button>

        <div class="gallery-content">
          <img src="" alt="" class="gallery-image">
          <details>
            <summary>DETAILS</summary>
            <div class="item-info"></div>
          </details>
        </div>

        <div class="gallery-favourite"></div>
        <div class="gallery-counter"><span id="gallery-index">1</span> / <span class="total"></span></div>
    `;

        return modal;
    }


    /**
     * Bind event handlers
     */
    bindGalleryEvents() {
        // Close button
        this.gallery.modal.querySelector('.gallery-close').addEventListener('click', () => this.closeGallery());

        // Navigation buttons
        const prevBtn = this.gallery.modal.querySelector('.gallery-prev');
        const nextBtn = this.gallery.modal.querySelector('.gallery-next');

        prevBtn.addEventListener('click', () => this.navigate(-1));
        nextBtn.addEventListener('click', () => this.navigate(1));

        // Keyboard navigation
        this.gallery.keyHandler = (e) => {
            switch (e.key) {
                case 'ArrowLeft':
                    this.navigate(-1);
                    break;
                case 'ArrowRight':
                    this.navigate(1);
                    break;
                case 'Escape':
                    this.closeGallery();
                    break;
            }
        };
        document.addEventListener('keydown', this.gallery.keyHandler);

        // Touch events
        this.gallery.modal.addEventListener('touchstart', (e) => {
            this.gallery.touchStart = e.touches[0].clientX;
        });

        this.gallery.modal.addEventListener('touchmove', (e) => {
            this.gallery.touchEnd = e.touches[0].clientX;
        });

        this.gallery.modal.addEventListener('touchend', () => {
            if (!this.gallery.touchStart || !this.gallery.touchEnd) return;

            const distance = this.gallery.touchStart - this.gallery.touchEnd;
            const isLeftSwipe = distance > this.gallery.minSwipe;
            const isRightSwipe = distance < -this.gallery.minSwipe;

            if (isLeftSwipe) {
                this.navigate(1);
            } else if (isRightSwipe) {
                this.navigate(-1);
            }

            this.gallery.touchStart = null;
            this.gallery.touchEnd = null;
        });
    }

    /**
     * Navigate to previous/next image
     */
    async navigate(direction) {
        const newIndex = this.gallery.index + direction;

        // Check if out of bounds
        if (newIndex < 0 || newIndex >= this.gallery.items.length) {
            this.a11y.announceNavigation(newIndex, this.gallery.items.length,direction < 0, direction > 0)
            return;
        }

        // Update current index
        this.gallery.index = newIndex;

        // Update display
        this.updateDisplay(newIndex);

        // Preload adjacent images
        this.preloadImages();

        // Announce to screen readers
        this.a11y.announceNavigation(this.gallery.index,this.gallery.items.length);

        //Load more if we're near the end
        if (direction > 0 && newIndex >= (this.gallery.items.length - 3) && this.state.hasMore) {
            await this.fetchFeed();
            this.updateGalleryItems(this.getGalleryItems());
        }
    }

    /**
     * Preload adjacent images
     */
    preloadImages() {
        // Preload current, previous and next images
        [-1, 0, 1].forEach(offset => {
            const index = this.gallery.index + offset;
            if (index >= 0 && index < this.gallery.items.length) {
                const img = new Image();
                const item = this.gallery.items[index];

                if (window.innerWidth < 1000) {
                    img.src = item.large || item.src;
                } else {
                    img.src = item.full || item.src;
                }
            }
        });
    }

    /**
     * Update display with current image
     */
    updateDisplay(index) {
        const item = this.gallery.items[index];
        if (!item) return;

        // Get elements
        const favourite = this.gallery.modal.querySelector('.gallery-favourite');
        const image = this.gallery.modal.querySelector('.gallery-image');
        const counter = this.gallery.modal.querySelector('.gallery-counter');
        const info = this.gallery.modal.querySelector('.item-info');

        // Update image
        image.src = window.innerWidth < 1000 ?
            (item.large || item.src) :
            (item.full || item.src);

        image.alt = item.alt || '';

        // Update favourite button
        if (favourite && item.fav) {
            window.removeChildren(favourite);
            favourite.appendChild(item.fav.cloneNode(true));
        }

        // Update info
        if (info && item.info) {
            window.removeChildren(info);
            const clone = item.info.cloneNode(true);
            info.appendChild(clone);
        }

        // Update counter
        counter.textContent = `${this.gallery.index + 1} / ${this.gallery.items.length}`;

        // Update navigation buttons
        this.updateNavigationButtons();
    }

    /**
     * Update navigation button visibility
     */
    updateNavigationButtons() {
        const prevBtn = this.gallery.modal.querySelector('.gallery-prev');
        const nextBtn = this.gallery.modal.querySelector('.gallery-next');

        prevBtn.classList.toggle('end', this.gallery.index > 0 ? '' : 'none');
        nextBtn.classList.toggle('end', this.gallery.index < this.gallery.items.length - 1 ? '' : 'none');
    }

    /**
     * Close the gallery
     */
    closeGallery() {
        this.showBody();
        // Remove event listeners
        document.removeEventListener('keydown', this.gallery.keyHandler);
        this.a11y.announce('Gallery closed.');

        this.gallery.modal.close();

        // Reset state
        this.gallery.keyHandler = null;
    }

    /**
     * Update gallery items
     * @param {Array} newItems - New gallery items
     */
    updateGalleryItems(newItems) {
        // Store original current index and item
        const currentItem = this.gallery.items[this.gallery.index];

        // Update items array
        this.gallery.items = newItems;

        // Try to keep the same item selected
        if (currentItem) {
            // Find the same item in the new array by matching source
            const newIndex = this.gallery.items.findIndex(item =>
                item.full === currentItem.full ||
                item.large === currentItem.large
            );

            if (newIndex !== -1) {
                this.gallery.index = newIndex;
            }
        }

        // Update navigation buttons
        this.updateNavigationButtons();
    }

    /**
     * Ensure gallery is accessible
     */
    setupGalleryAccessibility() {
        // Add ARIA attributes
        this.gallery.modal.setAttribute('aria-modal', 'true');
        this.gallery.modal.setAttribute('aria-label', 'Image Gallery');
    }

    hideBody(){
        document.body.style.overflow = 'hidden';
    }
    showBody(){
        document.body.style.overflow = '';
    }
}

// Initialize feed blocks when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.feed-block').forEach(container => {
        // Initialize with both the container and overlay
        window.feedBlock = new FeedBlock(container);
    });
});


function isEmptyObject(obj) {
    return Object.keys(obj).length === 0;
}