package teamsview

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

templ DetailPage(team *db.Team, seasonInfos []*db.TeamSeasonInfo, playerStats []*db.TeamAllTimePlayerStats, activeTab string) {
	@baseview.Layout(team.Name) {
		<div class="max-w-screen-xl mx-auto px-4 py-8">
			<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
				<!-- Header -->
				<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">
						<div class="flex items-center gap-4">
							if team.Color != "" {
								<div
									class="w-12 h-12 rounded-full border-2 border-surface1 shrink-0"
									style={ "background-color: " + templ.SafeCSS(team.Color) }
								></div>
							}
							<div>
								<h1 class="text-4xl font-bold text-text">{ team.Name }</h1>
								<div class="flex items-center gap-2 mt-2 flex-wrap">
									<span class="px-2 py-1 bg-mantle rounded text-subtext0 font-mono text-sm">
										{ team.ShortName }
									</span>
									<span class="px-2 py-1 bg-mantle rounded text-subtext0 font-mono text-sm">
										{ team.AltShortName }
									</span>
								</div>
							</div>
						</div>
						<a
							href="/teams"
							class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
								bg-surface1 hover:bg-surface2 text-text transition"
						>
							Back to Teams
						</a>
					</div>
				</div>
				<!-- Tab Navigation -->
				<nav class="bg-surface0 border-b border-surface1">
					<ul class="flex flex-wrap">
						@teamDetailTab("seasons", "Seasons", activeTab, team)
						@teamDetailTab("stats", "Player Stats", activeTab, team)
					</ul>
				</nav>
			</div>
			<!-- Tab Content -->
			<div class="mt-6">
				if activeTab == "seasons" {
					@TeamDetailSeasons(team, seasonInfos)
				} else if activeTab == "stats" {
					@TeamDetailPlayerStats(playerStats)
				}
			</div>
		</div>
	}
}

templ teamDetailTab(section string, label string, activeTab string, team *db.Team) {
	{{
		isActive := section == activeTab
		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("/teams/%d", team.ID)
		if section != "seasons" {
			url = fmt.Sprintf("/teams/%d?tab=%s", team.ID, section)
		}
	}}
	<li class="inline-block">
		<a
			href={ templ.SafeURL(url) }
			class={ baseClasses, templ.KV(activeClasses, isActive), templ.KV(inactiveClasses, !isActive) }
		>
			{ label }
		</a>
	</li>
}