package adminview

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

type PermissionsByResource struct {
	Resource    string
	Permissions []*db.Permission
}

templ RolePermissionsModal(role *db.Role, permissionsByResource []PermissionsByResource, rolePermissionIDs map[int]bool) {
	<!-- Modal Overlay -->
	<div
		class="fixed inset-0 bg-crust/80 flex items-center justify-center z-50"
		@click.self="document.getElementById('role-modal').innerHTML = ''"
	>
		<div class="bg-surface0 border border-surface1 rounded-lg w-full max-w-3xl p-6 max-h-[90vh] overflow-y-auto">
			<div class="flex justify-between items-center mb-4">
				<div>
					<h2 class="text-xl font-bold text-text">Manage Permissions</h2>
					<p class="text-sm text-subtext0">Role: <span class="font-semibold text-text">{ role.DisplayName }</span></p>
				</div>
				<button
					class="text-subtext0 hover:text-text transition"
					@click="document.getElementById('role-modal').innerHTML = ''"
				>
					<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
					</svg>
				</button>
			</div>
			<form
				hx-post={ fmt.Sprintf("/admin/roles/%d/permissions", role.ID) }
				hx-target="#admin-content"
				hx-swap="innerHTML"
			>
				<div class="space-y-6">
					<!-- Permissions Grouped by Resource -->
					for _, group := range permissionsByResource {
						<div class="bg-mantle border border-surface1 rounded-lg p-4">
							<h3 class="text-lg font-semibold text-text mb-3 capitalize">{ group.Resource }</h3>
							<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
								for _, perm := range group.Permissions {
									<label class="flex items-start space-x-3 p-2 rounded hover:bg-surface0 cursor-pointer transition">
										<input
											type="checkbox"
											name="permission_ids"
											value={ fmt.Sprintf("%d", perm.ID) }
											checked?={ rolePermissionIDs[perm.ID] }
											class="mt-1 w-4 h-4 text-blue bg-surface1 border-surface2 rounded focus:ring-blue focus:ring-2"
										/>
										<div class="flex-1">
											<div class="text-sm font-semibold text-text">{ perm.DisplayName }</div>
											if perm.Description != "" {
												<div class="text-xs text-subtext0 mt-0.5">{ perm.Description }</div>
											}
											<div class="text-xs text-subtext1 font-mono mt-0.5">{ string(perm.Name) }</div>
										</div>
									</label>
								}
							</div>
						</div>
					}
					<!-- Action Buttons -->
					<div class="flex justify-end space-x-2 pt-2 border-t border-surface1">
						<button
							type="button"
							class="px-4 py-2 bg-surface1 text-text rounded hover:bg-surface2 transition"
							@click="document.getElementById('role-modal').innerHTML = ''"
						>
							Cancel
						</button>
						<button
							type="submit"
							class="px-4 py-2 bg-blue text-mantle rounded font-semibold hover:bg-sky transition"
						>
							Save Permissions
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
}