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 && !event.detail.xhr.response.includes('danger')) { 
					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="#car-number-validation-error"
                        hx-swap="outerHTML"
					/>
					<div class="invalid-feedback" id="car-number-validation-error"></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>
            
            <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> 
		</div>
	</div>
}