<div class="room-details-step fade-in">
	<!-- Header Section -->
	<header class="step-header">
		<mat-icon class="ov-room-icon step-icon">video_chat</mat-icon>
		<div class="step-title-group">
			<h3 class="step-title">Room Details</h3>
			<p class="step-description">Configure your room's details including name and automatic deletion date</p>
		</div>
	</header>

	<!-- Form Section -->
	<main class="step-content">
		<form [formGroup]="roomDetailsForm" class="room-details-form">
			<!-- Room Field -->
			<mat-form-field appearance="outline" class="form-field">
				<mat-label>Room Name</mat-label>
				<input matInput formControlName="roomName" placeholder="e.g. Demo Room" />
				<mat-icon matSuffix class="ov-settings-icon">label</mat-icon>
				<mat-hint>Enter a custom room name, or leave blank to use the default name "Room".</mat-hint>
				@if (roomDetailsForm.get('roomName')?.hasError('maxlength')) {
					<mat-error>Room name cannot exceed 50 characters</mat-error>
				}
			</mat-form-field>

			<!-- Deletion Date Field -->
			<mat-form-field appearance="outline" class="form-field">
				<mat-label>Auto-deletion Date</mat-label>
				<input
					matInput
					[matDatepicker]="deletionPicker"
					formControlName="autoDeletionDate"
					placeholder="Select deletion date"
					[min]="minDate"
					readonly
					(click)="deletionPicker.open()"
				/>
				<!-- Show clear button if date is selected, otherwise show date picker toggle -->
				@if (hasDateSelected) {
					<button
						matSuffix
						mat-icon-button
						type="button"
						[disabled]="roomDetailsForm.get('autoDeletionDate')?.disabled"
						(click)="clearDeletionDate()"
						matTooltip="Clear date selection"
						class="clear-date-button"
					>
						<mat-icon class="ov-settings-icon">clear</mat-icon>
					</button>
				} @else {
					<mat-datepicker-toggle matSuffix [for]="deletionPicker">
						<mat-icon matDatepickerToggleIcon class="ov-settings-icon">schedule</mat-icon>
					</mat-datepicker-toggle>
				}

				<mat-datepicker #deletionPicker></mat-datepicker>
				<mat-hint>Optional. Room will be automatically deleted on this date and time.</mat-hint>
			</mat-form-field>

			@if (hasDateSelected) {
				<!-- Time Selection (only shown when date is selected) -->
				<div class="time-selection-container">
					<div class="time-selection-row">
						<mat-form-field appearance="outline" class="time-field">
							<mat-label>Hour</mat-label>
							<mat-select formControlName="autoDeletionHour">
								@for (hour of hours; track hour.value) {
									<mat-option [value]="hour.value">
										{{ hour.display }}
									</mat-option>
								}
							</mat-select>
							<mat-icon matSuffix class="ov-settings-icon">schedule</mat-icon>
						</mat-form-field>

						<span class="time-separator">:</span>

						<mat-form-field appearance="outline" class="time-field">
							<mat-label>Minute</mat-label>
							<mat-select formControlName="autoDeletionMinute">
								@for (minute of minutes; track minute.value) {
									<mat-option [value]="minute.value">
										{{ minute.display }}
									</mat-option>
								}
							</mat-select>
							<mat-icon matSuffix class="ov-settings-icon">access_time</mat-icon>
						</mat-form-field>
					</div>

					@if (!roomDetailsForm.hasError('minFutureDateTime')) {
						<div class="time-hint">
							<mat-icon class="hint-icon material-symbols-outlined material-icons">auto_delete</mat-icon>
							<span>Room will be deleted at {{ getFormattedDateTime() }}</span>
						</div>
					} @else {
						<mat-error> Deletion date and time must be at least one hour in the future </mat-error>
					}

					<!-- Auto-deletion Policies Section -->
					<div class="auto-deletion-policies">
						<h4 class="policies-title">
							<mat-icon class="policies-icon">policy</mat-icon>
							Auto-deletion Policies
						</h4>
						<p class="policies-description">
							Configure how the room should be handled during auto-deletion if there are active meetings
							or recordings.
						</p>

						<div class="policies-row">
							<mat-form-field appearance="outline" class="policy-field">
								<mat-label>With Active Meeting Policy</mat-label>
								<mat-select formControlName="autoDeletionPolicyWithMeeting">
									@for (option of meetingPolicyOptions; track option.value) {
										<mat-option [value]="option.value">
											{{ option.label }}
										</mat-option>
									}
								</mat-select>
								<mat-icon matSuffix class="ov-settings-icon">groups</mat-icon>
								<mat-hint>{{ getMeetingPolicyDescription() }}</mat-hint>
							</mat-form-field>

							<mat-form-field appearance="outline" class="policy-field">
								<mat-label>With Recordings Policy</mat-label>
								<mat-select formControlName="autoDeletionPolicyWithRecordings">
									@for (option of recordingPolicyOptions; track option.value) {
										<mat-option [value]="option.value">
											{{ option.label }}
										</mat-option>
									}
								</mat-select>
								<mat-icon matSuffix class="ov-settings-icon">video_library</mat-icon>
								<mat-hint>{{ getRecordingPolicyDescription() }}</mat-hint>
							</mat-form-field>
						</div>
					</div>
				</div>
			}
		</form>
	</main>
</div>
