package templates

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

templ Admin(groups []models.Group, racers []models.Racer) {
	@Layout("Admin") {
		<div class="container py-4">
			<h1 class="mb-4">Admin Dashboard</h1>
			
			<div class="row">
				<div class="col-md-6 mb-4">
					<div class="card">
						<div class="card-header d-flex justify-content-between align-items-center">
							<h2 class="h5 mb-0">Groups</h2>
							<button 
								class="btn btn-sm btn-primary" 
								id="show-group-form-btn"
								onclick="toggleGroupForm()"
							>
								Add Group
							</button>
						</div>
						<div class="card-body">
							<div id="group-form-container" class="mb-4" style="display: none;">
								<div class="card">
									<div class="card-header">
										<h3 class="h6 mb-0">Add New Group</h3>
									</div>
									<div class="card-body">
										<form 
											hx-post="/api/groups" 
											hx-target="#groups-list" 
											hx-swap="innerHTML"
											hx-on::after-request="this.reset(); document.getElementById('group-form-container').style.display = 'none';"
										>
											<div class="mb-3">
												<label for="group-name" class="form-label">Name</label>
												<input type="text" class="form-control" id="group-name" name="name" required/>
											</div>
											<div class="mb-3">
												<label for="group-description" class="form-label">Description</label>
												<textarea class="form-control" id="group-description" name="description" rows="2"></textarea>
											</div>
											<div class="d-flex justify-content-end">
												<button type="button" class="btn btn-secondary me-2" onclick="toggleGroupForm()">Cancel</button>
												<button type="submit" class="btn btn-primary">Save Group</button>
											</div>
										</form>
									</div>
								</div>
							</div>
							
							<div id="groups-list">
								if len(groups) == 0 {
									<div class="alert alert-info">
										<p class="mb-0">No groups added yet.</p>
									</div>
								} else {
									<div class="list-group">
										for _, group := range groups {
											<div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
												<div>
													<h5 class="mb-1">{ group.Name }</h5>
													if group.Description != "" {
														<p class="mb-1 text-muted">{ group.Description }</p>
													}
												</div>
												<div class="btn-group">
													<button 
														class="btn btn-sm btn-outline-primary"
														onclick="editGroup({group.ID}, '{group.Name}', '{group.Description}')"
													>
														Edit
													</button>
													<button 
														class="btn btn-sm btn-outline-danger"
														hx-delete={ "/api/groups/" + strconv.FormatInt(group.ID, 10) }
														hx-target="#groups-list"
														hx-confirm={ "Are you sure you want to delete " + group.Name + "?" }
													>
														Delete
													</button>
												</div>
											</div>
										}
									</div>
								}
							</div>
						</div>
					</div>
				</div>
				
				<div class="col-md-6 mb-4">
					<div class="card">
						<div class="card-header d-flex justify-content-between align-items-center">
							<h2 class="h5 mb-0">Racers</h2>
							<button 
								class="btn btn-sm btn-primary" 
								hx-get="/register/form" 
								hx-target="#racer-form-container"
							>
								Add Racer
							</button>
						</div>
						<div class="card-body">
							<div id="racer-form-container" class="mb-4"></div>
							
							<div id="racers-list">
								if len(racers) == 0 {
									<div class="alert alert-info">
										<p class="mb-0">No racers added yet.</p>
									</div>
								} else {
									<div class="table-responsive">
										<table class="table table-striped table-hover">
											<thead>
												<tr>
													<th>Name</th>
													<th>Car #</th>
													<th>Group</th>
													<th>Actions</th>
												</tr>
											</thead>
											<tbody>
												for _, racer := range racers {
													<tr>
														<td>{ racer.FirstName + " " + racer.LastName }</td>
														<td>{ racer.CarNumber }</td>
														<td>{ getGroupNameForRacer(groups, racer.GroupID) }</td>
														<td>
															<div class="btn-group btn-group-sm">
																<button 
																	class="btn btn-outline-primary"
																	hx-get={ "/admin/racers/edit/" + strconv.FormatInt(racer.ID, 10) }
																	hx-target="#racer-form-container"
																>
																	Edit
																</button>
																<button 
																	class="btn btn-outline-danger"
																	hx-delete={ "/api/racers/" + strconv.FormatInt(racer.ID, 10) }
																	hx-target="#racers-list"
																	hx-confirm={ "Are you sure you want to delete " + racer.FirstName + " " + racer.LastName + "?" }
																>
																	Delete
																</button>
															</div>
														</td>
													</tr>
												}
											</tbody>
										</table>
									</div>
								}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script>
			function toggleGroupForm() {
				const formContainer = document.getElementById('group-form-container');
				formContainer.style.display = formContainer.style.display === 'none' ? 'block' : 'none';
			}
			
			function editGroup(id, name, description) {
				// Show the form
				const formContainer = document.getElementById('group-form-container');
				formContainer.style.display = 'block';
				
				// Update form to be an edit form
				const form = formContainer.querySelector('form');
				form.setAttribute('hx-post', `/api/groups/${id}`);
				form.setAttribute('hx-method', 'PUT');
				
				// Set form values
				document.getElementById('group-name').value = name;
				document.getElementById('group-description').value = description;
				
				// Update header
				formContainer.querySelector('.card-header h3').textContent = 'Edit Group';
				
				// Update submit button
				form.querySelector('button[type="submit"]').textContent = 'Update Group';
			}
			
			document.addEventListener('DOMContentLoaded', function() {
				const evtSource = new EventSource("/api/admin-events");
				evtSource.onmessage = function(event) {
					if (event.data === "racer-added") {
						htmx.ajax('GET', '/admin/racers/list', {target: '#racers-list'});
					}
				};
			});
		</script>
	}
}

func getGroupNameForRacer(groups []models.Group, groupID int64) string {
	for _, group := range groups {
		if group.ID == groupID {
			return group.Name
		}
	}
	return "Unknown Group"
}

templ RacersList(racers []models.Racer, groups []models.Group) {
	if len(racers) == 0 {
		<div class="alert alert-info">
			<p class="mb-0">No racers added yet.</p>
		</div>
	} else {
		<div class="table-responsive">
			<table class="table table-striped table-hover">
				<thead>
					<tr>
						<th>Name</th>
						<th>Car #</th>
						<th>Group</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
					for _, racer := range racers {
						<tr>
							<td>{ racer.FirstName + " " + racer.LastName }</td>
							<td>{ racer.CarNumber }</td>
							<td>{ getGroupNameForRacer(groups, racer.GroupID) }</td>
							<td>
								<div class="btn-group btn-group-sm">
									<button 
										class="btn btn-outline-primary"
										hx-get={ "/admin/racers/edit/" + strconv.FormatInt(racer.ID, 10) }
										hx-target="#racer-form-container"
									>
										Edit
									</button>
									<button 
										class="btn btn-outline-danger"
										hx-delete={ "/api/racers/" + strconv.FormatInt(racer.ID, 10) }
										hx-target="#racers-list"
										hx-confirm={ "Are you sure you want to delete " + racer.FirstName + " " + racer.LastName + "?" }
									>
										Delete
									</button>
								</div>
							</td>
						</tr>
					}
				</tbody>
			</table>
		</div>
	}
}