package ui

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

templ InfiniteAnimeList(animes []jikan.Anime, watchlistStatuses map[int]string, hasNext bool, nextURL string, containerID string) {
	for _, anime := range animes {
		<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
			@CatalogItem(anime, watchlistStatuses[anime.MalID])
		</div>
	}
	if hasNext {
		<div class="col-span-full h-px w-full" hx-get={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
	}
	<script data-container={ containerID }>
		const containerId = document.currentScript.getAttribute('data-container');
		const container = document.getElementById(containerId) || document;
		const seen = new Set();
		container.querySelectorAll('[data-id]').forEach(item => {
			const id = item.getAttribute('data-id');
			if (id && seen.has(id)) {
				item.remove();
			} else if (id) {
				seen.add(id);
			}
		});
	</script>
}

templ CatalogItem(anime jikan.Anime, watchlistStatus string) {
	@AnimeCard(AnimeCardProps{
		ID:              anime.MalID,
		Title:           anime.DisplayTitle(),
		ImageURL:        anime.ImageURL(),
		TitleEnglish:    anime.TitleEnglish,
		TitleJapanese:   anime.TitleJapanese,
		Airing:          anime.Airing,
		Synopsis:        anime.Synopsis,
		PlayHref:        fmt.Sprintf("/watch/%d/1", anime.MalID),
		WatchlistStatus: watchlistStatus,
	})
}