<script lang="ts">
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import {
		Clock,
		Save,
		AlertTriangle,
		Bell,
		Settings,
		CheckCircle2,
		Plus,
		X,
		Mail,
		MessageSquare,
		User,
		Users
	} from 'lucide-svelte';
	import TimePicker from '$lib/components/ponto/TimePicker.svelte';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';

	const client = useConvexClient();
	const configQuery = useQuery(api.pontos.obterConfiguracaoBancoHoras, {});
	const alertasQuery = useQuery(api.pontos.obterAlertasConfigurados, {});
	const usuariosQuery = useQuery(api.usuarios.listar, { ativo: true });

	// Configurações gerais
	let limiteSaldoPositivoHoras = $state(0);
	let limiteSaldoPositivoMinutos = $state(0);
	let limiteSaldoNegativoHoras = $state(0);
	let limiteSaldoNegativoMinutos = $state(0);
	let considerarAjustesAutomaticos = $state(true);
	let periodicidadeVerificacao = $state<'diario' | 'semanal' | 'mensal'>('diario');

	// Estado dos alertas
	let alertas = $state<Array<{
		_id: string;
		tipoAlerta: string;
		periodicidade: 'diario' | 'semanal' | 'mensal';
		enviarEmail: boolean;
		enviarChat: boolean;
		destinatariosEmail: string[];
		destinatariosChat: string[];
		threshold?: number;
		limiteMinutos?: number;
		ativo: boolean;
	}>>([]);

	// Estado do modal de novo alerta
	let mostrarModalNovoAlerta = $state(false);
	let novoAlerta = $state({
		tipoAlerta: 'saldo_negativo' as
			| 'saldo_negativo'
			| 'saldo_negativo_critico'
			| 'inconsistencia_detectada'
			| 'dias_sem_registro'
			| 'limite_saldo_excedido',
		periodicidade: 'diario' as 'diario' | 'semanal' | 'mensal',
		enviarEmail: true,
		enviarChat: true,
		destinatariosEmail: [] as string[],
		destinatariosChat: [] as string[],
		limiteMinutosHoras: 0,
		limiteMinutosMinutos: 0,
		ativo: true
	});

	// Estado dos modais de seleção de destinatários
	let mostrarSelecaoDestinatariosEmail = $state(false);
	let mostrarSelecaoDestinatariosChat = $state(false);
	let alertaSelecionado = $state<string | null>(null);
	let destinatariosTemporarios = $state<string[]>([]);

	let processando = $state(false);
	let mensagem = $state<{ tipo: 'success' | 'error'; texto: string } | null>(null);

	$effect(() => {
		if (configQuery && 'data' in configQuery && configQuery.data !== undefined) {
			const config = configQuery.data;
			if (config) {
				const limitePositivo = config.limiteSaldoPositivoMinutos || 0;
				limiteSaldoPositivoHoras = Math.floor(limitePositivo / 60);
				limiteSaldoPositivoMinutos = limitePositivo % 60;
				const limiteNegativo = config.limiteSaldoNegativoMinutos || 0;
				limiteSaldoNegativoHoras = Math.floor(limiteNegativo / 60);
				limiteSaldoNegativoMinutos = limiteNegativo % 60;
				considerarAjustesAutomaticos = config.considerarAjustesAutomaticos ?? true;
				periodicidadeVerificacao = config.periodicidadeVerificacao || 'diario';
			}
		}
	});

	$effect(() => {
		if (alertasQuery && 'data' in alertasQuery && alertasQuery.data !== undefined) {
			if (Array.isArray(alertasQuery.data)) {
				alertas = alertasQuery.data.map((a) => ({
					_id: a._id,
					tipoAlerta: a.tipoAlerta,
					periodicidade: a.periodicidade,
					enviarEmail: a.enviarEmail,
					enviarChat: a.enviarChat,
					destinatariosEmail: a.destinatariosEmail || [],
					destinatariosChat: a.destinatariosChat || [],
					threshold: a.threshold,
					limiteMinutos: a.limiteMinutos,
					ativo: a.ativo
				}));
			} else {
				alertas = [];
			}
		} else {
			alertas = [];
		}
	});

	function mostrarMensagem(tipo: 'success' | 'error', texto: string) {
		mensagem = { tipo, texto };
		setTimeout(() => {
			mensagem = null;
		}, 5000);
	}

	async function salvarConfiguracaoGeral() {
		processando = true;
		try {
			const limitePositivoTotal = limiteSaldoPositivoHoras * 60 + limiteSaldoPositivoMinutos;
			const limiteNegativoTotal = limiteSaldoNegativoHoras * 60 + limiteSaldoNegativoMinutos;

			await client.mutation(api.pontos.atualizarConfiguracaoBancoHoras, {
				limiteSaldoPositivoMinutos: limitePositivoTotal > 0 ? limitePositivoTotal : undefined,
				limiteSaldoNegativoMinutos: limiteNegativoTotal > 0 ? limiteNegativoTotal : undefined,
				considerarAjustesAutomaticos,
				periodicidadeVerificacao
			});

			mostrarMensagem('success', 'Configurações gerais salvas com sucesso!');
		} catch (error) {
			console.error('Erro ao salvar configuração:', error);
			mostrarMensagem(
				'error',
				error instanceof Error ? error.message : 'Erro ao salvar configuração'
			);
		} finally {
			processando = false;
		}
	}

	async function atualizarAlerta(alertaId: string) {
		const alerta = alertas.find((a) => a._id === alertaId);
		if (!alerta) return;

		try {
			await client.mutation(api.pontos.atualizarConfiguracaoAlerta, {
				alertaId: alertaId as any,
				periodicidade: alerta.periodicidade,
				enviarEmail: alerta.enviarEmail,
				enviarChat: alerta.enviarChat,
				destinatariosEmail: alerta.destinatariosEmail.length > 0 ? alerta.destinatariosEmail as any : undefined,
				destinatariosChat: alerta.destinatariosChat.length > 0 ? alerta.destinatariosChat as any : undefined,
				threshold: alerta.threshold,
				limiteMinutos: alerta.limiteMinutos,
				ativo: alerta.ativo
			});

			mostrarMensagem('success', 'Alerta atualizado com sucesso!');
		} catch (error) {
			console.error('Erro ao atualizar alerta:', error);
			mostrarMensagem(
				'error',
				error instanceof Error ? error.message : 'Erro ao atualizar alerta'
			);
		}
	}

	async function criarNovoAlerta() {
		processando = true;
		try {
			const limiteMinutosTotal =
				novoAlerta.limiteMinutosHoras * 60 + novoAlerta.limiteMinutosMinutos;

			await client.mutation(api.pontos.criarAlertaBancoHoras, {
				tipoAlerta: novoAlerta.tipoAlerta,
				periodicidade: novoAlerta.periodicidade,
				enviarEmail: novoAlerta.enviarEmail,
				enviarChat: novoAlerta.enviarChat,
				destinatariosEmail: novoAlerta.destinatariosEmail.length > 0 ? novoAlerta.destinatariosEmail as any : undefined,
				destinatariosChat: novoAlerta.destinatariosChat.length > 0 ? novoAlerta.destinatariosChat as any : undefined,
				limiteMinutos: limiteMinutosTotal > 0 ? limiteMinutosTotal : undefined,
				ativo: novoAlerta.ativo
			});

			mostrarMensagem('success', 'Alerta criado com sucesso!');
			mostrarModalNovoAlerta = false;
			// Resetar formulário
			novoAlerta = {
				tipoAlerta: 'saldo_negativo',
				periodicidade: 'diario',
				enviarEmail: true,
				enviarChat: true,
				destinatariosEmail: [],
				destinatariosChat: [],
				limiteMinutosHoras: 0,
				limiteMinutosMinutos: 0,
				ativo: true
			};
		} catch (error) {
			console.error('Erro ao criar alerta:', error);
			mostrarMensagem(
				'error',
				error instanceof Error ? error.message : 'Erro ao criar alerta'
			);
		} finally {
			processando = false;
		}
	}

	function getTipoAlertaLabel(tipo: string): string {
		const labels: Record<string, string> = {
			saldo_negativo: 'Saldo Negativo',
			saldo_negativo_critico: 'Saldo Negativo Crítico',
			inconsistencia_detectada: 'Inconsistência Detectada',
			dias_sem_registro: 'Dias Sem Registro',
			limite_saldo_excedido: 'Limite de Saldo Excedido'
		};
		return labels[tipo] || tipo;
	}

	function getTipoAlertaDescricao(tipo: string): string {
		const descricoes: Record<string, string> = {
			saldo_negativo: 'Alerta quando o saldo de banco de horas fica negativo',
			saldo_negativo_critico: 'Alerta quando o saldo negativo atinge um nível crítico',
			inconsistencia_detectada: 'Alerta quando são detectadas inconsistências nos registros',
			dias_sem_registro: 'Alerta quando há dias sem registro de ponto',
			limite_saldo_excedido: 'Alerta quando os limites de saldo são ultrapassados'
		};
		return descricoes[tipo] || '';
	}

	function getTipoAlertaIcon(tipo: string) {
		switch (tipo) {
			case 'saldo_negativo':
			case 'saldo_negativo_critico':
				return '🔴';
			case 'inconsistencia_detectada':
				return '⚠️';
			case 'dias_sem_registro':
				return '📅';
			case 'limite_saldo_excedido':
				return '🚨';
			default:
				return '🔔';
		}
	}

	const tiposAlertaDisponiveis = [
		{ value: 'saldo_negativo', label: 'Saldo Negativo' },
		{ value: 'saldo_negativo_critico', label: 'Saldo Negativo Crítico' },
		{ value: 'inconsistencia_detectada', label: 'Inconsistência Detectada' },
		{ value: 'dias_sem_registro', label: 'Dias Sem Registro' },
		{ value: 'limite_saldo_excedido', label: 'Limite de Saldo Excedido' }
	];

	const tiposAlertaJaConfigurados = $derived(
		alertas.map((a) => a.tipoAlerta)
	);

	const tiposAlertaDisponiveisParaCriar = $derived(
		tiposAlertaDisponiveis.filter((t) => !tiposAlertaJaConfigurados.includes(t.value))
	);

	function abrirSelecaoDestinatarios(tipo: 'email' | 'chat', alertaId: string) {
		alertaSelecionado = alertaId;
		const alerta = alertas.find((a) => a._id === alertaId);
		if (alerta) {
			destinatariosTemporarios = tipo === 'email' ? [...alerta.destinatariosEmail] : [...alerta.destinatariosChat];
		}
		if (tipo === 'email') {
			mostrarSelecaoDestinatariosEmail = true;
		} else {
			mostrarSelecaoDestinatariosChat = true;
		}
	}

	function salvarDestinatarios(tipo: 'email' | 'chat') {
		if (!alertaSelecionado) return;
		const alerta = alertas.find((a) => a._id === alertaSelecionado);
		if (!alerta) return;

		if (tipo === 'email') {
			alerta.destinatariosEmail = [...destinatariosTemporarios];
		} else {
			alerta.destinatariosChat = [...destinatariosTemporarios];
		}

		atualizarAlerta(alertaSelecionado);
		mostrarSelecaoDestinatariosEmail = false;
		mostrarSelecaoDestinatariosChat = false;
		alertaSelecionado = null;
		destinatariosTemporarios = [];
	}
