/**
 * FavouritesManager - Manages user favourites and lists
 * Works with FavouritesRoutes.php on the backend
 */
class FavouritesManager {
    constructor() {
        this.queue = window.jvbQueue;
        this.loadingManager = window.jvbLoading;
        this.cache = window.jvbCache;
        this.a11y = window.jvbA11y;
        this.error = window.jvbError;
        this.tabs = new window.jvbTabs(document.querySelector('.replace'));

        // Core configuration
        this.config = {
            endpoints: {
                favourites: 'favourites',
                lists: 'favourites/lists',
                shares: 'favourites/lists/shares',
            },
            selectors: {
                container: '.favourites.container',
                itemsTab: '.tab-content[data-tab="items"]',
                listsTab: '.tab-content[data-tab="lists"]',
                grid: '.item-grid',
                typeFilters: '.type-filters',
                viewControls: '.view-controls',
                bulkControls: '.bulk-controls',
                selectAll: '#select-all',
                createListModal: '.create-list-modal',
                addToListModal: '.add-to-list-modal',
                shareListModal: '.share-list-modal',
                noItems: '.no-favourites',
                listContainer: '.lists-container',
                listDetails: '.list-details',
                loader: '.favourites-loader'
            },
            defaultPage: 1,
            defaultPerPage: 24,
            defaultViewMode: 'grid', // 'grid' or 'list'
            refreshInterval: 60000, // 1 minute - for background refresh of shared lists
            toastDuration: 3000 // Duration for toast notifications
        };

        // Add a single document-level event listener for the Escape key
        document.addEventListener('keydown', this.handleKeyDown.bind(this));

        // State variables
        this.state = {
            selectedItems: new Set(),
            page: this.config.defaultPage,
            filter: {
                type: 'all',
                order: 'desc',
                orderBy: 'date_added'
            },
            view: {
                mode: localStorage.getItem('favourites_view') || this.config.defaultViewMode,
                activeTab: 'items' // 'items' or 'lists'
            },
            pagination: {
                hasMore: false,
                totalItems: 0,
                totalPages: 0
            },
            currentListId: null,
            loading: false,
            initialized: false
        };

        // Cache DOM elements
        this.initDom();

        // Set up event listeners
        this.initEvents();

        // Load initial data
        this.loadInitialData();

        // Mark as initialized
        this.state.initialized = true;
    }

    /**
     * Initialize DOM references
     */
    initDom() {
        // Cache DOM elements
        this.container = document.querySelector(this.config.selectors.container);
        if (!this.container) {
            console.warn('Favourites container not found');
            return;
        }

        // Main elements
        this.grid = this.container.querySelector(this.config.selectors.grid);
        this.typeFilters = this.container.querySelector(this.config.selectors.typeFilters);
        this.viewControls = this.container.querySelector(this.config.selectors.viewControls);
        this.bulkControls = this.container.querySelector(this.config.selectors.bulkControls);
        this.listContainer = this.container.querySelector(this.config.selectors.listContainer);
        this.listDetails = this.container.querySelector(this.config.selectors.listDetails);
        this.loader = this.container.querySelector(this.config.selectors.loader);

        // Modals
        this.createListModal = document.querySelector(this.config.selectors.createListModal);
        this.addToListModal = document.querySelector(this.config.selectors.addToListModal);
        this.shareListModal = document.querySelector(this.config.selectors.shareListModal);

        // Initialize view mode from localStorage
        if (this.grid && this.state.view.mode) {
            this.grid.classList.add(`${this.state.view.mode}-view`);
        }
    }

    /**
     * Initialize event listeners
     */
    initEvents() {
        // Type filters
        if (this.typeFilters) {
            this.typeFilters.addEventListener('click', e => {
                const button = e.target.closest('.type-filter');
                if (button) {
                    this.setFilterType(button.dataset.type);
                }
            });
        }

        // View controls
        if (this.viewControls) {
            this.viewControls.addEventListener('click', e => {
                const button = e.target.closest('.view-toggle');
                if (button) {
                    this.setView(button.dataset.view);
                }
            });
        }

        // Bulk selection
        if (this.container) {
            // Select all checkbox
            const selectAll = this.container.querySelector(this.config.selectors.selectAll);
            if (selectAll) {
                selectAll.addEventListener('change', () => {
                    this.toggleSelectAll(selectAll.checked);
                });
            }

            // Individual item selection
            this.container.addEventListener('change', e => {
                if (e.target.matches('.item-select input[type=checkbox]')) {
                    this.handleItemSelection(e.target);
                }
            });

            // Bulk actions
            const bulkActionSelect = this.container.querySelector('.bulk-action-select');
            const applyBulk = this.container.querySelector('.apply-bulk');
            if (bulkActionSelect && applyBulk) {
                applyBulk.addEventListener('click', () => {
                    this.applyBulkAction(bulkActionSelect.value);
                });
            }

            // Cancel bulk selection
            const cancelButton = this.container.querySelector('.cancel-bulk');
            if (cancelButton) {
                cancelButton.addEventListener('click', () => {
                    this.clearSelection();
                });
            }
        }

        // Modal events
        this.initModalEvents();

        // Delegate for item-level actions
        this.container.addEventListener('click', this.handleItemActions.bind(this));

        // Infinite scroll
        if (this.grid) {
            // Using Intersection Observer for infinite scroll
            this.setupInfiniteScroll();
        }
    }

    /**
     * Initialize modal event handlers
     */
    initModalEvents() {
        // Create List Modal
        if (this.createListModal) {
            const form = this.createListModal.querySelector('form');
            if (form) {
                form.addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.handleCreateList(new FormData(form));
                });
            }

