package adminview

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

templ UserList(users *db.List[db.User]) {
	<div class="space-y-4">
		<!-- Header -->
		<div class="flex justify-between items-center">
			<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>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">ID</th>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Username</th>
								<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>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Created</th>
								<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>
		}
	</div>
}

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