<script lang="ts">
	import { resolve } from '$app/paths';
	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 {
		Shield,
		FileText,
		Download,
		CheckCircle,
		Clock,
		XCircle,
		AlertCircle,
		Send,
		Trash2,
		X
	} from 'lucide-svelte';
	import { format } from 'date-fns';
	import { ptBR } from 'date-fns/locale';
	import { toast } from 'svelte-sonner';

	type TipoSolicitacao =
		| 'acesso'
		| 'correcao'
		| 'exclusao'
		| 'portabilidade'
		| 'revogacao_consentimento'
		| 'informacao_compartilhamento';

	let tipoSelecionado = $state<TipoSolicitacao | null>(null);
	let dadosSolicitados = $state('');
	let observacoes = $state('');
	let carregando = $state(false);
	let cancelandoId = $state<Id<'solicitacoesLGPD'> | null>(null);
	let excluindoId = $state<Id<'solicitacoesLGPD'> | null>(null);
	let mostrarConfirmacaoExclusao = $state(false);
	let solicitacaoParaExcluir = $state<Id<'solicitacoesLGPD'> | null>(null);

	const client = useConvexClient();
	
	// Estado para forçar atualização das queries
	let refreshKeyLGPD = $state(0);
	
	const minhasSolicitacoesQuery = useQuery(api.lgpd.listarMinhasSolicitacoes, {
		_refresh: refreshKeyLGPD
	});

	// Garantir que sempre seja um array ou undefined
	const minhasSolicitacoes = $derived(
		minhasSolicitacoesQuery === undefined || minhasSolicitacoesQuery === null
			? undefined
			: Array.isArray(minhasSolicitacoesQuery?.data)
				? minhasSolicitacoesQuery.data
				: minhasSolicitacoesQuery?.data === null
					? []
					: []
	);

	const exportarDados = useQuery(api.lgpd.exportarDadosUsuario, {});

	const tiposSolicitacao: Array<{ valor: TipoSolicitacao; label: string; descricao: string }> = [
		{
			valor: 'acesso',
			label: 'Acesso aos Dados',
			descricao: 'Solicitar acesso aos meus dados pessoais tratados pelo sistema'
		},
		{
			valor: 'correcao',
			label: 'Correção de Dados',
			descricao: 'Solicitar correção de dados incompletos, inexatos ou desatualizados'
		},
		{
			valor: 'exclusao',
			label: 'Exclusão de Dados',
			descricao: 'Solicitar exclusão de dados desnecessários ou excessivos'
		},
		{
			valor: 'portabilidade',
			label: 'Portabilidade dos Dados',
			descricao: 'Solicitar exportação dos meus dados em formato portável'
		},
		{
			valor: 'revogacao_consentimento',
			label: 'Revogar Consentimento',
			descricao: 'Revogar consentimento para tratamento de dados pessoais'
		},
		{
			valor: 'informacao_compartilhamento',
			label: 'Informação sobre Compartilhamento',
			descricao: 'Obter informações sobre compartilhamento de dados com terceiros'
		}
	];

	function getStatusBadge(status: string) {
		switch (status) {
			case 'pendente':
				return { label: 'Pendente', class: 'badge-warning' };
			case 'em_analise':
				return { label: 'Em Análise', class: 'badge-info' };
			case 'concluida':
				return { label: 'Concluída', class: 'badge-success' };
			case 'rejeitada':
				return { label: 'Rejeitada', class: 'badge-error' };
			case 'cancelada':
				return { label: 'Cancelada', class: 'badge-neutral' };
			default:
				return { label: status, class: 'badge-neutral' };
		}
	}

	function getStatusIcon(status: string) {
		switch (status) {
			case 'pendente':
				return Clock;
			case 'em_analise':
				return AlertCircle;
			case 'concluida':
				return CheckCircle;
			case 'rejeitada':
				return XCircle;
			case 'cancelada':
				return XCircle;
			default:
				return FileText;
		}
	}

	async function enviarSolicitacao() {
		if (!tipoSelecionado) {
			toast.error('Selecione o tipo de solicitação');
			return;
		}

		carregando = true;

		try {
			await client.mutation(api.lgpd.criarSolicitacao, {
				tipo: tipoSelecionado,
				dadosSolicitados: dadosSolicitados || undefined,
				observacoes: observacoes || undefined
			});

			toast.success('Solicitação criada com sucesso!');
			tipoSelecionado = null;
			dadosSolicitados = '';
			observacoes = '';
			// Forçar atualização das queries
			refreshKeyLGPD++;
		} catch (error: unknown) {
			const message = error instanceof Error ? error.message : 'Erro ao criar solicitação';
			toast.error(message);
		} finally {
			carregando = false;
		}
	}

	function downloadDados() {
		if (!exportarDados?.data?.dados) {
			toast.error('Dados não disponíveis');
			return;
		}

		const blob = new Blob([exportarDados.data.dados], { type: 'application/json' });
		const url = URL.createObjectURL(blob);
		const a = document.createElement('a');
		a.href = url;
		a.download = `meus-dados-${new Date().toISOString().split('T')[0]}.json`;
		document.body.appendChild(a);
		a.click();
		document.body.removeChild(a);
		URL.revokeObjectURL(url);
		toast.success('Download iniciado!');
	}

	async function cancelarSolicitacao(solicitacaoId: Id<'solicitacoesLGPD'>) {
		if (cancelandoId === solicitacaoId) return;

		cancelandoId = solicitacaoId;
		try {
			await client.mutation(api.lgpd.cancelarSolicitacao, {
				solicitacaoId
			});
			toast.success('Solicitação cancelada com sucesso!');
			refreshKeyLGPD++;
		} catch (error: unknown) {
			const message = error instanceof Error ? error.message : 'Erro ao cancelar solicitação';
			toast.error(message);
		} finally {
			cancelandoId = null;
		}
	}

	function solicitarExclusao(solicitacaoId: Id<'solicitacoesLGPD'>) {
		solicitacaoParaExcluir = solicitacaoId;
		mostrarConfirmacaoExclusao = true;
	}

	function fecharConfirmacaoExclusao() {
		mostrarConfirmacaoExclusao = false;
		solicitacaoParaExcluir = null;
	}

	async function confirmarExclusao() {
		if (!solicitacaoParaExcluir) return;

		const solicitacaoId = solicitacaoParaExcluir;
		excluindoId = solicitacaoId;
		mostrarConfirmacaoExclusao = false;

		try {
			await client.mutation(api.lgpd.excluirSolicitacao, {
				solicitacaoId
			});
			toast.success('Solicitação excluída com sucesso!');
			refreshKeyLGPD++;
		} catch (error: unknown) {
			const message = error instanceof Error ? error.message : 'Erro ao excluir solicitação';
			toast.error(message);
		} finally {
			excluindoId = null;
			solicitacaoParaExcluir = null;
		}
	}
