package components

import (
	"context"
	"fmt"
)

type Role struct {
	ID          uint
	Name        string
	Description string
	Permissions []string
}

type RolesData struct {
	Roles []Role
	Error string
}

templ AdminRoles(ctx context.Context, data RolesData) {
	@LayoutWithContext("Role Management", ctx) {
		<!-- Roles Management Content -->
		<div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
			<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center">
				<i class="fas fa-user-shield w-6 h-6 mr-2 text-blue-500 dark:text-blue-400"></i>
				Role Management
			</h1>
			<a href="/admin/roles/new" class="flex items-center justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
				<i class="fas fa-plus w-4 h-4 mr-2"></i>
				New Role
			</a>
		</div>

		<!-- Roles Table -->
		<div class="bg-white rounded-lg shadow-sm dark:bg-gray-800">
			<div class="overflow-x-auto">
				<table class="w-full">
					<thead class="bg-gray-50 dark:bg-gray-700">
						<tr>
							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Role Name</th>
							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Description</th>
							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Permissions</th>
							<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Actions</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
						if len(data.Roles) == 0 {
							<tr>
								<td colspan="4" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
									No roles found. Create your first role to get started.
								</td>
							</tr>
						} else {
							for _, role := range data.Roles {
								<tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
									<td class="px-6 py-4 text-sm text-gray-900 dark:text-white">{ role.Name }</td>
									<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{ role.Description }</td>
									<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
										<div class="flex flex-wrap gap-1">
											for _, perm := range role.Permissions {
												<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">
													{ perm }
												</span>
											}
										</div>
									</td>
									<td class="px-6 py-4 text-sm text-right">
										<div class="flex items-center justify-end space-x-2">
											<a href={ templ.SafeURL("/admin/roles/" + fmt.Sprint(role.ID)) } class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
												<i class="fas fa-edit"></i>
											</a>
											<button 
												data-role-id={ fmt.Sprint(role.ID) }
												data-role-name={ role.Name }
												data-modal-target="confirm-delete-modal"
												data-modal-toggle="confirm-delete-modal"
												class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
												<i class="fas fa-trash"></i>
											</button>
										</div>
									</td>
								</tr>
							}
						}
					</tbody>
				</table>
			</div>
		</div>

		<!-- Delete Confirmation Modal -->
		<div id="confirm-delete-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
			<div class="relative p-4 w-full max-w-md max-h-full">
				<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
					<div class="p-4 md:p-5 text-center">
						<i class="fas fa-exclamation-triangle mx-auto mb-4 text-red-400 text-3xl"></i>
						<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this role?</h3>
						<form method="POST" id="delete-form" action="">
							<button type="submit" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
								Yes, delete it
							</button>
							<button type="button" data-modal-hide="confirm-delete-modal" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
								No, cancel
							</button>
						</form>
					</div>
				</div>
			</div>
		</div>

		<script>
			document.addEventListener('DOMContentLoaded', function() {
				// Handle delete modal
				const deleteButtons = document.querySelectorAll('[data-modal-target="confirm-delete-modal"]');
				deleteButtons.forEach(button => {
					button.addEventListener('click', function() {
						const roleId = this.getAttribute('data-role-id');
						document.getElementById('delete-form').action = `/admin/roles/${roleId}/delete`;
					});
				});
			});
		</script>
	}
}