<script lang="ts">
	import { resolve } from '$app/paths';
	import { page } from '$app/state';
	import { Shield, CheckCircle, AlertCircle, FileText } from 'lucide-svelte';
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';

	let aceito = $state(false);
	let carregando = $state(false);
	let erro = $state<string | null>(null);
	let sucesso = $state(false);

	// Verificar se já aceitou o termo
	const client = useConvexClient();
	const consentimentoQuery = useQuery(api.lgpd.verificarConsentimento, { tipo: 'termo_uso' });

	const jaAceitou = $derived(
		consentimentoQuery?.data?.aceito === true &&
			consentimentoQuery?.data?.versao === consentimentoQuery?.data?.versaoTermoAtual
	);

	const termoObrigatorio = $derived(consentimentoQuery?.data?.termoObrigatorio ?? false);
	const versaoTermoAtual = $derived(consentimentoQuery?.data?.versaoTermoAtual ?? '1.0');

	// Rota de retorno após aceite
	const redirectTo = $derived(page.url.searchParams.get('redirect') || '/');

	function navegarDeVolta() {
		// Se vier algo como URL absoluta, mantemos; senão usamos resolve
		if (redirectTo.startsWith('/')) {
			window.location.href = redirectTo;
		} else {
			window.location.href = resolve(redirectTo);
		}
	}

	async function aceitarTermo() {
		if (termoObrigatorio && !aceito) {
			erro = 'Você precisa aceitar o termo para continuar';
			return;
		}

		if (!aceito) {
			// Se não é obrigatório e não aceitou, apenas redireciona
			navegarDeVolta();
			return;
		}

		carregando = true;
		erro = null;

		try {
			await client.mutation(api.lgpd.registrarConsentimento, {
				tipo: 'termo_uso',
				aceito: true,
				versao: versaoTermoAtual
			});
			sucesso = true;
			// Aguarda 6 segundos antes de redirecionar automaticamente
			setTimeout(() => {
				navegarDeVolta();
			}, 6000);
		} catch (e: unknown) {
			erro = e instanceof Error ? e.message : 'Erro ao registrar consentimento';
		} finally {
			carregando = false;
		}
	}
</script>

