---
interface Props {
	categories: { category: string; count: number }[];
}

const { categories } = Astro.props;

// All possible categories with icons
const categoryIcons: Record<string, string> = {
	portrait: '👤',
	landscape: '🏞️',
	abstract: '🎨',
	illustration: '✏️',
	photography: '📸',
	product: '📦',
	architecture: '🏛️',
	character: '🎭',
	'concept-art': '🖼️',
	other: '🌟',
};
---

<div class="mb-8 rounded-2xl bg-white p-6 shadow-lg dark:bg-gray-800">
	<!-- Search -->
	<div class="mb-6">
		<label for="search" class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">
			🔍 Search
		</label>
		<input
			type="text"
			id="search"
			placeholder="Search by title, prompt, or tags..."
			class="w-full rounded-lg border border-gray-300 px-4 py-3 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
		/>
	</div>

	<!-- Category Filters -->
	<div class="mb-6">
		<div class="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">📂 Categories</div>
		<div class="flex flex-wrap gap-2">
			<button
				data-filter="all"
				class="filter-btn active rounded-full bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700"
			>
				All ({categories.reduce((sum, c) => sum + c.count, 0)})
			</button>
			{
				categories.map((cat) => (
					<button
						data-filter={cat.category}
						class="filter-btn rounded-full bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-700 transition hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
					>
						{categoryIcons[cat.category] || '🌟'} {cat.category} ({cat.count})
					</button>
				))
			}
		</div>
	</div>

	<!-- Sort Options -->
	<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
		<div class="flex-1">
			<label for="sort" class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">
				🔢 Sort By
			</label>
			<select
				id="sort"
				class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 sm:w-auto dark:border-gray-600 dark:bg-gray-700 dark:text-white"
			>
				<option value="likes">Most Liked</option>
				<option value="views">Most Viewed</option>
				<option value="downloads">Most Downloaded</option>
				<option value="recent">Most Recent</option>
				<option value="quality">Highest Quality</option>
			</select>
		</div>

		<!-- View Toggle -->
		<div>
			<label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">
				👁️ View
			</label>
			<div class="flex gap-2">
				<button
					id="grid-view"
					class="view-toggle active rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700"
				>
					Grid
				</button>
				<button
					id="list-view"
					class="view-toggle rounded-lg bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-700 transition hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
				>
					List
				</button>
			</div>
		</div>
	</div>
</div>

<style>
	.filter-btn.active {
		@apply bg-blue-600 text-white;
	}

	.view-toggle.active {
		@apply bg-blue-600 text-white;
	}
</style>

<script>
	document.addEventListener('DOMContentLoaded', () => {
		const searchInput = document.getElementById('search') as HTMLInputElement;
		const filterButtons = document.querySelectorAll('.filter-btn');
		const sortSelect = document.getElementById('sort') as HTMLSelectElement;
		const galleryGrid = document.getElementById('gallery-grid');
		const galleryItems = galleryGrid?.querySelectorAll('article') || [];

		let currentFilter = 'all';
		let currentSort = 'likes';

		// Search functionality
		searchInput?.addEventListener('input', () => {
			const query = searchInput.value.toLowerCase();
			galleryItems.forEach((item) => {
				const title = item.querySelector('h3')?.textContent?.toLowerCase() || '';
				const matchesSearch = title.includes(query);
				const matchesFilter =
					currentFilter === 'all' || item.getAttribute('data-category') === currentFilter;

				if (matchesSearch && matchesFilter) {
					(item as HTMLElement).style.display = '';
				} else {
					(item as HTMLElement).style.display = 'none';
				}
			});
		});

		// Filter functionality
		filterButtons.forEach((button) => {
			button.addEventListener('click', () => {
				currentFilter = button.getAttribute('data-filter') || 'all';

				// Update active state
				filterButtons.forEach((btn) => btn.classList.remove('active'));
				button.classList.add('active');

				// Apply filter
				applyFilter();
			});
		});

		// Sort functionality
		sortSelect?.addEventListener('change', () => {
			currentSort = sortSelect.value;
			applySort();
		});

		function applyFilter() {
			const query = searchInput?.value.toLowerCase() || '';
			galleryItems.forEach((item) => {
				const category = item.getAttribute('data-category');
				const title = item.querySelector('h3')?.textContent?.toLowerCase() || '';
				const matchesFilter = currentFilter === 'all' || category === currentFilter;
				const matchesSearch = query === '' || title.includes(query);

				if (matchesFilter && matchesSearch) {
					(item as HTMLElement).style.display = '';
				} else {
					(item as HTMLElement).style.display = 'none';
				}
			});
		}

		function applySort() {
			if (!galleryGrid) return;

			const itemsArray = Array.from(galleryItems);
			itemsArray.sort((a, b) => {
				// This is a simplified sort - in production you'd need to extract the actual values
				const aText = a.textContent || '';
				const bText = b.textContent || '';
				return aText.localeCompare(bText);
			});

			// Re-append in sorted order
			itemsArray.forEach((item) => {
				galleryGrid.appendChild(item);
			});
		}

		// View toggle
		const gridView = document.getElementById('grid-view');
		const listView = document.getElementById('list-view');
		const viewToggles = [gridView, listView];

		gridView?.addEventListener('click', () => {
			viewToggles.forEach((toggle) => toggle?.classList.remove('active'));
			gridView.classList.add('active');
			galleryGrid?.classList.remove('list-view');
			galleryGrid?.classList.add(
				'grid',
				'grid-cols-1',
				'sm:grid-cols-2',
				'lg:grid-cols-3',
				'xl:grid-cols-4'
			);
		});

		listView?.addEventListener('click', () => {
			viewToggles.forEach((toggle) => toggle?.classList.remove('active'));
			listView.classList.add('active');
			galleryGrid?.classList.remove(
				'grid',
				'grid-cols-1',
				'sm:grid-cols-2',
				'lg:grid-cols-3',
				'xl:grid-cols-4'
			);
			galleryGrid?.classList.add('list-view');
		});
	});
</script>
