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 "git.haelnorr.com/h/oslstats/internal/view/component/links"
import "fmt"

templ SeasonLeagueFreeAgentsPage(season *db.Season, league *db.League, freeAgents []*db.SeasonLeagueFreeAgent, availablePlayers []*db.Player) {
	@SeasonLeagueLayout("free-agents", season, league) {
		@SeasonLeagueFreeAgents(season, league, freeAgents, availablePlayers)
	}
}

templ SeasonLeagueFreeAgents(season *db.Season, league *db.League, freeAgents []*db.SeasonLeagueFreeAgent, availablePlayers []*db.Player) {
	{{
		permCache := contexts.Permissions(ctx)
		canAdd := permCache.HasPermission(permissions.FreeAgentsAdd)
		canRemove := permCache.HasPermission(permissions.FreeAgentsRemove)
	}}
	<div x-data="{ showAddModal: false, selectedPlayerId: '' }">
		<div class="flex justify-between items-center mb-4">
			<h2 class="text-2xl font-bold text-text">Free Agents ({ fmt.Sprint(len(freeAgents)) })</h2>
			if canAdd {
				<button
					@click="showAddModal = 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 Free Agent
				</button>
			}
		</div>
		if len(freeAgents) == 0 {
			<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
				<p class="text-subtext0 text-lg">No free agents registered in this league yet.</p>
				if canAdd {
					<p class="text-subtext1 text-sm mt-2">Click "Add Free Agent" to register a player.</p>
				}
			</div>
		} else {
			<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
				<div class="overflow-x-auto">
					<table class="w-full">
						<thead class="bg-mantle border-b border-surface1">
							<tr>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Player</th>
								if canRemove {
									<th class="px-4 py-3 text-right text-sm font-semibold text-text">Actions</th>
								}
							</tr>
						</thead>
						<tbody class="divide-y divide-surface1">
							for _, fa := range freeAgents {
								<tr class="hover:bg-surface1 transition-colors">
									<td class="px-4 py-3 text-sm">
										<span class="flex items-center gap-2">
											@links.PlayerLink(fa.Player)
											<span class="px-1.5 py-0.5 bg-peach/20 text-peach rounded text-xs font-medium">
												FREE AGENT
											</span>
										</span>
									</td>
									if canRemove {
										<td class="px-4 py-3 text-right">
											<form
												hx-post={ fmt.Sprintf("/seasons/%s/leagues/%s/free-agents/unregister", season.ShortName, league.ShortName) }
												hx-swap="none"
												class="inline"
											>
												<input type="hidden" name="player_id" value={ fmt.Sprint(fa.PlayerID) }/>
												<button
													type="submit"
													class="px-3 py-1 text-xs bg-red/20 hover:bg-red/40 text-red rounded
														transition hover:cursor-pointer"
												>
													Remove
												</button>
											</form>
										</td>
									}
								</tr>
							}
						</tbody>
					</table>
				</div>
			</div>
		}
		if canAdd {
			@addFreeAgentModal(season, league, availablePlayers)
		}
	</div>
}

templ addFreeAgentModal(season *db.Season, league *db.League, availablePlayers []*db.Player) {
	<div
		x-show="showAddModal"
		@keydown.escape.window="showAddModal = 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="showAddModal = 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 Free Agent</h3>
				<form
					hx-post={ fmt.Sprintf("/seasons/%s/leagues/%s/free-agents/register", season.ShortName, league.ShortName) }
					hx-swap="none"
				>
					if len(availablePlayers) == 0 {
						<p class="text-subtext0 mb-4">No players available to register as free agents. All players are either on a team or already registered.</p>
					} else {
						<div class="mb-4">
							<label for="player_id" class="block text-sm font-medium mb-2">Select Player</label>
							<select
								id="player_id"
								name="player_id"
								x-model="selectedPlayerId"
								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 player...</option>
								for _, player := range availablePlayers {
									<option value={ fmt.Sprint(player.ID) }>
										{ player.DisplayName() }
									</option>
								}
							</select>
						</div>
					}
					<div class="flex gap-3 justify-end">
						<button
							type="button"
							@click="showAddModal = false"
							class="px-4 py-2 rounded-lg bg-surface0 hover:bg-surface1 text-text transition hover:cursor-pointer"
						>
							Cancel
						</button>
						if len(availablePlayers) > 0 {
							<button
								type="submit"
								:disabled="!selectedPlayerId"
								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"
							>
								Register Free Agent
							</button>
						}
					</div>
				</form>
			</div>
		</div>
	</div>
}