package seasonsview

// NewFormModal is a version of the form for use in a modal
// It closes the modal and refreshes the list on success instead of redirecting
templ NewFormModal() {
	<form
		hx-post="/seasons/new"
		hx-target="#seasons-list-container"
		hx-swap="outerHTML"
		x-data={ templ.JSFuncCall("newSeasonFormModalData").CallInline }
		@submit="handleSubmit()"
		@htmx:after-request="
			if(submitTimeout) clearTimeout(submitTimeout);
			// Only handle the form submission (not uniqueness checks)
			const path = $event.detail.requestConfig.path;
			if(path !== '/seasons/new') return;
			if($event.detail.successful) {
				// Close the modal
				$dispatch('close-new-season-modal');
				// Reset form
				$el.reset();
				isSubmitting=false;
				buttonText='Create Season';
				// Reset validation state
				nameIsEmpty=true;
				nameIsUnique=false;
				shortNameIsEmpty=true;
				shortNameIsUnique=false;
				dateIsEmpty=true;
				updateCanSubmit();
				// Clear flatpickr
				const fpInput = document.getElementById('start_date');
				if(fpInput && fpInput._flatpickr) {
					fpInput._flatpickr.clear();
				}
			} else if($event.detail.xhr.status !== 409) {
				isSubmitting=false;
				buttonText='Create Season';
				generalError='An error occurred. Please try again.';
			}
		"
		x-init="initFlatpickrModal()"
	>
		<script>
			function newSeasonFormModalData() {
				return {
					canSubmit: false,
					buttonText: "Create Season",
					// Name validation state
					nameError: "",
					nameIsChecking: false,
					nameIsUnique: false,
					nameIsEmpty: true,
					// Short name validation state
					shortNameError: "",
					shortNameIsChecking: false,
					shortNameIsUnique: false,
					shortNameIsEmpty: true,
					// Date validation state
					dateError: "",
					dateIsEmpty: true,
					// Form state
					isSubmitting: false,
					generalError: "",
					submitTimeout: null,
					// Reset name errors
					resetNameErr() {
						this.nameError = "";
						this.nameIsChecking = false;
						this.nameIsUnique = false;
					},
					// Reset short name errors
					resetShortNameErr() {
						this.shortNameError = "";
						this.shortNameIsChecking = false;
						this.shortNameIsUnique = false;
					},
					// Reset date errors
					resetDateErr() {
						this.dateError = "";
					},
					// Check if form can be submitted
					updateCanSubmit() {
						this.canSubmit =
							!this.nameIsEmpty &&
							this.nameIsUnique &&
							!this.nameIsChecking &&
							!this.shortNameIsEmpty &&
							this.shortNameIsUnique &&
							!this.shortNameIsChecking &&
							!this.dateIsEmpty;
					},
					// 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 Season";
							this.generalError = "Request timed out. Please try again.";
						}, 10000);
					},
				};
			}
			function initFlatpickrModal() {
				// Small delay to ensure DOM is ready after modal opens
				setTimeout(() => {
					if (typeof flatpickr !== 'undefined') {
						flatpickr('#start_date', {
							dateFormat: 'd/m/Y',
							allowInput: true,
							onChange: function(selectedDates, dateStr) {
								const input = document.getElementById('start_date');
								input.value = dateStr;
								input.dispatchEvent(new Event('input', { bubbles: true }));
							}
						});
					}
				}, 100);
			}
		</script>
		<div class="grid gap-y-5">
			<!-- Name and Short Name Fields (Inlined) -->
			<div class="grid grid-cols-3 gap-4">
				<!-- Name Field -->
				<div class="col-span-2">
					<label for="name" class="block text-sm font-medium mb-2 text-subtext0">Season Name</label>
					<div class="relative">
						<input
							type="text"
							id="name"
							name="name"
							maxlength="20"
							x-bind:class="{
								'py-3 px-4 block w-full rounded-lg text-sm bg-surface0 disabled:opacity-50 disabled:pointer-events-none border-2 outline-none text-text placeholder-subtext0': true,
								'border-surface1 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. Season 1"
							@input="resetNameErr(); nameIsEmpty = $el.value.trim() === ''; if(nameIsEmpty) { nameError='Season name is required'; nameIsUnique=false; } updateCanSubmit();"
							hx-post="/htmx/isseasonnameunique"
							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 season name is already taken'; nameIsUnique=false; } updateCanSubmit();"
						/>
					</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 class="col-span-1">
					<label for="short_name" class="block text-sm font-medium mb-2 text-subtext0">Short Name</label>
					<div class="relative">
						<input
							type="text"
							id="short_name"
							name="short_name"
							maxlength="6"
							x-bind:class="{
								'py-3 px-4 block w-full rounded-lg text-sm bg-surface0 disabled:opacity-50 disabled:pointer-events-none border-2 outline-none uppercase text-text placeholder-subtext0': true,
								'border-surface1 focus:border-blue': !shortNameIsUnique && !shortNameError,
								'border-green focus:border-green': shortNameIsUnique && !shortNameIsChecking && !shortNameError,
								'border-red focus:border-red': shortNameError && !shortNameIsChecking && !isSubmitting
							}"
							required
							placeholder="e.g. S1"
							pattern="[A-Z0-9]+"
							@input="
								let val = $el.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
								$el.value = val;
								resetShortNameErr();
								shortNameIsEmpty = val.trim() === '';
								if(shortNameIsEmpty) {
									shortNameError='Short name is required';
									shortNameIsUnique=false;
								}
								updateCanSubmit();
							"
							hx-post="/htmx/isseasonshortnameunique"
							hx-trigger="input changed delay:500ms"
							hx-swap="none"
							@htmx:before-request="if($el.value.trim() === '') { shortNameIsEmpty=true; return; } shortNameIsEmpty=false; shortNameIsChecking=true; shortNameIsUnique=false; shortNameError=''; updateCanSubmit();"
							@htmx:after-request="shortNameIsChecking=false; if($event.detail.successful) { shortNameIsUnique=true; } else if($event.detail.xhr.status === 409) { shortNameError='This short name is already taken'; shortNameIsUnique=false; } updateCanSubmit();"
						/>
					</div>
					<p
						class="text-center text-xs text-red mt-2"
						x-show="shortNameError && !isSubmitting"
						x-cloak
						x-text="shortNameError"
					></p>
				</div>
			</div>
			<p class="text-xs text-subtext0 -mt-3">Maximum 20 characters for name, 6 alphanumeric characters for short name</p>
			<!-- Season Type and Start Date Fields (Inlined) -->
			<div class="grid grid-cols-2 gap-4 items-end">
				<!-- Season Type Field -->
				<div>
					<label for="type" class="block text-sm font-medium mb-2 text-subtext0">Season Type</label>
					<select
						id="type"
						name="type"
						class="py-3 px-4 block w-full rounded-lg text-sm bg-surface0 border-2 border-surface1 focus:border-blue outline-none text-text appearance-none cursor-pointer hover:bg-surface1 transition-colors"
						required
						style="height: 46px;"
					>
						<option value="regular" selected>Regular</option>
						<option value="draft">Draft</option>
					</select>
				</div>
				<!-- Start Date Field (Flatpickr) -->
				<div>
					<label for="start_date" class="block text-sm font-medium mb-2 text-subtext0">Start Date</label>
					<input
						type="text"
						id="start_date"
						name="start_date"
						class="py-3 px-4 block w-full rounded-lg text-sm bg-surface0 border-2 border-surface1 focus:border-blue outline-none text-text placeholder-subtext0"
						placeholder="DD/MM/YYYY"
						required
						style="height: 46px;"
						@input="dateIsEmpty = $el.value.trim() === ''; resetDateErr(); if(dateIsEmpty) { dateError='Start date is required'; } updateCanSubmit();"
					/>
				</div>
			</div>
			<p
				class="text-center text-xs text-red -mt-3"
				x-show="dateError && !isSubmitting"
				x-cloak
				x-text="dateError"
			></p>
			<!-- Slap Version Field -->
			<div>
				<label for="slap_version" class="block text-sm font-medium mb-2 text-subtext0">Slap Version</label>
				<select
					id="slap_version"
					name="slap_version"
					class="py-3 px-4 block w-full rounded-lg text-sm bg-surface0 border-2 border-surface1 focus:border-blue outline-none text-text appearance-none cursor-pointer hover:bg-surface1 transition-colors"
					required
					style="height: 46px;"
				>
					<option value="rebound" selected>Rebound</option>
					<option value="slapshot1">Slapshot 1</option>
				</select>
				<p class="text-xs text-subtext0 mt-1">Select the game game version for this season</p>
			</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-all duration-200 font-semibold
                    bg-blue hover:bg-blue/80 text-mantle hover:cursor-pointer shadow-md
                    disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none hover:shadow-lg hover:-translate-y-0.5"
			></button>
		</div>
	</form>
}