<script lang="ts">
	import { auth } from '$lib/stores/auth';
	import { apiService } from '$lib/api';
	import { goto } from '$app/navigation';

	let username = '';
	let password = '';
	let error = '';
	let loading = false;

	async function handleLogin() {
		if (!username || !password) {
			error = 'Veuillez entrer un nom d\'utilisateur et un mot de passe';
			return;
		}

		loading = true;
		error = '';

		try {
			const result = await apiService.login(username, password);
			auth.login(result.token, result.user);
			goto('/scores');
		} catch (err: any) {
			if (err.response?.status === 401) {
				error = 'Nom d\'utilisateur ou mot de passe incorrect';
			} else {
				error = 'Erreur de connexion au serveur';
			}
		} finally {
			loading = false;
		}
	}

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Enter') {
			handleLogin();
		}
	}
</script>

<svelte:head>
	<title>Connexion - OHMJ</title>
</svelte:head>

<div class="min-h-screen flex items-center justify-center relative overflow-hidden">
	<!-- Background image with blur -->
	<div class="absolute inset-0 z-0">
		<img src="/bg-login.jpg" alt="Background" class="w-full h-full object-cover" />
		<div class="absolute inset-0 bg-ohmj-primary/50 backdrop-blur-sm"></div>
	</div>
	
	<div class="w-full max-w-md px-4 z-10">
		<div class="bg-white rounded-lg shadow-2xl p-8">
			<div class="text-center mb-8">
				<img src="/logo.png" alt="OHMJ" class="h-24 mx-auto mb-4" />
				<p class="text-gray-600">
					Harmonie de Montpellier-Jacou
				</p>
				<p class="text-gray-500 text-sm mt-2">
					Connexion à l'espace partitions
				</p>
			</div>

			<form onsubmit={(e) => { e.preventDefault(); handleLogin(); }} class="space-y-6">
				{#if error}
					<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
						{error}
					</div>
				{/if}

				<div>
					<label for="username" class="block text-gray-700 text-sm font-bold mb-2">
						Nom d'utilisateur
					</label>
					<input
						type="text"
						id="username"
						bind:value={username}
						onkeydown={handleKeydown}
						class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-ohmj-primary focus:border-transparent"
						placeholder="musicien"
						autocomplete="username"
					/>
				</div>

				<div>
					<label for="password" class="block text-gray-700 text-sm font-bold mb-2">
						Mot de passe
					</label>
					<input
						type="password"
						id="password"
						bind:value={password}
						onkeydown={handleKeydown}
						class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-ohmj-primary focus:border-transparent"
						placeholder="••••••••"
						autocomplete="current-password"
					/>
				</div>

				<button
					type="submit"
					disabled={loading}
					class="w-full bg-ohmj-primary hover:bg-ohmj-dark text-white font-bold py-3 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
				>
					{#if loading}
						<span class="inline-flex items-center">
							<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" 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>
							Connexion...
						</span>
					{:else}
						Se connecter
					{/if}
				</button>
			</form>

			<p class="text-center text-gray-400 text-xs mt-6">
				Accès réservé aux membres de l'OHMJ
			</p>
		</div>
	</div>
</div>
