<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, FileText, Plus, CheckCircle, XCircle } from 'lucide-svelte';
	import { format } from 'date-fns';
	import { ptBR } from 'date-fns/locale';
	import { toast } from 'svelte-sonner';

	const client = useConvexClient();
	const registros = useQuery(api.lgpd.listarRegistrosTratamento, { ativo: undefined });

	let mostrarFormulario = $state(false);
	let finalidade = $state('');
	let baseLegal = $state('');
	let categoriasDados = $state<string[]>([]);
	let categoriasTitulares = $state<string[]>([]);
	let medidasSeguranca = $state<string[]>([]);
	let prazoRetencao = $state(365);
	let compartilhamentoTerceiros = $state(false);
	let terceiros = $state<string[]>([]);
	let descricao = $state('');
	let carregando = $state(false);

	const categoriasDadosDisponiveis = [
		'dados_identificacao',
		'dados_contato',
		'dados_profissionais',
		'dados_saude',
		'dados_acesso'
	];

	const categoriasTitularesDisponiveis = [
		'funcionarios',
		'servidores',
		'colaboradores',
		'terceiros'
	];

	const medidasSegurancaDisponiveis = [
		'criptografia',
		'controle_acesso',
		'logs_auditoria',
		'backup',
		'monitoramento'
	];

	function toggleArrayItem(array: string[], item: string) {
		if (array.includes(item)) {
			return array.filter((i) => i !== item);
		} else {
			return [...array, item];
		}
	}

	async function salvar() {
		if (!finalidade.trim() || !baseLegal.trim()) {
			toast.error('Preencha todos os campos obrigatórios');
			return;
		}

		carregando = true;

		try {
			await client.mutation(api.lgpd.criarRegistroTratamento, {
				finalidade: finalidade.trim(),
				baseLegal: baseLegal.trim(),
				categoriasDados,
				categoriasTitulares,
				medidasSeguranca,
				prazoRetencao,
				compartilhamentoTerceiros,
				terceiros: compartilhamentoTerceiros && terceiros.length > 0 ? terceiros : undefined,
				descricao: descricao.trim() || undefined
			});

			toast.success('Registro de Tratamento criado com sucesso!');
			mostrarFormulario = false;
			// Reset form
			finalidade = '';
			baseLegal = '';
			categoriasDados = [];
			categoriasTitulares = [];
			medidasSeguranca = [];
			prazoRetencao = 365;
			compartilhamentoTerceiros = false;
			terceiros = [];
			descricao = '';
		} catch (error: unknown) {
			const message = error instanceof Error ? error.message : 'Erro ao criar registro';
			toast.error(message);
		} finally {
			carregando = false;
		}
	}
</script>

