package templates

import "mal/internal/jikan"
import "fmt"

templ Discover() {
	@Layout("mal - discover") {
		<div class="discover-container">
			<div class="tabs">
				<button
					class="tab active"
					hx-get="/api/discover/airing?page=1"
					hx-target="#discover-content"
					hx-trigger="click"
					onclick="document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); this.classList.add('active');"
				>
					airing now
				</button>
				<button
					class="tab"
					hx-get="/api/discover/upcoming?page=1"
					hx-target="#discover-content"
					hx-trigger="click"
					onclick="document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); this.classList.add('active');"
				>
					upcoming
				</button>
			</div>
			<div class="catalog-grid" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load">
				<div class="loading-indicator" style="grid-column: 1 / -1;">
					<div class="loading-dot"></div>
					<div class="loading-dot"></div>
					<div class="loading-dot"></div>
					<span>Loading discover</span>
				</div>
			</div>
		</div>
	}
}

templ DiscoverItems(animes []jikan.Anime, listType string, nextPage int, hasNext bool) {
	for _, anime := range animes {
		<div class="catalog-item" data-id={ fmt.Sprintf("%d", anime.MalID) }>
			@CatalogItem(anime)
		</div>
	}
	if hasNext {
		<div class="scroll-trigger" style="grid-column: 1 / -1; height: 20px;" hx-get={ string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))) } hx-trigger="revealed" hx-swap="outerHTML"></div>
	}
	<script>
		(function() {
			const items = document.querySelectorAll('#discover-content .catalog-item[data-id]');
			const seen = new Set();
			items.forEach(item => {
				const id = item.getAttribute('data-id');
				if (id) {
					if (seen.has(id)) {
						item.remove();
					} else {
						seen.add(id);
					}
				}
			});
		})();
	</script>
}