            const cancelButton = this.createListModal.querySelector('.cancel');
            if (cancelButton) {
                cancelButton.addEventListener('click', () => {
                    this.createListModal.close();
                });
            }
        }

        // Add to List Modal
        if (this.addToListModal) {
            const form = this.addToListModal.querySelector('form');
            if (form) {
                form.addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.handleAddToList(new FormData(form));
                });
            }

            const cancelButton = this.addToListModal.querySelector('.cancel');
            if (cancelButton) {
                cancelButton.addEventListener('click', () => {
                    this.addToListModal.close();
                });
            }
        }

        // Share List Modal
        if (this.shareListModal) {
            const form = this.shareListModal.querySelector('form');
            if (form) {
                form.addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.handleShareList(new FormData(form));
                });
            }

            const cancelButton = this.shareListModal.querySelector('.cancel');
            if (cancelButton) {
                cancelButton.addEventListener('click', () => {
                    this.shareListModal.close();
                });
            }

            // Add email button
            const addEmailButton = this.shareListModal.querySelector('.add-email');
            if (addEmailButton) {
                addEmailButton.addEventListener('click', () => {
                    const emailInput = this.shareListModal.querySelector('#share-email');
                    if (emailInput && emailInput.value) {
                        this.handleShareList(new FormData(form));
                    }
                });
            }
        }
    }

    /**
     * Set up infinite scroll using Intersection Observer
     */
    setupInfiniteScroll() {
        // Get or create a sentinel element to detect when user scrolls to bottom
        let sentinel = this.container.querySelector('.scroll-sentinel');
        if (!sentinel) {
            sentinel = document.createElement('div');
            sentinel.className = 'scroll-sentinel';
            sentinel.setAttribute('aria-hidden', 'true');
            this.grid.parentNode.appendChild(sentinel);
        }

        // Create and set up the observer
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && this.state.pagination.hasMore && !this.state.loading) {
                    this.state.page++;
                    this.loadFavourites();
                }
            });
        }, {
            rootMargin: '200px' // Start loading more content before reaching the sentinel
        });

        // Start observing the sentinel
        observer.observe(sentinel);
    }

    /**
     * Load initial data
     * TODO: Replace with the basic this.loadFavourites method
     */
    async loadInitialData() {
        this.loadingManager.show();

        try {
            // Load favourites for first tab
            await this.loadFavourites();

            // Load lists data (non-blocking)
            this.loadLists().catch(error => {
                console.error('Error loading lists:', error);
            });
        } catch (error) {
            this.handleError(error, 'loading initial data');
        } finally {
            this.loadingManager.hide();
        }
    }

    /**
     * Load favourites from the server
     * @returns {Promise<Object>} Response data
     */
    async loadFavourites(reset = true) {
        if(this.state.loading) return;

        try {
            this.state.loading = true;
            this.loadingManager.show();

            const params = new URLSearchParams({
                page: this.state.page,
                per_page: this.config.defaultPerPage,
                type: this.state.filter.type !== 'all' ? this.state.filter.type : '',
                order: this.state.filter.order,
                orderby: this.state.filter.orderBy
            });
            if(reset){
                this.state.page = 1;
                removeChildren(this.grid);
                this.grid.classList.remove('empty');
            }

            const data = await this.cache.fetchWithCache(
                `${jvbSettings.api}${this.config.endpoints.favourites}?${params}`,
                {
                    method: 'GET',
                    headers: {
                        'X-WP-Nonce': window.auth.getNonce(),
                        'X-Action-Nonce': window.auth.getNonce('favourites'),
                    }
                },{
                    context: 'favouritesManager',
                    forceRefresh: true,
                }
            );

            // Process and render the favourites
            this.renderFavourites(data.favourites || [], this.state.page > 1);

            // Update type filters with counts
            if (data.counts) {
                this.updateTypeFilters(data.counts);
            }

            // Update pagination info
            if (data.pagination) {
                this.state.pagination = {
                    hasMore: data.pagination.has_more,
                    totalItems: data.pagination.total_items,
                    totalPages: data.pagination.total_pages
                };
            }


            return data;
        } catch (error) {
            this.handleError(error, 'loading favourites');
            throw error;
        } finally {
            this.state.loading = false;
            this.loadingManager.hide();
        }
    }

    /**
     * Render favourites to the grid
     * @param {Array} favourites - Array of favourite items
     * @param {boolean} append - Whether to append to existing items
     */
    renderFavourites(favourites, append = false) {
        if (!this.grid) return;

        // Check for empty state
        if (favourites.length === 0 && !append) {
            this.showEmptyState();
            return;
        }

        // Hide empty state if we have items
        this.hideEmptyState();

        // Clear grid if not appending
        if (!append) {
            removeChildren(this.grid);
        }

        // Create and append item elements
        favourites.forEach(item => {
            const itemEl = this.createItemElement(item);
            this.grid.appendChild(itemEl);

            // Initialize any JS functionality needed for the item
            this.initItemFunctionality(itemEl, item);
        });

        // Update accessibility announcement
        if (window.jvbA11y) {
            window.jvbA11y.announce(`${append ? 'Added' : 'Loaded'} ${favourites.length} favourites`);
        }
    }

    /**
     * Create a DOM element for a favourite item
     * @param {Object} item - Favourite item data
     * @returns {HTMLElement} The created element
     */
    createItemElement(item) {
        const itemEl = document.createElement('div');
        itemEl.className = `item ${item.type} favourited`;
        itemEl.dataset.id = item.target_id;
        itemEl.dataset.type = item.type;

        // Sanitize item data for security
        const title = sanitizeHtml(item.title || false);
        const notes = sanitizeHtml(item.notes || '');

        // Create item template
        let thumbnailHtml = '';
        if (item.thumbnail) {
            thumbnailHtml = `
                <div class="item-thumbnail">
                    <a href="${item.url}">${item.thumbnail}</a>
                </div>
            `;
        }

        itemEl.innerHTML = `
            <div class="item-select">
                <input type="checkbox"
                   class="favourite-checkbox"
                    id="select-${item.target_id}"
                    value="${item.target_id}">
                <label for="select-${item.target_id}"><span class="screen-reader-text">Select this ${item.type}</span</label>
            </div>

            <button type="button" class="favourite-button favourited"
                onclick="toggleFavourite(this)"
                data-id="${item.target_id}"
                data-type="${item.type}"
                title="Remove from favourites">
                ${jvbSettings.icons['heart-filled']}
            </button>

            ${thumbnailHtml}

            <div class="item-info">
                ${title ? `<h3><a href="${item.url}">${title}</a></h3>` :
                    `<a href="${item.url}">View Item</a>`}

                ${item.author ? `
                <div class="item-artist">
                    <span>By ${item.author.name}</span>
                </div>` : ''}

                ${item.taxonomies?.length ? `
                <div class="taxonomy-lists">
                    ${item.taxonomies.map(tax => `
                        <div class="taxonomy-group">
                            ${jvbSettings.icons[tax.icon]}
                            <ul>
                                ${tax.terms.slice(0, 3).map(term => `
                                    <li>
                                        <a href="${term.url}" ${term.umami_click}>
                                            ${term.title}
                                        </a>
                                    </li>
                                `).join('')}
                            </ul>
                        </div>
                    `).join('')}
                </div>
            ` : ''}

                <div class="notes-section">
                    <button type="button" class="toggle-notes" aria-expanded="false">
                        ${jvbSettings.icons['note'] || 'Notes'}
                        <span>Notes</span>
                    </button>

                    <div class="notes-content" hidden>
                        <textarea class="notes-input"
                            placeholder="Add notes about this item..."
                            data-id="${item.target_id}"
                            data-type="${item.type}">${notes}</textarea>
                        <button type="button" class="save-notes">Save Notes</button>
                    </div>
                </div>
            </div>
        `;

        return itemEl;
    }

    /**
     * Initialize JS functionality for an item
     * @param {HTMLElement} itemEl - The item element
     * @param {Object} item - Item data
     */
    initItemFunctionality(itemEl, item) {
        // Toggle notes visibility
        const notesToggle = itemEl.querySelector('.toggle-notes');
        const notesContent = itemEl.querySelector('.notes-content');

        if (notesToggle && notesContent) {
            notesToggle.addEventListener('click', () => {

                const expanded = notesToggle.ariaExpanded === 'true';

                notesToggle.ariaExpanded = !expanded.toString();
                notesContent.hidden = expanded;

                if (!expanded) {
                    notesContent.querySelector('textarea')?.focus();
                }
            });
        }

        // Notes save button
        const saveButton = itemEl.querySelector('.save-notes');
        const notesInput = itemEl.querySelector('.notes-input');

        if (saveButton && notesInput) {
            saveButton.addEventListener('click', () => {
                this.saveNotes(notesInput);
            });

            // Also save on enter key when textarea is focused
            notesInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
                    e.preventDefault();
                    this.saveNotes(notesInput);
                }
            });
        }
    }

    /**
     * Save notes for an item
     * @param {HTMLTextAreaElement} textarea - Notes textarea
     */
    saveNotes(textarea) {
        if (!textarea) return;

        const notes = textarea.value.trim();
        const itemId = textarea.dataset.id;
        const itemType = textarea.dataset.type;

        if (!itemId || !itemType) return;

        // Queue the operation via QueueManager
        this.queue.addToQueue({
            type: 'favourite_notes',
            data: {
                type: itemType,
                target_id: parseInt(itemId),
                notes: notes
            }
        });
        showToast('Notes saved');
        this.a11y.announce('Notes saved');
    }

    /**
     * Show empty state when no items are found
     */
    showEmptyState(list = false) {

        const emptyEl = this.container.querySelector(this.config.selectors.noItems)??this.createEmptyElement;
        if (emptyEl) {
            emptyEl.hidden = false;
        }

        if (this.grid) {
            this.grid.classList.add('empty');
        }
        this.a11y.announce('No favourites to show!');
    }

    /**
     * Hide empty state
     */
    hideEmptyState() {
        const emptyEl = this.container.querySelector('.no-favourites');
        if (emptyEl) {
            emptyEl.remove();
        }

        if (this.grid) {
            this.grid.classList.remove('empty');
        }
    }

    createEmptyElement(list = false){
        const empty = document.createElement('div');
        empty.className = 'no-favourites';
        empty.innerHTML = `
            <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>
        `;
        this.grid.after(empty);
    }

    showEmptyListState(list = false){
        const empty = document.createElement('div');
        empty.className = 'no-favourites';
        empty.innerHTML = `
            <h3>♡ FULL OF POSSIBILITY ♡</h3>
            <p>There's nothing in this list yet.</p>
            <p>Add some gap fillers from the main favourites tab.</p>
        `;
        this.grid.after(empty);
        this.grid.classList.add('empty');
        this.a11y.announce('No favourites to show!');
    }

    /**
     * Load more items (for infinite scroll)
     * TODO: remove this, replace with default loadItems
     */
    async loadMoreItems() {
        if (this.state.loading || !this.state.pagination.hasMore) return;

        this.state.page += 1;
        await this.loadFavourites();
    }

    /**
     * Update type filters with count data
     * @param {Object} counts - Counts by type
     */
    updateTypeFilters(counts) {
        if (!this.typeFilters) return;

        // Update counts for each filter
        this.typeFilters.querySelectorAll('.type-filter').forEach(btn => {
            const countEl = btn.querySelector('.count');
            if (!countEl) return;

            const type = btn.dataset.type;

            if (type === 'all') {
                // Calculate total for "all" filter
                const total = Object.values(counts).reduce((sum, count) => sum + (parseInt(count) || 0), 0);
                countEl.textContent = `(${total})`;
            } else {
                countEl.textContent = `(${counts[type] || 0})`;
            }
        });
    }

    /**
     * Set filter type
     * @param {string} type - Filter type
     */
    setFilterType(type) {
        if (type === this.state.filter.type) return;

        // Update active state on filter buttons
        if (this.typeFilters) {
            this.typeFilters.querySelectorAll('.type-filter').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.type === type);
                btn.setAttribute('aria-selected', btn.dataset.type === type);
            });
        }

        // Update state
        this.state.filter.type = type;
        this.state.page = 1;

        // Reload with new filter
        this.loadFavourites();

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce(`Filtered to show ${type === 'all' ? 'all' : type} items`);
        }
    }

    /**
     * Set view mode (grid/list)
     * @param {string} viewMode - View mode ('grid' or 'list')
     */
    setView(viewMode) {
        if (viewMode === this.state.view.mode) return;

        // Update view toggle buttons
        if (this.viewControls) {
            this.viewControls.querySelectorAll('.view-toggle').forEach(btn => {
                const isActive = btn.dataset.view === viewMode;
                btn.setAttribute('aria-pressed', isActive);
            });
        }

        // Update grid class
        if (this.grid) {
            this.grid.classList.remove('grid-view', 'list-view');
            this.grid.classList.add(`${viewMode}-view`);
        }

        // Update state and save preference
        this.state.view.mode = viewMode;
        localStorage.setItem('favourites_view', viewMode);

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce(`Changed to ${viewMode} view`);
        }
    }



    /**
     * Toggle select all items
     * @param {boolean} selected - Whether to select or deselect all
     */
    toggleSelectAll(selected) {
        // Get all visible items
        const items = this.getVisibleItems();

        // Update checkboxes
        items.forEach(item => {
            const checkbox = item.querySelector('.item-select input[type="checkbox"]');
            if (checkbox) {
                checkbox.checked = selected;
                this.toggleItemSelection(checkbox.value, selected);
            }
        });

        // Update bulk controls visibility
        this.updateBulkControls();

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce(selected ?
                `Selected all ${items.length} items` :
                'Deselected all items');
        }
    }

    /**
     * Get all visible items
     * @returns {Array} Array of visible item elements
     */
    getVisibleItems() {
        if (!this.grid) return [];
        return Array.from(this.grid.querySelectorAll('.item:not([hidden])'));
    }

    /**
     * Toggle selection of an individual item
     * @param {string} itemId - Item ID
     * @param {boolean} selected - Whether to select or deselect
     */
    toggleItemSelection(itemId, selected) {
        // Add or remove from selected items set
        if (selected) {
            this.state.selectedItems.add(itemId);
        } else {
            this.state.selectedItems.delete(itemId);
        }

        // Toggle selected class on the item element
        const item = this.grid.querySelector(`.item[data-id="${itemId}"]`);
        if (item) {
            item.classList.toggle('selected', selected);
        }
    }

    /**
     * Handle item selection via checkbox
     * @param {HTMLInputElement} checkbox - The checkbox element
     */
    handleItemSelection(checkbox) {
        const isSelected = checkbox.checked;
        const itemId = checkbox.value;

        this.toggleItemSelection(itemId, isSelected);
        this.updateBulkControls();
        this.updateSelectAllState();

        // Announce to screen readers
        if (window.jvbA11y) {
            const itemEl = checkbox.closest('.item');
            const itemName = itemEl ? (itemEl.querySelector('h3')?.textContent || 'item') : 'item';
            window.jvbA11y.announce(isSelected ? `Selected ${itemName}` : `Deselected ${itemName}`);
        }
    }

    /**
     * Update select all checkbox state based on current selection
     */
    updateSelectAllState() {
        const selectAll = this.container.querySelector(this.config.selectors.selectAll);
        if (!selectAll) return;

        const visibleItems = this.getVisibleItems();
        if (visibleItems.length === 0) {
            selectAll.checked = false;
            selectAll.indeterminate = false;
            return;
        }

        const checkedCount = visibleItems.filter(item => {
            const checkbox = item.querySelector('.item-select input[type="checkbox"]');
            return checkbox && checkbox.checked;
        }).length;

        if (checkedCount === 0) {
            selectAll.checked = false;
            selectAll.indeterminate = false;
        } else if (checkedCount === visibleItems.length) {
            selectAll.checked = true;
            selectAll.indeterminate = false;
        } else {
            selectAll.checked = false;
            selectAll.indeterminate = true;
        }
    }

    /**
     * Update bulk controls visibility and content
     */
    updateBulkControls() {
        if (!this.bulkControls) return;

        const bulkActions = this.bulkControls.querySelector('.bulk-actions');
        if (!bulkActions) return;

        const hasSelectedItems = this.state.selectedItems.size > 0;

        // Toggle visibility of bulk actions
        bulkActions.hidden = !hasSelectedItems;

        // Update selected count
        const countEl = this.bulkControls.querySelector('.selected-count');
        if (countEl) {
            countEl.textContent = hasSelectedItems ? `${this.state.selectedItems.size} selected` : '';
        }
    }

    /**
     * Handle keyboard events for the favourites manager
     * @param {KeyboardEvent} e - Keyboard event
     */
    handleKeyDown(e) {
        // If ESC is pressed and we have items selected, clear the selection
        if (e.key === 'Escape' && this.state.selectedItems.size > 0) {
            e.preventDefault(); // Prevent default escape behavior like closing dialogs
            this.clearSelection();

            // Announce to screen readers
            if (window.jvbA11y) {
                window.jvbA11y.announce('Selection cleared using Escape key');
            }
        }
    }

    /**
     * Clear all selected items
     */
    clearSelection() {
        // Clear selection state
        this.state.selectedItems.clear();

        // Uncheck all checkboxes
        this.getVisibleItems().forEach(item => {
            const checkbox = item.querySelector('.item-select input[type="checkbox"]');
            if (checkbox) {
                checkbox.checked = false;
            }
            item.classList.remove('selected');
        });

        // Reset select all checkbox
        const selectAll = this.container.querySelector(this.config.selectors.selectAll);
        if (selectAll) {
            selectAll.checked = false;
            selectAll.indeterminate = false;
        }

        // Update bulk controls
        this.updateBulkControls();

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce('Selection cleared');
        }
    }

    /**
     * Apply a bulk action to selected items
     * @param {string} action - Action to apply
     */
    applyBulkAction(action) {
        if (!action || this.state.selectedItems.size === 0) return;

        switch (action) {
            case 'unfavourite':
                this.bulkUnfavourite();
                break;
            case 'add-to-list':
                this.showAddToListModal();
                break;
            case 'create-list':
                this.showCreateListModal();
                break;
            case 'add-notes':
                this.showBulkNotesModal();
                break;
        }

        // Reset the dropdown
        const select = this.container.querySelector('.bulk-action-select');
        if (select) {
            select.value = '';
        }
    }

    /**
     * Handle various item actions
     * @param {Event} e - Click event
     */
    handleItemActions(e) {
        // Notes toggle
        if (e.target.closest('.toggle-notes')) {
            const button = e.target.closest('.toggle-notes');
            const isExpanded = button.getAttribute('aria-expanded') === 'true';
            const notesContent = button.closest('.notes-section').querySelector('.notes-content');

            button.setAttribute('aria-expanded', !isExpanded);
            notesContent.hidden = isExpanded;

            if (!isExpanded && notesContent) {
                notesContent.querySelector('textarea')?.focus();
            }

            e.preventDefault();
            return;
        }

        // Save notes button
        if (e.target.closest('.save-notes')) {
            const button = e.target.closest('.save-notes');
            const textarea = button.closest('.notes-content').querySelector('textarea');

            if (textarea) {
                this.saveNotes(textarea);
            }

            e.preventDefault();
            return;
        }

        // View list button
        if (e.target.closest('.view-list')) {
            const button = e.target.closest('.view-list');
            const listCard = button.closest('.list-card');
            if (listCard && listCard.dataset.id) {
                this.viewList(listCard.dataset.id);
            }

            e.preventDefault();
            return;
        }

        // Share list button
        if (e.target.closest('.share-list')) {
            const button = e.target.closest('.share-list');
            const listCard = button.closest('.list-card');

            if (listCard && listCard.dataset.id) {
                this.showShareModal(listCard.dataset.id);
            }

            e.preventDefault();
            return;
        }

        // Delete list button
        if (e.target.closest('.delete-list')) {
            const button = e.target.closest('.delete-list');
            const listCard = button.closest('.list-card');

            if (listCard && listCard.dataset.id) {
                this.deleteList(listCard.dataset.id);
            }

            e.preventDefault();
            return;
        }

        // Back to lists button
        if (e.target.closest('.back-to-lists')) {
            this.exitListView();
            e.preventDefault();
            return;
        }
    }

    /**
     * Load user's lists from the server
     * @returns {Promise<Object>} Response data
     */
    async loadLists(reset = true) {
        try {
            this.state.loading = true;
            this.loadingManager.show('Loading lists...');

            const data = await this.cache.fetchWithCache(
                `${jvbSettings.api}${this.config.endpoints.lists}`,
                {
                    method: 'GET',
                    headers: {
                        'X-WP-Nonce': window.auth.getNonce(),
                        'X-Action-Nonce': window.auth.getNonce('favourites')
                    }
                },
                {
                    context: 'favourite-lists',
                    forceRefresh: false,
                }
            );

            // Render lists to UI
            if (data.lists) {
                this.renderLists(data.lists);
            }

            return data;
        } catch (error) {
            this.handleError(error, 'loading lists');
            throw error;
        } finally {
            this.state.loading = false;
            this.loadingManager.hide();
        }
    }

    /**
     * Render lists to the container
     * @param {Array} lists - List data array
     */
    renderLists(lists) {
        if (!this.listContainer) return;

        // Clear existing content
        removeChildren(this.listContainer);

        if (!lists || lists.length === 0) {
            this.listContainer.innerHTML = `
                <div class="no-lists">
                    <h3>No Lists Yet</h3>
                    <p>Select favourites from the main tab to organize into lists.</p>
                </div>
            `;
            return;
        }

        // Separate owned and shared lists
        const ownedLists = lists.owned;
        const sharedLists = lists.shared;

        // Create owned lists section
        if (ownedLists.length > 0) {
            const ownedSection = document.createElement('details');
            ownedSection.className = 'lists-section owned-lists';
            ownedSection.open = true;
            ownedSection.innerHTML = `<summary>Your Lists:</summary>`;

            // Create list cards
            ownedLists.forEach(list => {
                const card = this.createListCard(list);
                ownedSection.appendChild(card);
            });

            this.listContainer.appendChild(ownedSection);
        }

        // Create shared lists section
        if (sharedLists.length > 0) {
            const sharedSection = document.createElement('details');
            sharedSection.className = 'lists-section shared-lists';
            sharedSection.innerHTML = `<summary>Lists Shared with You:</summary>`;

            // Create list cards
            sharedLists.forEach(list => {
                const card = this.createListCard(list);
                sharedSection.appendChild(card);
            });

            this.listContainer.appendChild(sharedSection);
        }
    }

    /**
     * Create a list card element
     * @param {Object} list - List data
     * @returns {HTMLElement} List card element
     */
    createListCard(list) {
        const card = document.createElement('div');
        card.className = 'list-card';
        card.dataset.id = list.id;

        const isShared = list.is_shared === '1';
        if (isShared) {
            card.classList.add('shared');
        }

        if (list.is_temp) {
            card.classList.add('temp');
        }
        const isOwner = list.is_owner === '1';

        const name = sanitizeHtml(list.name || 'Untitled List');
        const description = sanitizeHtml(list.description || '');

        card.innerHTML = `
            <div class="list-header">
                <h3>${name}</h3>
                <div class="list-actions">
                    <button type="button" class="view-list" title="View List">
                        ${jvbSettings.icons?.show || 'View'}
                    </button>
                    ${!isShared ? `
                        <button type="button" class="share-list" title="Share List">
                            ${jvbSettings.icons?.share || 'Share'}
                        </button>
                        <button type="button" class="delete-list" title="Delete List">
                            ${jvbSettings.icons?.delete || 'Delete'}
                        </button>
                    ` : ''}
                </div>
            </div>

            ${description ? `<p class="list-description">${description}</p>` : ''}

            <div class="list-meta">
                <div class="meta-stats">
                    <span class="item-count">${list.item_count || 0} items</span>
                    <span class="date">${formatDate(list.created_at)}</span>
                </div>


                ${isShared ? `
                    <div class="owner-info">
                        Shared by ${list.owner_name || 'another user'}
                    </div>
                ` : list.share_count > 0 ? `
                    <div class="share-info">
                        Shared with ${list.share_count} ${list.share_count === 1 ? 'person' : 'people'}
                    </div>
                ` : ''}
            </div>
        `;

        return card;
    }

    /**
     * View a specific list
     * @param {string} listId - List ID
     */
    async viewList(listId) {
        try {
            this.state.loading = true;
            this.loadingManager.show('Loading list...');

            // Set current list ID
            this.state.currentListId = listId;

            // Fetch list details from server
            const data = await this.cache.fetchWithCache(
                `${jvbSettings.api}${this.config.endpoints.lists}?id=${listId}`,
                {
                    method: 'GET',
                    headers: {
                        'X-WP-Nonce': window.auth.getNonce(),
                        'X-Action-Nonce': window.auth.getNonce('favourites')
                    }
                },
                {
                    context: 'list-item',
                    forceRefresh: false,
                }
            );

            if (data.list) {
                this.showListDetails(data.list);
            } else {
                throw new Error('List not found');
            }
        } catch (error) {
            this.handleError(error, 'viewing list');
        } finally {
            this.state.loading = false;
            this.loadingManager.hide();
        }
    }

    /**
     * Display list details view
     * @param {Object} list - List data
     */
    showListDetails(list) {
        if (!this.listDetails || !this.listContainer) return;
        console.log(list);
        // Update list title
        this.listDetails.querySelector('.list-title').value= list.name || 'Untitled List';
        this.listDetails.querySelector('.list-description').value = list.description || '';

        if(!list['is_owner']){
            this.listDetails.querySelector('.list-actions')?.remove();
        }else if(!this.listDetails.querySelector('.list-actions')){
            this.createListActions();
        }

        removeChildren(this.grid);

        this.renderFavourites(list.items || [], false);

        if(list.items.length === 0){
            this.showEmptyListState();
        }

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce(`Viewing list: ${list.name} with ${list.items?.length || 0} items`);
        }
    }
    createListActions(){
        const actions = document.createElement('div');
        actions.className = 'list-actions';
        actions.innerHTML = `
            <button type="button" class="share-list" title="Share List">
            <i class="icon icon-share-fat"></i>
            <span>Share</span>
        </button>
        <button type="button" class="duplicate-list" title="Duplicate List">
            <i class="icon icon-copy"></i>
            <span>Duplicate</span>
        </button>
        <button type="button" class="delete-list" title="Delete List">
            <i class="icon icon-trash"></i>
            <span>Delete</span>
        </button>
        `;

        this.listDetails.insertBefore(actions, this.listDetails.querySelector('.bulk-controls'));
    }

    /**
     * Exit list view and return to lists overview
     */
    exitListView() {
        if (!this.listDetails || !this.listContainer) return;

        // Hide details and show list container
        this.listDetails.hidden = true;
        this.listContainer.hidden = false;

        // Remove viewing-list class
        this.container.classList.remove('viewing-list');

        // Clear current list ID
        this.state.currentListId = null;

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce('Returned to lists view');
        }
    }

    /**
     * Show create list modal
     */
    showCreateListModal() {
        if (!this.createListModal) return;

        // Reset form
        this.createListModal.querySelector('form')?.reset();

        // Show modal
        this.createListModal.showModal();

        // Focus first input
        setTimeout(() => {
            this.createListModal.querySelector('#list-name')?.focus();
        }, 100);

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce('Create list dialog opened');
        }
    }

    /**
     * Show add to list modal
     */
    showAddToListModal() {
        if (!this.addToListModal) return;

        // Populate lists options
        this.populateAddToListModal();

        // Show modal
        this.addToListModal.showModal();

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce('Add to list dialog opened');
        }
    }

    /**
     * Populate add to list modal with available lists
     */
    async populateAddToListModal() {
        if (!this.addToListModal) return;

        const listsContainer = this.addToListModal.querySelector('.lists-options');
        if (!listsContainer) return;

        // Clear existing content
        removeChildren(listsContainer);

        try {
            const data = await this.loadLists();

            // Filter to only include owned lists
            const ownedLists = data.lists.owned;

            if (ownedLists.length === 0) {
                // No lists available
                listsContainer.innerHTML = `
                    <div class="no-lists">
                        <p>You don't have any lists yet.</p>
                        <button type="button" class="create-list-button">Create a list</button>
                    </div>
                `;

                // Add event listener for create list button
                listsContainer.querySelector('.create-list-button')?.addEventListener('click', () => {
                    this.addToListModal.close();
                    this.showCreateListModal();
                });

                return;
            }

            // Create checkboxes for each list
            ownedLists.forEach(list => {
                const listOption = document.createElement('div');
                listOption.className = 'list-option';

                listOption.innerHTML = `
                    <input type="checkbox" id="${list.id}" name="list_ids[]" value="${list.id}">
                    <label for="${list.id}">

                        <span class="list-name">${sanitizeHtml(list.name)}</span>
                        <span class="item-count">( ${list.item_count || 0} items )</span>
                    </label>
                `;

                listsContainer.appendChild(listOption);
            });

        } catch (error) {
            listsContainer.innerHTML = `
                <div class="error-message">
                    <p>Error loading lists. Please try again.</p>
                </div>
            `;
            console.error('Error loading lists for modal:', error);
        }
    }

    /**
     * Handle creating a new list
     * @param {FormData} formData - Form data
     */
    async handleCreateList(formData) {
        const listName = formData.get('list_name');
        const description = formData.get('list_description');

        if (!listName) {
            showToast('Please enter a list name', 'error');
            return;
        }

        try {
            this.showLoader('Creating list...');

            // Get selected items
            const items = [];
            this.state.selectedItems.forEach(id => {
                const itemEl = this.grid.querySelector(`.item[data-id="${id}"]`);
                if (itemEl) {
                    items.push({
                        type: itemEl.dataset.type,
                        target_id: parseInt(id)
                    });
                }
            });

            // Queue the operation
            this.queue.addToQueue({
                type: 'favourite_list_create',
                data: {
                    name: listName,
                    description: description,
                    items: items
                }
            });

            // Show success message
            showToast(`List "${listName}" created`);
            this.a11y.announce(`List ${listName} created with ${items.length} items`);
            // Close modal
            this.createListModal.close();

            // Clear selection
            this.clearSelection();

            // Switch to lists tab
            this.switchTab('lists');

        } catch (error) {
            this.handleError(error, 'creating list');
        } finally {
            this.hideLoader();
        }
    }

    /**
     * Handle adding items to list
     * @param {FormData} formData - Form data
     */
    async handleAddToList(formData) {
        const listIds = formData.getAll('list_ids[]');

        if (!listIds.length) {
            showToast('Please select at least one list', 'error');
            return;
        }

        try {
            this.showLoader('Adding to list...');

            // Get selected items
            const items = [];
            this.state.selectedItems.forEach(id => {
                const itemEl = this.grid.querySelector(`.item[data-id="${id}"]`);
                if (itemEl) {
                    items.push({
                        type: itemEl.dataset.type,
                        target_id: parseInt(id)
                    });
                }
            });


            // Queue an operation for each selected list

            this.queue.addToQueue({
                type: 'favourite_list_add',
                data: {
                    list_id: listIds.join(','),
                    items: items
                }
            });

            //Show success message
            showToast(`Added to ${listIds.length} ${listIds.length === 1 ? 'list' : 'lists'}`);
            this.a11y.announce(`Added ${items.length} items to ${listIds.length} ${listIds.length === 1 ? 'list' : 'lists'}`);

            // Close modal
            this.addToListModal.close();

            // Clear selection
            this.clearSelection();
        } catch (error) {
            this.handleError(error, 'adding to list');
        } finally {
            this.hideLoader();
        }
    }

    /**
     * Handle adding items to list
     * @param {FormData} formData - Form data
     */
    async handleRemoveFromList(formData) {
        const listIds = formData.getAll('list_ids[]');

        if (!listIds.length) {
            showToast('Please select at least one list', 'error');
            return;
        }

        try {
            this.showLoader('Removing from list...');

            // Get selected items
            const items = [];
            this.state.selectedItems.forEach(id => {
                const itemEl = this.grid.querySelector(`.item[data-id="${id}"]`);
                if (itemEl) {
                    items.push({
                        type: itemEl.dataset.type,
                        target_id: parseInt(id)
                    });
                }
            });


            // Queue an operation for each selected list

            this.queue.addToQueue({
                type: 'favourite_list_remove',
                data: {
                    list_id: listIds.join(','),
                    items: items
                }
            });

            //Show success message
            showToast(`Removed from ${listIds.length} ${listIds.length === 1 ? 'list' : 'lists'}`);
            this.a11y.announce(`Removed ${items.length} items to ${listIds.length} ${listIds.length === 1 ? 'list' : 'lists'}`);

            // Close modal
            this.addToListModal.close();

            // Clear selection
            this.clearSelection();
        } catch (error) {
            this.handleError(error, 'remove from list');
        } finally {
            this.hideLoader();
        }
    }

    /**
     * Show share list modal
     * @param {string} listId - List ID
     */
    showShareModal(listId) {
        if (!this.shareListModal) return;

        // Store current list ID
        this.state.currentListId = listId;

        // Reset form
        this.shareListModal.querySelector('form')?.reset();

        // Load shared users
        this.loadSharedUsers(listId);

        // Show modal
        this.shareListModal.showModal();

        // Focus email input
        setTimeout(() => {
            this.shareListModal.querySelector('#share-email')?.focus();
        }, 100);

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce('Share list dialog opened');
        }
    }

    /**
     * Load users a list is shared with
     * @param {string} listId - List ID
     */
    async loadSharedUsers(listId) {
        try {
            // Get shared users container
            const container = this.shareListModal.querySelector('.shared-users');
            if (!container) return;

            // Show loading state
            container.innerHTML = '<div class="loading">Loading shared users...</div>';

            // Fetch list details including shared users
            const data = await this.cache.fetchWithCache(
                `${jvbSettings.api}${this.config.endpoints.lists}?id=${listId}`,
                {
                    method: 'GET',
                    headers: {
                        'X-WP-Nonce': window.auth.getNonce(),
                        'X-Action-Nonce': window.auth.getNonce('favourites')
                    }
                },
                {
                    context: 'list-item',
                    forceRefresh: false,
                }
            );

            // Clear container
            removeChildren(container);

            if (data.list && data.list.shared_users && data.list.shared_users.length > 0) {
                // Create element for each shared user
                data.list.shared_users.forEach(user => {
                    const userEl = document.createElement('div');
                    userEl.className = `shared-user ${user.status}`;

                    userEl.innerHTML = `
                        <span class="user-email">${user.email}</span>
                        ${user.status === 'pending' ?
                        `<span class="pending-badge">Invitation sent</span>` :
                        `<span class="permission-badge">${user.permission_type || 'view'}</span>`
                    }
                        <button type="button" class="remove-share" data-email="${user.email}">
                            ${jvbSettings.icons?.delete || 'Remove'}
                        </button>
                    `;

                    container.appendChild(userEl);
                });

                // Add event listeners for remove buttons
                container.querySelectorAll('.remove-share').forEach(btn => {
                    btn.addEventListener('click', () => {
                        this.unshareList(btn.dataset.email);
                    });
                });
            } else {
                // Show empty state
                container.innerHTML = '<div class="no-shares">This list is not shared with anyone yet.</div>';
            }
        } catch (error) {
            console.error('Error loading shared users:', error);
        }
    }

    /**
     * Remove a user's access to a list
     * @param {string} email - Email address to remove
     */
    async unshareList(email) {
        if (!confirm(`Remove ${email}'s access to this list?`)) return;

        if (!this.state.currentListId) {
            showToast('No list selected', 'error');
            return;
        }

        try {
            this.showLoader('Removing access...');

            // Queue the operation
            this.queue.addToQueue({
                type: 'favourite_list_unshare',
                data: {
                    list_id: parseInt(this.state.currentListId),
                    email: email
                }
            });
            // Update UI optimistically
            const sharedUser = Array.from(this.shareListModal.querySelectorAll('.shared-user')).find(
                el => el.querySelector('.user-email')?.textContent === email
            );

            if (sharedUser) {
                // Add removing class for animation
                sharedUser.classList.add('removing');

                // Remove after animation
                setTimeout(() => {
                    sharedUser.remove();

                    // Show empty state if no more shared users
                    if (this.shareListModal.querySelectorAll('.shared-user').length === 0) {
                        const container = this.shareListModal.querySelector('.shared-users');
                        if (container) {
                            container.innerHTML = '<div class="no-shares">This list is not shared with anyone yet.</div>';
                        }
                    }
                }, 300);
            }

            // Show success message
            showToast(`Removed ${email}'s access`);

            // Announce to screen readers
            this.a11y.announce(`Removed ${email}'s access to list`);

        } catch (error) {
            this.handleError(error, 'removing share access');
        } finally {
            this.hideLoader();
        }
    }

    /**
     * Delete a list
     * @param {string} listId - List ID
     */
    async deleteList(listId) {
        if (!confirm('Are you sure you want to delete this list? This cannot be undone.')) return;

        try {
            this.showLoader('Deleting list...');

            // Queue the operation
            this.queue.addToQueue({
                type: 'favourite_list_delete',
                data: {
                    list_id: parseInt(listId)
                }
            });
            // Update UI optimistically
            const listCard = this.container.querySelector(`.list-card[data-id="${listId}"]`);
            if (listCard) {
                // Add removing class for animation
                listCard.classList.add('removing');

                // Remove after animation
                setTimeout(() => {
                    listCard.remove();

                    // Check if we need to show empty state
                    const remainingCards = this.container.querySelectorAll('.list-card').length;
                    if (remainingCards === 0) {
                        this.listContainer.innerHTML = `
                                <div class="no-lists">
                                    <h3>No Lists Yet</h3>
                                    <p>Create your first list to organize your favourites!</p>
                                </div>
                            `;
                    }
                }, 300);
            }

            // Show success message
            showToast('List deleted');

            // Announce to screen readers
            this.a11y.announce('List deleted');
        } catch (error) {
            this.handleError(error, 'deleting list');
        } finally {
            this.hideLoader();
        }
    }

    /**
     * Show bulk notes modal
     */
    showBulkNotesModal() {
        // Check if we've created the modal yet
        let bulkNotesModal = document.querySelector('.bulk-notes-modal');

        // Create modal if it doesn't exist
        if (!bulkNotesModal) {
            bulkNotesModal = document.createElement('dialog');
            bulkNotesModal.className = 'bulk-notes-modal';

            bulkNotesModal.innerHTML = `
                <form method="dialog" data-save="favourites">
                    <h2>Add Notes to Selected Items</h2>

                    <div class="field">
                        <label for="bulk-notes">Notes (will be applied to all selected items)</label>
                        <textarea id="bulk-notes" name="bulk_notes" rows="5"></textarea>
                    </div>

                    <div class="actions">
                        <button type="button" class="cancel">Cancel</button>
                        <button type="submit" class="save">Save Notes</button>
                    </div>
                </form>
            `;

            document.body.appendChild(bulkNotesModal);

            // Add event listeners
            const form = bulkNotesModal.querySelector('form');
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                const notes = bulkNotesModal.querySelector('#bulk-notes').value;
                this.saveBulkNotes(notes);
                bulkNotesModal.close();
            });

            const cancelButton = bulkNotesModal.querySelector('.cancel');
            cancelButton.addEventListener('click', () => {
                bulkNotesModal.close();
            });
        }

        // Reset form
        bulkNotesModal.querySelector('form')?.reset();

        // Show modal
        bulkNotesModal.showModal();

        // Focus textarea
        setTimeout(() => {
            bulkNotesModal.querySelector('#bulk-notes')?.focus();
        }, 100);

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce('Add notes dialog opened');
        }
    }

    /**
     * Save notes to multiple items
     * @param {string} notes - Notes text
     */
    saveBulkNotes(notes) {
        if (!notes) return;

        try {
            this.showLoader('Saving notes...');

            let items = Array.from(this.state.selectedItems.values());
            this.queue.addToQueue({
                type: 'favourite_notes',
                data:{
                    target_id: items.join(','),
                    notes: notes
                }
            })
            // Show success message
            showToast(`Notes saved for ${items.length} items`);

            // Announce to screen readers
            this.a11y.announce(`Notes saved for ${items.length} items`);

            // Clear selection
            this.clearSelection();
        } catch (error) {
            this.handleError(error, 'saving bulk notes');
        } finally {
            this.hideLoader();
        }
    }

    /**
     * Remove selected items from favourites
     */
    async bulkUnfavourite() {
        if (!confirm('Are you sure you want to remove these items from your favourites?')) return;

        try {
            this.showLoader('Removing from favourites...');

            // Create batch operation data
            const items = [];
            this.state.selectedItems.forEach(id => {
                const itemEl = this.grid.querySelector(`.item[data-id="${id}"]`);
                if (!itemEl) return;

                const type = itemEl.dataset.type;

                items.push({
                    target_id: parseInt(id),
                    type: type,
                    action: 'remove'
                });
            });

            // Queue the operation
            this.queue.addToQueue({
                type: 'favourite_toggle',
                data: items
            });

            // Update UI immediately for better UX
            const fadePromises = [];

            this.state.selectedItems.forEach(id => {
                const itemEl = this.grid.querySelector(`.item[data-id="${id}"]`);
                if (!itemEl) return;

                // Add removing class for animation
                itemEl.style.opacity = '0';
                itemEl.style.transform = 'scale(0.9)';
                itemEl.style.transition = 'opacity 0.3s ease, transform 0.3s ease';

                // Create promise for removal after animation
                const fadePromise = new Promise(resolve => {
                    setTimeout(() => {
                        itemEl.remove();
                        resolve();
                    }, 300);
                });

                fadePromises.push(fadePromise);
            });

            // Wait for all animations to complete
            await Promise.all(fadePromises);

            // Check if grid is now empty
            if (this.grid.children.length === 0) {
                this.showEmptyState();
            }

            // Clear selection
            this.clearSelection();

            // Show success message
            showToast(`Removed ${items.length} items from favourites`);

            // Announce to screen readers
            this.a11y.announce(`Removed ${items.length} items from favourites`);

        } catch (error) {
            this.handleError(error, 'removing favourites');
        } finally {
            this.hideLoader();
        }
    }

    /**
     * Handle sharing a list
     * @param {FormData} formData - Form data
     */
    async handleShareList(formData) {
        const email = formData.get('share_email');

        if (!email) {
            showToast('Please enter an email address', 'error');
            return;
        }

        if (!this.validateEmail(email)) {
            showToast('Please enter a valid email address', 'error');
            return;
        }

        try {
            this.showLoader('Sharing list...');

            // Queue the operation
            this.queue.addToQueue({
                type: 'favourite_list_share',
                data: {
                    list_id: parseInt(this.state.currentListId),
                    email: email,
                    permission_type: 'view' // Default to view permission
                }
            });

            // Clear the email input
            this.shareListModal.querySelector('#share-email').value = '';

            // Update shared users list
            this.loadSharedUsers(this.state.currentListId);

            // Show success message
            showToast(`Invitation sent to ${email}`);

            // Announce to screen readers
            this.a11y.announce(`Invitation sent to ${email}`);
        } catch (error) {
            this.handleError(error, 'sharing list');
        } finally {
            this.hideLoader();
        }
    }

    /**
     * Show loading indicator
     * @param {string} message - Optional message to display
     */
    showLoader(message = 'Loading...') {
        if (!this.loader) return;

        const messageEl = this.loader.querySelector('.loader-message');
        if (messageEl) {
            messageEl.textContent = message;
        }

        this.loader.hidden = false;
    }

    /**
     * Hide loading indicator
     */
    hideLoader() {
        if (this.loader) {
            this.loader.hidden = true;
        }
    }

    showToast(message, type){
        window.jvbNotifications.showToast(message, type);
    }

    /**
     * Handle errors
     * @param {Error} error - Error object
     * @param {string} action - Action being performed when error occurred
     */
    handleError(error, action) {
        console.error(`Favourites error (${action}):`, error);

        // Show toast notification
        showToast(
            `Error ${action}: ${error.message || 'Something went wrong'}`,
            'error'
        );

        // Log with error handler if available
        if (window.jvbError) {
            window.jvbError.log(error, {
                component: 'FavouritesManager',
                action: action
            });
        }

        // Announce to screen readers
        if (window.jvbA11y) {
            window.jvbA11y.announce(`Error ${action}. ${error.message || 'Please try again.'}`);
        }
    }

    /**
     * Validate email format
     * @param {string} email - Email to validate
     * @returns {boolean} Whether email is valid
     */
    validateEmail(email) {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }
}

window.favouritesManager = FavouritesManager;