<script lang="ts">
	import { onMount } from 'svelte';
	import { goto } from '$app/navigation';
	import beer_icon from '$lib/assets/beer_icon.svg';
	import { browser } from '$app/environment';
	import { logo_id, companyName_id } from '$lib/utils/store';

	let company;

	if (browser) {
		company = localStorage.getItem('company');
	}

	let email = '';
	let loading = false;
	let error = '';

	let currentUser = false;

	onMount(() => {
		if (currentUser) {
			goto('/login');
		}

		switch (company) {
			case '1':
				logo_id.set(
					'https://i.postimg.cc/bNNBcTZj/Whats-App-Image-2025-07-29-at-19-59-16-removebg-preview.png'
				);
				companyName_id.set('Bar do Ferlin');
				break;
			default:
				logo_id.set(
					'https://i.postimg.cc/7LPJk38W/beer-meal-24dp-EAC452-FILL0-wght400-GRAD0-opsz24.png'
				);
				companyName_id.set('Bar Management');
				break;
		}
	});

	async function handleSubmit(event: SubmitEvent) {
		event.preventDefault();

		if (!email) {
			error = 'Por favor, preencha todos os campos';
			return;
		}

		// try {
		//   loading = true;
		//   error = '';
		//   const success = await login(username, password);

		//   if (success) {
		//     goto('/tables');
		//   } else {
		//     error = 'Usuário ou senha inválidos';
		//   }
		// } catch (err) {
		//   console.error(err);
		//   error = 'Falha ao fazer login';
		// } finally {
		//   loading = false;
		// }
	}
</script>

<div class="flex min-h-screen items-center justify-center bg-[#1C1C1E] px-4">
	<div class="w-full max-w-md space-y-8 rounded-lg bg-[#2C2C2E] p-8 shadow-lg">
		<div class="flex flex-col items-center justify-center text-center">
			<img src={$logo_id} alt="Logo" class="h-20 w-20" />
			<h1 class="mt-4 text-3xl font-extrabold text-white">{$companyName_id}</h1>
			<p class="mt-2 text-[#A0A0A0]">Esqueci a minha senha</p>
		</div>

		{#if error}
			<div class="rounded-md bg-[#FF3B30]/20 p-4 text-sm text-[#FF3B30]">
				{error}
			</div>
		{/if}

		<form class="mt-8 space-y-6" on:submit|preventDefault={handleSubmit}>
			<div>
				<label for="username" class="block text-sm font-medium text-[#A0A0A0]">E-mail</label>
				<div class="relative mt-1">
					<!-- Aqui você pode colocar um ícone de usuário, se quiser -->
					<!-- <img src="/user-icon.svg" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[#A0A0A0]" alt="" /> -->

					<input
						id="email"
						type="email"
						bind:value={email}
						placeholder="Digite seu E-mail"
						class="block w-full rounded-md border border-[#A0A0A0]/20 bg-[#1C1C1E] py-3 pl-3 pr-3 text-white focus:border-[#D4AF37] focus:outline-none focus:ring-2 focus:ring-[#D4AF37]"
					/>
				</div>
			</div>

			<div>
				<button
					type="submit"
					class="flex w-full cursor-pointer items-center justify-center rounded-md bg-[#D4AF37] px-4 py-3 text-[#1C1C1E] transition-colors hover:bg-[#D4AF37]/90 focus:outline-none focus:ring-2 focus:ring-[#D4AF37] focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
					disabled={loading}
				>
					{loading ? 'Enviando' : 'Enviar E-mail'}
				</button>
			</div>
		</form>
	</div>
</div>
