<script lang="ts">
	import { addToast } from '$lib/stores/toast';
	import { json } from '@sveltejs/kit';

	let isConnecting = $state(false);

	function onSubmit(event: Event) {
		event.preventDefault();

		isConnecting = true;
		const fd = new FormData(event.target as HTMLFormElement);
		const { login, password } = Object.fromEntries(fd.entries());

		fetch('/api/user/login', {
			body: JSON.stringify({
				login,
				password
			}),
			headers: {
				Accept: '*/*',
				'Content-Type': 'application/json'
			},
			method: 'POST'
		})
			.then(async (res) => {
				const jsonData = await res.json();

				if (!res.ok) {
					isConnecting = false;
					addToast({ message: jsonData.message });
					return;
				}

				const { token } = jsonData;
				localStorage.setItem('token', token);
				window.location.href = '/dashboard';
			})
			.catch((err) => {
				isConnecting = false;
				console.error('Error during login:', err);
				addToast({
					message: "Une erreur est survenue lors de la connexion. (Plus d'infos dans la console)"
				});
			});
	}

	function createDebugUsers() {
		fetch('/api/dbdebuguser')
			.then((res) => {
				if (res.ok) {
					res.json().then((data) => {
						if (data.created) {
							addToast({
								message: 'Utilisateurs de debug créés avec succès.',
								color: 'green',
								title: 'Succès'
							});
							return data;
						} else {
							addToast({
								message: 'Utilisateurs de debug déjà créés.',
								color: 'green',
								title: 'Succès'
							});
						}
					});
				} else {
					addToast({ message: 'Il semblerait que les utilisateurs de debug soient déjà crées.' });
				}
			})
			.catch((err) => {
				console.error('Erreur lors de la création des utilisateurs de debug:', err);
				addToast({
					message:
						"Erreur lors de la création des utilisateurs de debug. (Plus d'infos dans la console)"
				});
			});
	}
</script>

<div class="bg">
	<div class="card">
		<h1>Connectez-vous</h1>
		<form onsubmit={onSubmit}>
			<label for="login">Nom d'utilisateur</label>
			<input type="text" id="login" name="login" placeholder="lirili.larila" required />
			<label for="password">Mot de passe</label>
			<input type="password" id="password" name="password" placeholder="Mot de passe" required />
			<button class="btn" type="submit" disabled={isConnecting}>Connexion</button>
		</form>
	</div>
</div>
<button id="fab" class="btn" onclick={createDebugUsers}
	><img src="/icons/debug.svg" width="100%" alt="+" /></button
>

<style>
	.card {
		width: auto;
	}

	.bg {
		background-image: url('/img/header-bg.jpg');
		height: 100vh;
		background-size: cover;
		background-position: center;
		position: relative;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	h1 {
		color: var(--text-lime);
		font-size: 36px;
		text-align: center;
		margin: 0;
		font-weight: 600;
	}

	form {
		display: flex;
		flex-direction: column;
		color: white;
		gap: 8px;
		min-width: 360px;
	}

	#fab {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 1000;
		border-radius: 50%;
		width: 56px;
		height: 56px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bolder;
		font-size: 32px;
	}

	#fab img {
		transform: scale(2);
	}
</style>
