<script lang="ts">
	import { resolve } from '$app/paths';
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { Shield, CheckCircle, XCircle, Calendar, AlertCircle } from 'lucide-svelte';
	import { format } from 'date-fns';
	import { ptBR } from 'date-fns/locale';
	import { toast } from 'svelte-sonner';

	const client = useConvexClient();
	const consentimentos = useQuery(api.lgpd.listarConsentimentos, {});

	let revogando = $state<string | null>(null);

	function getTipoLabel(tipo: string) {
		const labels: Record<string, string> = {
			termo_uso: 'Termo de Uso',
			politica_privacidade: 'Política de Privacidade',
			comunicacoes: 'Comunicações',
			compartilhamento_dados: 'Compartilhamento de Dados'
		};
		return labels[tipo] || tipo;
	}

	async function revogar(tipo: string) {
		if (!confirm('Tem certeza que deseja revogar este consentimento?')) {
			return;
		}

		revogando = tipo;

		try {
			await client.mutation(api.lgpd.revogarConsentimento, {
				tipo: tipo as
					| 'termo_uso'
					| 'politica_privacidade'
					| 'comunicacoes'
					| 'compartilhamento_dados'
			});
			toast.success('Consentimento revogado com sucesso');
		} catch (error: any) {
			toast.error(error.message || 'Erro ao revogar consentimento');
		} finally {
			revogando = null;
		}
	}
</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">Preferências de Privacidade</h1>
				<p class="text-base-content/60 mt-1">
					Gerencie seus consentimentos e preferências de privacidade
				</p>
			</div>
		</div>
	</div>

	<!-- Consentimentos -->
	<div class="card bg-base-100 mb-6 shadow-xl">
		<div class="card-body">
			<h2 class="card-title mb-4 text-2xl">Meus Consentimentos</h2>

			{#if consentimentos === undefined}
				<div class="flex items-center justify-center py-10">
					<span class="loading loading-spinner loading-lg text-primary"></span>
				</div>
			{:else if consentimentos.length === 0}
				<div class="py-10 text-center">
					<Shield class="text-base-content/30 mx-auto mb-4 h-16 w-16" />
					<p class="text-base-content/60">Nenhum consentimento registrado</p>
				</div>
			{:else}
				<div class="space-y-4">
					{#each consentimentos as consentimento}
						<div class="border-base-300 rounded-lg border p-4">
							<div class="flex items-start justify-between">
								<div class="flex-1">
									<div class="mb-2 flex items-center gap-3">
										{#if consentimento.aceito && !consentimento.revogadoEm}
											<CheckCircle class="text-success h-5 w-5" />
										{:else}
											<XCircle class="text-error h-5 w-5" />
										{/if}
										<h3 class="text-lg font-semibold">
											{getTipoLabel(consentimento.tipo)}
										</h3>
										{#if consentimento.aceito && !consentimento.revogadoEm}
											<span class="badge badge-success">Ativo</span>
										{:else}
											<span class="badge badge-error">Revogado</span>
										{/if}
									</div>

									<div class="text-base-content/70 space-y-1 text-sm">
										<div class="flex items-center gap-2">
											<Calendar class="h-4 w-4" />
											<span>
												Aceito em:{' '}
												{format(new Date(consentimento.aceitoEm), 'dd/MM/yyyy às HH:mm', {
													locale: ptBR
												})}
											</span>
										</div>
										<div>
											<span class="font-semibold">Versão:</span>
											{consentimento.versao}
										</div>
										{#if consentimento.revogadoEm}
											<div class="text-error flex items-center gap-2">
												<XCircle class="h-4 w-4" />
												<span>
													Revogado em:{' '}
													{format(new Date(consentimento.revogadoEm), 'dd/MM/yyyy às HH:mm', {
														locale: ptBR
													})}
												</span>
											</div>
										{/if}
									</div>
								</div>

								{#if consentimento.aceito && !consentimento.revogadoEm}
									<button
										onclick={() => revogar(consentimento.tipo)}
										disabled={revogando === consentimento.tipo}
										class="btn btn-sm btn-error"
									>
										{#if revogando === consentimento.tipo}
											<span class="loading loading-spinner loading-xs"></span>
										{:else}
											Revogar
										{/if}
									</button>
								{/if}
							</div>
						</div>
					{/each}
				</div>
			{/if}
		</div>
	</div>

	<!-- Informações -->
	<div class="card bg-base-100 shadow-xl">
		<div class="card-body">
			<h2 class="card-title mb-4 text-2xl">Informações Importantes</h2>

			<div class="alert alert-warning mb-4">
				<AlertCircle class="h-5 w-5" />
				<div>
					<p class="font-semibold">Atenção ao Revogar Consentimentos</p>
					<p class="text-sm">
						A revogação de alguns consentimentos pode impedir o acesso a funcionalidades do sistema
						que dependem do tratamento de dados pessoais.
					</p>
				</div>
			</div>

			<div class="text-base-content/80 space-y-3 text-sm">
				<p>
					<strong>Termo de Uso:</strong> Aceite obrigatório para utilização do sistema. A revogação pode
					impedir o acesso.
				</p>
				<p>
					<strong>Política de Privacidade:</strong> Informa como seus dados são tratados. A revogação
					não impede o tratamento, mas você pode solicitar exclusão.
				</p>
				<p>
					<strong>Comunicações:</strong> Permite envio de notificações e comunicações do sistema. A revogação
					pode limitar informações importantes.
				</p>
				<p>
					<strong>Compartilhamento de Dados:</strong> Permite compartilhamento com terceiros quando necessário.
					A revogação pode afetar serviços terceirizados.
				</p>
			</div>
		</div>
	</div>

	<!-- Links -->
	<div class="mt-6 flex flex-col gap-4 sm:flex-row">
		<a href={resolve('/privacidade')} class="btn btn-outline btn-lg flex-1">
			<Shield class="h-5 w-5" />
			Ver Política de Privacidade
		</a>
		<a href={resolve('/privacidade/meus-dados')} class="btn btn-primary btn-lg flex-1">
			<Shield class="h-5 w-5" />
			Solicitar Meus Direitos
		</a>
	</div>
</div>
