<script lang="ts">
	import { enhance } from '$app/forms';

	let { form }: { form: any } = $props();
	let isLoading = $state(false);
</script>

<svelte:head>
	<title>Novo Utilizador - RefoodOne</title>
</svelte:head>

<div class="container py-4">
	<div class="mb-4">
		<a href="/admin/utilizadores" class="btn btn-link text-decoration-none p-0 d-inline-flex align-items-center gap-1 text-secondary">
			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
				<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
			</svg>
			Voltar para a lista
		</a>
		<h2 class="fw-bold text-dark mt-2 mb-1">Novo Utilizador</h2>
		<p class="text-muted mb-0">Criar uma nova conta de acesso ao sistema</p>
	</div>

	{#if form?.error}
		<div class="alert alert-danger border-0 rounded-3 mb-4" role="alert">
			{form.error}
		</div>
	{/if}

	<div class="card border-0 shadow-sm rounded-4 p-4 bg-white" style="max-width: 800px;">
		<form method="POST" use:enhance={() => {
			isLoading = true;
			return async ({ update }) => {
				isLoading = false;
				await update();
			};
		}}>
			<div class="row g-3 mb-4">
				<div class="col-md-6">
					<label for="username" class="form-label fw-semibold text-secondary small">Nome de Utilizador <span class="text-danger">*</span></label>
					<input
						type="text"
						name="username"
						id="username"
						class="form-control rounded-3 border-2"
						placeholder="Ex: joao.silva"
						value={form?.username ?? ''}
						required
						disabled={isLoading}
					/>
				</div>

				<div class="col-md-6">
					<label for="role" class="form-label fw-semibold text-secondary small">Perfil (Role) <span class="text-danger">*</span></label>
					<select name="role" id="role" class="form-select rounded-3 border-2" disabled={isLoading} required>
						<option value="" disabled selected={!form?.role}>Selecione um perfil...</option>
						<option value="admin" selected={form?.role === 'admin'}>Administrador</option>
						<option value="shift_manager" selected={form?.role === 'shift_manager'}>Gestor de Turno</option>
						<option value="volunteer" selected={form?.role === 'volunteer'}>Voluntário</option>
					</select>
				</div>

				<hr class="my-4 text-muted" />

				<h5 class="fw-bold text-dark mb-3">Definir Palavra-passe</h5>

				<div class="col-md-6">
					<label for="password" class="form-label fw-semibold text-secondary small">Palavra-passe <span class="text-danger">*</span></label>
					<input
						type="password"
						name="password"
						id="password"
						class="form-control rounded-3 border-2"
						placeholder="Palavra-passe"
						required
						disabled={isLoading}
					/>
				</div>

				<div class="col-md-6">
					<label for="confirmPassword" class="form-label fw-semibold text-secondary small">Confirmar Palavra-passe <span class="text-danger">*</span></label>
					<input
						type="password"
						name="confirmPassword"
						id="confirmPassword"
						class="form-control rounded-3 border-2"
						placeholder="Confirmar palavra-passe"
						required
						disabled={isLoading}
					/>
				</div>
			</div>

			<div class="d-flex justify-content-end gap-3">
				<a href="/admin/utilizadores" class="btn btn-outline-secondary rounded-3 px-4 py-2 fw-semibold">
					Cancelar
				</a>
				<button type="submit" class="btn btn-success rounded-3 px-4 py-2 fw-bold text-white border-0 shadow-sm" disabled={isLoading}>
					{#if isLoading}
						<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
						A guardar...
					{:else}
						Guardar
					{/if}
				</button>
			</div>
		</form>
	</div>
</div>
