package templates

templ AdminUsers(currentUser User, users []User, adminCount int) {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="UTF-8"/>
			<title>Users - Bookhoard Admin</title>
			<script src="/static/htmx.min.js"></script>
			<script src="/static/main.js" defer></script>
			<link href="/static/style.css" rel="stylesheet"/>
		</head>
		<body class="theme-{ currentUser.Theme }">
			@Header(currentUser, "/admin/users")
			<!-- Modal Container (populated by HTMX) -->
			<div id="modal-container"></div>
			<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
				@AdminSidebar(currentUser, "/admin/users")
				<main class="flex-1 p-8">
					<div class="w-full">
						<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">User Management</h1>
						<p style="color: var(--text-secondary)">Manage user accounts and permissions</p>
					</div>
					<!-- Users Table -->
					<div class="card rounded-lg border overflow-hidden" style="background-color: var(--bg-secondary); border-color: var(--border)">
						<table class="w-full">
							<thead style="background-color: var(--bg-primary)">
								<tr>
									<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Username</th>
									<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Email</th>
									<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Role</th>
									<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Created</th>
									<th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Actions</th>
								</tr>
							</thead>
							<tbody class="divide-y" style="divide-color: var(--border)">
								for _, user := range users {
									<tr id={ "user-" + user.ID } class="hover:bg-opacity-50" style="transition: background-color 0.2s;">
										<!-- Username -->
										<td class="px-6 py-4 whitespace-nowrap">
											<div class="flex items-center">
												<div>
													<div class="text-sm font-medium" style="color: var(--text-primary)">{ user.Username }</div>
													if user.ID == currentUser.ID {
														<span class="text-xs px-2 py-1 rounded" style="background-color: var(--accent); color: white;">You</span>
													}
												</div>
											</div>
										</td>
										<!-- Email -->
										<td class="px-6 py-4 whitespace-nowrap">
											<div class="text-sm" style="color: var(--text-primary)">{ user.Email }</div>
										</td>
										<!-- Role Toggle (with last-admin protection) -->
										<td class="px-6 py-4 whitespace-nowrap">
											if user.Role == "admin" && adminCount == 1 {
												<!-- Last admin - disabled -->
												<div class="relative">
													<select
														disabled
														class="text-sm rounded px-2 py-1 cursor-not-allowed opacity-50"
														style="background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border);"
														title="Cannot demote the last admin"
													>
														<option value="user">User</option>
														<option value="admin" selected>Admin</option>
													</select>
												</div>
											} else {
												<select
													hx-put={ "/api/auth/profile/" + user.ID }
													hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
													hx-target={ "#role-result-" + user.ID }
													hx-swap="innerHTML"
													name="role"
													class="text-sm rounded px-2 py-1"
													style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
													onchange="this.dispatchEvent(new Event('htmx:trigger'))"
													hx-trigger="change"
													hx-vals='{"role": this.value}'
												>
													<option value="user" selected?={ user.Role == "user" }>User</option>
													<option value="admin" selected?={ user.Role == "admin" }>Admin</option>
												</select>
												<div id={ "role-result-" + user.ID } class="text-xs mt-1"></div>
											}
										</td>
										<!-- Created -->
										<td class="px-6 py-4 whitespace-nowrap">
											<div class="text-sm" style="color: var(--text-secondary)">{ user.CreatedAt.Format("2006-01-02") }</div>
										</td>
										<!-- Actions -->
										<td class="px-6 py-4 whitespace-nowrap text-right">
											<button
												hx-get={ "/admin/users/" + user.ID + "/profile-modal" }
												hx-target="#modal-container"
												hx-swap="innerHTML"
												class="text-sm px-3 py-1 rounded mr-2"
												style="background-color: var(--accent); color: white;"
											>
												Edit
											</button>
											if user.Role == "admin" && adminCount == 1 {
												<button
													disabled
													class="text-sm px-3 py-1 rounded cursor-not-allowed opacity-50"
													style="background-color: #dc2626; color: white;"
													title="Cannot delete the last admin"
												>
													Delete
												</button>
											} else {
												<button
													hx-delete={ "/api/auth/profile/" + user.ID }
													hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
													hx-target={ "#user-" + user.ID }
													hx-swap="outerHTML swap:0.5s"
													hx-confirm="Are you sure you want to delete this user? This action cannot be undone."
													class="text-sm px-3 py-1 rounded"
													style="background-color: #dc2626; color: white;"
												>
													Delete
												</button>
											}
										</td>
									</tr>
								}
							</tbody>
						</table>
					</div>
				</main>
			</div>
		</body>
	</html>
}