</script>

<div class="container mx-auto max-w-7xl px-4 py-6">
	<!-- Header -->
	<div class="mb-8 flex items-center justify-between">
		<div class="flex items-center gap-4">
			<div class="bg-gradient-to-br from-primary/20 to-primary/10 rounded-2xl p-4 shadow-lg">
				<Clock class="text-primary h-10 w-10" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-3xl font-bold text-gray-900">Configurações de Banco de Horas</h1>
				<p class="mt-1 text-sm text-gray-600">
					Configure limites, regras e alertas do sistema de banco de horas
				</p>
			</div>
		</div>
	</div>

	<!-- Mensagem de feedback -->
	{#if mensagem}
		<div
			class="mb-6 animate-in fade-in slide-in-from-top-2 rounded-xl border p-4 shadow-sm {mensagem.tipo === 'success'
				? 'border-green-200 bg-green-50 text-green-800'
				: 'border-red-200 bg-red-50 text-red-800'}"
		>
			<div class="flex items-center gap-3">
				{#if mensagem.tipo === 'success'}
					<CheckCircle2 class="h-5 w-5 flex-shrink-0" />
				{:else}
					<AlertTriangle class="h-5 w-5 flex-shrink-0" />
				{/if}
				<span class="font-medium">{mensagem.texto}</span>
			</div>
		</div>
	{/if}

	<!-- Configurações Gerais -->
	<div class="mb-8 rounded-2xl border border-gray-200 bg-white p-8 shadow-lg">
		<div class="mb-6 flex items-center gap-3">
			<div class="rounded-lg bg-primary/10 p-2">
				<Settings class="h-5 w-5 text-primary" />
			</div>
			<h2 class="text-xl font-bold text-gray-900">Configurações Gerais</h2>
		</div>

		<div class="grid gap-8 md:grid-cols-2">
			<!-- Limite Saldo Positivo -->
			<div class="space-y-2">
				<label class="block text-sm font-semibold text-gray-700">
					Limite de Saldo Positivo
				</label>
				<p class="text-xs text-gray-500">
					Máximo de horas extras acumuladas permitidas
				</p>
				<TimePicker
					hours={limiteSaldoPositivoHoras}
					minutes={limiteSaldoPositivoMinutos}
					onChange={(h, m) => {
						limiteSaldoPositivoHoras = h;
						limiteSaldoPositivoMinutos = m;
					}}
					disabled={processando}
				/>
			</div>

			<!-- Limite Saldo Negativo -->
			<div class="space-y-2">
				<label class="block text-sm font-semibold text-gray-700">
					Limite de Saldo Negativo
				</label>
				<p class="text-xs text-gray-500">
					Máximo de débito permitido no banco de horas
				</p>
				<TimePicker
					hours={limiteSaldoNegativoHoras}
					minutes={limiteSaldoNegativoMinutos}
					onChange={(h, m) => {
						limiteSaldoNegativoHoras = h;
						limiteSaldoNegativoMinutos = m;
					}}
					disabled={processando}
				/>
			</div>

			<!-- Considerar Ajustes Automáticos -->
			<div class="flex items-start gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
				<input
					type="checkbox"
					bind:checked={considerarAjustesAutomaticos}
					disabled={processando}
					class="mt-1 h-5 w-5 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
				/>
				<div>
					<label class="block text-sm font-semibold text-gray-700">
						Considerar Ajustes Automáticos
					</label>
					<p class="mt-1 text-xs text-gray-500">
						Incluir automaticamente atestados, licenças e ausências no cálculo
					</p>
				</div>
			</div>

			<!-- Periodicidade de Verificação -->
			<div class="space-y-2">
				<label class="block text-sm font-semibold text-gray-700">
					Periodicidade de Verificação
				</label>
				<p class="text-xs text-gray-500">
					Frequência de verificação automática do sistema
				</p>
				<select
					bind:value={periodicidadeVerificacao}
					disabled={processando}
					class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-sm transition-all focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:bg-gray-50"
				>
					<option value="diario">Diário</option>
					<option value="semanal">Semanal</option>
					<option value="mensal">Mensal</option>
				</select>
			</div>
		</div>

		<div class="mt-8 flex justify-end">
			<button
				onclick={salvarConfiguracaoGeral}
				disabled={processando}
				class="flex items-center gap-2 rounded-xl bg-gradient-to-r from-primary to-primary/90 px-6 py-3 font-semibold text-white shadow-lg transition-all hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50"
			>
				<Save class="h-5 w-5" />
				{processando ? 'Salvando...' : 'Salvar Configurações Gerais'}
			</button>
		</div>
	</div>

	<!-- Configuração de Alertas -->
	<div class="rounded-2xl border border-gray-200 bg-white p-8 shadow-lg">
		<div class="mb-6 flex items-center justify-between">
			<div class="flex items-center gap-3">
				<div class="rounded-lg bg-primary/10 p-2">
					<Bell class="h-5 w-5 text-primary" />
				</div>
				<div>
					<h2 class="text-xl font-bold text-gray-900">Configuração de Alertas</h2>
					<p class="mt-1 text-sm text-gray-600">
						Gerencie alertas e notificações do sistema de banco de horas
					</p>
				</div>
			</div>
			{#if tiposAlertaDisponiveisParaCriar.length > 0}
				<button
					onclick={() => (mostrarModalNovoAlerta = true)}
					class="flex items-center gap-2 rounded-xl bg-primary px-4 py-2.5 font-semibold text-white shadow-md transition-all hover:bg-primary/90 hover:shadow-lg"
				>
					<Plus class="h-5 w-5" />
					Novo Alerta
				</button>
			{/if}
		</div>

		{#if alertas.length === 0}
			<div class="rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 p-12 text-center">
				<Bell class="mx-auto h-12 w-12 text-gray-400" />
				<p class="mt-4 text-lg font-medium text-gray-600">Nenhum alerta configurado</p>
				<p class="mt-2 text-sm text-gray-500">
					Clique em "Novo Alerta" para começar a configurar notificações
				</p>
			</div>
		{:else}
			<div class="grid gap-4 md:grid-cols-2">
				{#each alertas as alerta (alerta._id)}
					<div
						class="group relative rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-all hover:shadow-md {alerta.ativo
							? 'border-primary/30 bg-primary/5'
							: 'bg-gray-50 opacity-75'}"
					>
						<!-- Header do Alerta -->
						<div class="mb-4 flex items-start justify-between">
							<div class="flex items-start gap-3">
								<span class="text-2xl">{getTipoAlertaIcon(alerta.tipoAlerta)}</span>
								<div>
									<h3 class="font-bold text-gray-900">
										{getTipoAlertaLabel(alerta.tipoAlerta)}
									</h3>
									<p class="mt-1 text-xs text-gray-500">
										{getTipoAlertaDescricao(alerta.tipoAlerta)}
									</p>
								</div>
							</div>
							<label
								class="flex cursor-pointer items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-1.5 transition-all hover:bg-gray-50 {alerta.ativo
									? 'border-green-300 bg-green-50'
									: ''}"
							>
								<input
									type="checkbox"
									bind:checked={alerta.ativo}
									onchange={() => atualizarAlerta(alerta._id)}
									class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
								/>
								<span class="text-xs font-medium {alerta.ativo ? 'text-green-700' : 'text-gray-600'}">
									{alerta.ativo ? 'Ativo' : 'Inativo'}
								</span>
							</label>
						</div>

						<!-- Configurações do Alerta -->
						<div class="space-y-4">
							<!-- Periodicidade -->
							<div>
								<label class="mb-2 block text-xs font-semibold text-gray-700">
									Periodicidade
								</label>
								<select
									bind:value={alerta.periodicidade}
									onchange={() => atualizarAlerta(alerta._id)}
									class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
								>
									<option value="diario">Diário</option>
									<option value="semanal">Semanal</option>
									<option value="mensal">Mensal</option>
								</select>
							</div>

							<!-- Canais de Envio -->
							<div>
								<label class="mb-2 block text-xs font-semibold text-gray-700">
									Canais de Notificação
								</label>
								<div class="flex gap-4">
									<label
										class="flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 transition-all {alerta.enviarEmail
											? 'border-primary bg-primary/10 text-primary'
											: 'border-gray-300 bg-white text-gray-600 hover:bg-gray-50'}"
									>
										<Mail class="h-4 w-4" />
										<input
											type="checkbox"
											bind:checked={alerta.enviarEmail}
											onchange={() => atualizarAlerta(alerta._id)}
											class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
										/>
										<span class="text-xs font-medium">Email</span>
									</label>
									<label
										class="flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 transition-all {alerta.enviarChat
											? 'border-primary bg-primary/10 text-primary'
											: 'border-gray-300 bg-white text-gray-600 hover:bg-gray-50'}"
									>
										<MessageSquare class="h-4 w-4" />
										<input
											type="checkbox"
											bind:checked={alerta.enviarChat}
											onchange={() => atualizarAlerta(alerta._id)}
											class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
										/>
										<span class="text-xs font-medium">Chat</span>
									</label>
								</div>
							</div>

							<!-- Destinatários de Email -->
							{#if alerta.enviarEmail}
								<div>
									<label class="mb-2 block text-xs font-semibold text-gray-700">
										<Mail class="mr-1 inline h-3 w-3" />
										Destinatários de Email
									</label>
									<div class="max-h-32 space-y-1 overflow-y-auto rounded-lg border border-gray-200 bg-gray-50 p-2">
										{#if alerta.destinatariosEmail.length > 0}
											{#if usuariosQuery?.data && Array.isArray(usuariosQuery.data)}
												{#each alerta.destinatariosEmail as destinatarioId}
													{@const usuario = usuariosQuery.data.find((u) => u._id === destinatarioId)}
													{#if usuario}
														<div
															class="flex items-center gap-2 rounded border border-gray-200 bg-white px-2 py-1"
														>
															<User class="h-3 w-3 text-gray-400" />
															<span class="text-xs text-gray-700">{usuario.nome}</span>
															<button
																type="button"
																onclick={() => {
																	alerta.destinatariosEmail = alerta.destinatariosEmail.filter(
																		(id) => id !== destinatarioId
																	);
																	atualizarAlerta(alerta._id);
																}}
																class="ml-auto text-red-500 hover:text-red-700"
															>
																<X class="h-3 w-3" />
															</button>
														</div>
													{/if}
												{/each}
											{:else}
												<p class="text-xs text-gray-500">Carregando...</p>
											{/if}
										{:else}
											<p class="text-xs text-gray-500 italic">
												Enviará para o gestor padrão do funcionário
											</p>
										{/if}
									</div>
									<button
										type="button"
										onclick={() => abrirSelecaoDestinatarios('email', alerta._id)}
										class="mt-2 flex items-center gap-1 text-xs text-primary hover:underline"
									>
										<Plus class="h-3 w-3" />
										Adicionar destinatários
									</button>
								</div>
							{/if}

							<!-- Destinatários de Chat -->
							{#if alerta.enviarChat}
								<div>
									<label class="mb-2 block text-xs font-semibold text-gray-700">
										<MessageSquare class="mr-1 inline h-3 w-3" />
										Destinatários de Chat
									</label>
									<div class="max-h-32 space-y-1 overflow-y-auto rounded-lg border border-gray-200 bg-gray-50 p-2">
										{#if alerta.destinatariosChat.length > 0}
											{#if usuariosQuery?.data && Array.isArray(usuariosQuery.data)}
												{#each alerta.destinatariosChat as destinatarioId}
													{@const usuario = usuariosQuery.data.find((u) => u._id === destinatarioId)}
													{#if usuario}
														<div
															class="flex items-center gap-2 rounded border border-gray-200 bg-white px-2 py-1"
														>
															<User class="h-3 w-3 text-gray-400" />
															<span class="text-xs text-gray-700">{usuario.nome}</span>
															<button
																type="button"
																onclick={() => {
																	alerta.destinatariosChat = alerta.destinatariosChat.filter(
																		(id) => id !== destinatarioId
																	);
																	atualizarAlerta(alerta._id);
																}}
																class="ml-auto text-red-500 hover:text-red-700"
															>
																<X class="h-3 w-3" />
															</button>
														</div>
													{/if}
												{/each}
											{:else}
												<p class="text-xs text-gray-500">Carregando...</p>
											{/if}
										{:else}
											<p class="text-xs text-gray-500 italic">
												Enviará para o gestor padrão do funcionário
											</p>
										{/if}
									</div>
									<button
										type="button"
										onclick={() => abrirSelecaoDestinatarios('chat', alerta._id)}
										class="mt-2 flex items-center gap-1 text-xs text-primary hover:underline"
									>
										<Plus class="h-3 w-3" />
										Adicionar destinatários
									</button>
								</div>
							{/if}

							<!-- Limite (se aplicável) -->
							{#if alerta.limiteMinutos !== undefined}
								<div>
									<label class="mb-2 block text-xs font-semibold text-gray-700">
										Limite de Disparo
									</label>
									<div class="flex items-center gap-2 rounded-lg border border-gray-300 bg-gray-50 px-3 py-2">
										<Clock class="h-4 w-4 text-gray-500" />
										<span class="text-sm font-medium text-gray-700">
											{Math.floor((alerta.limiteMinutos || 0) / 60)}h{' '}
											{(alerta.limiteMinutos || 0) % 60}min
										</span>
									</div>
								</div>
							{/if}
						</div>
					</div>
				{/each}
			</div>
		{/if}
	</div>
</div>

<!-- Modal de Novo Alerta -->
{#if mostrarModalNovoAlerta}
	<div
		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm overflow-y-auto"
		onclick={() => (mostrarModalNovoAlerta = false)}
		role="dialog"
		aria-modal="true"
	>
		<div
			class="w-full max-w-2xl my-8 rounded-2xl border border-gray-200 bg-white shadow-2xl flex flex-col max-h-[90vh]"
			onclick={(e) => e.stopPropagation()}
		>
			<!-- Header do Modal -->
			<div class="flex items-center justify-between border-b border-gray-200 px-6 py-4 flex-shrink-0">
				<div class="flex items-center gap-3">
					<div class="rounded-lg bg-primary/10 p-2">
						<Plus class="h-5 w-5 text-primary" />
					</div>
					<h3 class="text-xl font-bold text-gray-900">Criar Novo Alerta</h3>
				</div>
				<button
					onclick={() => (mostrarModalNovoAlerta = false)}
					class="rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
				>
					<X class="h-5 w-5" />
				</button>
			</div>

			<!-- Conteúdo do Modal com Scroll -->
			<div class="flex-1 overflow-y-auto p-6">
				<div class="space-y-6">
					<!-- Tipo de Alerta -->
					<div>
						<label class="mb-2 block text-sm font-semibold text-gray-700">
							Tipo de Alerta
						</label>
						<select
							bind:value={novoAlerta.tipoAlerta}
							class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
						>
							{#each tiposAlertaDisponiveisParaCriar as tipo}
								<option value={tipo.value}>{tipo.label}</option>
							{/each}
						</select>
						<p class="mt-2 text-xs text-gray-500">
							{getTipoAlertaDescricao(novoAlerta.tipoAlerta)}
						</p>
					</div>

					<!-- Periodicidade -->
					<div>
						<label class="mb-2 block text-sm font-semibold text-gray-700">
							Periodicidade
						</label>
						<select
							bind:value={novoAlerta.periodicidade}
							class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
						>
							<option value="diario">Diário</option>
							<option value="semanal">Semanal</option>
							<option value="mensal">Mensal</option>
						</select>
					</div>

					<!-- Limite (se aplicável) -->
					<div>
						<label class="mb-2 block text-sm font-semibold text-gray-700">
							Limite de Disparo (opcional)
						</label>
						<p class="mb-3 text-xs text-gray-500">
							Configure o limite em horas/minutos para disparar este alerta
						</p>
						<TimePicker
							hours={novoAlerta.limiteMinutosHoras}
							minutes={novoAlerta.limiteMinutosMinutos}
							onChange={(h, m) => {
								novoAlerta.limiteMinutosHoras = h;
								novoAlerta.limiteMinutosMinutos = m;
							}}
							disabled={processando}
						/>
					</div>

					<!-- Canais de Envio -->
					<div>
						<label class="mb-3 block text-sm font-semibold text-gray-700">
							Canais de Notificação
						</label>
						<div class="flex gap-4">
							<label
								class="flex flex-1 cursor-pointer items-center gap-3 rounded-xl border px-4 py-3 transition-all {novoAlerta.enviarEmail
									? 'border-primary bg-primary/10 text-primary'
									: 'border-gray-300 bg-white text-gray-600 hover:bg-gray-50'}"
							>
								<Mail class="h-5 w-5" />
								<input
									type="checkbox"
									bind:checked={novoAlerta.enviarEmail}
									class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
								/>
								<span class="font-medium">Email</span>
							</label>
							<label
								class="flex flex-1 cursor-pointer items-center gap-3 rounded-xl border px-4 py-3 transition-all {novoAlerta.enviarChat
									? 'border-primary bg-primary/10 text-primary'
									: 'border-gray-300 bg-white text-gray-600 hover:bg-gray-50'}"
							>
								<MessageSquare class="h-5 w-5" />
								<input
									type="checkbox"
									bind:checked={novoAlerta.enviarChat}
									class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
								/>
								<span class="font-medium">Chat</span>
							</label>
						</div>
					</div>

					<!-- Destinatários de Email -->
					{#if novoAlerta.enviarEmail}
						<div>
							<label class="mb-2 block text-sm font-semibold text-gray-700">
								<Mail class="mr-2 inline h-4 w-4" />
								Destinatários de Email
							</label>
							<p class="mb-2 text-xs text-gray-500">
								Selecione os usuários que receberão este alerta por email. Deixe vazio para enviar ao gestor padrão.
							</p>
							<div class="max-h-48 space-y-2 overflow-y-auto rounded-lg border border-gray-300 bg-white p-3">
								{#if usuariosQuery?.data && Array.isArray(usuariosQuery.data)}
									{#each usuariosQuery.data as usuario (usuario._id)}
										<label
											class="flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 transition-colors hover:bg-gray-50 {novoAlerta.destinatariosEmail.includes(usuario._id)
												? 'border-primary bg-primary/5'
												: 'border-gray-200'}"
										>
											<input
												type="checkbox"
												checked={novoAlerta.destinatariosEmail.includes(usuario._id)}
												onchange={(e) => {
													if (e.currentTarget.checked) {
														novoAlerta.destinatariosEmail = [
															...novoAlerta.destinatariosEmail,
															usuario._id
														];
													} else {
														novoAlerta.destinatariosEmail = novoAlerta.destinatariosEmail.filter(
															(id) => id !== usuario._id
														);
													}
												}}
												class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
											/>
											<User class="h-4 w-4 text-gray-400" />
											<span class="text-sm text-gray-700">{usuario.nome}</span>
											{#if usuario.email}
												<span class="ml-auto text-xs text-gray-500">{usuario.email}</span>
											{/if}
										</label>
									{/each}
								{:else}
									<p class="text-center text-sm text-gray-500">Carregando usuários...</p>
								{/if}
							</div>
							{#if novoAlerta.destinatariosEmail.length > 0}
								<p class="mt-2 text-xs text-primary">
									{novoAlerta.destinatariosEmail.length} destinatário(s) selecionado(s)
								</p>
							{/if}
						</div>
					{/if}

					<!-- Destinatários de Chat -->
					{#if novoAlerta.enviarChat}
						<div>
							<label class="mb-2 block text-sm font-semibold text-gray-700">
								<MessageSquare class="mr-2 inline h-4 w-4" />
								Destinatários de Chat
							</label>
							<p class="mb-2 text-xs text-gray-500">
								Selecione os usuários que receberão este alerta por chat. Deixe vazio para enviar ao gestor padrão.
							</p>
							<div class="max-h-48 space-y-2 overflow-y-auto rounded-lg border border-gray-300 bg-white p-3">
								{#if usuariosQuery?.data && Array.isArray(usuariosQuery.data)}
									{#each usuariosQuery.data as usuario (usuario._id)}
										<label
											class="flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 transition-colors hover:bg-gray-50 {novoAlerta.destinatariosChat.includes(usuario._id)
												? 'border-primary bg-primary/5'
												: 'border-gray-200'}"
										>
											<input
												type="checkbox"
												checked={novoAlerta.destinatariosChat.includes(usuario._id)}
												onchange={(e) => {
													if (e.currentTarget.checked) {
														novoAlerta.destinatariosChat = [
															...novoAlerta.destinatariosChat,
															usuario._id
														];
													} else {
														novoAlerta.destinatariosChat = novoAlerta.destinatariosChat.filter(
															(id) => id !== usuario._id
														);
													}
												}}
												class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
											/>
											<User class="h-4 w-4 text-gray-400" />
											<span class="text-sm text-gray-700">{usuario.nome}</span>
											{#if usuario.email}
												<span class="ml-auto text-xs text-gray-500">{usuario.email}</span>
											{/if}
										</label>
									{/each}
								{:else}
									<p class="text-center text-sm text-gray-500">Carregando usuários...</p>
								{/if}
							</div>
							{#if novoAlerta.destinatariosChat.length > 0}
								<p class="mt-2 text-xs text-primary">
									{novoAlerta.destinatariosChat.length} destinatário(s) selecionado(s)
								</p>
							{/if}
						</div>
					{/if}

					<!-- Status Ativo -->
					<div class="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
						<input
							type="checkbox"
							bind:checked={novoAlerta.ativo}
							class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
						/>
						<div>
							<label class="block text-sm font-semibold text-gray-700">
								Ativar alerta imediatamente
							</label>
							<p class="mt-1 text-xs text-gray-500">
								O alerta começará a funcionar assim que for criado
							</p>
						</div>
					</div>
				</div>
			</div>

			<!-- Footer do Modal -->
			<div class="flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 flex-shrink-0">
				<button
					onclick={() => (mostrarModalNovoAlerta = false)}
					class="rounded-lg border border-gray-300 bg-white px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50"
				>
					Cancelar
				</button>
				<button
					onclick={criarNovoAlerta}
					disabled={processando}
					class="flex items-center gap-2 rounded-lg bg-primary px-6 py-2 font-semibold text-white transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
				>
					{#if processando}
						<span class="loading loading-spinner loading-sm"></span>
					{:else}
						<Plus class="h-4 w-4" />
					{/if}
					Criar Alerta
				</button>
			</div>
		</div>
	</div>
{/if}

<!-- Modal de Seleção de Destinatários de Email -->
{#if mostrarSelecaoDestinatariosEmail}
	<div
		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm overflow-y-auto"
		onclick={() => {
			mostrarSelecaoDestinatariosEmail = false;
			alertaSelecionado = null;
			destinatariosTemporarios = [];
		}}
		role="dialog"
		aria-modal="true"
	>
		<div
			class="w-full max-w-2xl my-8 rounded-2xl border border-gray-200 bg-white shadow-2xl flex flex-col max-h-[90vh]"
			onclick={(e) => e.stopPropagation()}
		>
			<div class="flex items-center justify-between border-b border-gray-200 px-6 py-4 flex-shrink-0">
				<div class="flex items-center gap-3">
					<Mail class="h-5 w-5 text-primary" />
					<h3 class="text-xl font-bold text-gray-900">Selecionar Destinatários de Email</h3>
				</div>
				<button
					onclick={() => {
						mostrarSelecaoDestinatariosEmail = false;
						alertaSelecionado = null;
						destinatariosTemporarios = [];
					}}
					class="rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
				>
					<X class="h-5 w-5" />
				</button>
			</div>

			<div class="flex-1 space-y-2 overflow-y-auto p-6">
				{#if usuariosQuery?.data && Array.isArray(usuariosQuery.data)}
					{#each usuariosQuery.data as usuario (usuario._id)}
						<label
							class="flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition-colors hover:bg-gray-50 {destinatariosTemporarios.includes(usuario._id)
								? 'border-primary bg-primary/5'
								: 'border-gray-200'}"
						>
							<input
								type="checkbox"
								checked={destinatariosTemporarios.includes(usuario._id)}
								onchange={(e) => {
									if (e.currentTarget.checked) {
										destinatariosTemporarios = [...destinatariosTemporarios, usuario._id];
									} else {
										destinatariosTemporarios = destinatariosTemporarios.filter(
											(id) => id !== usuario._id
										);
									}
								}}
								class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
							/>
							<User class="h-4 w-4 text-gray-400" />
							<div class="flex-1">
								<span class="text-sm font-medium text-gray-700">{usuario.nome}</span>
								{#if usuario.email}
									<p class="text-xs text-gray-500">{usuario.email}</p>
								{/if}
							</div>
						</label>
					{/each}
				{:else}
					<p class="text-center text-sm text-gray-500">Carregando usuários...</p>
				{/if}
			</div>

			<div class="flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 flex-shrink-0">
				<button
					onclick={() => {
						mostrarSelecaoDestinatariosEmail = false;
						alertaSelecionado = null;
						destinatariosTemporarios = [];
					}}
					class="rounded-lg border border-gray-300 bg-white px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50"
				>
					Cancelar
				</button>
				<button
					onclick={() => salvarDestinatarios('email')}
					class="rounded-lg bg-primary px-6 py-2 font-semibold text-white transition-colors hover:bg-primary/90"
				>
					Salvar
				</button>
			</div>
		</div>
	</div>
{/if}

<!-- Modal de Seleção de Destinatários de Chat -->
{#if mostrarSelecaoDestinatariosChat}
	<div
		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm overflow-y-auto"
		onclick={() => {
			mostrarSelecaoDestinatariosChat = false;
			alertaSelecionado = null;
			destinatariosTemporarios = [];
		}}
		role="dialog"
		aria-modal="true"
	>
		<div
			class="w-full max-w-2xl my-8 rounded-2xl border border-gray-200 bg-white shadow-2xl flex flex-col max-h-[90vh]"
			onclick={(e) => e.stopPropagation()}
		>
			<div class="flex items-center justify-between border-b border-gray-200 px-6 py-4 flex-shrink-0">
				<div class="flex items-center gap-3">
					<MessageSquare class="h-5 w-5 text-primary" />
					<h3 class="text-xl font-bold text-gray-900">Selecionar Destinatários de Chat</h3>
				</div>
				<button
					onclick={() => {
						mostrarSelecaoDestinatariosChat = false;
						alertaSelecionado = null;
						destinatariosTemporarios = [];
					}}
					class="rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
				>
					<X class="h-5 w-5" />
				</button>
			</div>

			<div class="flex-1 space-y-2 overflow-y-auto p-6">
				{#if usuariosQuery?.data && Array.isArray(usuariosQuery.data)}
					{#each usuariosQuery.data as usuario (usuario._id)}
						<label
							class="flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition-colors hover:bg-gray-50 {destinatariosTemporarios.includes(usuario._id)
								? 'border-primary bg-primary/5'
								: 'border-gray-200'}"
						>
							<input
								type="checkbox"
								checked={destinatariosTemporarios.includes(usuario._id)}
								onchange={(e) => {
									if (e.currentTarget.checked) {
										destinatariosTemporarios = [...destinatariosTemporarios, usuario._id];
									} else {
										destinatariosTemporarios = destinatariosTemporarios.filter(
											(id) => id !== usuario._id
										);
									}
								}}
								class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
							/>
							<User class="h-4 w-4 text-gray-400" />
							<div class="flex-1">
								<span class="text-sm font-medium text-gray-700">{usuario.nome}</span>
								{#if usuario.email}
									<p class="text-xs text-gray-500">{usuario.email}</p>
								{/if}
							</div>
						</label>
					{/each}
				{:else}
					<p class="text-center text-sm text-gray-500">Carregando usuários...</p>
				{/if}
			</div>

			<div class="flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 flex-shrink-0">
				<button
					onclick={() => {
						mostrarSelecaoDestinatariosChat = false;
						alertaSelecionado = null;
						destinatariosTemporarios = [];
					}}
					class="rounded-lg border border-gray-300 bg-white px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50"
				>
					Cancelar
				</button>
				<button
					onclick={() => salvarDestinatarios('chat')}
					class="rounded-lg bg-primary px-6 py-2 font-semibold text-white transition-colors hover:bg-primary/90"
				>
					Salvar
				</button>
			</div>
		</div>
	</div>
{/if}
