<script lang="ts">
	import { enhance } from '$app/forms';

	let { form } = $props();
	let isLoading = $state(false);
</script>

<svelte:head>
	<title>Dummy Data Generator - RefoodOne</title>
</svelte:head>

<div class="container py-4">
	<div class="mb-4">
		<h2 class="fw-bold text-dark mb-1">Dummy Data Generator</h2>
		<p class="text-muted mb-0">Ferramenta para redefinir e carregar dados fictícios de entregas</p>
	</div>

	{#if form?.error}
		<div class="alert alert-danger border-0 shadow-sm rounded-3 mb-4 d-flex align-items-center gap-2" role="alert">
			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-exclamation-triangle-fill text-danger" viewBox="0 0 16 16">
				<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
			</svg>
			<div>
				{form.error}
			</div>
		</div>
	{/if}

	{#if form?.success}
		<div class="alert alert-success border-0 shadow-sm rounded-3 mb-4 d-flex align-items-center gap-2" role="alert">
			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
				<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
			</svg>
			<div>
				Dados gerados com sucesso! Foram limpos todos os registos e inseridas <strong>{form.insertedCount} entregas</strong> ao longo de <strong>{form.totalDays} dias de entrega</strong>.
			</div>
		</div>
	{/if}

	<div class="card border-0 shadow-sm rounded-4 p-4 bg-white mb-4" style="max-width: 700px;">
		<h5 class="fw-bold text-dark mb-3">Como funciona a geração de dados?</h5>
		
		<div class="alert alert-warning border-0 rounded-3 mb-4" role="alert">
			<div class="d-flex gap-2">
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0" viewBox="0 0 16 16">
					<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
				</svg>
				<div>
					<strong>Atenção:</strong> Esta ação irá apagar permanentemente todas as entregas atuais registadas na base de dados antes de carregar o conjunto de teste.
				</div>
			</div>
		</div>

		<ul class="list-group list-group-flush mb-4">
			<li class="list-group-item border-0 px-0 py-2.5 d-flex align-items-start gap-2">
				<span class="badge bg-success-subtle text-success border border-success-subtle rounded-circle p-1">✔</span>
				<div>
					<strong>Limpeza Completa:</strong> Apaga todos os registos da tabela <code>deliveries</code>.
				</div>
			</li>
			<li class="list-group-item border-0 px-0 py-2.5 d-flex align-items-start gap-2">
				<span class="badge bg-success-subtle text-success border border-success-subtle rounded-circle p-1">✔</span>
				<div>
					<strong>Garantia de Turno:</strong> Cria um turno padrão (T1) às Terças e Quintas caso nenhum esteja configurado.
				</div>
			</li>
			<li class="list-group-item border-0 px-0 py-2.5 d-flex align-items-start gap-2">
				<span class="badge bg-success-subtle text-success border border-success-subtle rounded-circle p-1">✔</span>
				<div>
					<strong>Garantia de Beneficiários:</strong> Cria ou ativa os beneficiários <strong>#1, #2 e #3</strong> (configurados como principais/agregado e com data de criação superior a 35 dias).
				</div>
			</li>
			<li class="list-group-item border-0 px-0 py-2.5 d-flex align-items-start gap-2">
				<span class="badge bg-success-subtle text-success border border-success-subtle rounded-circle p-1">✔</span>
				<div>
					<strong>Distribuição de Ausências nos Últimos 30 Dias:</strong>
					<ul class="mt-1 mb-0 ps-3 small text-secondary">
						<li>O beneficiário <strong>#1</strong> faltará exatamente a <strong>1 entrega</strong>.</li>
						<li>O beneficiário <strong>#2</strong> faltará exatamente a <strong>2 entregas</strong>.</li>
						<li>O beneficiário <strong>#3</strong> faltará exatamente a <strong>3 entregas</strong>.</li>
						<li>Os restantes beneficiários ativos receberão em todas as datas (0 faltas).</li>
					</ul>
				</div>
			</li>
		</ul>

		<form
			method="POST"
			action="?/generate"
			use:enhance={() => {
				isLoading = true;
				return async ({ update }) => {
					isLoading = false;
					await update();
				};
			}}
			onsubmit={(e) => {
				if (!confirm('Tem a certeza que deseja APAGAR todas as entregas e gerar os dados de teste?')) {
					e.preventDefault();
				}
			}}
		>
			<div class="d-flex align-items-center gap-3">
				<button
					type="submit"
					class="btn btn-danger rounded-3 px-4 py-2.5 fw-bold"
					disabled={isLoading}
				>
					{#if isLoading}
						<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
						A Gerar Dados...
					{:else}
						Generate Data
					{/if}
				</button>

				{#if form?.success}
					<a href="/admin/ausencias" class="btn btn-outline-success rounded-3 px-4 py-2.5 fw-semibold">
						Ver Relatório de Ausências →
					</a>
				{/if}
			</div>
		</form>
	</div>
</div>
