<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,
		Save,
		Mail,
		Phone,
		User,
		Calendar,
		ToggleLeft,
		ToggleRight
	} from 'lucide-svelte';
	import { toast } from 'svelte-sonner';

	const client = useConvexClient();
	const config = useQuery(api.lgpd.obterConfiguracaoLGPD, {});

	let encarregadoNome = $state('');
	let encarregadoEmail = $state('');
	let encarregadoTelefone = $state('');
	let encarregadoHorarioAtendimento = $state('Segunda a Sexta, das 8h às 17h');
	let prazoRespostaPadrao = $state(15);
	let diasAlertaVencimento = $state(3);
	let termoObrigatorio = $state(false);
	let versaoTermoAtual = $state('1.0');
	let carregando = $state(false);

	// Sincronizar com query
	$effect(() => {
		if (config?.data) {
			encarregadoNome = config.data.encarregadoNome || '';
			encarregadoEmail = config.data.encarregadoEmail || '';
			encarregadoTelefone = config.data.encarregadoTelefone || '';
			encarregadoHorarioAtendimento =
				config.data.encarregadoHorarioAtendimento || 'Segunda a Sexta, das 8h às 17h';
			prazoRespostaPadrao = config.data.prazoRespostaPadrao;
			diasAlertaVencimento = config.data.diasAlertaVencimento;
			termoObrigatorio = config.data.termoObrigatorio;
			versaoTermoAtual = config.data.versaoTermoAtual;
		}
	});

	async function salvar() {
		carregando = true;

		try {
			await client.mutation(api.lgpd.atualizarConfiguracaoLGPD, {
				encarregadoNome: encarregadoNome || undefined,
				encarregadoEmail: encarregadoEmail || undefined,
				encarregadoTelefone: encarregadoTelefone || undefined,
				encarregadoHorarioAtendimento: encarregadoHorarioAtendimento || undefined,
				prazoRespostaPadrao,
				diasAlertaVencimento,
				termoObrigatorio,
				versaoTermoAtual: versaoTermoAtual || '1.0'
			});

			toast.success('Configurações salvas com sucesso!');
		} catch (error: unknown) {
			const message = error instanceof Error ? error.message : 'Erro ao salvar configurações';
			toast.error(message);
		} finally {
			carregando = false;
		}
	}
</script>

<div class="container mx-auto max-w-4xl 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">Configurações LGPD</h1>
				<p class="text-base-content/60 mt-1">Configure as definições de proteção de dados</p>
			</div>
		</div>
	</div>

	{#if config === undefined}
		<div class="flex items-center justify-center py-20">
			<span class="loading loading-spinner loading-lg text-primary"></span>
		</div>
	{:else}
		<!-- Encarregado de Dados -->
		<div class="card bg-base-100 mb-6 shadow-xl">
			<div class="card-body">
				<h2 class="card-title mb-4 text-2xl">Encarregado de Proteção de Dados (DPO)</h2>
				<p class="text-base-content/60 mb-6">
					Configure os dados de contato do Encarregado de Proteção de Dados, responsável por atender
					solicitações e questões relacionadas à LGPD.
				</p>

				<div class="space-y-4">
					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Nome do Encarregado</span>
						</label>
						<div class="relative">
							<User
								class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
							/>
							<input
								type="text"
								bind:value={encarregadoNome}
								placeholder="Nome completo do Encarregado"
								class="input input-bordered w-full pl-10"
							/>
						</div>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">E-mail</span>
						</label>
						<div class="relative">
							<Mail
								class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
							/>
							<input
								type="email"
								bind:value={encarregadoEmail}
								placeholder="lgpd@esportes.pe.gov.br"
								class="input input-bordered w-full pl-10"
							/>
						</div>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Telefone</span>
						</label>
						<div class="relative">
							<Phone
								class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
							/>
							<input
								type="text"
								bind:value={encarregadoTelefone}
								placeholder="(81) 3184-XXXX"
								class="input input-bordered w-full pl-10"
							/>
						</div>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Horário de Atendimento</span>
						</label>
						<div class="relative">
							<Calendar
								class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
							/>
							<input
								type="text"
								bind:value={encarregadoHorarioAtendimento}
								placeholder="Segunda a Sexta, das 8h às 17h"
								class="input input-bordered w-full pl-10"
							/>
						</div>
						<label class="label">
							<span class="label-text-alt text-base-content/60">
								Horário de atendimento do Encarregado de Dados
							</span>
						</label>
					</div>
				</div>
			</div>
		</div>

		<!-- Configurações de Termo de Consentimento -->
		<div class="card bg-base-100 mb-6 shadow-xl">
			<div class="card-body">
				<h2 class="card-title mb-4 text-2xl">Termo de Consentimento</h2>
				<p class="text-base-content/60 mb-6">
					Configure se o termo de consentimento é obrigatório para acesso ao sistema.
				</p>

				<div class="space-y-4">
					<div class="form-control">
						<label class="label cursor-pointer justify-start gap-4">
							<input
								type="checkbox"
								bind:checked={termoObrigatorio}
								class="checkbox checkbox-primary"
							/>
							<div>
								<span class="label-text font-semibold">Termo de Consentimento Obrigatório</span>
								<p class="text-base-content/60 text-sm">
									Quando habilitado, os usuários precisam aceitar o termo de consentimento antes de
									acessar o sistema.
								</p>
							</div>
						</label>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Versão Atual do Termo</span>
						</label>
						<input
							type="text"
							bind:value={versaoTermoAtual}
							placeholder="1.0"
							class="input input-bordered"
						/>
						<label class="label">
							<span class="label-text-alt text-base-content/60">
								Versão do termo de consentimento atual. Ao alterar, usuários precisarão aceitar
								novamente.
							</span>
						</label>
					</div>
				</div>
			</div>
		</div>

		<!-- Configurações de Prazos -->
		<div class="card bg-base-100 mb-6 shadow-xl">
			<div class="card-body">
				<h2 class="card-title mb-4 text-2xl">Configurações de Prazos</h2>
				<p class="text-base-content/60 mb-6">
					Configure os prazos para resposta de solicitações e alertas de vencimento.
				</p>

				<div class="space-y-4">
					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Prazo Padrão para Resposta (dias)</span>
						</label>
						<div class="relative">
							<Calendar
								class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
							/>
							<input
								type="number"
								bind:value={prazoRespostaPadrao}
								min="1"
								max="30"
								class="input input-bordered w-full pl-10"
							/>
						</div>
						<label class="label">
							<span class="label-text-alt text-base-content/60">
								Prazo legal conforme LGPD: 15 dias (recomendado)
							</span>
						</label>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Dias para Alerta de Vencimento</span>
						</label>
						<div class="relative">
							<Calendar
								class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
							/>
							<input
								type="number"
								bind:value={diasAlertaVencimento}
								min="1"
								max="10"
								class="input input-bordered w-full pl-10"
							/>
						</div>
						<label class="label">
							<span class="label-text-alt text-base-content/60">
								Dias antes do prazo para enviar alerta (padrão: 3 dias)
							</span>
						</label>
					</div>
				</div>
			</div>
		</div>

		<!-- Botão Salvar -->
		<div class="flex justify-end gap-4">
			<a href={resolve('/ti/lgpd')} class="btn btn-ghost btn-lg">Cancelar</a>
			<button onclick={salvar} disabled={carregando} class="btn btn-primary btn-lg">
				{#if carregando}
					<span class="loading loading-spinner loading-sm"></span>
					Salvando...
				{:else}
					<Save class="h-5 w-5" />
					Salvar Configurações
				{/if}
			</button>
		</div>
	{/if}
</div>
