<script lang="ts">
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { Clock, Plus, X, Trash2, AlertTriangle } from 'lucide-svelte';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import { toast } from 'svelte-sonner';
	import UserAvatar from '$lib/components/chat/UserAvatar.svelte';

	const client = useConvexClient();

	// Estados
	let funcionariosSelecionados = $state<Id<'funcionarios'>[]>([]);
	let modoCriacao = $state(false);
	let mostrandoModalExcluir = $state(false);
	let dispensaParaExcluir = $state<Id<'dispensasRegistro'> | null>(null);

	// Formulário
	let dataInicio = $state(new Date().toISOString().split('T')[0]!);
	let horaInicioTime = $state('08:00');
	let dataFim = $state(new Date().toISOString().split('T')[0]!);
	let horaFimTime = $state('18:00');
	let motivo = $state('');
	let isento = $state(false);

	// Computed para converter time string para hora/minuto
	const horaInicio = $derived.by(() => {
		const [hora, minuto] = horaInicioTime.split(':').map(Number);
		return { hora: hora || 8, minuto: minuto || 0 };
	});

	const horaFim = $derived.by(() => {
		const [hora, minuto] = horaFimTime.split(':').map(Number);
		return { hora: hora || 18, minuto: minuto || 0 };
	});

	// Queries
	const subordinadosQuery = useQuery(api.times.listarSubordinadosDoGestorAtual, {});
	const dispensasQuery = useQuery(api.pontos.listarDispensas, {
		apenasAtivas: true // Mostrar apenas dispensas ativas
	});

	const subordinados = $derived(subordinadosQuery?.data || []);
	const dispensas = $derived(dispensasQuery?.data || []);

	// Lista de funcionários do time
	const funcionarios = $derived.by(() => {
		const funcs: Array<{
			_id: Id<'funcionarios'>;
			nome: string;
			matricula?: string;
			fotoPerfilUrl?: string | null;
		}> = [];
		for (const time of subordinados) {
			for (const membro of time.membros) {
				if (membro.funcionario && !funcs.find((f) => f._id === membro.funcionario._id)) {
					funcs.push({
						_id: membro.funcionario._id,
						nome: membro.funcionario.nome,
						matricula: membro.funcionario.matricula,
						fotoPerfilUrl: membro.funcionario.fotoPerfilUrl
					});
				}
			}
		}
		return funcs;
	});

	function abrirCriacao() {
		modoCriacao = true;
		funcionariosSelecionados = [];
		dataInicio = new Date().toISOString().split('T')[0]!;
		horaInicioTime = '08:00';
		dataFim = new Date().toISOString().split('T')[0]!;
		horaFimTime = '18:00';
		motivo = '';
		isento = false;
	}

	function cancelar() {
		modoCriacao = false;
		funcionariosSelecionados = [];
	}

	function toggleFuncionario(funcionarioId: Id<'funcionarios'>) {
		if (funcionariosSelecionados.includes(funcionarioId)) {
			funcionariosSelecionados = funcionariosSelecionados.filter((id) => id !== funcionarioId);
		} else {
			funcionariosSelecionados = [...funcionariosSelecionados, funcionarioId];
		}
	}

	async function salvarDispensa() {
		if (funcionariosSelecionados.length === 0) {
			toast.error('Selecione pelo menos um funcionário');
			return;
		}

		if (!motivo.trim()) {
			toast.error('Informe o motivo da dispensa');
			return;
		}

		const dataInicioObj = new Date(dataInicio);
		const dataFimObj = new Date(dataFim);

		if (dataFimObj < dataInicioObj) {
			toast.error('Data fim deve ser maior ou igual à data início');
			return;
		}

		try {
			// Criar dispensa para cada funcionário selecionado
			const promises = funcionariosSelecionados.map((funcionarioId) =>
				client.mutation(api.pontos.criarDispensaRegistro, {
					funcionarioId,
					dataInicio,
					horaInicio: horaInicio.hora,
					minutoInicio: horaInicio.minuto,
					dataFim,
					horaFim: horaFim.hora,
					minutoFim: horaFim.minuto,
					motivo,
					isento
				})
			);

			await Promise.all(promises);

			toast.success(
				`Dispensa criada com sucesso para ${funcionariosSelecionados.length} funcionário(s)`
			);
			cancelar();
		} catch (error) {
			const errorMessage = error instanceof Error ? error.message : String(error);
			toast.error(`Erro ao criar dispensa: ${errorMessage}`);
		}
	}

	function abrirModalExcluir(dispensaId: Id<'dispensasRegistro'>) {
		dispensaParaExcluir = dispensaId;
		mostrandoModalExcluir = true;
	}

	function fecharModalExcluir() {
		mostrandoModalExcluir = false;
		dispensaParaExcluir = null;
	}

	async function confirmarRemoverDispensa() {
		if (!dispensaParaExcluir) return;

		try {
			await client.mutation(api.pontos.removerDispensaRegistro, {
				dispensaId: dispensaParaExcluir
			});

			toast.success('Dispensa removida com sucesso');
			fecharModalExcluir();
		} catch (error) {
			const errorMessage = error instanceof Error ? error.message : String(error);
			toast.error(`Erro ao remover dispensa: ${errorMessage}`);
		}
	}

	function formatarDataHora(data: string, hora: number, minuto: number): string {
		return `${new Date(data).toLocaleDateString('pt-BR')} ${hora.toString().padStart(2, '0')}:${minuto.toString().padStart(2, '0')}`;
	}
