package seasonsview

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

templ LeaguesSection(season *db.Season, allLeagues []*db.League) {
	{{
		permCache := contexts.Permissions(ctx)
		canAddLeague := permCache.HasPermission(permissions.SeasonsAddLeague)
		canRemoveLeague := permCache.HasPermission(permissions.SeasonsRemoveLeague)

		// Create a map of assigned league IDs for quick lookup
		assignedLeagueIDs := make(map[int]bool)
		for _, league := range season.Leagues {
			assignedLeagueIDs[league.ID] = true
		}
	}}
	if canAddLeague || canRemoveLeague {
		<div
			id="leagues-section"
			class="px-6 pb-6"
		>
			<div class="bg-surface0 border border-surface1 rounded-lg p-6">
				<h2 class="text-2xl font-bold text-text mb-4">Leagues</h2>
				<!-- Currently Assigned Leagues -->
				if len(season.Leagues) > 0 {
					<div class="mb-4">
						<h3 class="text-sm font-medium text-subtext0 mb-2">Currently Assigned</h3>
						<div class="flex flex-wrap gap-2">
							for _, league := range season.Leagues {
								<div class="flex items-center gap-2 bg-mantle border border-surface1 rounded-lg px-3 py-2">
									<span class="text-sm text-text">{ league.Name }</span>
									<span class="text-xs text-subtext0 font-mono">({ league.ShortName })</span>
									if canRemoveLeague {
										<button
											type="button"
											onclick={ templ.JSUnsafeFuncCall("window.dispatchEvent(new CustomEvent('confirm-action', { detail: { title: 'Remove League', message: 'Are you sure you want to remove " + league.Name + " from this season?', action: () => htmx.ajax('DELETE', '/seasons/" + season.ShortName + "/leagues/" + league.ShortName + "', { target: '#leagues-section', swap: 'outerHTML' }) } }))") }
											class="text-red hover:text-red/75 hover:cursor-pointer ml-1"
										>
											<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
											</svg>
										</button>
									}
								</div>
							}
						</div>
					</div>
				}
				<!-- Available Leagues to Add -->
				if canAddLeague && len(allLeagues) > 0 {
					{{
						// Filter out already assigned leagues
						availableLeagues := []*db.League{}
						for _, league := range allLeagues {
							if !assignedLeagueIDs[league.ID] {
								availableLeagues = append(availableLeagues, league)
							}
						}
					}}
					if len(availableLeagues) > 0 {
						<div>
							<h3 class="text-sm font-medium text-subtext0 mb-2">Add League</h3>
							<div class="flex flex-wrap gap-2">
								for _, league := range availableLeagues {
									<button
										type="button"
										hx-post={ "/seasons/" + season.ShortName + "/add-league/" + league.ShortName }
										hx-target="#leagues-section"
										hx-swap="outerHTML"
										class="flex items-center gap-2 bg-surface1 hover:bg-surface2 border border-overlay0 rounded-lg px-3 py-2 transition hover:cursor-pointer"
									>
										<span class="text-sm text-text">{ league.Name }</span>
										<span class="text-xs text-subtext0 font-mono">({ league.ShortName })</span>
										<svg class="w-4 h-4 text-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
										</svg>
									</button>
								}
							</div>
						</div>
					}
				}
			</div>
		</div>
	}
}