package templates

import (
	"strconv"
	"track-gopher/models"
)

templ Register(groups []models.Group) {
	@Layout("Register Racer") {
		<div class="container py-4">
			<h1 class="mb-4">Register for Derby Race</h1>
			
			<div class="row">
				<div class="col-md-8 mx-auto">
					<div id="registration-container">
						@RegisterForm(groups, false)
					</div>
				</div>
			</div>
		</div>
	}
}

templ RegisterForm(groups []models.Group, isAdmin bool) {
	<div class="card">
		<div class="card-header">
			<h3 class="h6 mb-0">Racer Registration</h3>
		</div>
		<div class="card-body">
			<div id="racer-form-message"></div>
			<form 
				id="racer-form"
				hx-post="/api/racers" 
				hx-target="#racer-form-message" 
				hx-swap="innerHTML"
				hx-on::before-request="return validateForm()"
				hx-on::after-request="if(event.detail.successful) { 
					document.getElementById('racer-form').reset(); 
					setTimeout(function() {
						document.getElementById('racer-form-message').innerHTML = '';
						// Check if we're on the admin page by looking for the racers-list element
						if (document.getElementById('racers-list')) {
							htmx.ajax('GET', '/admin/racers/list', {target: '#racers-list'});
						}
					}, 3000);
				}"
			>
				<!-- Form fields for racer registration -->
				<div class="mb-3">
					<label for="first-name" class="form-label">First Name</label>
					<input type="text" class="form-control" id="first-name" name="first_name" required/>
				</div>
				<div class="mb-3">
					<label for="last-name" class="form-label">Last Name</label>
					<input type="text" class="form-control" id="last-name" name="last_name" required/>
				</div>
				<div class="mb-3">
					<label for="car-number" class="form-label">Car Number</label>
					<input 
						type="text" 
						class="form-control" 
						id="car-number" 
						name="car_number" 
						required
						hx-get="/api/validate/car-number"
						hx-trigger="change"
						hx-target="next .invalid-feedback"
						hx-indicator="#car-number-indicator"
					/>
					<div class="invalid-feedback"></div>
					<div id="car-number-indicator" class="htmx-indicator">
						<div class="spinner-border spinner-border-sm text-primary" role="status">
							<span class="visually-hidden">Loading...</span>
						</div>
						<small>Checking availability...</small>
					</div>
				</div>
				<div class="mb-3">
					<label for="car-weight" class="form-label">Car Weight (oz)</label>
					<input type="number" step="0.01" class="form-control" id="car-weight" name="car_weight" required/>
				</div>
				<div class="mb-3">
					<label for="group-id" class="form-label">Group</label>
					<select class="form-select" id="group-id" name="group_id" required>
						<option value="">Select a group</option>
						for _, group := range groups {
							<option value={ strconv.FormatInt(group.ID, 10) }>{ group.Name }</option>
						}
					</select>
				</div>
				<div class="d-flex justify-content-end">
					if isAdmin {
						<button type="button" class="btn btn-secondary me-2" onclick="document.getElementById('racer-form-container').style.display = 'none';">Cancel</button>
						<button type="submit" class="btn btn-primary">Save Racer</button>
					} else {
						<button type="submit" class="btn btn-primary">Register</button>
					}
				</div>
			</form>
		</div>
	</div>
}

<script>
	function validateForm() {
		const carNumberInput = document.getElementById('car-number');
		const errorDiv = carNumberInput.nextElementSibling;
		
		if (errorDiv.textContent.trim() !== '') {
			// Show error message more prominently
			errorDiv.classList.add('d-block');
			carNumberInput.classList.add('is-invalid');
			return false;
		}
		
		return true;
	}
</script>