package teamsview

templ NewForm() {
	<form
		hx-post="/teams/new"
		hx-swap="none"
		x-data={ templ.JSFuncCall("newTeamFormData").CallInline }
		@submit="handleSubmit()"
		@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful && $event.detail.xhr.status !== 409) { isSubmitting=false; buttonText='Create Team'; generalError='An error occurred. Please try again.'; }"
	>
		<script>
			function newTeamFormData() {
				return {
					canSubmit: false,
					buttonText: "Create Team",
					// Name validation state
					nameError: "",
					nameIsChecking: false,
					nameIsUnique: false,
					nameIsEmpty: true,
					// Short names validation state
					shortNamesError: "",
					shortNamesIsChecking: false,
					shortNamesAreUnique: false,
					shortNameIsEmpty: true,
					altShortNameIsEmpty: true,
					// Form state
					isSubmitting: false,
					generalError: "",
					submitTimeout: null,
					// Reset name errors
					resetNameErr() {
						this.nameError = "";
						this.nameIsChecking = false;
						this.nameIsUnique = false;
					},
					// Reset short names errors
					resetShortNamesErr() {
						this.shortNamesError = "";
						this.shortNamesIsChecking = false;
						this.shortNamesAreUnique = false;
					},
					// Check if short names are the same
					checkShortNamesSame() {
						const shortName = document.getElementById('short_name').value.trim();
						const altShortName = document.getElementById('alt_short_name').value.trim();
						if (shortName && altShortName && shortName === altShortName) {
							this.shortNamesError = 'Short name and alt short name must be different';
							this.shortNamesAreUnique = false;
							return true;
						}
						return false;
					},
					// Check if form can be submitted
					updateCanSubmit() {
						this.canSubmit =
							!this.nameIsEmpty &&
							this.nameIsUnique &&
							!this.nameIsChecking &&
							!this.shortNameIsEmpty &&
							!this.altShortNameIsEmpty &&
							this.shortNamesAreUnique &&
							!this.shortNamesIsChecking;
					},
					// Handle form submission
					handleSubmit() {
						this.isSubmitting = true;
						this.buttonText = "Creating...";
						this.generalError = "";
						// Set timeout for 10 seconds
						this.submitTimeout = setTimeout(() => {
							this.isSubmitting = false;
							this.buttonText = "Create Team";
							this.generalError = "Request timed out. Please try again.";
						}, 10000);
					},
				};
			}
		</script>
		<div class="grid gap-y-5">
			<!-- Name Field -->
			<div>
				<label for="name" class="block text-sm font-medium mb-2">Team Name</label>
				<div class="relative">
					<input
						type="text"
						id="name"
						name="name"
						maxlength="50"
						x-bind:class="{
							'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
							'border-overlay0 focus:border-blue': !nameIsUnique && !nameError,
							'border-green focus:border-green': nameIsUnique && !nameIsChecking && !nameError,
							'border-red focus:border-red': nameError && !nameIsChecking && !isSubmitting
						}"
						required
						placeholder="e.g. Blueberry FC"
						@input="resetNameErr(); nameIsEmpty = $el.value.trim() === ''; if(nameIsEmpty) { nameError='Team name is required'; nameIsUnique=false; } updateCanSubmit();"
						hx-post="/htmx/isteamnameunique"
						hx-trigger="input changed delay:500ms"
						hx-swap="none"
						@htmx:before-request="if($el.value.trim() === '') { nameIsEmpty=true; return; } nameIsEmpty=false; nameIsChecking=true; nameIsUnique=false; nameError=''; updateCanSubmit();"
						@htmx:after-request="nameIsChecking=false; if($event.detail.successful) { nameIsUnique=true; } else if($event.detail.xhr.status === 409) { nameError='This team name is already taken'; nameIsUnique=false; } updateCanSubmit();"
					/>
					<p class="text-xs text-subtext1 mt-1">Maximum 50 characters</p>
				</div>
				<p
					class="text-center text-xs text-red mt-2"
					x-show="nameError && !isSubmitting"
					x-cloak
					x-text="nameError"
				></p>
			</div>
			<!-- Short Name Field -->
			<div>
				<label for="short_name" class="block text-sm font-medium mb-2">Short Name</label>
				<div class="relative">
					<input
						type="text"
						id="short_name"
						name="short_name"
						maxlength="10"
						x-bind:class="{
							'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
							'border-overlay0 focus:border-blue': !shortNamesAreUnique && !shortNamesError,
							'border-green focus:border-green': shortNamesAreUnique && !shortNamesIsChecking && !shortNamesError,
							'border-red focus:border-red': shortNamesError && !shortNamesIsChecking && !isSubmitting
						}"
						required
						placeholder="e.g. BLUE"
						@input="
							resetShortNamesErr();
							shortNameIsEmpty = $el.value.trim() === '';
							updateCanSubmit();
						"
						hx-post="/htmx/isteamshortnamesunique"
						hx-trigger="input changed delay:500ms from:#short_name, input changed delay:500ms from:#alt_short_name"
						hx-include="[name='alt_short_name']"
						hx-swap="none"
						@htmx:before-request="if($el.value.trim() === '' || document.getElementById('alt_short_name').value.trim() === '') { return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
						@htmx:after-request="shortNamesIsChecking=false; if($event.detail.successful) { shortNamesAreUnique=true; } else if($event.detail.xhr.status === 409) { shortNamesError='This combination of short names is already taken or they are the same'; shortNamesAreUnique=false; } updateCanSubmit();"
					/>
					<p class="text-xs text-subtext1 mt-1">Maximum 10 characters</p>
				</div>
			</div>
			<!-- Alternative Short Name Field -->
			<div>
				<label for="alt_short_name" class="block text-sm font-medium mb-2">Alternative Short Name</label>
				<div class="relative">
					<input
						type="text"
						id="alt_short_name"
						name="alt_short_name"
						maxlength="10"
						x-bind:class="{
							'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
							'border-overlay0 focus:border-blue': !shortNamesAreUnique && !shortNamesError,
							'border-green focus:border-green': shortNamesAreUnique && !shortNamesIsChecking && !shortNamesError,
							'border-red focus:border-red': shortNamesError && !shortNamesIsChecking && !isSubmitting
						}"
						required
						placeholder="e.g. BFC"
						@input="
							resetShortNamesErr();
							altShortNameIsEmpty = $el.value.trim() === '';
							updateCanSubmit();
						"
						hx-post="/htmx/isteamshortnamesunique"
						hx-trigger="input changed delay:500ms from:#short_name, input changed delay:500ms from:#alt_short_name"
						hx-include="[name='short_name']"
						hx-swap="none"
						@htmx:before-request="if($el.value.trim() === '' || document.getElementById('short_name').value.trim() === '') { return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
						@htmx:after-request="shortNamesIsChecking=false; if($event.detail.successful) { shortNamesAreUnique=true; } else if($event.detail.xhr.status === 409) { shortNamesError='This combination of short names is already taken or they are the same'; shortNamesAreUnique=false; } updateCanSubmit();"
					/>
					<p class="text-xs text-subtext1 mt-1">Maximum 10 characters. Must be different from short name.</p>
				</div>
				<p
					class="text-center text-xs text-red mt-2"
					x-show="shortNamesError && !isSubmitting"
					x-cloak
					x-text="shortNamesError"
				></p>
			</div>
			<!-- Color Field (Optional) -->
			<div>
				<label for="color" class="block text-sm font-medium mb-2">Team Color (Optional)</label>
				<div class="flex gap-3 items-center">
					<input
						type="color"
						id="color"
						name="color"
						class="h-12 w-20 rounded cursor-pointer border-2 border-overlay0"
					/>
					<p class="text-xs text-subtext1">Choose a color to represent this team</p>
				</div>
			</div>
			<!-- General Error Message -->
			<p
				class="text-center text-sm text-red"
				x-show="generalError"
				x-cloak
				x-text="generalError"
			></p>
			<!-- Submit Button -->
			<button
				x-bind:disabled="!canSubmit || isSubmitting"
				x-text="buttonText"
				type="submit"
				class="w-full py-3 px-4 inline-flex justify-center items-center 
                    gap-x-2 rounded-lg border border-transparent transition font-semibold
                    bg-blue hover:bg-blue/75 text-mantle hover:cursor-pointer
                    disabled:bg-blue/40 disabled:cursor-not-allowed"
			></button>
		</div>
	</form>
}