// index.js - Main entry point for the Feed Block
import ErrorHandling from './services/ErrorHandlingService';
import StateManager from './services/StateManager';
import FeedService from './services/FeedService';
import FavouritesService from './services/FavouritesService';
import FilterService from './services/FilterService';
import FeedGrid from './components/FeedGrid';
import FilterPanel from './components/FilterPanel';
import GalleryModal from './components/GalleryModal';
import LoadingState from './components/LoadingState';
// import TaxonomySelector from './components/TaxonomySelector';
import cache from './utils/cache';
import { debounce } from './utils/formatters';

class FeedBlock {
    constructor(container) {
        // Store container reference
        this.container = container;

        // Initialize config
        this.initializeConfig();

        // Create services and components
        this.initializeServices();
        this.initializeComponents();
        this.initializeErrorHandling();
        this.initializeAccessibility();

        // Initialize state from URL
        this.loadStateFromURL();
        // Set up event delegation for efficiency
        this.setupEventDelegation();
        this.loadItems();


        // Check for highlighted item
        if (this.config.highlight && this.stateManager.getState().page === 1) {
            console.log(this.config.highlight);
    		console.log('Opening Highlighted Item');
			this.openGallery();
		}

	}

	/**
	 * Initialize error handling
	 */
	initializeErrorHandling() {
		this.errorHandler = new ErrorHandling({
			apiUrl: this.config.apiUrl,
			logToServer: true,
			displayNotifications: true
		});

		// Pass error handler to services
		this.feedService.errorHandler = this.errorHandler;
		this.favouritesService.errorHandler = this.errorHandler;
	}