<div class="container mx-auto max-w-7xl px-4 py-6">
	<!-- 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">
				<Shield class="text-primary h-8 w-8" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-base-content text-3xl font-bold">Registros de Tratamento (ROT)</h1>
				<p class="text-base-content/60 mt-1">
					Gerencie os registros de operações de tratamento de dados pessoais
				</p>
			</div>
		</div>
		<button onclick={() => (mostrarFormulario = !mostrarFormulario)} class="btn btn-primary">
			<Plus class="h-5 w-5" />
			Novo ROT
		</button>
	</div>

	<!-- Formulário -->
	{#if mostrarFormulario}
		<div class="card bg-base-100 mb-6 shadow-xl">
			<div class="card-body">
				<h2 class="card-title mb-4 text-2xl">Criar Novo Registro de Tratamento</h2>

				<div class="space-y-4">
					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Finalidade *</span>
						</label>
						<input
							type="text"
							bind:value={finalidade}
							placeholder="Ex: Gestão de recursos humanos e folha de pagamento"
							class="input input-bordered"
						/>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Base Legal *</span>
						</label>
						<input
							type="text"
							bind:value={baseLegal}
							placeholder="Ex: Art. 7º, II - Execução de políticas públicas"
							class="input input-bordered"
						/>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Categorias de Dados</span>
						</label>
						<div class="flex flex-wrap gap-2">
							{#each categoriasDadosDisponiveis as categoria}
								<label class="label cursor-pointer gap-2">
									<input
										type="checkbox"
										checked={categoriasDados.includes(categoria)}
										onchange={() => (categoriasDados = toggleArrayItem(categoriasDados, categoria))}
										class="checkbox checkbox-primary checkbox-sm"
									/>
									<span class="label-text text-sm">{categoria}</span>
								</label>
							{/each}
						</div>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Categorias de Titulares</span>
						</label>
						<div class="flex flex-wrap gap-2">
							{#each categoriasTitularesDisponiveis as categoria}
								<label class="label cursor-pointer gap-2">
									<input
										type="checkbox"
										checked={categoriasTitulares.includes(categoria)}
										onchange={() =>
											(categoriasTitulares = toggleArrayItem(categoriasTitulares, categoria))}
										class="checkbox checkbox-primary checkbox-sm"
									/>
									<span class="label-text text-sm">{categoria}</span>
								</label>
							{/each}
						</div>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Medidas de Segurança</span>
						</label>
						<div class="flex flex-wrap gap-2">
							{#each medidasSegurancaDisponiveis as medida}
								<label class="label cursor-pointer gap-2">
									<input
										type="checkbox"
										checked={medidasSeguranca.includes(medida)}
										onchange={() => (medidasSeguranca = toggleArrayItem(medidasSeguranca, medida))}
										class="checkbox checkbox-primary checkbox-sm"
									/>
									<span class="label-text text-sm">{medida}</span>
								</label>
							{/each}
						</div>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Prazo de Retenção (dias)</span>
						</label>
						<input type="number" bind:value={prazoRetencao} min="1" class="input input-bordered" />
					</div>

					<div class="form-control">
						<label class="label cursor-pointer justify-start gap-4">
							<input
								type="checkbox"
								bind:checked={compartilhamentoTerceiros}
								class="checkbox checkbox-primary"
							/>
							<span class="label-text font-semibold">Compartilhamento com Terceiros</span>
						</label>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Descrição</span>
						</label>
						<textarea
							bind:value={descricao}
							class="textarea textarea-bordered"
							rows="4"
							placeholder="Descrição detalhada do tratamento..."
						></textarea>
					</div>

					<div class="flex justify-end gap-4">
						<button onclick={() => (mostrarFormulario = false)} class="btn btn-ghost">
							Cancelar
						</button>
						<button onclick={salvar} disabled={carregando} class="btn btn-primary">
							{#if carregando}
								<span class="loading loading-spinner loading-sm"></span>
								Salvando...
							{:else}
								<Plus class="h-5 w-5" />
								Criar ROT
							{/if}
						</button>
					</div>
				</div>
			</div>
		</div>
	{/if}

	<!-- Lista de ROTs -->
	<div class="card bg-base-100 shadow-xl">
		<div class="card-body">
			<h2 class="card-title mb-4 text-2xl">Registros de Tratamento</h2>

			{#if registros === undefined}
				<div class="flex items-center justify-center py-20">
					<span class="loading loading-spinner loading-lg text-primary"></span>
				</div>
			{:else if registros.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">Nenhum registro de tratamento encontrado</p>
				</div>
			{:else}
				<div class="space-y-4">
					{#each registros as registro}
						<div class="border-base-300 rounded-lg border p-4">
							<div class="mb-3 flex items-start justify-between">
								<div class="flex-1">
									<div class="mb-2 flex items-center gap-3">
										<h3 class="text-lg font-semibold">{registro.finalidade}</h3>
										{#if registro.ativo}
											<span class="badge badge-success">Ativo</span>
										{:else}
											<span class="badge badge-error">Inativo</span>
										{/if}
									</div>

									<div class="text-base-content/70 space-y-2 text-sm">
										<div>
											<span class="font-semibold">Base Legal:</span>
											{registro.baseLegal}
										</div>
										<div>
											<span class="font-semibold">Categorias de Dados:</span>{' '}
											{registro.categoriasDados.join(', ')}
										</div>
										<div>
											<span class="font-semibold">Categorias de Titulares:</span>{' '}
											{registro.categoriasTitulares.join(', ')}
										</div>
										<div>
											<span class="font-semibold">Medidas de Segurança:</span>{' '}
											{registro.medidasSeguranca.join(', ')}
										</div>
										<div>
											<span class="font-semibold">Prazo de Retenção:</span>{' '}
											{registro.prazoRetencao} dias
										</div>
										<div>
											<span class="font-semibold">Compartilhamento:</span>{' '}
											{registro.compartilhamentoTerceiros ? 'Sim' : 'Não'}
										</div>
										{#if registro.terceiros && registro.terceiros.length > 0}
											<div>
												<span class="font-semibold">Terceiros:</span>{' '}
												{registro.terceiros.join(', ')}
											</div>
										{/if}
										<div>
											<span class="font-semibold">Responsável:</span>
											{registro.responsavelNome}
										</div>
										<div>
											<span class="font-semibold">Criado em:</span>{' '}
											{format(new Date(registro.criadoEm), 'dd/MM/yyyy', { locale: ptBR })}
										</div>
									</div>
								</div>
							</div>
						</div>
					{/each}
				</div>
			{/if}
		</div>
	</div>
</div>
