<div class="ov-page-container ov-mb-xxl">
	<div class="page-header">
		<div class="title">
			<mat-icon class="material-symbols-outlined ov-settings-icon">passkey</mat-icon>
			<h1>Users & permissions</h1>
		</div>
		<p class="subtitle">
			Configure authentication settings and access controls to manage who can join your rooms and their
			permissions.
		</p>
	</div>

	@if (isLoading()) {
		<div class="ov-page-loading">
			<div class="loading-content">
				<div class="loading-header">
					<div class="loading-title">
						<mat-icon class="ov-settings-icon loading-icon">settings</mat-icon>
						<h1>Loading Settings</h1>
					</div>
					<p class="loading-subtitle">Please wait while we fetch your settings...</p>
				</div>

				<div class="loading-spinner-container">
					<mat-spinner diameter="48"></mat-spinner>
				</div>
			</div>
		</div>
	} @else {
		<div class="page-content">
			<!-- Branding Section -->
			<!-- <mat-card class="section-card branding-section">
				<mat-card-header>
					<div mat-card-avatar>
						<mat-icon class="section-icon">palette</mat-icon>
					</div>
					<mat-card-title>Branding</mat-card-title>
				</mat-card-header>

				<mat-divider class="section-divider"></mat-divider>

				<mat-card-content>
					<ov-logo-selector></ov-logo-selector>
				</mat-card-content>
			</mat-card> -->

			<!-- Users Section -->
			<mat-card class="section-card branding-section">
				<mat-card-header class="users-header">
					<div mat-card-avatar class="users-avatar">
						<mat-icon class="section-icon users-icon">group</mat-icon>
					</div>
					<mat-card-title class="users-title">Users</mat-card-title>
				</mat-card-header>

				<mat-divider class="section-divider"></mat-divider>

				<mat-card-content>
					<!-- <div class="form-section">
						<div class="form-field-header">
							<h3>User Authentication</h3>
							<ov-pro-feature-badge class="users-pro-badge"></ov-pro-feature-badge>
						</div>
						<p class="field-description">Choose how users will authenticate to access OpenVidu Meet.</p>
						<mat-form-field
							subscriptSizing="dynamic"
							appearance="outline"
							class="user-management-select-field"
						>
							<mat-select [value]="'single'">
								<mat-option value="single">Single user</mat-option>
								<mat-option value="multiusers" [disabled]="true">
									Multi-user (credentials & optional OAuth)
								</mat-option>
								<mat-option value="oauth" [disabled]="true">Multi-user (only OAuth)</mat-option>
							</mat-select>
						</mat-form-field>
					</div> -->

					<!-- Change Admin Password -->
					<form [formGroup]="adminCredentialsForm" (ngSubmit)="onSaveAdminCredentials()">
						<div class="form-section">
							<div class="form-field-header">
								<h3>Admin Credentials</h3>
								<p class="field-description">Change the password for the admin user.</p>
							</div>

							<div class="admin-auth-form">
								<!-- Username Field -->
								<mat-form-field subscriptSizing="dynamic" appearance="outline" class="username-field">
									<mat-label>Username</mat-label>
									<input matInput type="text" formControlName="username" placeholder="admin" />
								</mat-form-field>

								<!-- Current Password Field -->
								<mat-form-field subscriptSizing="dynamic" appearance="outline" class="password-field">
									<mat-label>Current Password</mat-label>
									<input
										matInput
										[type]="showCurrentPassword() ? 'text' : 'password'"
										formControlName="currentPassword"
										placeholder="Enter your current password"
									/>
									<button
										mat-icon-button
										matSuffix
										type="button"
										class="input-btn"
										(click)="showCurrentPassword.set(!showCurrentPassword())"
										matTooltip="{{ showCurrentPassword() ? 'Hide password' : 'Show password' }}"
									>
										<mat-icon>{{
											showCurrentPassword() ? 'visibility_off' : 'visibility'
										}}</mat-icon>
									</button>
									@if (getCurrentPasswordError()) {
										<mat-error>{{ getCurrentPasswordError() }}</mat-error>
									}
								</mat-form-field>

								<!-- New Password Field -->
								<mat-form-field subscriptSizing="dynamic" appearance="outline" class="password-field">
									<mat-label>New Password</mat-label>
									<input
										matInput
										[type]="showNewPassword() ? 'text' : 'password'"
										formControlName="newPassword"
										placeholder="Enter your new password"
									/>
									<button
										mat-icon-button
										matSuffix
										type="button"
										class="input-btn"
										(click)="showNewPassword.set(!showNewPassword())"
										matTooltip="{{ showNewPassword() ? 'Hide password' : 'Show password' }}"
									>
										<mat-icon>{{ showNewPassword() ? 'visibility_off' : 'visibility' }}</mat-icon>
									</button>
									<mat-hint>Minimum of 5 characters</mat-hint>
									@if (getNewPasswordError()) {
										<mat-error>{{ getNewPasswordError() }}</mat-error>
									}
								</mat-form-field>

								<!-- Confirm New Password Field -->
								<mat-form-field subscriptSizing="dynamic" appearance="outline" class="password-field">
									<mat-label>Confirm New Password</mat-label>
									<input
										matInput
										[type]="showConfirmPassword() ? 'text' : 'password'"
										formControlName="confirmPassword"
										placeholder="Confirm your new password"
									/>
									<button
										mat-icon-button
										matSuffix
										type="button"
										class="input-btn"
										(click)="showConfirmPassword.set(!showConfirmPassword())"
										matTooltip="{{ showConfirmPassword() ? 'Hide password' : 'Show password' }}"
									>
										<mat-icon>{{
											showConfirmPassword() ? 'visibility_off' : 'visibility'
										}}</mat-icon>
									</button>
									@if (getConfirmPasswordError()) {
										<mat-error>{{ getConfirmPasswordError() }}</mat-error>
									}
								</mat-form-field>
							</div>
						</div>
					</form>
				</mat-card-content>
				<mat-card-actions>
					<button
						mat-button
						class="primary-button"
						type="submit"
						[disabled]="adminCredentialsForm.invalid"
						(click)="onSaveAdminCredentials()"
					>
						Save admin password
					</button>
				</mat-card-actions>
			</mat-card>

			<!-- Access & Permissions Section -->
			<!-- <mat-card class="section-card access-section">
				<mat-card-header>
					<div mat-card-avatar>
						<mat-icon class="section-icon">security</mat-icon>
					</div>
					<mat-card-title>Access & Permissions</mat-card-title>
				</mat-card-header>

				<mat-divider class="section-divider"></mat-divider>

				<mat-card-content>
					<form [formGroup]="accessSettingsForm" (ngSubmit)="onSaveAccessSettings()"> -->
						<!-- Authentication for joining room -->
						<!-- <div class="form-section">
							<div class="form-field-header">
								<h3>Authentication for joining room</h3>
							</div>
							<p class="field-description">Choose which users must authenticate for joining room.</p>

							<mat-form-field subscriptSizing="dynamic" appearance="outline" class="auth-select-field">
								<mat-label>Select...</mat-label>
								<mat-select formControlName="authModeToAccessRoom">
									@for (option of authModeOptions; track option.value) {
										<mat-option [value]="option.value">{{ option.label }}</mat-option>
									}
								</mat-select>
							</mat-form-field>
						</div>
					</form>
				</mat-card-content>
				<mat-card-actions>
					<button
						mat-button
						type="submit"
						(click)="onSaveAccessSettings()"
						[disabled]="!hasAccessSettingsChanges()"
						class="primary-button"
					>
						Save configuration
					</button>
				</mat-card-actions>
			</mat-card> -->
		</div>
	}
</div>