	/**
	 * Initialize configuration from container data
	 */
	initializeConfig() {
		// Get settings from container data attribute
		const settings = JSON.parse(this.container.dataset.settings || '{}');

		// Merge with globals
		this.config = {
			apiUrl: window.feedSettings?.apiUrl || '',
			nonce: window.feedSettings?.nonce || '',
			currentUser: window.feedSettings?.currentUser || null,

			content: settings.content || 'tattoo',
			contentTypes: settings.contentTypes || ['tattoo'],
			taxonomies: settings.taxonomies || [],
			defaultOrder: settings.defaultOrder || 'date',
			itemsPerPage: settings.itemsPerPage || 12,

			// Context information
			context: settings.context || null,
			name: settings.name || '',
			id: settings.id || '',
			inheritQuery: settings.inheritQuery || false,

			// Initial terms for taxonomies
			initialTerms: settings.initial_terms || {},

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

			// Optional highlight
			highlight: null,

			// Gallery mode
			isGallery: settings.isGallery || false,
			showAuthor: true,
			showDate: false,

			// Feature flags
			loadMoreTax: settings.loadMoreTax ?? true,

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

		// Get highlight from URL if present
		this.config.highlight = this.getHighlightFromURL();

		// Adjust config based on context
		if (this.config.context) {
			switch (this.config.context.type) {
				case 'author':
					this.config.isGallery = true;
					this.config.showAuthor = false;
					this.config.showDate = true;
					break;
			}
		}
	}

	/**
	 * Initialize services
	 */
	initializeServices() {
		// Create state manager
		this.stateManager = new StateManager({
			content: this.config.content,
			defaultOrder: this.config.defaultOrder,
		});

		// Create filter service
		this.filterService = new FilterService({
			taxonomyMap: window.taxonomy_for || {},
			contentTypeMap: window.feed_types || {},
			initialTerms: this.config.initialTerms,
		});

		// Create API service
		this.feedService = new FeedService(
			this.config.apiUrl,
			this.config.nonce
		);

		// Create favourites service
		this.favouritesService = new FavouritesService(
			this.config.apiUrl,
			this.config.nonce
		);

		// Initialize favourites
		this.favouritesService.init();

		// Make available globally for legacy code
		window.hasFavourited = (type, id) => this.favouritesService.isFavourited(type, id);
	}

	/**
	 * Initialize components
	 */
	initializeComponents() {
		// Create filter panel with centralized onChange handler
		this.filterPanel = new FilterPanel(
			this.container.querySelector('.feed-filters'),
			{
				taxonomies: this.config.taxonomies,
				contentTypes: this.config.contentTypes,
				taxonomyFor: window.taxonomy_for || {},
				defaultContent: this.config.content,
				// Pass a reference to the handler instead of binding to avoid duplication
				onChange: this.handleFilterChange.bind(this)
			}
		);

		// IMPORTANT: Initialize taxonomy filters with current content type
		this.filterPanel.updateTaxonomyFilters(this.config.content);
		this.filterPanel.updateOrderFilters(this.config.content);

		// Create feed grid
		this.feedGrid = new FeedGrid(
			this.container.querySelector('.feed-grid'),
			{
				isGallery: this.config.isGallery,
				showAuthor: this.config.showAuthor,
				showDate: this.config.showDate,
			}
		);

		// Create loading state
		this.loadingState = new LoadingState(
			this.container.querySelector('.feed-overlay'),
			{
				contentTypes: this.config.contentTypes,
				taxonomies: this.config.taxonomies,
			}
		);

		// Set up gallery if needed
		if (this.config.isGallery) {
			this.feedGrid.setGalleryOpenHandler(this.openGallery.bind(this));
		}
	}

	/**
	 * Use event delegation for improved performance
	 */
	setupEventDelegation() {
		// State change listener
		this.stateManager.subscribe(this.handleStateChange.bind(this));

		// Single container event listener for load more
		this.container.addEventListener('click', (e) => {
			// Handle load more button
			if (e.target.closest('.load-more')) {
				this.handleLoadMore();
				e.preventDefault();
			}
		});

		// Global events that should only have one listener
		window.addEventListener('popstate', this.handlePopState.bind(this));
		document.addEventListener('galleryClose', () => this.gallery = null);
		document.addEventListener('favourites-updated', this.handleFavouritesUpdate.bind(this));
	}

	/**
	* Handle browser history navigation
	*/
	handlePopState(e) {
		if (e.state && e.state.filters) {
			// Update state manager with filters from URL
			this.stateManager.updateFilters(e.state.filters);

			// Update UI
			this.filterPanel.loadFromURL();

			// Update taxonomy and order filters for current content type
			const contentType = e.state.filters.content || this.config.content;
			this.filterPanel.updateTaxonomyFilters(contentType);
			this.filterPanel.updateOrderFilters(contentType);

			// Load items with updated filters
			this.loadItems();



			// Announce to screen readers
			this.announceToScreenReader('Updated filters from browser history');
		}
	}

	/**
	 * Handle state changes
	 */
	handleStateChange(state) {
		// Update loading UI
		this.updateLoadingUI(state.loading);

		// Update load more button visibility
		this.updateLoadMoreButton(state.hasMore);
	}

	/**
	 * Update loading UI
	 */
	updateLoadingUI(loading) {
		if (loading) {
			this.loadingState.show();
		} else {
			this.loadingState.hide();
		}

		// Update loading spinner
		const spinner = this.container.querySelector('.loading-spinner');
		if (spinner) {
			spinner.hidden = !loading;
		}

		// Update load more button
		const loadMoreBtn = this.container.querySelector('.load-more');
		if (loadMoreBtn) {
			loadMoreBtn.disabled = loading;
		}
	}

	/**
	 * Update load more button visibility
	 */
	updateLoadMoreButton(hasMore) {
		const loadMoreBtn = this.container.querySelector('.load-more');
		if (loadMoreBtn) {
			loadMoreBtn.hidden = !hasMore;
		}
	}

	/**
	 * Handle filter changes
	 */
	handleFilterChange(filters) {
		// Check if content type has changed
		const prevContentType = this.stateManager.getState().filters;
		const contentTypeChanged = prevContentType !== filters;

		// Update state
		this.stateManager.updateFilters(filters);

		// Reset pagination
		this.stateManager.resetPagination();

		// Reload items (with cache reset if content type changed)
		this.loadItems(contentTypeChanged);
	}

	/**
	 * Handle favourites updates
	 */
	handleFavouritesUpdate(event) {
		const { type, id, isFavourited } = event.detail;

		// Update UI
		this.feedGrid.updateFavouriteStatus(type, id, isFavourited);

		// Show notification
		this.showNotification(
			isFavourited ? 'Added to favourites' : 'Removed from favourites',
			'success'
		);
	}

	/**
	 * Handle load more button click
	 */
	handleLoadMore() {
		const state = this.stateManager.getState();

			if (state.loading || !state.hasMore) {
				return;
			}

		// Increment page
		this.stateManager.nextPage();

		// Load more items
		this.loadItems();
	}

	/**
	 * Load items from API with optional cache busting
	 */
	async loadItems(resetCache = false) {
		const state = this.stateManager.getState();

		// Skip if already loading
		if (state.loading) {
			return;
		}

		// Update loading state
		this.stateManager.setLoading(true);
		console.log(this.config);
		try {
			// Get query parameters - explicitly include content type
			const params = {
				filters: {
					...state.filters,
					// Ensure content type is explicitly set
					content: state.filters.content || this.config.content
				},
				page: state.page,
				highlight: this.config.highlight,
				source: this.config.source,
				sourceType: this.config.sourceType
			};


			// Fetch data with cache busting if specified
			const data = await this.feedService.fetchFeed(params, resetCache);

			// Clear grid on first page
			if (state.page === 1) {
				this.feedGrid.clear();
			}
			// Handle empty results
			if (!data || !data.items || data.items.length === 0) {
				if (state.page === 1) {
					this.feedGrid.showEmptyState(!!state.filters.favouritesOnly);
				}
				this.stateManager.setState({ hasMore: false });
			} else {
				// Render items
				this.feedGrid.renderItems(data.items, state.page > 1);

				// Update has more
				this.stateManager.setState({ hasMore: data.hasMore });


			}
		} catch (error) {
			this.handleError(error);
		} finally {
			// Update loading state
			this.stateManager.setLoading(false);
		}
	}

	/**
	 * Handle errors
	 */
	handleError(error) {
		if (this.errorHandler) {
			return this.errorHandler.handleApiError(
				error,
				{
					component: 'FeedBlock',
					action: 'loadItems'
				},
				() => this.loadItems()
			);
		}

		// Fallback to basic error handling if errorHandler not available
		this.showNotification(
			'Failed to load content. Please try again.',
			'error',
			[{
				label: 'Refresh',
				icon: 'refresh',
				action: () => {
					window.location.reload();
				}
			}]
		);
	}

	/**
	 * Show notification
	 */
	showNotification(message, type = 'info', actions = []) {
		if (window.jvbNotifications) {
			window.jvbNotifications.queuePopupNotification({
				type: type,
				message: message,
				icon: type === 'error' ? 'alert' : (type === 'success' ? 'heart' : 'info'),
				priority: type === 'error' ? 'high' : 'medium',
				displayDuration: 3000,
				actions: actions
			});
		}

		// Update live region for accessibility
		const liveRegion = this.container.querySelector('.live-region');
		if (liveRegion) {
			liveRegion.textContent = message;
		}
	}

	/**
	 * Load state from URL parameters
	 */
	loadStateFromURL() {
		// Get filters from URL via the filter service
		const urlFilters = this.filterService.parseFiltersFromURL();
		if (Object.keys(urlFilters).length === 0) {
			return;
		}

		// Determine content type - from URL or default config
		const contentType = urlFilters['f_content'] || this.config.content;

		// Update state manager with URL filters
		if (Object.keys(urlFilters).length > 0) {
			this.stateManager.updateFilters(urlFilters);
		}

		// Update UI to match current state (handled by FilterPanel)
		this.filterPanel.loadFromURL();

		// IMPORTANT: Make sure taxonomy filters visibility is correct
		// for the current content type
		this.filterPanel.updateTaxonomyFilters(contentType);
		this.filterPanel.updateOrderFilters(contentType);

	}

	/**
	 * Get highlighted item from URL
	 */
	getHighlightFromURL() {
		const searchParams = new URLSearchParams(window.location.search);

		// Check for content type parameters
		const contentTypes = ['tattoo', 'piercing', 'artwork'];

		for (const type of contentTypes) {
			if (searchParams.has(type)) {
				return { [type]: searchParams.get(type) };
			}
		}

		return null;
	}

	/**
	 * Scroll to highlighted item
	 */
	scrollToHighlightedItem() {
		if (!this.config.highlight) return;

		// Get highlight type and ID
		const type = Object.keys(this.config.highlight)[0];
		const id = this.config.highlight[type];

		if (!type || !id) return;

		// Find the item
		const item = this.container.querySelector(`#${type}-${id}`);

		if (item) {
			// Scroll to item
			item.scrollIntoView({ behavior: 'smooth', block: 'center' });

			// Highlight the item
			item.classList.add('highlighted');

			// Open gallery if in gallery mode
			if (this.config.isGallery) {
				console.log('It is a gallery item!');
				const items = Array.from(this.container.querySelectorAll('.feed-item'));
				const index = items.indexOf(item);

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

			// Clean up URL
			window.history.replaceState('', '', window.location.origin + window.location.pathname);
		}
	}

	/**
	 * Open gallery view
	 */
	openGallery(index) {
		if (!this.config.isGallery || this.gallery) return;

		// Get gallery items from grid
		const items = this.feedGrid.getGalleryItems();
		console.log(items);

		// Create gallery with unified callbacks object
		this.gallery = new GalleryModal(items, index);

		// Set callbacks
		this.gallery.setCallbacks({
			onClose: () => this.gallery = null,
			onLoadMore: this.handleGalleryLoadMore.bind(this),
			onNavigate: (newIndex) => {
				if (newIndex >= items.length - 3 && this.stateManager.getState().hasMore) {
					this.handleGalleryLoadMore();
				}
			}
		});

		this.gallery.show();
	}

	/**
	 * Handle load more request from gallery
	 */
	async handleGalleryLoadMore() {
		const state = this.stateManager.getState();

		if (!state.hasMore || state.loading) {
			return false;
		}

		// Increment page
		this.stateManager.nextPage();

		// Load more items
		await this.loadItems();

		// Update gallery items
		if (this.gallery) {
			this.gallery.updateItems(this.feedGrid.getGalleryItems());
		}

		return true;
	}

	/**
	 * Initialize accessibility features
	 */
	initializeAccessibility() {
		// Create live region for screen reader announcements
		this.liveRegion = document.createElement('div');
		this.liveRegion.setAttribute('aria-live', 'polite');
		this.liveRegion.setAttribute('role', 'status');
		this.liveRegion.className = 'screen-reader-text live-region';
		this.container.appendChild(this.liveRegion);

		// Add keyboard shortcut support
		this.bindKeyboardShortcuts();
	}

	/**
	 * Set up focus traps for modals
	 */
	setupFocusTraps() {
		// Add focus trap to filter dropdowns
		this.filterDropdowns = this.container.querySelectorAll('.filter-dropdown');
		this.filterDropdowns.forEach(dialog => {
			dialog.addEventListener('show', () => {
				// Store current focus
				this._previouslyFocused = document.activeElement;

				// Focus first focusable element
				const focusable = dialog.querySelectorAll(
					'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
				);
				if (focusable.length) {
					focusable[0].focus();
				}
			});

			dialog.addEventListener('close', () => {
				// Restore focus
				if (this._previouslyFocused) {
					this._previouslyFocused.focus();
				}
			});
		});
	}

	/**
	 * Bind keyboard shortcuts
	 */
	bindKeyboardShortcuts() {
		// Use a single event listener for keyboard shortcuts
		document.addEventListener('keydown', (e) => {
			// Only handle when feed is visible (check if in viewport)
			if (!this.isElementInViewport(this.container)) return;

			// Escape key closes any open dialogs
			if (e.key === 'Escape') {
				const openDialogs = this.container.querySelectorAll('dialog[open]');
				if (openDialogs.length) {
					openDialogs[0].close();
					e.preventDefault();
				}
			}

			// Alt+F opens filters (common accessibility pattern)
			if (e.key === 'f' && e.altKey) {
				const filterToggle = this.container.querySelector('.filter-toggle');
				if (filterToggle) {
					filterToggle.click();
					e.preventDefault();
				}
			}

			// Space or Enter on focused items activates them
			if ((e.key === ' ' || e.key === 'Enter') && document.activeElement.classList.contains('feed-item')) {
				const link = document.activeElement.querySelector('a');
				if (link) {
					link.click();
					e.preventDefault();
				}
			}
		});
	}


	/**
	 * Check if element is in viewport
	 */
	isElementInViewport(el) {
		const rect = el.getBoundingClientRect();
		return (
			rect.top >= 0 &&
			rect.left >= 0 &&
			rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
			rect.right <= (window.innerWidth || document.documentElement.clientWidth)
		);
	}

	/**
	 * Announce message to screen readers
	 */
	announceToScreenReader(message) {
		if (!this.liveRegion) return;

		this.liveRegion.textContent = message;
	}
}

export default FeedBlock;