<script lang="ts">
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
	import StatsCard from '$lib/components/ti/StatsCard.svelte';
	import { format } from 'date-fns';
	import { ptBR } from 'date-fns/locale';
	import { FileText, Clock, CheckCircle2, XCircle } from 'lucide-svelte';

	type StatusSolicitacao = 'pendente' | 'aprovado' | 'rejeitado';

	type SolicitacaoAcesso = {
		_id: Id<'solicitacoesAcesso'>;
		_creationTime: number;
		nome: string;
		matricula: string;
		email: string;
		telefone: string;
		status: StatusSolicitacao;
		dataSolicitacao: number;
		dataResposta: number | null;
		observacoes: string | null;
	};

	type FiltroStatus = 'todos' | 'pendente' | 'aprovado' | 'rejeitado';

	type Mensagem = {
		tipo: 'success' | 'error' | 'info';
		texto: string;
	};

	const client = useConvexClient();

	// Queries
	const solicitacoesQuery = useQuery(api.solicitacoesAcesso.getAll, {});

	// Estados
	let filtroStatus = $state<FiltroStatus>('todos');
	let busca = $state('');
	let solicitacaoSelecionada = $state<SolicitacaoAcesso | null>(null);
	let modalDetalhesAberto = $state(false);
	let modalAprovarAberto = $state(false);
	let modalRejeitarAberto = $state(false);
	let observacoes = $state('');
	let mensagem = $state<Mensagem | null>(null);
	let processando = $state(false);

	// Extrair dados das solicitações
	const solicitacoes = $derived.by(() => {
		if (solicitacoesQuery === undefined || solicitacoesQuery === null) {
			return [];
		}

		if ('data' in solicitacoesQuery && solicitacoesQuery.data !== undefined) {
			return Array.isArray(solicitacoesQuery.data) ? solicitacoesQuery.data : [];
		}

		if (Array.isArray(solicitacoesQuery)) {
			return solicitacoesQuery;
		}

		return [];
	});

	const carregando = $derived.by(() => {
		return solicitacoesQuery === undefined || solicitacoesQuery === null;
	});

	// Estatísticas
	const stats = $derived.by(() => {
		if (carregando) return null;

		const total = solicitacoes.length;
		const pendentes = solicitacoes.filter((s) => s.status === 'pendente').length;
		const aprovadas = solicitacoes.filter((s) => s.status === 'aprovado').length;
		const rejeitadas = solicitacoes.filter((s) => s.status === 'rejeitado').length;

		return {
			total,
			pendentes,
			aprovadas,
			rejeitadas
		};
	});

	// Filtrar e buscar solicitações
	const solicitacoesFiltradas = $derived.by(() => {
		let resultado = solicitacoes;

		// Filtrar por status
		if (filtroStatus !== 'todos') {
			resultado = resultado.filter((s) => s.status === filtroStatus);
		}

		// Buscar por nome, matrícula ou email
		if (busca.trim()) {
			const termo = busca.toLowerCase().trim();
			resultado = resultado.filter(
				(s) =>
					s.nome.toLowerCase().includes(termo) ||
					s.matricula.toLowerCase().includes(termo) ||
					s.email.toLowerCase().includes(termo)
			);
		}

		// Ordenar por data (mais recente primeiro)
		return resultado.sort((a, b) => b.dataSolicitacao - a.dataSolicitacao);
	});

	// Funções auxiliares
	function formatarData(timestamp: number): string {
		return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
	}

	function formatarDataRelativa(timestamp: number): string {
		const agora = Date.now();
		const diff = agora - timestamp;
		const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
		const horas = Math.floor(diff / (1000 * 60 * 60));
		const minutos = Math.floor(diff / (1000 * 60));

		if (dias > 0) return `${dias} dia${dias > 1 ? 's' : ''} atrás`;
		if (horas > 0) return `${horas} hora${horas > 1 ? 's' : ''} atrás`;
		if (minutos > 0) return `${minutos} minuto${minutos > 1 ? 's' : ''} atrás`;
		return 'Agora';
	}

	function getStatusBadge(status: StatusSolicitacao): string {
		switch (status) {
			case 'pendente':
				return 'badge-warning';
			case 'aprovado':
				return 'badge-success';
			case 'rejeitado':
				return 'badge-error';
			default:
				return 'badge-neutral';
		}
	}

	function getStatusTexto(status: StatusSolicitacao): string {
		switch (status) {
			case 'pendente':
				return 'Pendente';
			case 'aprovado':
				return 'Aprovado';
			case 'rejeitado':
				return 'Rejeitado';
			default:
				return status;
		}
	}

	// Funções de modal
	function abrirDetalhes(solicitacao: SolicitacaoAcesso) {
		solicitacaoSelecionada = solicitacao;
		modalDetalhesAberto = true;
	}

	function fecharDetalhes() {
		modalDetalhesAberto = false;
		solicitacaoSelecionada = null;
	}

	function abrirAprovar(solicitacao: SolicitacaoAcesso) {
		solicitacaoSelecionada = solicitacao;
		observacoes = '';
		modalAprovarAberto = true;
	}

	function fecharAprovar() {
		modalAprovarAberto = false;
		solicitacaoSelecionada = null;
		observacoes = '';
	}

	function abrirRejeitar(solicitacao: SolicitacaoAcesso) {
		solicitacaoSelecionada = solicitacao;
		observacoes = '';
		modalRejeitarAberto = true;
	}

	function fecharRejeitar() {
		modalRejeitarAberto = false;
		solicitacaoSelecionada = null;
		observacoes = '';
	}

	// Funções de ação
	async function aprovarSolicitacao() {
		if (!solicitacaoSelecionada) return;

		processando = true;
		mensagem = null;

		try {
			await client.mutation(api.solicitacoesAcesso.aprovar, {
				solicitacaoId: solicitacaoSelecionada._id,
				observacoes: observacoes.trim() || undefined
			});

			mensagem = {
				tipo: 'success',
				texto: 'Solicitação aprovada com sucesso!'
			};

			fecharAprovar();

			// Limpar mensagem após 3 segundos
			setTimeout(() => {
				mensagem = null;
			}, 3000);
		} catch (error) {
			const errorMessage = error instanceof Error ? error.message : 'Erro ao aprovar solicitação';
			mensagem = {
				tipo: 'error',
				texto: errorMessage
			};
		} finally {
			processando = false;
		}
	}

	async function rejeitarSolicitacao() {
		if (!solicitacaoSelecionada) return;

		processando = true;
		mensagem = null;

		try {
			await client.mutation(api.solicitacoesAcesso.rejeitar, {
				solicitacaoId: solicitacaoSelecionada._id,
				observacoes: observacoes.trim() || undefined
			});

			mensagem = {
				tipo: 'success',
				texto: 'Solicitação rejeitada com sucesso!'
			};

			fecharRejeitar();

			// Limpar mensagem após 3 segundos
			setTimeout(() => {
				mensagem = null;
			}, 3000);
		} catch (error) {
			const errorMessage = error instanceof Error ? error.message : 'Erro ao rejeitar solicitação';
			mensagem = {
				tipo: 'error',
				texto: errorMessage
			};
		} finally {
			processando = false;
		}
	}