</script>

<div class="container mx-auto px-4 py-6">
	<!-- Header -->
	<div class="mb-6 flex items-center justify-between">
		<div class="flex items-center gap-4">
			<div class="bg-primary/10 rounded-xl p-3">
				<Clock class="text-primary h-8 w-8" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-base-content text-3xl font-bold">Dispensa de Registro</h1>
				<p class="text-base-content/60 mt-1">Gerencie períodos de dispensa de registro de ponto</p>
			</div>
		</div>
		{#if !modoCriacao}
			<button class="btn btn-primary gap-2" onclick={abrirCriacao}>
				<Plus class="h-4 w-4" />
				Nova Dispensa
			</button>
		{/if}
	</div>

	<!-- Formulário de Criação -->
	{#if modoCriacao}
		<div class="card bg-base-100 mb-6 shadow-xl">
			<div class="card-body space-y-6">
				<h2 class="card-title border-b pb-3 text-xl">Criar Dispensa de Registro</h2>

				<!-- Seleção de Funcionários -->
				<div class="form-control">
					<label class="label">
						<span class="label-text font-medium">Funcionários</span>
						{#if funcionariosSelecionados.length > 0}
							<span class="label-text-alt text-primary">
								{funcionariosSelecionados.length} selecionado(s)
							</span>
						{/if}
					</label>
					<div class="border-base-300 max-h-60 space-y-2 overflow-y-auto rounded-lg border p-4">
						{#each funcionarios as funcionario}
							<label
								class="hover:bg-base-200 flex cursor-pointer items-center justify-between rounded-lg p-3 transition-colors"
							>
								<div class="flex items-center gap-3">
									<UserAvatar
										fotoPerfilUrl={funcionario.fotoPerfilUrl}
										nome={funcionario.nome}
										size="sm"
									/>
									<span class="label-text font-medium">
										{funcionario.nome}
										{#if funcionario.matricula}
											<span class="text-base-content/60 ml-2">({funcionario.matricula})</span>
										{/if}
									</span>
								</div>
								<input
									type="checkbox"
									class="checkbox checkbox-primary"
									checked={funcionariosSelecionados.includes(funcionario._id)}
									onchange={() => toggleFuncionario(funcionario._id)}
								/>
							</label>
						{/each}
						{#if funcionarios.length === 0}
							<div class="text-base-content/60 py-4 text-center">Nenhum funcionário disponível</div>
						{/if}
					</div>
				</div>

				<!-- Período -->
				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
					<div class="form-control">
						<label class="label">
							<span class="label-text font-medium">Data Início</span>
						</label>
						<input type="date" class="input input-bordered w-full" bind:value={dataInicio} />
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-medium">Hora Início</span>
						</label>
						<input type="time" class="input input-bordered w-full" bind:value={horaInicioTime} />
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-medium">Data Fim</span>
						</label>
						<input type="date" class="input input-bordered w-full" bind:value={dataFim} />
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-medium">Hora Fim</span>
						</label>
						<input type="time" class="input input-bordered w-full" bind:value={horaFimTime} />
					</div>
				</div>

				<!-- Motivo -->
				<div class="form-control">
					<label class="label">
						<span class="label-text font-medium">Motivo</span>
					</label>
					<textarea
						class="textarea textarea-bordered"
						bind:value={motivo}
						rows="3"
						placeholder="Descreva o motivo da dispensa de registro de ponto"
					></textarea>
				</div>

				<!-- Isento -->
				<div class="form-control">
					<label class="label cursor-pointer justify-start gap-3">
						<input type="checkbox" class="checkbox checkbox-primary" bind:checked={isento} />
						<div>
							<span class="label-text font-medium">Isento de Registro</span>
							<p class="text-base-content/70 mt-1 text-sm">
								Caso excepcional - sem expiração. O funcionário ficará permanentemente dispensado de
								registrar ponto.
							</p>
						</div>
					</label>
				</div>

				<!-- Ações -->
				<div class="flex gap-2 border-t pt-4">
					<button class="btn btn-primary flex-1 gap-2" onclick={salvarDispensa}>
						<Plus class="h-4 w-4" />
						Criar Dispensa
					</button>
					<button class="btn btn-ghost gap-2" onclick={cancelar}>
						<X class="h-4 w-4" />
						Cancelar
					</button>
				</div>
			</div>
		</div>
	{/if}

	<!-- Lista de Dispensas -->
	<div class="card bg-base-100 shadow-xl">
		<div class="card-body">
			<h2 class="card-title mb-4">Dispensas Ativas</h2>

			{#if dispensas.length === 0}
				<div class="alert alert-info">
					<span>Nenhuma dispensa ativa encontrada</span>
				</div>
			{:else}
				<div class="overflow-x-auto">
					<table class="table-zebra table">
						<thead>
							<tr>
								<th>Funcionário</th>
								<th>Período</th>
								<th>Motivo</th>
								<th>Status</th>
								<th>Gestor</th>
								<th>Ações</th>
							</tr>
						</thead>
						<tbody>
							{#each dispensas as dispensa}
								<tr>
									<td>
										<div class="flex items-center gap-3">
											<UserAvatar
												fotoPerfilUrl={dispensa.fotoPerfilUrl}
												nome={dispensa.funcionario?.nome || 'Funcionário'}
												size="sm"
											/>
											<div>
												<div class="font-medium">{dispensa.funcionario?.nome || '-'}</div>
												{#if dispensa.funcionario?.matricula}
													<span class="text-base-content/70 text-sm">
														Mat: {dispensa.funcionario.matricula}
													</span>
												{/if}
											</div>
										</div>
									</td>
									<td>
										<div class="text-sm">
											<div>
												<strong>Início:</strong>{' '}
												{formatarDataHora(
													dispensa.dataInicio,
													dispensa.horaInicio,
													dispensa.minutoInicio
												)}
											</div>
											<div>
												<strong>Fim:</strong>{' '}
												{formatarDataHora(dispensa.dataFim, dispensa.horaFim, dispensa.minutoFim)}
											</div>
										</div>
									</td>
									<td>{dispensa.motivo}</td>
									<td>
										{#if dispensa.isento}
											<span class="badge badge-warning">Isento (sem expiração)</span>
										{:else if dispensa.expirada}
											<span class="badge badge-error">Expirada</span>
										{:else}
											<span class="badge badge-success">Ativa</span>
										{/if}
									</td>
									<td>{dispensa.gestor?.nome || '-'}</td>
									<td>
										<button
											class="btn btn-sm btn-error gap-2"
											onclick={() => abrirModalExcluir(dispensa._id)}
										>
											<Trash2 class="h-4 w-4" />
											Remover
										</button>
									</td>
								</tr>
							{/each}
						</tbody>
					</table>
				</div>
			{/if}
		</div>
	</div>

	<!-- Modal de Confirmação de Remoção -->
	{#if mostrandoModalExcluir && dispensaParaExcluir}
		<dialog class="modal modal-open">
			<div class="modal-box">
				<div class="mb-4 flex items-center gap-3">
					<div class="bg-error/10 rounded-lg p-2">
						<AlertTriangle class="text-error h-6 w-6" strokeWidth={2} />
					</div>
					<h3 class="text-lg font-bold">Confirmar Remoção</h3>
				</div>
				<p class="text-base-content mb-6">
					Deseja realmente remover esta dispensa? Esta ação não pode ser desfeita.
				</p>
				<div class="modal-action">
					<button class="btn btn-ghost" onclick={fecharModalExcluir}>Cancelar</button>
					<button class="btn btn-error gap-2" onclick={confirmarRemoverDispensa}>
						<Trash2 class="h-4 w-4" />
						Remover
					</button>
				</div>
			</div>
			<form method="dialog" class="modal-backdrop" onclick={fecharModalExcluir}>
				<button type="button">fechar</button>
			</form>
		</dialog>
	{/if}
</div>
