package components

import (
	"github.com/starfleetcptn/gomft/internal/db"
	"strconv"
	"context"
)

type UsersData struct {
	Users []db.User
}

templ Users(ctx context.Context, data UsersData) {
	@LayoutWithContext("User Management", ctx) {
		<div class="py-6">
			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				<div class="flex justify-between items-center mb-8">
					<h1 class="text-3xl font-bold text-secondary-900 dark:text-secondary-100">
						<i class="fas fa-users mr-2 text-primary-600 dark:text-primary-400"></i>
						User Management
					</h1>
					<a href="/admin/users/new" class="btn-primary">
						<i class="fas fa-user-plus mr-2"></i>
						Add User
					</a>
				</div>
				
				<div class="mt-6">
					if len(data.Users) == 0 {
						<div class="card p-12 flex flex-col items-center justify-center text-center">
							<div class="inline-block p-4 rounded-full bg-secondary-100 dark:bg-secondary-700 mb-4">
								<i class="fas fa-user-slash text-secondary-400 dark:text-secondary-500 text-3xl"></i>
							</div>
							<h3 class="mt-2 text-lg font-medium text-secondary-900 dark:text-secondary-100">No users found</h3>
							<p class="mt-1 text-sm text-secondary-500 dark:text-secondary-400">Get started by adding a new user.</p>
							<div class="mt-6">
								<a href="/admin/users/new" class="btn-primary">
									<i class="fas fa-user-plus mr-2"></i>
									Add User
								</a>
							</div>
						</div>
					} else {
						<div class="card overflow-hidden">
							<table class="min-w-full divide-y divide-secondary-200 dark:divide-secondary-700">
								<thead class="bg-secondary-50 dark:bg-secondary-800">
									<tr>
										<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-400 uppercase tracking-wider">
											<i class="fas fa-envelope mr-1"></i> Email
										</th>
										<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-400 uppercase tracking-wider">
											<i class="fas fa-user-tag mr-1"></i> Role
										</th>
										<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-400 uppercase tracking-wider">
											<i class="fas fa-calendar-plus mr-1"></i> Created
										</th>
										<th scope="col" class="relative px-6 py-3">
											<span class="sr-only">Actions</span>
										</th>
									</tr>
								</thead>
								<tbody class="bg-white dark:bg-secondary-750 divide-y divide-secondary-200 dark:divide-secondary-700">
									if len(data.Users) == 0 {
										<tr>
											<td colspan="4" class="px-6 py-4 whitespace-nowrap text-center text-sm text-secondary-500 dark:text-secondary-400">
												No users found
											</td>
										</tr>
									} else {
										for _, user := range data.Users {
											<tr class="hover:bg-secondary-50 dark:hover:bg-secondary-700 transition-colors">
												<td class="px-6 py-4 whitespace-nowrap">
													<div class="text-sm font-medium text-secondary-900 dark:text-secondary-100">{ user.Email }</div>
												</td>
												<td class="px-6 py-4 whitespace-nowrap">
													if user.GetIsAdmin() {
														<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-300">
															<i class="fas fa-user-shield mr-1"></i> Admin
														</span>
													} else {
														<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-secondary-100 dark:bg-secondary-700 text-secondary-800 dark:text-secondary-300">
															<i class="fas fa-user mr-1"></i> User
														</span>
													}
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-500 dark:text-secondary-400">
													{ user.CreatedAt.Format("Jan 02, 2006") }
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
													<button
														class="btn-danger btn-sm"
														hx-delete={ "/admin/users/" + strconv.Itoa(int(user.ID)) }
														hx-confirm="Are you sure you want to delete this user? This action cannot be undone."
														hx-target="body"
													>
														<i class="fas fa-trash-alt mr-1"></i> Delete
													</button>
												</td>
											</tr>
										}
									}
								</tbody>
							</table>
						</div>
					}
				</div>
				
				<!-- Help Notice -->
				<div class="mt-8 text-center">
					<p class="text-sm text-secondary-500 dark:text-secondary-400">
						<i class="fas fa-shield-alt mr-1 text-primary-500"></i>
						User accounts provide secure access to the GoMFT application with role-based permissions
					</p>
				</div>
			</div>
		</div>
	}
}

type UserFormData struct {
	IsNew bool
	ErrorMessage string
}

