package ui

import (
	"fmt"
	"mal/internal/jikan"
)

templ InfiniteAnimeList(animes []jikan.Anime, hasNext bool, nextURL string, containerID string) {
	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={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
	}
	<script>
		(function() {
			const containerID = "{" + containerID + "}"; // fallback for string concat in JS
			const actualID = containerID.replace(/[{}]/g, '');
			const container = document.getElementById(actualID) || document;
			const items = container.querySelectorAll('.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>
}

templ CatalogItem(anime jikan.Anime) {
	<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
		if anime.ImageURL() != "" {
			<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } class="catalog-thumb" loading="lazy"/>
		} else {
			<div class="no-image">No image</div>
		}
	</a>
	<div class="catalog-title">
		{ anime.DisplayTitle() }
	</div>
}