package templates

import "mal/integrations/jikan"
import ui "mal/web/components"
import "fmt"
import "mal/web/shared/layout"

templ Discover() {
	@layout.Layout("mal - discover", true) {
		<div class="grid gap-4">
			<div class="grid gap-4">
				<h1>Discover</h1>
				<p class="m-0 text-sm text-(--text-muted)">Browse what's airing now and what is coming soon.</p>
			</div>
			<div class="flex flex-wrap gap-2 max-md:flex-nowrap max-md:overflow-x-auto max-md:pb-1" data-tab-group="discover">
				<button
					class="tab-trigger shrink-0 whitespace-nowrap bg-(--surface-tab-active) px-2 py-1 text-xs text-(--text-tab-active)"
					type="button"
					hx-get="/api/discover/airing?page=1"
					hx-target="#discover-content"
					hx-trigger="click"
					data-tab-trigger
					data-tab-active-classes="bg-(--surface-tab-active) text-(--text-tab-active)"
					data-tab-inactive-classes="bg-(--panel-soft) text-(--text-muted)"
				>
					airing now
				</button>
				<button
					class="tab-trigger shrink-0 whitespace-nowrap bg-(--panel-soft) px-2 py-1 text-xs text-(--text-muted) hover:bg-(--surface-tab-hover) hover:text-(--text)"
					type="button"
					hx-get="/api/discover/upcoming?page=1"
					hx-target="#discover-content"
					hx-trigger="click"
					data-tab-trigger
					data-tab-active-classes="bg-(--surface-tab-active) text-(--text-tab-active)"
					data-tab-inactive-classes="bg-(--panel-soft) text-(--text-muted)"
				>
					upcoming
				</button>
			</div>
			<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load">
				<div class="col-span-full">
					@ui.LoadingIndicator("Loading discover")
				</div>
			</div>
		</div>
	}
}

templ DiscoverItems(animes []jikan.Anime, watchlistStatuses map[int]string, listType string, nextPage int, hasNext bool) {
	@ui.InfiniteAnimeList(animes, watchlistStatuses, hasNext, string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))), "discover-content")
}