package templates

import (
	"fmt"
	
	"mal/integrations/jikan"
	components "mal/web/components"
	"mal/web/shared"
	"mal/web/shared/layout"
)

templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, watchlistStatuses map[int]string, hasNext bool, nextPage int) {
	@layout.Layout("mal - "+shared.GetProducerName(producer), true) {
		<div class="grid gap-5">
			<div class="grid gap-4 bg-(--panel) p-4">
				<div class="flex items-start gap-4">
					if producer.Data.Images.Jpg.ImageURL != "" {
						<img
							src={ producer.Data.Images.Jpg.ImageURL }
							alt={ shared.GetProducerName(producer) }
							class="h-24 w-24 object-contain"
						/>
					}
					<div class="flex-1">
						<h1 class="text-xl font-semibold">{ shared.GetProducerName(producer) }</h1>
						if producer.Data.Established != "" {
							<p class="mt-1 text-sm text-(--text-muted)">
								Established: { shared.FormatEstablishedDate(producer.Data.Established) }
							</p>
						}
						if producer.Data.Count > 0 {
							<p class="text-sm text-(--text-faint)">
								{ fmt.Sprintf("%d anime", producer.Data.Count) }
							</p>
						}
					</div>
				</div>
				if producer.Data.About != "" {
					<p class="text-sm text-(--text-muted) line-clamp-3">{ producer.Data.About }</p>
				}
			</div>
			<div>
				<h2 class="mb-3 text-lg font-semibold">Anime</h2>
				<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="studio-anime-content">
					for _, anime := range animes {
						<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
							@components.AnimeCard(components.AnimeCardProps{
								ID:              anime.MalID,
								Title:           anime.DisplayTitle(),
								ImageURL:        anime.ImageURL(),
								TitleEnglish:    anime.TitleEnglish,
								TitleJapanese:   anime.TitleJapanese,
								Airing:          anime.Airing,
								WatchlistStatus: watchlistStatuses[anime.MalID],
							})
						</div>
					}
					if hasNext {
						@StudioLoadMore(producer.Data.MalID, nextPage)
					}
				</div>
			</div>
		</div>
	}
}

templ StudioLoadMore(studioID int, nextPage int) {
	<div
		class="col-span-full h-px w-full"
		hx-get={ string(templ.URL(fmt.Sprintf("/api/studios/%d/anime?page=%d", studioID, nextPage))) }
		hx-trigger="revealed"
		hx-swap="outerHTML"
	></div>
}

templ StudioAnimeItems(animes []jikan.Anime, watchlistStatuses map[int]string, hasNext bool, studioID int, nextPage int) {
	for _, anime := range animes {
		<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
			@components.AnimeCard(components.AnimeCardProps{
				ID:              anime.MalID,
				Title:           anime.DisplayTitle(),
				ImageURL:        anime.ImageURL(),
				TitleEnglish:    anime.TitleEnglish,
				TitleJapanese:   anime.TitleJapanese,
				Airing:          anime.Airing,
				WatchlistStatus: watchlistStatuses[anime.MalID],
			})
		</div>
	}
	if hasNext {
		@StudioLoadMore(studioID, nextPage)
	}
	<script data-container="studio-anime-content">
		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>
}