package seasonsview

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

templ SeasonLeagueLayout(activeSection string, season *db.Season, league *db.League) {
	{{
		permCache := contexts.Permissions(ctx)
		canEditSeason := permCache.HasPermission(permissions.SeasonsUpdate)
		isDraftSeason := season.Type == db.SeasonTypeDraft.String()
	}}
	@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">
								if isDraftSeason {
									<h1 class="text-4xl font-bold text-text">{ season.Name }</h1>
								} else {
									<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">
							if isDraftSeason {
								if canEditSeason {
									<a
										href={ templ.SafeURL("/seasons/" + season.ShortName + "/edit") }
										class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
              bg-blue hover:bg-blue/75 text-mantle transition"
									>
										Edit
									</a>
								}
								<a
									href="/seasons"
									class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
                       bg-surface1 hover:bg-surface2 text-text transition"
								>
									Back to Seasons
								</a>
							} else {
								<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("free-agents", "Free Agents", 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>
}