package seasonsview

import "git.haelnorr.com/h/oslstats/internal/view/baseview"
import "git.haelnorr.com/h/oslstats/internal/db"
import "fmt"

templ SeasonLeagueLayout(activeSection string, season *db.Season, league *db.League) {
	@baseview.Layout(fmt.Sprintf("%s - %s", season.Name, league.Name)) {
		<div class="max-w-screen-2xl mx-auto px-4 py-8">
			<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
				<!-- Header Section -->
				<div class="bg-surface0 border-b border-surface1 px-6 py-8">
					<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
					<div>
						<div class="flex items-center gap-3 mb-2">
							<h1 class="text-4xl font-bold text-text">{ season.Name } - { league.Name }</h1>
							<span class="text-lg font-mono text-subtext0 bg-surface1 px-2 py-0.5 rounded">{ season.ShortName }</span>
						</div>
						<div class="flex items-center gap-2 flex-wrap">
							@SeasonTypeBadge(season.Type)
							@SlapVersionBadge(season.SlapVersion)
							@StatusBadge(season, false, false)
						</div>
					</div>
						<div class="flex gap-2">
							<a
								href={ templ.SafeURL("/seasons/" + season.ShortName) }
								class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
                       bg-surface1 hover:bg-surface2 text-text transition"
							>
								Back to Season
							</a>
						</div>
					</div>
					<!-- Season Dates -->
					<div class="mt-4 pt-4 border-t border-surface1">
						<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
							<!-- Regular Season -->
							<div class="bg-mantle border border-surface1 rounded-lg p-4">
								<h3 class="text-sm font-semibold text-text mb-3 flex items-center justify-center gap-2">
									<span class="text-blue">&#9679;</span>
									Regular Season
								</h3>
								<div class="grid grid-cols-2 gap-4">
									<div class="text-center">
										<div class="text-xs text-subtext0 uppercase mb-1">Start</div>
										<div class="text-sm text-text font-medium">{ formatDateLong(season.StartDate) }</div>
									</div>
									<div class="text-center">
										<div class="text-xs text-subtext0 uppercase mb-1">Finish</div>
										if !season.EndDate.IsZero() {
											<div class="text-sm text-text font-medium">{ formatDateLong(season.EndDate.Time) }</div>
										} else {
											<div class="text-sm text-subtext1 italic">Not set</div>
										}
									</div>
								</div>
							</div>
							<!-- Finals -->
							<div class="bg-mantle border border-surface1 rounded-lg p-4">
								<h3 class="text-sm font-semibold text-text mb-3 flex items-center justify-center gap-2">
									<span class="text-yellow">&#9733;</span>
									Finals
								</h3>
								<div class="grid grid-cols-2 gap-4">
									<div class="text-center">
										<div class="text-xs text-subtext0 uppercase mb-1">Start</div>
										if !season.FinalsStartDate.IsZero() {
											<div class="text-sm text-text font-medium">{ formatDateLong(season.FinalsStartDate.Time) }</div>
										} else {
											<div class="text-sm text-subtext1 italic">Not set</div>
										}
									</div>
									<div class="text-center">
										<div class="text-xs text-subtext0 uppercase mb-1">Finish</div>
										if !season.FinalsEndDate.IsZero() {
											<div class="text-sm text-text font-medium">{ formatDateLong(season.FinalsEndDate.Time) }</div>
										} else {
											<div class="text-sm text-subtext1 italic">Not set</div>
										}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- Tab Navigation -->
				<nav class="bg-surface0 border-b border-surface1" data-tab-nav="season-league-content">
					<ul class="flex flex-wrap">
						@leagueNavItem("table", "Table", activeSection, season, league)
						@leagueNavItem("fixtures", "Fixtures", activeSection, season, league)
						@leagueNavItem("teams", "Teams", activeSection, season, league)
						@leagueNavItem("stats", "Stats", activeSection, season, league)
						@leagueNavItem("finals", "Finals", activeSection, season, league)
					</ul>
				</nav>
				<!-- Content Area -->
				<main class="bg-crust p-6" id="season-league-content">
					{ children... }
				</main>
			</div>
		</div>
		<script src="/static/js/tabs.js" defer></script>
	}
}

templ leagueNavItem(section string, label string, activeSection string, season *db.Season, league *db.League) {
	{{
		isActive := section == activeSection
		baseClasses := "inline-block px-6 py-3 transition-colors cursor-pointer border-b-2"
		activeClasses := "border-blue text-blue font-semibold"
		inactiveClasses := "border-transparent text-subtext0 hover:text-text hover:border-surface2"
		url := fmt.Sprintf("/seasons/%s/leagues/%s/%s", season.ShortName, league.ShortName, section)
	}}
	<li class="inline-block">
		<a
			href={ templ.SafeURL(url) }
			hx-post={ url }
			hx-target="#season-league-content"
			hx-swap="innerHTML"
			hx-push-url={ url }
			class={ baseClasses, templ.KV(activeClasses, isActive), templ.KV(inactiveClasses, !isActive) }
		>
			{ label }
		</a>
	</li>
}