<script lang="ts">
	import { useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';

	const convex = useConvexClient();

	let matricula = $state('');
	let email = $state('');
	let carregando = $state(false);
	let notice = $state<{ type: 'success' | 'error' | 'info'; message: string } | null>(null);
	let solicitacaoEnviada = $state(false);

	async function handleSubmit(e: Event) {
		e.preventDefault();
		notice = null;

		if (!matricula || !email) {
			notice = {
				type: 'error',
				message: 'Por favor, preencha todos os campos'
			};
			return;
		}

		carregando = true;

		try {
			// Verificar se o usuário existe
			const usuarios = await convex.query(api.usuarios.listar, {
				matricula: matricula
			});

			const usuario = usuarios.find((u) => u.matricula === matricula && u.email === email);

			if (!usuario) {
				notice = {
					type: 'error',
					message: 'Matrícula ou e-mail não encontrados. Verifique os dados e tente novamente.'
				};
				carregando = false;
				return;
			}

			// Simular envio de solicitação
			solicitacaoEnviada = true;
			notice = {
				type: 'success',
				message: 'Solicitação enviada com sucesso! A equipe de TI entrará em contato em breve.'
			};

			// Limpar campos
			matricula = '';
			email = '';
		} catch (error: any) {
			notice = {
				type: 'error',
				message: error.message || 'Erro ao processar solicitação'
			};
		} finally {
			carregando = false;
		}
	}
</script>

<main class="container mx-auto max-w-2xl px-4 py-8">
	<!-- Header -->
	<div class="mb-8">
		<div class="mb-2 flex items-center gap-3">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="text-primary h-10 w-10"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
			<h1 class="text-primary text-4xl font-bold">Esqueci Minha Senha</h1>
		</div>
		<p class="text-base-content/70 text-lg">Solicite a recuperação da sua senha de acesso</p>
	</div>

	<!-- Breadcrumbs -->
	<div class="breadcrumbs mb-6 text-sm">
		<ul>
			<li><a href="/">Dashboard</a></li>
			<li>Esqueci Minha Senha</li>
		</ul>
	</div>

	<!-- Alertas -->
	{#if notice}
		<div
			class="alert {notice.type === 'success'
				? 'alert-success'
				: notice.type === 'error'
					? 'alert-error'
					: 'alert-info'} mb-6 shadow-lg"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="h-6 w-6 shrink-0 stroke-current"
				fill="none"
				viewBox="0 0 24 24"
			>
				{#if notice.type === 'success'}
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				{:else if notice.type === 'error'}
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				{:else}
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				{/if}
			</svg>
			<span>{notice.message}</span>
		</div>
	{/if}

	{#if !solicitacaoEnviada}
		<!-- Formulário -->
		<div class="card bg-base-100 border-base-300 border shadow-xl">
			<div class="card-body">
				<div class="alert alert-info mb-6">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-6 w-6 shrink-0 stroke-current"
						fill="none"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
						/>
					</svg>
					<div>
						<h3 class="font-bold">Como funciona?</h3>
						<p class="text-sm">
							Informe sua matrícula e e-mail cadastrados. A equipe de TI receberá sua solicitação e
							entrará em contato para resetar sua senha.
						</p>
					</div>
				</div>

				<form onsubmit={handleSubmit} class="space-y-6">
					<!-- Matrícula -->
					<div class="form-control">
						<label class="label" for="matricula">
							<span class="label-text font-semibold">Matrícula</span>
							<span class="label-text-alt text-error">*</span>
						</label>
						<input
							id="matricula"
							type="text"
							placeholder="Digite sua matrícula"
							class="input input-bordered input-primary w-full"
							bind:value={matricula}
							required
							disabled={carregando}
						/>
					</div>

					<!-- E-mail -->
					<div class="form-control">
						<label class="label" for="email">
							<span class="label-text font-semibold">E-mail</span>
							<span class="label-text-alt text-error">*</span>
						</label>
						<input
							id="email"
							type="email"
							placeholder="Digite seu e-mail cadastrado"
							class="input input-bordered input-primary w-full"
							bind:value={email}
							required
							disabled={carregando}
						/>
						<label class="label">
							<span class="label-text-alt text-base-content/60">
								Use o e-mail cadastrado no sistema
							</span>
						</label>
					</div>

					<!-- Botões -->
					<div class="mt-8 flex justify-end gap-4">
						<a href="/" class="btn" class:btn-disabled={carregando}>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="h-5 w-5"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M10 19l-7-7m0 0l7-7m-7 7h18"
								/>
							</svg>
							Voltar
						</a>
						<button type="submit" class="btn btn-primary" disabled={carregando}>
							{#if carregando}
								<span class="loading loading-spinner loading-sm"></span>
								Enviando...
							{:else}
								<svg
									xmlns="http://www.w3.org/2000/svg"
									class="h-5 w-5"
									fill="none"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
									/>
								</svg>
								Enviar Solicitação
							{/if}
						</button>
					</div>
				</form>
			</div>
		</div>
	{:else}
		<!-- Mensagem de Sucesso -->
		<div class="card bg-success/10 border-success/30 border shadow-xl">
			<div class="card-body text-center">
				<div class="mb-4 flex justify-center">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="text-success h-24 w-24"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
						/>
					</svg>
				</div>
				<h2 class="text-success mb-4 text-2xl font-bold">Solicitação Enviada!</h2>
				<p class="text-base-content/70 mb-6">
					Sua solicitação de recuperação de senha foi enviada para a equipe de TI. Você receberá um
					contato em breve com as instruções para resetar sua senha.
				</p>
				<div class="flex justify-center gap-4">
					<a href="/" class="btn btn-primary">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="h-5 w-5"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
							/>
						</svg>
						Voltar ao Dashboard
					</a>
					<button type="button" class="btn" onclick={() => (solicitacaoEnviada = false)}>
						Enviar Nova Solicitação
					</button>
				</div>
			</div>
		</div>
	{/if}

	<!-- Card de Contato -->
	<div class="card bg-base-200 mt-6 shadow-lg">
		<div class="card-body">
			<h3 class="card-title text-lg">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="text-info h-6 w-6"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
				Precisa de Ajuda?
			</h3>
			<p class="text-base-content/70 text-sm">
				Se você não conseguir recuperar sua senha ou tiver problemas com o sistema, entre em contato
				diretamente com a equipe de TI:
			</p>
			<div class="mt-4 space-y-2">
				<div class="flex items-center gap-2">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="text-primary h-5 w-5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
						/>
					</svg>
					<span class="text-sm">ti@sgse.pe.gov.br</span>
				</div>
				<div class="flex items-center gap-2">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="text-primary h-5 w-5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
						/>
					</svg>
					<span class="text-sm">(81) 3183-8000</span>
				</div>
			</div>
		</div>
	</div>
</main>
