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

	interface Periodo {
		id: string;
		dataInicio: string;
		dataFim: string;
		diasCorridos: number;
	}

	interface Props {
		funcionarioId: string;
		onSucesso?: () => void;
		onCancelar?: () => void;
	}

	const { funcionarioId, onSucesso, onCancelar }: Props = $props();

	const client = useConvexClient();

	let anoReferencia = $state(new Date().getFullYear());
	let observacao = $state('');
	let periodos = $state<Periodo[]>([]);
	let processando = $state(false);
	let erro = $state('');

	// Adicionar primeiro período ao carregar
	$effect(() => {
		if (periodos.length === 0) {
			adicionarPeriodo();
		}
	});

	function adicionarPeriodo() {
		if (periodos.length >= 3) {
			erro = 'Máximo de 3 períodos permitidos';
			return;
		}

		periodos.push({
			id: crypto.randomUUID(),
			dataInicio: '',
			dataFim: '',
			diasCorridos: 0
		});
	}

	function removerPeriodo(id: string) {
		periodos = periodos.filter((p) => p.id !== id);
	}

	function calcularDias(periodo: Periodo) {
		if (!periodo.dataInicio || !periodo.dataFim) {
			periodo.diasCorridos = 0;
			return;
		}

		const inicio = new Date(periodo.dataInicio);
		const fim = new Date(periodo.dataFim);

		if (fim < inicio) {
			erro = 'Data final não pode ser anterior à data inicial';
			periodo.diasCorridos = 0;
			return;
		}

		const diff = fim.getTime() - inicio.getTime();
		const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
		periodo.diasCorridos = dias;
		erro = '';
	}

	function validarPeriodos(): boolean {
		if (periodos.length === 0) {
			erro = 'Adicione pelo menos 1 período';
			return false;
		}

		for (const periodo of periodos) {
			if (!periodo.dataInicio || !periodo.dataFim) {
				erro = 'Preencha as datas de todos os períodos';
				return false;
			}

			if (periodo.diasCorridos <= 0) {
				erro = 'Todos os períodos devem ter pelo menos 1 dia';
				return false;
			}
		}

		// Verificar sobreposição de períodos
		for (let i = 0; i < periodos.length; i++) {
			for (let j = i + 1; j < periodos.length; j++) {
				const p1Inicio = new Date(periodos[i].dataInicio);
				const p1Fim = new Date(periodos[i].dataFim);
				const p2Inicio = new Date(periodos[j].dataInicio);
				const p2Fim = new Date(periodos[j].dataFim);

				if (
					(p2Inicio >= p1Inicio && p2Inicio <= p1Fim) ||
					(p2Fim >= p1Inicio && p2Fim <= p1Fim) ||
					(p1Inicio >= p2Inicio && p1Inicio <= p2Fim)
				) {
					erro = 'Os períodos não podem se sobrepor';
					return false;
				}
			}
		}

		return true;
	}

	async function enviarSolicitacao() {
		if (!validarPeriodos()) return;

		try {
			processando = true;
			erro = '';

			await client.mutation(api.ferias.criarSolicitacao, {
				funcionarioId: funcionarioId as any,
				anoReferencia,
				periodos: periodos.map((p) => ({
					dataInicio: p.dataInicio,
					dataFim: p.dataFim,
					diasCorridos: p.diasCorridos
				})),
				observacao: observacao || undefined
			});

			if (onSucesso) onSucesso();
		} catch (e: any) {
			erro = e.message || 'Erro ao enviar solicitação';
		} finally {
			processando = false;
		}
	}

	$effect(() => {
		periodos.forEach((p) => calcularDias(p));
	});
</script>

<div class="card bg-base-100 shadow-xl">
	<div class="card-body">
		<h2 class="card-title mb-4 text-2xl">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="h-6 w-6"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
				/>
			</svg>
			Solicitar Férias
		</h2>

		<!-- Ano de Referência -->
		<div class="form-control">
			<label class="label" for="ano-referencia">
				<span class="label-text font-semibold">Ano de Referência</span>
			</label>
			<input
				id="ano-referencia"
				type="number"
				class="input input-bordered w-full max-w-xs"
				bind:value={anoReferencia}
				min={new Date().getFullYear()}
				max={new Date().getFullYear() + 2}
			/>
		</div>

		<!-- Períodos -->
		<div class="mt-6">
			<div class="mb-3 flex items-center justify-between">
				<h3 class="text-lg font-semibold">Períodos ({periodos.length}/3)</h3>
				{#if periodos.length < 3}
					<button type="button" class="btn btn-sm btn-primary gap-2" onclick={adicionarPeriodo}>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="h-4 w-4"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M12 4v16m8-8H4"
							/>
						</svg>
						Adicionar Período
					</button>
				{/if}
			</div>

			<div class="space-y-4">
				{#each periodos as periodo, index}
					<div class="card bg-base-200 border-base-300 border">
						<div class="card-body p-4">
							<div class="mb-3 flex items-center justify-between">
								<h4 class="font-medium">Período {index + 1}</h4>
								{#if periodos.length > 1}
									<button
										type="button"
										class="btn btn-xs btn-error"
										aria-label="Remover período"
										onclick={() => removerPeriodo(periodo.id)}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											class="h-3 w-3"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M6 18L18 6M6 6l12 12"
											/>
										</svg>
									</button>
								{/if}
							</div>

							<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
								<div class="form-control">
									<label class="label" for={`inicio-${periodo.id}`}>
										<span class="label-text">Data Início</span>
									</label>
									<input
										id={`inicio-${periodo.id}`}
										type="date"
										class="input input-bordered input-sm"
										bind:value={periodo.dataInicio}
										onchange={() => calcularDias(periodo)}
									/>
								</div>

								<div class="form-control">
									<label class="label" for={`fim-${periodo.id}`}>
										<span class="label-text">Data Fim</span>
									</label>
									<input
										id={`fim-${periodo.id}`}
										type="date"
										class="input input-bordered input-sm"
										bind:value={periodo.dataFim}
										onchange={() => calcularDias(periodo)}
									/>
								</div>

								<div class="form-control">
									<label class="label" for={`dias-${periodo.id}`}>
										<span class="label-text">Dias Corridos</span>
									</label>
									<div
										id={`dias-${periodo.id}`}
										class="bg-base-300 flex h-9 items-center rounded-lg px-3"
										role="textbox"
										aria-readonly="true"
									>
										<span class="text-lg font-bold">{periodo.diasCorridos}</span>
										<span class="ml-1 text-sm">dias</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				{/each}
			</div>
		</div>

		<!-- Observações -->
		<div class="form-control mt-6">
			<label class="label" for="observacao">
				<span class="label-text font-semibold">Observações (opcional)</span>
			</label>
			<textarea
				id="observacao"
				class="textarea textarea-bordered h-24"
				placeholder="Adicione observações sobre sua solicitação..."
				bind:value={observacao}
			></textarea>
		</div>

		<!-- Erro -->
		{#if erro}
			<div class="alert alert-error mt-4">
				<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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
				<span>{erro}</span>
			</div>
		{/if}

		<!-- Ações -->
		<div class="card-actions mt-6 justify-end">
			{#if onCancelar}
				<button type="button" class="btn" onclick={onCancelar} disabled={processando}>
					Cancelar
				</button>
			{/if}
			<button
				type="button"
				class="btn btn-primary gap-2"
				onclick={enviarSolicitacao}
				disabled={processando}
			>
				{#if processando}
					<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="M5 13l4 4L19 7"
						/>
					</svg>
					Enviar Solicitação
				{/if}
			</button>
		</div>
	</div>
</div>
