package seasonsview

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

templ SeasonLeagueTeamsPage(season *db.Season, league *db.League, teams []*db.Team, allTeams []*db.Team) {
	@SeasonLeagueLayout("teams", season, league) {
		@SeasonLeagueTeams(season, league, teams, allTeams)
	}
}

templ addTeamModal(season *db.Season, league *db.League, existingTeams []*db.Team, allTeams []*db.Team) {
	{{
		// Filter out teams already in this league
		existingTeamIDs := make(map[int]bool)
		for _, t := range existingTeams {
			existingTeamIDs[t.ID] = true
		}
		availableTeams := []*db.Team{}
		for _, t := range allTeams {
			if !existingTeamIDs[t.ID] {
				availableTeams = append(availableTeams, t)
			}
		}
	}}
	<div
		x-show="showAddTeamModal"
		@keydown.escape.window="showAddTeamModal = false"
		class="fixed inset-0 z-50 overflow-y-auto"
		style="display: none;"
	>
		<!-- Backdrop -->
		<div
			class="fixed inset-0 bg-crust/80 transition-opacity"
			@click="showAddTeamModal = false"
		></div>
		<!-- Modal -->
		<div class="flex min-h-full items-center justify-center p-4">
			<div
				class="relative bg-mantle border-2 border-surface1 rounded-xl shadow-xl max-w-md w-full p-6"
				@click.stop
			>
				<h3 class="text-2xl font-bold text-text mb-4">Add Team to League</h3>
				<form
					hx-post={ fmt.Sprintf("/seasons/%s/leagues/%s/teams/add", season.ShortName, league.ShortName) }
					hx-swap="none"
				>
					if len(availableTeams) == 0 {
						<p class="text-subtext0 mb-4">No teams available to select</p>
					} else {
						<div class="mb-4">
							<label for="team_id" class="block text-sm font-medium mb-2">Select Team</label>
							<select
								id="team_id"
								name="team_id"
								x-model="selectedTeamId"
								required
								class="w-full py-3 px-4 rounded-lg text-sm bg-base border-2 border-overlay0
                       focus:border-blue outline-none"
							>
								<option value="">Choose a team...</option>
								for _, team := range availableTeams {
									<option value={ fmt.Sprint(team.ID) }>
										{ team.Name } ({ team.ShortName })
									</option>
								}
							</select>
						</div>
					}
					<div class="flex gap-3 justify-end">
						<button
							type="button"
							@click="showAddTeamModal = false"
							class="px-4 py-2 rounded-lg bg-surface0 hover:bg-surface1 text-text transition hover:cursor-pointer"
						>
							Cancel
						</button>
						if len(availableTeams) > 0 {
							<button
								type="submit"
								:disabled="!selectedTeamId"
								class="px-4 py-2 rounded-lg bg-green hover:bg-green/75 text-mantle transition
                       disabled:bg-green/40 disabled:cursor-not-allowed hover:cursor-pointer"
							>
								Add Team
							</button>
						}
					</div>
				</form>
			</div>
		</div>
	</div>
}

templ SeasonLeagueTeams(season *db.Season, league *db.League, teams []*db.Team, allTeams []*db.Team) {
	{{
		permCache := contexts.Permissions(ctx)
		canAddTeam := permCache.HasPermission(permissions.TeamsAddToLeague)
	}}
	<div x-data="{ showAddTeamModal: false, selectedTeamId: '' }">
		<div class="flex justify-between items-center mb-4">
			<h2 class="text-2xl font-bold text-text">Teams ({ fmt.Sprint(len(teams)) })</h2>
			if canAddTeam {
				<button
					@click="showAddTeamModal = true"
					class="rounded-lg px-4 py-2 hover:cursor-pointer text-center text-sm
              bg-green hover:bg-green/75 text-mantle transition"
				>
					Add Team
				</button>
			}
		</div>
		if len(teams) == 0 {
			<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
				<p class="text-subtext0 text-lg">No teams in this league yet.</p>
				if canAddTeam {
					<p class="text-subtext1 text-sm mt-2">Click "Add Team" to get started.</p>
				}
			</div>
		} else {
			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
				for _, team := range teams {
					<div class="bg-surface0 border border-surface1 rounded-lg p-6 hover:bg-surface1 transition-colors">
						<div class="flex justify-between items-start mb-3">
							<h3 class="text-xl font-bold text-text">{ team.Name }</h3>
							if team.Color != "" {
								<div
									class="w-6 h-6 rounded-full border-2 border-surface1"
									style={ "background-color: " + templ.SafeCSS(team.Color) }
								></div>
							}
						</div>
						<div class="flex items-center gap-2 text-sm flex-wrap">
							<span class="px-2 py-1 bg-mantle rounded text-subtext0 font-mono">
								{ team.ShortName }
							</span>
							<span class="px-2 py-1 bg-mantle rounded text-subtext0 font-mono">
								{ team.AltShortName }
							</span>
						</div>
					</div>
				}
			</div>
		}
		if canAddTeam {
			@addTeamModal(season, league, teams, allTeams)
		}
	</div>
}