// FeedGrid.js - Manages rendering of feed items in a grid
import { formatTimeAgo } from '../utils/formatters';
class FeedGrid {
    constructor(container, options = {}) {
        this.container = container;
        this.options = {
            showAuthor: true,
            showDate: false,
            isGallery: false,
            imageLoadThreshold: 5, // Number of images to load immediately
            lazyLoadOffset: '100px', // Load images 100px before they enter viewport
            ...options
        };

        this.galleryItems = [];
        this.loadedItems = 0;
        this.imageObserver = null;
		this.galleryOpenHandler = null;
		this.intersectionObserver = null;
		this.resizeObserver = null;

		// Element template cache for performance
		this.templateCache = new Map();

		this.initializeObservers();
	}

	/**
	 * Initialize intersection observer for lazy loading images
	 */
	initializeObservers() {
		// 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.options.lazyLoadOffset,
				threshold: 0.1
			});
		}

		// Resize observer for responsive images
		if ('ResizeObserver' in window) {
			this.resizeObserver = new ResizeObserver(this.debounce(() => {
				this.updateImageSizes();
			}, 250));

			// Observe the container
			this.resizeObserver.observe(this.container);
		} else {
			// Fallback to window resize
			window.addEventListener('resize', this.debounce(() => {
				this.updateImageSizes();
			}, 250));
		}

		// Add event delegation
		this.container.addEventListener('click', this.handleContainerClick.bind(this));
	}

	/**
	 * Handle container click events (delegation pattern)
	 */
	handleContainerClick(e) {
		// Gallery image click
		if (this.options.isGallery) {
			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.galleryOpenHandler) {
						this.galleryOpenHandler(index);
						e.preventDefault();
					}
				}
			}
		}

		// Favourite button click handled by document-level event listener
	}

	/**
	 * Set gallery open handler
	 */
	setGalleryOpenHandler(handler) {
		this.galleryOpenHandler = handler;
	}

	/**
	 * Render feed items
	 */
	renderItems(items, append = false) {
		// Reset if not appending
		if (!append) {
			this.container.innerHTML = '';
			this.loadedItems = 0;
			this.galleryItems = [];
		}

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

		// 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.loadedItems >= this.options.imageLoadThreshold && this.imageObserver) {
					this.imageObserver.observe(element);
				} else {
					this.loadImage(element);
				}

				this.loadedItems++;
			}

			// 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.container.appendChild(fragment);
				this.makeItemsKeyboardNavigable();
				this.announceUpdate(items.length, append);
			}
		};

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

	/**
	 * Load image for an item
	 */
	loadImage(element) {
		const img = element.querySelector('img[data-src]');
		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.container.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) {

		// Process item data - filters out artist from labels if not showing author
		if (!this.options.showAuthor) {
			item.labels = item.labels.filter(label => label.icon !== 'artist');

			if (this.options.showDate) {
				item.labels.push({
					'icon': 'calendar',
					'value': formatTimeAgo(item.date),
					'url': false,
				});
			}
		}

		// Check if item is favourited
		const isFavourited = window.hasFavourited ?
			window.hasFavourited(item.type, item.id) :
			false;

		// Get cached template or create new element
		const cacheKey = `${item.type}_template`;
		let wrapper;

		if (this.templateCache.has(cacheKey)) {
			// Clone from template cache
			wrapper = this.templateCache.get(cacheKey).cloneNode(true);
		} else {
			// Create new element
			wrapper = document.createElement('details');
			wrapper.className = item.type === 'artist' ? 'feed-item artist' : 'feed-item';

			// Cache for future use
			this.templateCache.set(cacheKey, wrapper.cloneNode(true));
		}

		// Set unique attributes
		wrapper.id = `${item.type}-${item.id}`;

		// Add umami tracking attributes
		if (item.umami_view) {
			const viewAttributes = item.umami_view.split(" ");
			viewAttributes.forEach(attr => {
				const parts = attr.split('="');
				if (parts.length === 2) {
					const name = parts[0];
					const value = parts[1].replace('"', '');
					wrapper.setAttribute(name, value);
				}
			});
		}

		// Generate HTML content
		const imageHTML = (item.type === 'artist') ? this.generateArtistGrid(item) : this.generateImageHTML(item);
		const labelsHTML = this.generateLabels(item.labels);
		const taxonomiesHTML = this.generateTaxonomies(item.taxonomies);

		wrapper.innerHTML = `
			<summary>
				<span class="handle">DETAILS</span>
				<button class="favourite-button${isFavourited ? ' favourited' : ''}"
						data-id="${item.id}"
						data-type="${item.type}"
						data-artist="${item.user_id || ''}"
						title="${isFavourited ? 'Remove from favourites' : 'Add to favourites'}">
					${window.feedSettings.icons[isFavourited ? 'heart-filled' : 'heart']}
				</button>
				${imageHTML}
			</summary>

			<div class="item-info">
				${item.title ? `<h3><a href="${item.url}" ${item.umami_click}>${item.title}</a></h3>` : ''}
				${labelsHTML}
				${taxonomiesHTML}
			</div>
		`;

		return wrapper;
	}

	generateImageHTML(item) {
		// For artist with tattoos, show a gallery
		if (item.type === 'artist' && item.tattoos && item.tattoos.length) {
			const mainImage = `<a href="${item.url}" class="feed-image" ${item.umami_click}>
				${item.image.replace(/src="([^"]+)"/, 'data-src="$1"')}
			</a>`;

			const tattooHTML = item.tattoos.slice(0, 6).map(tattoo => `
				<a href="${tattoo.url}" class="tattoo-preview">
					${tattoo.image.replace(/src="([^"]+)"/, 'data-src="$1"')}
				</a>
			`).join('');

			return `
				<div class="artist-tattoos">
					${mainImage}
					${tattooHTML}
				</div>
			`;
		}

		// For regular items, show standard image
		const url = this.options.isGallery ? '#' : item.url;
		return `<a href="${url}" class="feed-image" ${item.umami_click}>
			${item.image.replace(/src="([^"]+)"/, 'data-src="$1"')}
		</a>`;
	}

	/**
	 * Generate artist grid HTML
	 */
	generateArtistGrid(item) {
		const mainImage = `<a href="${item.url}" class="feed-image" ${item.umami_click}>
      ${item.image.replace(/src="([^"]+)"/, 'data-src="$1"')}
    </a>`;
		// Add tattoo previews if available
		if (item.tattoos && item.tattoos.length) {
			const tattooHtml = item.tattoos.slice(0, 6).map(tattoo => `
        <a href="${tattoo.url}" class="tattoo-preview">
          ${tattoo.image}
        </a>
      `).join('');

			return `
        <div class="artist-tattoos">
          ${mainImage}
          ${tattooHtml}
        </div>
      `;
		}

		return mainImage;
	}

	/**
	 * Generate labels HTML
	 */
	generateLabels(labels) {
		if (!labels || !labels.length) return '';

		// Sort labels to show artist first
		const sortedLabels = [...labels].sort((a, b) => {
			if (a.icon === 'artist') return -1;
			if (b.icon === 'artist') return 1;
			return 0;
		});

		return `<div class="item-labels">
			${sortedLabels.map(label => `
				<div class="label">
					${window.feedSettings.icons[label.icon]}
					<span class="screen-reader-text">${label.label || ''}</span>
					${label.url !== false
			? `<a href="${label.url}" title="Learn more about ${label.value}" ${label.umami_click || ''}>${label.value}</a>`
			: label.value
		}
				</div>
			`).join('')}
		</div>`;
	}

	/**
	 * Generate taxonomies HTML
	 */
	generateTaxonomies(taxonomies) {
		if (!taxonomies || !taxonomies.length) return '';

		return `<div class="taxonomy-lists">
			${taxonomies.map(tax => `
				<div class="taxonomy-group">
					<span>${window.feedSettings.icons[tax.icon]} ${tax.title}</span>
					<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>`;
	}

	/**
	 * Show empty state
	 */
	showEmptyState(showingFavourites = false) {
		const message = showingFavourites
			? `<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.container.innerHTML = message;
		this.announceEmptyState(showingFavourites);
	}

	/**
	 * Clear the grid
	 */
	clear() {
		this.container.innerHTML = '';
		this.loadedItems = 0;
	}

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

	/**
	 * Announce update to screen readers
	 */
	announceUpdate(itemCount, isAppending) {
		const liveRegion = document.querySelector('.feed-block .live-region');
		if (liveRegion) {
			const action = isAppending ? 'Added' : 'Loaded';
			liveRegion.textContent = `${action} ${itemCount} new items`;
		}
	}

	/**
	 * Announce empty state to screen readers
	 */
	announceEmptyState(showingFavourites) {
		const liveRegion = document.querySelector('.feed-block .live-region');
		if (liveRegion) {
			liveRegion.textContent = showingFavourites
				? "No favourites found. Try adding some items to your collection."
				: "No items found matching your current filters.";
		}
	}

	/**
	 * 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 {
					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);
	}

	/**
	 * Make feed items keyboard navigable
	 */
	makeItemsKeyboardNavigable() {
		const items = this.container.querySelectorAll('.feed-item:not([data-keyboard-nav])');

		items.forEach(item => {
			// Mark as processed
			item.setAttribute('data-keyboard-nav', 'true');

			// Make focusable
			item.setAttribute('tabindex', '0');

			// Add keyboard handling
			item.addEventListener('keydown', e => {
				if (e.key === 'Enter' || e.key === ' ') {
					// Find and click main link
					const link = item.querySelector('.feed-image a, h3 a');
					if (link) {
						link.click();
						e.preventDefault();
					}
				}
			});
		});
	}

	/**
	 * Update favourite status for items
	 */
	updateFavouriteStatus(type, id, isFavourited) {
		// Find all matching buttons in the grid
		const buttons = this.container.querySelectorAll(
			`button.favourite[data-type="${type.replace('jvb_', '')}"][data-id="${id}"]`
		);

		// Update button state
		buttons.forEach(button => {
			button.classList.toggle('favourited', isFavourited);
			button.innerHTML = window.feedSettings.icons[isFavourited ? 'heart-filled' : 'heart'];
			button.title = isFavourited ? 'Remove from favourites' : 'Add to favourites';
		});
	}

	/**
	 * Clean up resources when component is destroyed
	 */
	destroy() {
		// Disconnect observers
		if (this.imageObserver) {
			this.imageObserver.disconnect();
			this.imageObserver = null;
		}

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

		// Remove event listeners
		this.container.removeEventListener('click', this.handleContainerClick);
		window.removeEventListener('resize', this.debounce);

		// Clear template cache
		this.templateCache.clear();

		// Clear data
		this.galleryItems = [];
		this.loadedItems = 0;
		this.galleryOpenHandler = null;
	}

	/**
	 * Debounce function to limit frequent calls
	 */
	debounce(func, wait) {
		let timeout;
		return function(...args) {
			clearTimeout(timeout);
			timeout = setTimeout(() => func.apply(this, args), wait);
		};
	}

}

export default FeedGrid;