package templates

import (
	"malago/internal/jikan"
	"fmt"
	"net/url"
)

templ Index(q string) {
	@Layout("malago - search") {
		<div class="search-box">
			<form action="/" method="GET" class="search-form">
				<input type="text" name="q" class="search-input" placeholder="search..." value={ q } autofocus />
				<button type="submit" class="search-button">search</button>
			</form>
		</div>

		if q != "" {
			<div id="loading" class="htmx-indicator status-text">
				> fetching from jikan...
			</div>
			<div id="results" hx-get={ string(templ.URL("/search?q=" + url.QueryEscape(q))) } hx-trigger="load" hx-indicator="#loading"></div>
		} else {
			<div id="results">
				<div style="text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 32px;">
					no results yet.
				</div>
			</div>
		}
	}
}

templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
	if len(animes) == 0 {
		<div style="text-align: center; color: var(--text-muted); font-size: 12px;">no results found.</div>
	} else {
		<div class="catalog-grid">
			@SearchItems(query, animes, nextPage, hasNext)
		</div>
	}
}

templ SearchItems(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
	for i, anime := range animes {
		if i == len(animes)-1 && hasNext {
			<div class="catalog-item" hx-get={ string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))) } hx-trigger="revealed" hx-swap="afterend">
				@CatalogItem(anime)
			</div>
		} else {
			<div class="catalog-item">
				@CatalogItem(anime)
			</div>
		}
	}
}