package adminview

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

templ RoleManageModal(role *db.Role) {
	<!-- 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-2xl p-6">
			<div class="flex justify-between items-center mb-6">
				<h2 class="text-2xl font-bold text-text">{ role.DisplayName }</h2>
				<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>
			
			<!-- Role Details -->
			<div class="space-y-4 mb-6">
				<div class="bg-mantle border border-surface1 rounded-lg p-4">
					<div class="grid grid-cols-2 gap-4">
						<div>
							<label class="text-xs font-semibold text-subtext0 uppercase tracking-wider">Internal Name</label>
							<p class="text-sm text-text font-mono mt-1">{ string(role.Name) }</p>
						</div>
						<div>
							<label class="text-xs font-semibold text-subtext0 uppercase tracking-wider">Type</label>
							<div class="mt-1">
								if role.IsSystem {
									<span class="px-2 py-1 bg-yellow/20 text-yellow rounded text-xs font-semibold">SYSTEM</span>
								} else {
									<span class="px-2 py-1 bg-surface2 text-subtext0 rounded text-xs">Custom</span>
								}
							</div>
						</div>
					</div>
					<div class="mt-4">
						<label class="text-xs font-semibold text-subtext0 uppercase tracking-wider">Description</label>
						<p class="text-sm text-text mt-1">
							if role.Description != "" {
								{ role.Description }
							} else {
								<span class="text-subtext0 italic">No description provided</span>
							}
						</p>
					</div>
				</div>
			</div>
			
			<!-- Action Buttons - Only show for non-admin roles -->
			if role.Name != roles.Admin {
				<div class="border-t border-surface1 pt-6">
					<h3 class="text-sm font-semibold text-subtext0 uppercase tracking-wider mb-4">Actions</h3>
					<div class="flex flex-wrap gap-3">
						<!-- Permissions Button -->
						<button
							class="px-4 py-2 bg-blue text-mantle rounded-lg hover:bg-sky transition font-semibold flex items-center gap-2"
							hx-get={ fmt.Sprintf("/admin/roles/%d/permissions", role.ID) }
							hx-target="#role-modal"
							hx-swap="innerHTML"
						>
							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
							</svg>
							Manage Permissions
						</button>
						
						<!-- View as Role Button -->
						<form method="POST" action={ templ.SafeURL(fmt.Sprintf("/admin/roles/%d/preview-start", role.ID)) }>
							<button
								type="submit"
								class="px-4 py-2 bg-green text-mantle rounded-lg hover:bg-teal transition font-semibold flex items-center gap-2"
								hx-indicator="#loading-indicator"
							>
								<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
								</svg>
								View as Role
							</button>
						</form>
						
						<!-- Delete Button - Only for custom roles -->
						if !role.IsSystem {
							<button
								class="px-4 py-2 bg-red text-mantle rounded-lg hover:bg-maroon transition font-semibold flex items-center gap-2"
								hx-get={ fmt.Sprintf("/admin/roles/%d/delete-confirm", role.ID) }
								hx-target="#confirm-dialog"
								hx-swap="innerHTML"
							>
								<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
								</svg>
								Delete Role
							</button>
						}
					</div>
				</div>
			} else {
				<!-- Admin role message -->
				<div class="border-t border-surface1 pt-6">
					<div class="bg-yellow/10 border border-yellow/30 rounded-lg p-4 flex items-start gap-3">
						<svg class="w-5 h-5 text-yellow flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
						</svg>
						<div>
							<p class="text-sm font-semibold text-yellow">Administrator Role</p>
							<p class="text-xs text-yellow/80 mt-1">
								The administrator role is protected and cannot be modified or deleted. This role has full access to all system features.
							</p>
						</div>
					</div>
				</div>
			}
		</div>
	</div>
}