templ UserForm(ctx context.Context, data UserFormData) {
	@LayoutWithContext("Add User", ctx) {
		<div class="py-6">
			<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
				<div class="mb-8">
					<h1 class="text-3xl font-bold text-secondary-900 dark:text-secondary-100">
						<i class="fas fa-user-plus mr-2 text-primary-600 dark:text-primary-400"></i>
						Add New User
					</h1>
				</div>
				
				<div class="card overflow-hidden">
					<div class="p-6">
						if data.ErrorMessage != "" {
							<div class="mb-6">
								<div class="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg" role="alert">
									<div class="flex items-center">
										<i class="fas fa-exclamation-circle mr-2"></i>
										<span class="block sm:inline">{ data.ErrorMessage }</span>
									</div>
								</div>
							</div>
						}
						
						<form 
							class="space-y-6" 
							hx-post="/admin/users"
							hx-target="body"
							x-data="{ 
								email: '', 
								password: '',
								confirmPassword: '',
								isAdmin: false,
								loading: false,
								validate() {
									return this.email && 
										this.password && 
										this.confirmPassword && 
										this.password === this.confirmPassword;
								}
							}"
							@htmx:before-request="loading = true"
							@htmx:after-request="loading = false">
							<div>
								<div class="mb-6">
									<h3 class="text-lg font-medium text-secondary-900 dark:text-secondary-100">User Information</h3>
									<p class="mt-1 text-sm text-secondary-500 dark:text-secondary-400">Create a new user account with appropriate permissions.</p>
								</div>
								
								<div class="space-y-4">
									<div>
										<label for="email" class="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">Email</label>
										<div class="relative">
											<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
												<i class="fas fa-envelope text-secondary-400 dark:text-secondary-600"></i>
											</div>
											<input 
												type="email" 
												name="email" 
												id="email" 
												x-model="email" 
												required 
												class="form-input pl-10 w-full rounded-lg border-secondary-300 dark:border-secondary-700 dark:bg-secondary-800 dark:text-secondary-100 focus:ring-primary-500 focus:border-primary-500" 
												placeholder="user@example.com" />
										</div>
									</div>
									
									<div>
										<label for="password" class="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">Password</label>
										<div class="relative">
											<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
												<i class="fas fa-key text-secondary-400 dark:text-secondary-600"></i>
											</div>
											<input 
												type="password" 
												name="password" 
												id="password" 
												x-model="password" 
												required 
												class="form-input pl-10 w-full rounded-lg border-secondary-300 dark:border-secondary-700 dark:bg-secondary-800 dark:text-secondary-100 focus:ring-primary-500 focus:border-primary-500" 
												placeholder="••••••••" />
										</div>
									</div>
									
									<div>
										<label for="confirm_password" class="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">Confirm Password</label>
										<div class="relative">
											<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
												<i class="fas fa-lock text-secondary-400 dark:text-secondary-600"></i>
											</div>
											<input 
												type="password" 
												name="confirm_password" 
												id="confirm_password" 
												x-model="confirmPassword" 
												required 
												class="form-input pl-10 w-full rounded-lg border-secondary-300 dark:border-secondary-700 dark:bg-secondary-800 dark:text-secondary-100 focus:ring-primary-500 focus:border-primary-500" 
												placeholder="••••••••" />
											<p class="mt-1 text-sm text-red-600 dark:text-red-400" x-show="confirmPassword && password !== confirmPassword">
												<i class="fas fa-exclamation-triangle mr-1"></i>
												Passwords do not match
											</p>
										</div>
									</div>
									
									<div class="pt-2">
										<div class="relative flex items-start">
											<div class="flex items-center h-5">
												<input 
													id="is_admin" 
													name="is_admin" 
													type="checkbox" 
													x-model="isAdmin" 
													class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 dark:border-secondary-700 rounded" />
											</div>
											<div class="ml-3 text-sm">
												<label for="is_admin" class="font-medium text-secondary-700 dark:text-secondary-300">Administrator</label>
												<p class="text-secondary-500 dark:text-secondary-400">Grant administrative privileges to this user</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							
							<div class="border-t border-secondary-200 dark:border-secondary-700 pt-5">
								<div class="flex justify-end space-x-3">
									<a href="/admin/users" class="btn-secondary">
										<i class="fas fa-times mr-2"></i>
										Cancel
									</a>
									<button 
										type="submit" 
										class="btn-primary" 
										x-bind:disabled="!validate() || loading">
										<span x-show="!loading" class="flex items-center">
											<i class="fas fa-user-plus mr-2"></i>
											Create User
										</span>
										<span x-show="loading" class="flex items-center">
											<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
												<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
												<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
											</svg>
											Processing...
										</span>
									</button>
								</div>
							</div>
						</form>
					</div>
					
					<div class="px-6 py-4 bg-secondary-50 dark:bg-secondary-800 border-t border-secondary-200 dark:border-secondary-700">
						<div class="flex items-center text-sm text-secondary-500 dark:text-secondary-400">
							<i class="fas fa-shield-alt mr-2 text-primary-500"></i>
							<span>User accounts provide secure access to the GoMFT application</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	}
}