package adminview

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

templ UserList(users *db.List[db.User]) {
	<div
		id="users-list-container"
		x-data={ fmt.Sprintf("{ page: %d, perPage: %d, order: '%s', orderBy: '%s' }",
			users.PageOpts.Page,
			users.PageOpts.PerPage,
			users.PageOpts.Order,
			users.PageOpts.OrderBy) }
	>
		<!-- Header -->
		<div class="flex justify-between items-center mb-4">
			<h1 class="text-2xl font-bold text-text">User Management</h1>
		</div>
		<!-- Users table -->
		if len(users.Items) == 0 {
			<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
				<p class="text-subtext0 text-lg">No users found</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>
								@userTableHeader("id", "ID", users.PageOpts.OrderBy, string(users.PageOpts.Order))
								@userTableHeader("username", "Username", users.PageOpts.OrderBy, string(users.PageOpts.Order))
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Discord ID</th>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Roles</th>
								@userTableHeader("created_at", "Created", users.PageOpts.OrderBy, string(users.PageOpts.Order))
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Actions</th>
							</tr>
						</thead>
						<tbody class="divide-y divide-surface1">
							for _, user := range users.Items {
								<tr class="hover:bg-surface1 transition-colors">
									<td class="px-4 py-3 text-sm text-subtext0">{ fmt.Sprintf("%d", user.ID) }</td>
									<td class="px-4 py-3 text-sm font-medium text-text">{ user.Username }</td>
									<td class="px-4 py-3 text-sm text-subtext0 font-mono">{ user.DiscordID }</td>
									<td class="px-4 py-3 text-sm">
										if len(user.Roles) > 0 {
											<div class="flex flex-wrap gap-1">
												for _, role := range user.Roles {
													<span class="px-2 py-0.5 bg-blue/20 text-blue rounded text-xs font-medium">
														{ role.DisplayName }
													</span>
												}
											</div>
										} else {
											<span class="text-subtext1 text-xs italic">No roles</span>
										}
									</td>
									<td class="px-4 py-3 text-sm text-subtext0">
										{ formatTimestamp(user.CreatedAt) }
									</td>
									<td class="px-4 py-3 text-sm">
										<button
											class="px-3 py-1 bg-blue hover:bg-blue/80 text-mantle rounded text-xs font-medium transition hover:cursor-pointer"
										>
											Edit Roles
										</button>
									</td>
								</tr>
							}
						</tbody>
					</table>
				</div>
			</div>
			<!-- Pagination controls -->
			<div class="mt-6 flex flex-col gap-4">
				<!-- Page info and per-page selector -->
				<div class="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-subtext0">
					<div>
						if users.Total > 0 {
							Showing { fmt.Sprintf("%d", users.PageOpts.StartItem()) } - { fmt.Sprintf("%d", users.PageOpts.EndItem(users.Total)) } of { fmt.Sprintf("%d", users.Total) } users
						} else {
							No users
						}
					</div>
					<div class="flex items-center gap-2">
						<label for="users-per-page-select">Per page:</label>
						<select
							id="users-per-page-select"
							class="py-1 px-2 rounded-lg bg-surface0 border border-surface1 text-text focus:border-blue outline-none"
							x-model.number="perPage"
							@change="submitUsersPage(page, perPage, order, orderBy)"
						>
							<option value="10">10</option>
							<option value="25">25</option>
							<option value="50">50</option>
							<option value="100">100</option>
						</select>
					</div>
				</div>
				<!-- Pagination buttons -->
				if users.Total > 0 && users.PageOpts.TotalPages(users.Total) > 1 {
					<div class="flex flex-wrap justify-center items-center gap-2">
						@paginationButton("First", "<<", fmt.Sprintf("submitUsersPage(1, perPage, order, orderBy)"), !users.PageOpts.HasPrevPage())
						@paginationButton("Previous", "<", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.Page-1), !users.PageOpts.HasPrevPage())
						for _, pageNum := range users.PageOpts.GetPageRange(users.Total, 7) {
							@pageNumberButton(pageNum, users.PageOpts.Page, "submitUsersPage")
						}
						@paginationButton("Next", ">", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.Page+1), !users.PageOpts.HasNextPage(users.Total))
						@paginationButton("Last", ">>", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.TotalPages(users.Total)), !users.PageOpts.HasNextPage(users.Total))
					</div>
				}
			</div>
		}
	</div>
}

templ userTableHeader(field string, label string, currentField string, currentOrder string) {
	{{
		isActive := currentField == field
		baseClasses := "px-4 py-3 text-left text-sm font-semibold text-text cursor-pointer select-none hover:text-blue transition-colors"
		arrow := ""
		if isActive {
			if currentOrder == "ASC" {
				arrow = " ↑"
			} else {
				arrow = " ↓"
			}
		}
	}}
	<th class={ baseClasses } @click={ fmt.Sprintf("sortUsersColumn('%s', order, orderBy)", field) }>
		{ label }
		if arrow != "" {
			<span class="text-blue">{ arrow }</span>
		}
	</th>
}

templ paginationButton(longText string, shortText string, onClick string, disabled bool) {
	<button
		type="button"
		@click={ onClick }
		class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
		:disabled={ fmt.Sprintf("%t", disabled) }
		:class={ fmt.Sprintf("%t", disabled) + 
			" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
	>
		<span class="hidden sm:inline">{ longText }</span>
		<span class="sm:hidden">{ shortText }</span>
	</button>
}

templ pageNumberButton(pageNum int, currentPage int, funcName string) {
	<button
		type="button"
		@click={ fmt.Sprintf("%s(%d, perPage, order, orderBy)", funcName, pageNum) }
		class={ "px-3 py-2 rounded-lg border transition", 
			templ.KV("bg-blue border-blue text-mantle font-bold", pageNum == currentPage),
			templ.KV("bg-mantle border-surface1 text-text hover:bg-surface0 hover:border-blue cursor-pointer", pageNum != currentPage) }
	>
		{ fmt.Sprintf("%d", pageNum) }
	</button>
}

func formatTimestamp(unixTime int64) string {
	t := time.Unix(unixTime, 0)
	return t.Format("Jan 2, 2006")
}