</script>

<div class="container mx-auto max-w-6xl 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">Meus Direitos LGPD</h1>
				<p class="text-base-content/60 mt-1">
					Solicite o exercício dos seus direitos conforme a Lei Geral de Proteção de Dados
				</p>
			</div>
		</div>
	</div>

	<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
		<!-- Formulário de Solicitação -->
		<div class="space-y-6 lg:col-span-2">
			<!-- Nova Solicitação -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<h2 class="card-title mb-4 text-2xl">Nova Solicitação</h2>

					<div class="form-control mb-4">
						<label class="label">
							<span class="label-text font-semibold">Tipo de Solicitação *</span>
						</label>
						<select bind:value={tipoSelecionado} class="select select-bordered w-full">
							<option value={null}>Selecione o tipo de solicitação</option>
							{#each tiposSolicitacao as tipo}
								<option value={tipo.valor}>{tipo.label}</option>
							{/each}
						</select>
						{#if tipoSelecionado}
							<label class="label">
								<span class="label-text-alt text-base-content/60">
									{tiposSolicitacao.find((t) => t.valor === tipoSelecionado)?.descricao}
								</span>
							</label>
						{/if}
					</div>

					{#if tipoSelecionado === 'correcao'}
						<div class="form-control mb-4">
							<label class="label">
								<span class="label-text font-semibold">Dados a Corrigir</span>
							</label>
							<textarea
								bind:value={dadosSolicitados}
								class="textarea textarea-bordered"
								placeholder="Descreva quais dados precisam ser corrigidos e os valores corretos..."
								rows="4"
							></textarea>
						</div>
					{/if}

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

					<button
						onclick={enviarSolicitacao}
						disabled={!tipoSelecionado || carregando}
						class="btn btn-primary btn-lg w-full"
					>
						{#if carregando}
							<span class="loading loading-spinner loading-sm"></span>
							Enviando...
						{:else}
							<Send class="h-5 w-5" />
							Enviar Solicitação
						{/if}
					</button>

					<div class="alert alert-info mt-4">
						<AlertCircle class="h-5 w-5" />
						<p class="text-sm">
							Sua solicitação será analisada e respondida em até 15 dias úteis, conforme previsto na
							LGPD.
						</p>
					</div>
				</div>
			</div>

			<!-- Minhas Solicitações -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<div class="mb-4 flex items-center justify-between">
						<h2 class="card-title text-2xl">Minhas Solicitações</h2>
						{#if minhasSolicitacoes && Array.isArray(minhasSolicitacoes)}
							<div class="badge badge-outline">
								{minhasSolicitacoes.length} solicitação{minhasSolicitacoes.length !== 1
									? 'ões'
									: ''}
							</div>
						{/if}
					</div>

					{#if minhasSolicitacoes === undefined || minhasSolicitacoes === null}
						<div class="flex items-center justify-center py-10">
							<span class="loading loading-spinner loading-lg text-primary"></span>
						</div>
					{:else if !Array.isArray(minhasSolicitacoes) || minhasSolicitacoes.length === 0}
						<div class="py-10 text-center">
							<FileText class="text-base-content/30 mx-auto mb-4 h-16 w-16" />
							<p class="text-base-content/60">Nenhuma solicitação encontrada</p>
							<p class="text-base-content/40 mt-2 text-xs">
								Suas solicitações aparecerão aqui após serem criadas
							</p>
						</div>
					{:else}
						<div class="space-y-4">
							{#each minhasSolicitacoes as solicitacao}
								{@const statusInfo = getStatusBadge(solicitacao.status)}
								{@const StatusIcon = getStatusIcon(solicitacao.status)}
								<div class="border-base-300 rounded-lg border p-4">
									<div class="mb-2 flex items-start justify-between">
										<div class="flex items-center gap-3">
											<StatusIcon class="text-base-content/60 h-5 w-5" />
											<div>
												<h3 class="font-semibold">
													{tiposSolicitacao.find((t) => t.valor === solicitacao.tipo)?.label ||
														solicitacao.tipo}
												</h3>
												<p class="text-base-content/60 text-sm">
													Criada em{' '}
													{format(new Date(solicitacao.criadoEm), "dd/MM/yyyy 'às' HH:mm", {
														locale: ptBR
													})}
												</p>
											</div>
										</div>
										<span class="badge {statusInfo.class}">{statusInfo.label}</span>
									</div>

									{#if solicitacao.resposta}
										<div class="bg-base-200 mt-3 rounded-lg p-3">
											<p class="mb-1 text-sm font-semibold">Resposta:</p>
											<p class="text-base-content/80 text-sm">{solicitacao.resposta}</p>
										</div>
									{/if}

									{#if solicitacao.arquivoResposta}
										<div class="mt-3">
											<a
												href={solicitacao.arquivoResposta}
												target="_blank"
												class="btn btn-sm btn-outline"
											>
												<Download class="h-4 w-4" />
												Baixar Arquivo
											</a>
										</div>
									{/if}

									{#if solicitacao.status === 'pendente' || solicitacao.status === 'em_analise'}
										<div class="text-base-content/60 mt-3 text-xs">
											Prazo para resposta:{' '}
											{format(new Date(solicitacao.prazoResposta), 'dd/MM/yyyy', {
												locale: ptBR
											})}
										</div>
									{/if}

									<!-- Ações -->
									<div class="mt-4 flex gap-2 border-t border-base-300 pt-3">
										{#if solicitacao.status === 'pendente' || solicitacao.status === 'em_analise'}
											<button
												type="button"
												onclick={() => cancelarSolicitacao(solicitacao._id)}
												disabled={cancelandoId === solicitacao._id}
												class="btn btn-sm btn-warning btn-outline gap-2"
											>
												{#if cancelandoId === solicitacao._id}
													<span class="loading loading-spinner loading-xs"></span>
												{:else}
													<X class="h-4 w-4" />
												{/if}
												Cancelar
											</button>
										{/if}
										{#if solicitacao.status === 'pendente' || solicitacao.status === 'cancelada'}
											<button
												type="button"
												onclick={() => solicitarExclusao(solicitacao._id)}
												disabled={excluindoId === solicitacao._id}
												class="btn btn-sm btn-error btn-outline gap-2"
											>
												{#if excluindoId === solicitacao._id}
													<span class="loading loading-spinner loading-xs"></span>
												{:else}
													<Trash2 class="h-4 w-4" />
												{/if}
												Excluir
											</button>
										{/if}
									</div>
								</div>
							{/each}
						</div>
					{/if}
				</div>
			</div>
		</div>

		<!-- Sidebar -->
		<div class="space-y-6">
			<!-- Exportar Dados -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<h3 class="card-title mb-4 text-lg">Exportar Meus Dados</h3>
					<p class="text-base-content/70 mb-4 text-sm">
						Baixe uma cópia completa dos seus dados pessoais em formato JSON.
					</p>
					<button
						onclick={downloadDados}
						disabled={exportarDados === undefined || !exportarDados?.data?.dados}
						class="btn btn-outline btn-primary w-full"
					>
						{#if exportarDados === undefined}
							<span class="loading loading-spinner loading-sm"></span>
							Carregando...
						{:else}
							<Download class="h-5 w-5" />
							Baixar Dados
						{/if}
					</button>
				</div>
			</div>

			<!-- Informações -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<h3 class="card-title mb-4 text-lg">Seus Direitos</h3>
					<ul class="text-base-content/80 space-y-2 text-sm">
						<li>• Confirmar existência de tratamento</li>
						<li>• Acessar seus dados</li>
						<li>• Corrigir dados incorretos</li>
						<li>• Solicitar exclusão</li>
						<li>• Portabilidade dos dados</li>
						<li>• Revogar consentimento</li>
					</ul>
				</div>
			</div>

			<!-- Links -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<h3 class="card-title mb-4 text-lg">Links Úteis</h3>
					<div class="space-y-2">
						<a href={resolve('/privacidade')} class="btn btn-sm btn-ghost w-full justify-start">
							<FileText class="h-4 w-4" />
							Política de Privacidade
						</a>
						<a
							href={resolve('/perfil/privacidade')}
							class="btn btn-sm btn-ghost w-full justify-start"
						>
							<Shield class="h-4 w-4" />
							Preferências de Privacidade
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Modal de Confirmação de Exclusão -->
{#if mostrarConfirmacaoExclusao}
	<dialog class="modal modal-open">
		<div class="modal-box">
			<h3 class="mb-4 text-lg font-bold">Confirmar Exclusão</h3>
			<p class="mb-6 text-base-content/70">
				Tem certeza que deseja excluir esta solicitação? Esta ação não pode ser desfeita.
			</p>
			<div class="modal-action">
				<button type="button" onclick={fecharConfirmacaoExclusao} class="btn btn-ghost">
					Cancelar
				</button>
				<button
					type="button"
					onclick={confirmarExclusao}
					disabled={excluindoId !== null}
					class="btn btn-error gap-2"
				>
					{#if excluindoId}
						<span class="loading loading-spinner loading-sm"></span>
						Excluindo...
					{:else}
						<Trash2 class="h-4 w-4" />
						Excluir
					{/if}
				</button>
			</div>
		</div>
		<div class="modal-backdrop" onclick={fecharConfirmacaoExclusao}></div>
	</dialog>
{/if}
