package components

import "context"

type BackupCodeVerifyData struct {
	ErrorMessage string
}

templ TwoFactorBackupVerify(ctx context.Context, data BackupCodeVerifyData) {
	@LayoutWithContext("Backup Code Verification", ctx) {
		<div class="p-4 md:p-6 2xl:p-10">
			<!-- Page Header -->
			<div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
				<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center">
					<i class="fas fa-key w-6 h-6 mr-2 text-blue-500"></i>
					Backup Code Verification
				</h1>
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
				Enter one of your backup codes to verify your identity
			</p>

			if data.ErrorMessage != "" {
				<div class="p-4 mb-6 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-red-900/50 dark:text-red-400 border border-red-200 dark:border-red-800" role="alert">
					<div class="flex items-center">
						<i class="fas fa-exclamation-circle flex-shrink-0 mr-2"></i>
						<span>{ data.ErrorMessage }</span>
					</div>
				</div>
			}

			<!-- Verification Card -->
			<div class="max-w-md mx-auto">
				<div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 dark:bg-gray-800">
					<div class="p-4 border-b border-gray-200 dark:border-gray-700">
						<div class="flex items-center space-x-3">
							<div class="h-10 w-10 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center">
								<i class="fas fa-key text-yellow-600 dark:text-yellow-300"></i>
							</div>
							<div>
								<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
									Backup Code Authentication
								</h3>
								<p class="text-sm text-gray-500 dark:text-gray-400">Alternative to authenticator app</p>
							</div>
						</div>
					</div>
					<div class="p-6">
						<form 
							method="POST" 
							action="/login/verify"
							class="space-y-4"
							x-data="{ code: '', loading: false }"
							@submit="loading = true">
							<div>
								<label for="code" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
									Backup Code
								</label>
								<div class="relative">
									<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
										<i class="fas fa-key text-gray-400 dark:text-gray-500"></i>
									</div>
									<input 
										type="text" 
										id="code"
										name="code"
										x-model="code"
										class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
										placeholder="Enter backup code"
										required
										autocomplete="one-time-code"/>
								</div>
								<p class="mt-2 text-sm text-yellow-600 dark:text-yellow-400 flex items-start">
									<i class="fas fa-exclamation-triangle mr-1.5 mt-0.5 flex-shrink-0"></i>
									<span>Remember that each backup code can only be used once!</span>
								</p>
							</div>

							<button 
								type="submit"
								class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
								x-bind:disabled="!code.trim() || loading">
								<span x-show="!loading" class="flex items-center justify-center">
									<i class="fas fa-shield-alt mr-2"></i>
									Verify
								</span>
								<span x-show="loading" class="flex items-center justify-center">
									<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
										<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
										<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
									</svg>
									Verifying...
								</span>
							</button>

							<div class="text-center">
								<a href="/login/verify" class="text-sm font-medium text-blue-600 dark:text-blue-500 hover:underline">
									Use authenticator app instead
								</a>
							</div>
						</form>
					</div>
					<div class="p-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 rounded-b-lg">
						<div class="flex items-start text-sm text-gray-600 dark:text-gray-400">
							<i class="fas fa-info-circle flex-shrink-0 mr-2 mt-0.5 text-blue-500"></i>
							<p>
								Backup codes were provided when you set up two-factor authentication. Each code can only be used once.
							</p>
						</div>
					</div>
				</div>
			</div>

			<!-- Help Notice -->
			<div class="mt-6 max-w-md mx-auto">
				<div class="p-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-blue-900/50 dark:text-blue-400 border border-blue-200 dark:border-blue-800 flex items-start">
					<i class="fas fa-shield-alt flex-shrink-0 mr-3 mt-0.5"></i>
					<div>
						<h4 class="text-sm font-medium mb-1">Security Information</h4>
						<p>Backup codes provide an alternative way to verify your identity when you don't have access to your authenticator app. Each code can only be used once for security reasons.</p>
					</div>
				</div>
			</div>
		</div>
	}
}