<script lang="ts">
	import { resolve } from '$app/paths';
	import { Shield, CheckCircle, AlertCircle, FileText } from 'lucide-svelte';
	import { useQuery, useMutation } 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 consentimentoQuery = useQuery(api.lgpd.verificarConsentimento, { tipo: 'termo_uso' });
	const registrarConsentimento = useMutation(api.lgpd.registrarConsentimento);

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

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

		carregando = true;
		erro = null;

		try {
			await registrarConsentimento({
				tipo: 'termo_uso',
				aceito: true,
				versao: '1.0'
			});
			sucesso = true;
		} catch (e: any) {
			erro = e.message || 'Erro ao registrar consentimento';
		} finally {
			carregando = false;
		}
	}
</script>

<div class="container mx-auto px-4 py-8 max-w-4xl">
	<!-- Header -->
	<div class="mb-8">
		<div class="flex items-center gap-4 mb-4">
			<div class="p-3 bg-primary/10 rounded-xl">
				<Shield class="h-8 w-8 text-primary" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-3xl font-bold text-base-content">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 justify-center items-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="h-16 w-16 text-success mx-auto mb-4" strokeWidth={2} />
				<h2 class="card-title text-2xl justify-center mb-4">Termo Já Aceito</h2>
				<p class="text-base-content/80 mb-6">
					Você já aceitou este termo de consentimento. Se desejar revogar seu consentimento ou
					gerenciar suas preferências de privacidade, acesse a página de privacidade.
				</p>
				<div class="flex flex-col sm:flex-row gap-4 justify-center">
					<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="h-16 w-16 text-success mx-auto mb-4" strokeWidth={2} />
				<h2 class="card-title text-2xl justify-center mb-4">Termo Aceito com Sucesso!</h2>
				<p class="text-base-content/80 mb-6">
					Seu consentimento foi registrado. Você pode acessar o sistema normalmente.
				</p>
				<a href={resolve('/')} class="btn btn-primary btn-lg">
					Continuar para o Sistema
				</a>
			</div>
		</div>
	{:else}
		<!-- Termo -->
		<div class="card bg-base-100 shadow-xl mb-6">
			<div class="card-body">
				<div class="prose max-w-none">
					<h2 class="text-2xl font-bold mb-4">Termo de Uso e Consentimento</h2>

					<section class="mb-6">
						<h3 class="text-xl font-semibold mb-3">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="text-xl font-semibold mb-3">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="list-disc list-inside space-y-2 text-base-content/80 mb-4">
							<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="text-xl font-semibold mb-3">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="list-disc list-inside space-y-2 text-base-content/80">
							<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="text-xl font-semibold mb-3">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="list-disc list-inside space-y-2 text-base-content/80">
							<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="text-xl font-semibold mb-3">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="text-xl font-semibold mb-3">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="text-xl font-semibold mb-3">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 p-4 rounded-lg">
							<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>

					<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>
				</div>
			</div>
		</div>

		<!-- Formulário de Aceite -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<h2 class="card-title text-xl mb-4">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 sm:flex-row gap-4">
					<button
						onclick={aceitarTermo}
						disabled={!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>