<div class="container mx-auto max-w-4xl px-4 py-8">
	<!-- Header -->
	<div class="mb-8">
		<div class="mb-4 flex items-center gap-4">
			<div class="bg-primary/10 rounded-xl p-3">
				<Shield class="text-primary h-8 w-8" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-base-content text-3xl font-bold">Termo de Consentimento</h1>
				<p class="text-base-content/60 mt-1">
					Termo de Uso e Consentimento para Tratamento de Dados Pessoais
				</p>
			</div>
		</div>
	</div>

	{#if consentimentoQuery === undefined}
		<div class="flex items-center justify-center py-20">
			<span class="loading loading-spinner loading-lg text-primary"></span>
		</div>
	{:else if jaAceitou}
		<!-- Já aceitou -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body text-center">
				<CheckCircle class="text-success mx-auto mb-4 h-16 w-16" strokeWidth={2} />
				<h2 class="card-title mb-4 justify-center text-2xl">Termo Já Aceito</h2>
				<p class="text-base-content/80 mb-6">
					Você já aceitou este termo de consentimento (versão {versaoTermoAtual}). Se desejar
					revogar seu consentimento ou gerenciar suas preferências de privacidade, acesse a página
					de privacidade.
				</p>
				<div class="flex flex-col justify-center gap-4 sm:flex-row">
					<a href={resolve('/privacidade')} class="btn btn-primary">
						<FileText class="h-5 w-5" />
						Ver Política de Privacidade
					</a>
					<a href={resolve('/perfil/privacidade')} class="btn btn-outline">
						<Shield class="h-5 w-5" />
						Gerenciar Privacidade
					</a>
				</div>
			</div>
		</div>
	{:else if sucesso}
		<!-- Sucesso -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body text-center">
				<CheckCircle class="text-success mx-auto mb-4 h-16 w-16" strokeWidth={2} />
				<h2 class="card-title mb-4 justify-center text-2xl">Termo Aceito com Sucesso!</h2>
				<p class="text-base-content/80 mb-6">
					Seu consentimento foi registrado. Você pode acessar o sistema normalmente.
				</p>
				<button type="button" class="btn btn-primary btn-lg" onclick={navegarDeVolta}>
					Continuar para o Sistema
				</button>
			</div>
		</div>
	{:else}
		<!-- Termo -->
		<div class="card bg-base-100 mb-6 shadow-xl">
			<div class="card-body">
				<div class="prose max-w-none">
					<h2 class="mb-4 text-2xl font-bold">Termo de Uso e Consentimento</h2>

					<section class="mb-6">
						<h3 class="mb-3 text-xl font-semibold">1. Aceitação dos Termos</h3>
						<p class="text-base-content/80 mb-4">
							Ao utilizar o Sistema de Gestão da Secretaria de Esportes (SGSE), você concorda com os
							termos e condições estabelecidos neste documento, bem como com a Política de
							Privacidade do sistema.
						</p>
					</section>

					<section class="mb-6">
						<h3 class="mb-3 text-xl font-semibold">2. Tratamento de Dados Pessoais</h3>
						<p class="text-base-content/80 mb-4">
							Você consente que a Secretaria de Esportes do Estado de Pernambuco trate seus dados
							pessoais para as finalidades descritas na Política de Privacidade, incluindo:
						</p>
						<ul class="text-base-content/80 mb-4 list-inside list-disc space-y-2">
							<li>Gestão de recursos humanos e folha de pagamento</li>
							<li>Controle de ponto e registro de jornada de trabalho</li>
							<li>Gestão de férias, ausências e licenças</li>
							<li>Processamento de atestados médicos e licenças de saúde</li>
							<li>Comunicação interna e notificações</li>
							<li>Cumprimento de obrigações legais e regulatórias</li>
						</ul>
					</section>

					<section class="mb-6">
						<h3 class="mb-3 text-xl font-semibold">3. Base Legal</h3>
						<p class="text-base-content/80 mb-4">
							O tratamento de seus dados pessoais fundamenta-se nas seguintes bases legais, conforme
							previsto na Lei Geral de Proteção de Dados (LGPD):
						</p>
						<ul class="text-base-content/80 list-inside list-disc space-y-2">
							<li>
								<strong>Execução de Políticas Públicas:</strong> Para a execução de políticas públicas
								previstas em leis ou regulamentos
							</li>
							<li>
								<strong>Cumprimento de Obrigação Legal:</strong> Para cumprimento de obrigação legal
								ou regulatória
							</li>
							<li>
								<strong>Execução de Contrato:</strong> Para a execução de contrato ou de procedimentos
								preliminares relacionados a contrato
							</li>
						</ul>
					</section>

					<section class="mb-6">
						<h3 class="mb-3 text-xl font-semibold">4. Direitos do Titular</h3>
						<p class="text-base-content/80 mb-4">
							Você possui os seguintes direitos em relação aos seus dados pessoais:
						</p>
						<ul class="text-base-content/80 list-inside list-disc space-y-2">
							<li>Confirmar a existência de tratamento de dados</li>
							<li>Acessar seus dados pessoais</li>
							<li>Corrigir dados incompletos, inexatos ou desatualizados</li>
							<li>Solicitar anonimização, bloqueio ou eliminação de dados</li>
							<li>Solicitar portabilidade dos dados</li>
							<li>Revogar seu consentimento</li>
						</ul>
						<p class="text-base-content/80 mt-4">
							Para exercer seus direitos, acesse a página{' '}
							<a href={resolve('/privacidade/meus-dados')} class="link link-primary">
								Solicitar Meus Direitos
							</a>
							.
						</p>
					</section>

					<section class="mb-6">
						<h3 class="mb-3 text-xl font-semibold">5. Segurança dos Dados</h3>
						<p class="text-base-content/80 mb-4">
							A Secretaria de Esportes adota medidas técnicas e administrativas para proteger seus
							dados pessoais contra acesso não autorizado, alteração, divulgação ou destruição.
						</p>
					</section>

					<section class="mb-6">
						<h3 class="mb-3 text-xl font-semibold">6. Revogação do Consentimento</h3>
						<p class="text-base-content/80 mb-4">
							Você pode revogar seu consentimento a qualquer momento através da página de
							gerenciamento de privacidade. No entanto, a revogação pode impedir o acesso a algumas
							funcionalidades do sistema que dependem do tratamento de dados pessoais.
						</p>
					</section>

					<section class="mb-6">
						<h3 class="mb-3 text-xl font-semibold">7. Contato</h3>
						<p class="text-base-content/80 mb-4">
							Para questões relacionadas ao tratamento de dados pessoais, entre em contato com o
							Encarregado de Proteção de Dados:
						</p>
						<div class="bg-base-200 rounded-lg p-4">
							<p class="text-sm">
								<strong>E-mail:</strong> lgpd@esportes.pe.gov.br
							</p>
							<p class="text-sm">
								<strong>Telefone:</strong> (81) 3184-XXXX
							</p>
						</div>
					</section>

					{#if termoObrigatorio}
						<div class="alert alert-warning mb-6">
							<AlertCircle class="h-5 w-5" />
							<p class="text-sm">
								<strong>Atenção:</strong> O aceite deste termo é obrigatório para utilização do sistema.
								Ao aceitar, você confirma que leu, compreendeu e concorda com todos os termos e condições
								estabelecidos.
							</p>
						</div>
					{:else}
						<div class="alert alert-info mb-6">
							<AlertCircle class="h-5 w-5" />
							<p class="text-sm">
								<strong>Informação:</strong> O aceite deste termo é opcional. Você pode aceitar voluntariamente
								ou continuar sem aceitar.
							</p>
						</div>
					{/if}
				</div>
			</div>
		</div>

		<!-- Formulário de Aceite -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<h2 class="card-title mb-4 text-xl">Aceitar Termo</h2>

				{#if erro}
					<div class="alert alert-error mb-4">
						<AlertCircle class="h-5 w-5" />
						<span>{erro}</span>
					</div>
				{/if}

				<div class="form-control mb-6">
					<label class="label cursor-pointer justify-start gap-4">
						<input type="checkbox" bind:checked={aceito} class="checkbox checkbox-primary" />
						<span class="label-text text-base-content/80">
							Declaro que li, compreendi e aceito os termos e condições estabelecidos neste Termo de
							Consentimento e na{' '}
							<a href={resolve('/privacidade')} class="link link-primary" target="_blank">
								Política de Privacidade
							</a>
							.
						</span>
					</label>
				</div>

				<div class="flex flex-col gap-4 sm:flex-row">
					<button
						onclick={aceitarTermo}
						disabled={(termoObrigatorio && !aceito) || carregando}
						class="btn btn-primary btn-lg flex-1"
					>
						{#if carregando}
							<span class="loading loading-spinner loading-sm"></span>
							Processando...
						{:else}
							<CheckCircle class="h-5 w-5" />
							Aceitar e Continuar
						{/if}
					</button>
					<a href={resolve('/privacidade')} class="btn btn-outline btn-lg flex-1">
						<FileText class="h-5 w-5" />
						Ver Política de Privacidade
					</a>
				</div>
			</div>
		</div>
	{/if}
</div>
