package page

import "git.haelnorr.com/h/oslstats/internal/db"
import "git.haelnorr.com/h/oslstats/internal/view/layout"
import "git.haelnorr.com/h/oslstats/internal/view/component/pagination"
import "git.haelnorr.com/h/oslstats/internal/view/component/sort"
import "fmt"
import "github.com/uptrace/bun"

templ SeasonsPage(seasons *db.SeasonList) {
	@layout.Global("Seasons") {
		<div class="max-w-screen-2xl mx-auto px-2">
			@SeasonsList(seasons)
		</div>
	}
}

templ SeasonsList(seasons *db.SeasonList) {
	{{
		sortOpts := []db.OrderOpts{
			{
				Order:   bun.OrderAsc,
				OrderBy: "name",
				Label:   "Name (A-Z)",
			},
			{
				Order:   bun.OrderDesc,
				OrderBy: "name",
				Label:   "Name (Z-A)",
			},
			{
				Order:   bun.OrderAsc,
				OrderBy: "short_name",
				Label:   "Short Name (A-Z)",
			},
			{
				Order:   bun.OrderDesc,
				OrderBy: "short_name",
				Label:   "Short Name (Z-A)",
			},
		}
	}}
	<div id="seasons-list-container">
		<form
			id="seasons-form"
			hx-target="#seasons-list-container"
			hx-swap="outerHTML"
			hx-push-url="true"
			x-data={ templ.JSFuncCall("paginateData", 
        "seasons-form",
        "/seasons",
				seasons.PageOpts.Page, 
				seasons.PageOpts.PerPage, 
				seasons.PageOpts.Order, 
				seasons.PageOpts.OrderBy).CallInline }
		>
			<!-- Header with title and sort controls -->
			<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
				<h1 class="text-3xl font-bold">Seasons</h1>
				@sort.Dropdown(seasons.PageOpts, sortOpts)
			</div>
			<!-- Results section -->
			if len(seasons.Seasons) == 0 {
				<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
					<p class="text-subtext0 text-lg">No seasons found</p>
				</div>
			} else {
				<!-- Card grid -->
				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
					for _, season := range seasons.Seasons {
						<a
							class="bg-mantle border border-surface1 rounded-lg p-6 hover:bg-surface0 transition-colors"
							href={ fmt.Sprintf("/seasons/%s", season.ShortName) }
						>
							<h3 class="text-xl font-bold text-text mb-2">{ season.Name }</h3>
						</a>
					}
				</div>
				<!-- Pagination controls -->
				@pagination.Pagination(seasons.PageOpts, seasons.Total)
			}
		</form>
		<script src="/static/js/pagination.js"></script>
	</div>
}