</script>

<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
	<div class="container mx-auto max-w-7xl px-4 py-6">
		<!-- Mensagem de Feedback -->
		{#if mensagem}
			<div class="alert alert-{mensagem.tipo} mb-6 shadow-lg">
				{#if mensagem.tipo === 'success'}
					<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
						/>
					</svg>
				{:else if mensagem.tipo === 'error'}
					<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>
				{/if}
				<span>{mensagem.texto}</span>
			</div>
		{/if}

		<!-- Header -->
		<div class="mb-8 flex items-center justify-between">
			<div class="flex items-center gap-4">
				<div class="bg-primary/10 rounded-xl p-3">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="text-primary h-8 w-8"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
						/>
					</svg>
				</div>
				<div>
					<h1 class="text-base-content text-3xl font-bold">Solicitações de Acesso</h1>
					<p class="text-base-content/60 mt-1">
						Gerencie e analise solicitações de acesso ao sistema
					</p>
				</div>
			</div>
		</div>

		<!-- Estatísticas -->
		{#if stats}
			<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
				<StatsCard
					title="Total de Solicitações"
					value={stats.total}
					Icon={FileText}
					color="primary"
				/>

				<StatsCard
					title="Pendentes"
					value={stats.pendentes}
					description={stats.total > 0
						? ((stats.pendentes / stats.total) * 100).toFixed(1) + '% do total'
						: '0% do total'}
					Icon={Clock}
					color="warning"
				/>

				<StatsCard
					title="Aprovadas"
					value={stats.aprovadas}
					description={stats.total > 0
						? ((stats.aprovadas / stats.total) * 100).toFixed(1) + '% do total'
						: '0% do total'}
					Icon={CheckCircle2}
					color="success"
				/>

				<StatsCard
					title="Rejeitadas"
					value={stats.rejeitadas}
					description={stats.total > 0
						? ((stats.rejeitadas / stats.total) * 100).toFixed(1) + '% do total'
						: '0% do total'}
					Icon={XCircle}
					color="error"
				/>
			</div>
		{:else}
			<div class="flex items-center justify-center py-20">
				<span class="loading loading-spinner loading-lg text-primary"></span>
			</div>
		{/if}

		<!-- Filtros e Busca -->
		<div class="card bg-base-100 mb-6 shadow-xl">
			<div class="card-body">
				<!-- Tabs de Status -->
				<div class="tabs tabs-boxed bg-base-200 mb-4 p-2">
					<button
						class="tab {filtroStatus === 'todos' ? 'tab-active' : ''}"
						onclick={() => (filtroStatus = 'todos')}
					>
						Todas
					</button>
					<button
						class="tab {filtroStatus === 'pendente' ? 'tab-active' : ''}"
						onclick={() => (filtroStatus = 'pendente')}
					>
						Pendentes
					</button>
					<button
						class="tab {filtroStatus === 'aprovado' ? 'tab-active' : ''}"
						onclick={() => (filtroStatus = 'aprovado')}
					>
						Aprovadas
					</button>
					<button
						class="tab {filtroStatus === 'rejeitado' ? 'tab-active' : ''}"
						onclick={() => (filtroStatus = 'rejeitado')}
					>
						Rejeitadas
					</button>
				</div>

				<!-- Campo de Busca -->
				<div class="form-control">
					<label class="label">
						<span class="label-text font-semibold">Buscar por nome, matrícula ou e-mail</span>
					</label>
					<div class="relative">
						<input
							type="text"
							placeholder="Digite para buscar..."
							class="input input-bordered w-full pl-10"
							bind:value={busca}
						/>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="text-base-content/50 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
							/>
						</svg>
					</div>
				</div>
			</div>
		</div>

		<!-- Lista de Solicitações -->
		{#if carregando}
			<div class="flex items-center justify-center py-20">
				<span class="loading loading-spinner loading-lg text-primary"></span>
			</div>
		{:else if solicitacoesFiltradas.length === 0}
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body py-20 text-center">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="text-base-content/30 mx-auto mb-4 h-16 w-16"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
						/>
					</svg>
					<h3 class="text-base-content/70 mb-2 text-xl font-semibold">
						Nenhuma solicitação encontrada
					</h3>
					<p class="text-base-content/50">
						{#if busca.trim() || filtroStatus !== 'todos'}
							Tente ajustar os filtros ou a busca.
						{:else}
							Ainda não há solicitações de acesso cadastradas.
						{/if}
					</p>
				</div>
			</div>
		{:else}
			<div class="grid grid-cols-1 gap-4">
				{#each solicitacoesFiltradas as solicitacao}
					<div class="card bg-base-100 shadow-xl transition-shadow hover:shadow-2xl">
						<div class="card-body">
							<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
								<div class="flex-1">
									<div class="mb-2 flex items-center gap-3">
										<h3 class="text-base-content text-xl font-bold">{solicitacao.nome}</h3>
										<span class="badge {getStatusBadge(solicitacao.status)} badge-lg">
											{getStatusTexto(solicitacao.status)}
										</span>
									</div>

									<div class="text-base-content/70 grid grid-cols-1 gap-2 text-sm md:grid-cols-3">
										<div class="flex items-center gap-2">
											<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="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
												/>
											</svg>
											<span class="font-semibold">Matrícula:</span>
											<span>{solicitacao.matricula}</span>
										</div>

										<div class="flex items-center gap-2">
											<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="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="font-semibold">E-mail:</span>
											<span>{solicitacao.email}</span>
										</div>

										<div class="flex items-center gap-2">
											<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="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="font-semibold">Telefone:</span>
											<span>{solicitacao.telefone}</span>
										</div>
									</div>

									<div class="text-base-content/50 mt-3 text-xs">
										<span class="font-semibold">Solicitado em:</span>
										{formatarData(solicitacao.dataSolicitacao)} ({formatarDataRelativa(
											solicitacao.dataSolicitacao
										)})
										{#if solicitacao.dataResposta}
											<span class="ml-4 font-semibold">Processado em:</span>
											{formatarData(solicitacao.dataResposta)}
										{/if}
									</div>
								</div>

								<div class="flex flex-col gap-2">
									<button
										class="btn btn-sm btn-outline btn-primary"
										onclick={() => abrirDetalhes(solicitacao)}
									>
										<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
											/>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
											/>
										</svg>
										Ver Detalhes
									</button>

									{#if solicitacao.status === 'pendente'}
										<button
											class="btn btn-sm btn-success"
											onclick={() => abrirAprovar(solicitacao)}
										>
											<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="M5 13l4 4L19 7"
												/>
											</svg>
											Aprovar
										</button>

										<button class="btn btn-sm btn-error" onclick={() => abrirRejeitar(solicitacao)}>
											<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="M6 18L18 6M6 6l12 12"
												/>
											</svg>
											Rejeitar
										</button>
									{/if}
								</div>
							</div>
						</div>
					</div>
				{/each}
			</div>
		{/if}

		<!-- Modal de Detalhes -->
		{#if modalDetalhesAberto && solicitacaoSelecionada}
			<dialog class="modal modal-open">
				<div class="modal-box max-w-2xl">
					<h3 class="mb-4 text-2xl font-bold">Detalhes da Solicitação</h3>

					<div class="space-y-4">
						<div class="mb-4 flex items-center gap-3">
							<span class="badge {getStatusBadge(solicitacaoSelecionada.status)} badge-lg">
								{getStatusTexto(solicitacaoSelecionada.status)}
							</span>
						</div>

						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
							<div>
								<label class="label">
									<span class="label-text font-semibold">Nome Completo</span>
								</label>
								<div class="input input-bordered">{solicitacaoSelecionada.nome}</div>
							</div>

							<div>
								<label class="label">
									<span class="label-text font-semibold">Matrícula</span>
								</label>
								<div class="input input-bordered">{solicitacaoSelecionada.matricula}</div>
							</div>

							<div>
								<label class="label">
									<span class="label-text font-semibold">E-mail</span>
								</label>
								<div class="input input-bordered">{solicitacaoSelecionada.email}</div>
							</div>

							<div>
								<label class="label">
									<span class="label-text font-semibold">Telefone</span>
								</label>
								<div class="input input-bordered">{solicitacaoSelecionada.telefone}</div>
							</div>

							<div>
								<label class="label">
									<span class="label-text font-semibold">Data da Solicitação</span>
								</label>
								<div class="input input-bordered">
									{formatarData(solicitacaoSelecionada.dataSolicitacao)}
								</div>
							</div>

							{#if solicitacaoSelecionada.dataResposta}
								<div>
									<label class="label">
										<span class="label-text font-semibold">Data de Processamento</span>
									</label>
									<div class="input input-bordered">
										{formatarData(solicitacaoSelecionada.dataResposta)}
									</div>
								</div>
							{/if}
						</div>

						{#if solicitacaoSelecionada.observacoes}
							<div>
								<label class="label">
									<span class="label-text font-semibold">Observações</span>
								</label>
								<div class="textarea textarea-bordered min-h-24">
									{solicitacaoSelecionada.observacoes}
								</div>
							</div>
						{/if}
					</div>

					<div class="modal-action">
						<button class="btn" onclick={fecharDetalhes}>Fechar</button>
					</div>
				</div>
				<form method="dialog" class="modal-backdrop">
					<button onclick={fecharDetalhes}>fechar</button>
				</form>
			</dialog>
		{/if}

		<!-- Modal de Aprovar -->
		{#if modalAprovarAberto && solicitacaoSelecionada}
			<dialog class="modal modal-open">
				<div class="modal-box">
					<h3 class="mb-4 text-2xl font-bold">Aprovar Solicitação</h3>

					<div class="mb-4">
						<p class="text-base-content/70 mb-2">
							Você está prestes a aprovar a solicitação de acesso de <strong
								>{solicitacaoSelecionada.nome}</strong
							>.
						</p>
						<p class="text-base-content/60 text-sm">
							Após aprovar, o sistema permitirá que esta pessoa solicite acesso ao sistema.
						</p>
					</div>

					<div class="form-control mb-4">
						<label class="label">
							<span class="label-text font-semibold">Observações (opcional)</span>
						</label>
						<textarea
							class="textarea textarea-bordered"
							placeholder="Adicione observações sobre a aprovação..."
							bind:value={observacoes}
							rows="3"
						></textarea>
					</div>

					<div class="modal-action">
						<button class="btn" onclick={fecharAprovar} disabled={processando}> Cancelar </button>
						<button class="btn btn-success" onclick={aprovarSolicitacao} disabled={processando}>
							{#if processando}
								<span class="loading loading-spinner loading-sm"></span>
								Processando...
							{: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>
								Confirmar Aprovação
							{/if}
						</button>
					</div>
				</div>
				<form method="dialog" class="modal-backdrop">
					<button onclick={fecharAprovar}>fechar</button>
				</form>
			</dialog>
		{/if}

		<!-- Modal de Rejeitar -->
		{#if modalRejeitarAberto && solicitacaoSelecionada}
			<dialog class="modal modal-open">
				<div class="modal-box">
					<h3 class="mb-4 text-2xl font-bold">Rejeitar Solicitação</h3>

					<div class="mb-4">
						<p class="text-base-content/70 mb-2">
							Você está prestes a rejeitar a solicitação de acesso de <strong
								>{solicitacaoSelecionada.nome}</strong
							>.
						</p>
						<p class="text-base-content/60 text-sm">
							Esta ação não pode ser desfeita. Recomendamos adicionar um motivo para a rejeição.
						</p>
					</div>

					<div class="form-control mb-4">
						<label class="label">
							<span class="label-text font-semibold">Motivo da Rejeição (recomendado)</span>
						</label>
						<textarea
							class="textarea textarea-bordered"
							placeholder="Descreva o motivo da rejeição..."
							bind:value={observacoes}
							rows="3"
						></textarea>
					</div>

					<div class="modal-action">
						<button class="btn" onclick={fecharRejeitar} disabled={processando}> Cancelar </button>
						<button class="btn btn-error" onclick={rejeitarSolicitacao} disabled={processando}>
							{#if processando}
								<span class="loading loading-spinner loading-sm"></span>
								Processando...
							{: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="M6 18L18 6M6 6l12 12"
									/>
								</svg>
								Confirmar Rejeição
							{/if}
						</button>
					</div>
				</div>
				<form method="dialog" class="modal-backdrop">
					<button onclick={fecharRejeitar}>fechar</button>
				</form>
			</dialog>
		{/if}
	</div>
</ProtectedRoute>
