<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,
		CheckCircle,
		Clock,
		XCircle,
		AlertCircle,
		Search,
		Filter,
		Upload,
		Download,
		User,
		Mail,
		Hash
	} from 'lucide-svelte';
	import { format } from 'date-fns';
	import { ptBR } from 'date-fns/locale';
	import { toast } from 'svelte-sonner';

	type StatusFiltro = '' | 'pendente' | 'em_analise' | 'concluida' | 'rejeitada';
	type TipoFiltro =
		| ''
		| 'acesso'
		| 'correcao'
		| 'exclusao'
		| 'portabilidade'
		| 'revogacao_consentimento'
		| 'informacao_compartilhamento';

	// '' = Todos (sem filtro)
	let statusFiltro = $state<StatusFiltro>('');
	let tipoFiltro = $state<TipoFiltro>('');
	let termoBusca = $state('');

	const client = useConvexClient();

	// Query reativa que atualiza quando os filtros mudam
	const solicitacoesQuery = $derived({
		status: statusFiltro || undefined,
		tipo: tipoFiltro || undefined
	});

	const solicitacoesQueryResult = useQuery(api.lgpd.listarSolicitacoes, solicitacoesQuery);
	const solicitacoes = $derived(solicitacoesQueryResult?.data || []);

	let solicitacaoSelecionada = $state<string | null>(null);
	let solicitacaoDetalhes = $derived(
		solicitacoesFiltradas.find((s) => s._id === solicitacaoSelecionada) || null
	);
	let resposta = $state('');
	let statusResposta = $state<'concluida' | 'rejeitada' | 'em_analise'>('concluida');
	let carregando = $state(false);
	let arquivoResposta = $state<File | null>(null);
	let uploadandoArquivo = $state(false);

	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' };
			default:
				return { label: status, class: 'badge-neutral' };
		}
	}

	function getTipoLabel(tipo: string) {
		const labels: Record<string, string> = {
			acesso: 'Acesso aos Dados',
			correcao: 'Correção de Dados',
			exclusao: 'Exclusão de Dados',
			portabilidade: 'Portabilidade dos Dados',
			revogacao_consentimento: 'Revogar Consentimento',
			informacao_compartilhamento: 'Informação sobre Compartilhamento'
		};
		return labels[tipo] || tipo;
	}

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

	function filtrarSolicitacoes() {
		// Verificar se solicitacoes existe e é um array
		if (!Array.isArray(solicitacoes) || solicitacoes.length === 0) return [];

		// Se não há termo de busca, retorna todas as solicitações
		if (!termoBusca || termoBusca.trim() === '') return solicitacoes;

		// Filtrar por termo de busca
		const busca = termoBusca.toLowerCase().trim();
		return solicitacoes.filter(
			(s) =>
				(s.usuarioNome?.toLowerCase().includes(busca) ?? false) ||
				(s.usuarioEmail?.toLowerCase().includes(busca) ?? false) ||
				(s.usuarioMatricula?.toLowerCase().includes(busca) ?? false) ||
				getTipoLabel(s.tipo).toLowerCase().includes(busca) ||
				getStatusBadge(s.status).label.toLowerCase().includes(busca)
		);
	}

	async function uploadArquivo(): Promise<Id<'_storage'> | null> {
		if (!arquivoResposta) return null;

		uploadandoArquivo = true;
		try {
			const storageId = await client.storage.store(arquivoResposta);
			return storageId;
		} catch (error) {
			console.error('Erro ao fazer upload do arquivo:', error);
			toast.error('Erro ao fazer upload do arquivo');
			return null;
		} finally {
			uploadandoArquivo = false;
		}
	}

	async function responder() {
		if (!solicitacaoSelecionada || !resposta.trim()) {
			toast.error('Preencha a resposta');
			return;
		}

		// Validações específicas por tipo
		const tipo = solicitacaoDetalhes?.tipo;
		if (tipo === 'portabilidade' && statusResposta === 'concluida' && !arquivoResposta) {
			toast.error('Para solicitações de portabilidade concluídas, é necessário anexar o arquivo com os dados');
			return;
		}

		carregando = true;

		try {
			// Fazer upload do arquivo se houver
			let arquivoStorageId: Id<'_storage'> | undefined = undefined;
			if (arquivoResposta) {
				const uploadedId = await uploadArquivo();
				if (uploadedId) {
					arquivoStorageId = uploadedId;
				} else {
					carregando = false;
					return;
				}
			}

			await client.mutation(api.lgpd.responderSolicitacao, {
				solicitacaoId: solicitacaoSelecionada as Id<'solicitacoesLGPD'>,
				resposta: resposta.trim(),
				status: statusResposta,
				arquivoResposta: arquivoStorageId
			});

			toast.success('Solicitação respondida com sucesso!');
			solicitacaoSelecionada = null;
			resposta = '';
			arquivoResposta = null;
		} catch (error: unknown) {
			const message = error instanceof Error ? error.message : 'Erro ao responder solicitação';
			toast.error(message);
		} finally {
			carregando = false;
		}
	}

	function getInstrucoesResposta(tipo: string): string {
		const instrucoes: Record<string, string> = {
			acesso: 'Informe quais dados pessoais estão sendo tratados e forneça acesso aos mesmos conforme solicitado.',
			correcao: 'Confirme as correções realizadas ou explique o motivo caso não seja possível corrigir.',
			exclusao: 'Confirme a exclusão dos dados ou explique o motivo caso não seja possível excluir (ex: obrigação legal de retenção).',
			portabilidade: 'Anexe o arquivo com os dados em formato estruturado e de uso comum (JSON, CSV, etc).',
			revogacao_consentimento: 'Confirme a revogação do consentimento e informe sobre as consequências (se houver).',
			informacao_compartilhamento: 'Informe com quais terceiros os dados são compartilhados e para quais finalidades.'
		};
		return instrucoes[tipo] || 'Forneça uma resposta clara e objetiva sobre a solicitação.';
	}

	const solicitacoesFiltradas = $derived(filtrarSolicitacoes());
</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">Gestão de Solicitações LGPD</h1>
				<p class="text-base-content/60 mt-1">
					Responda e gerencie solicitações de direitos dos titulares
				</p>
			</div>
		</div>
	</div>

	<!-- Filtros -->
	<div class="card bg-base-100 mb-6 shadow-xl">
		<div class="card-body">
			<div class="grid grid-cols-1 gap-4 md:grid-cols-4">
				<div class="form-control">
					<label class="label">
						<span class="label-text font-semibold">Status</span>
					</label>
					<select bind:value={statusFiltro} class="select select-bordered">
						<option value="">Todos</option>
						<option value="pendente">Pendente</option>
						<option value="em_analise">Em Análise</option>
						<option value="concluida">Concluída</option>
						<option value="rejeitada">Rejeitada</option>
					</select>
				</div>

				<div class="form-control">
					<label class="label">
						<span class="label-text font-semibold">Tipo</span>
					</label>
					<select bind:value={tipoFiltro} class="select select-bordered">
						<option value="">Todos</option>
						<option value="acesso">Acesso</option>
						<option value="correcao">Correção</option>
						<option value="exclusao">Exclusão</option>
						<option value="portabilidade">Portabilidade</option>
						<option value="revogacao_consentimento">Revogar Consentimento</option>
						<option value="informacao_compartilhamento">Informação Compartilhamento</option>
					</select>
				</div>

				<div class="form-control md:col-span-2">
					<label class="label">
						<span class="label-text font-semibold">Buscar</span>
					</label>
					<div class="relative">
						<Search
							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={termoBusca}
							placeholder="Buscar por nome, email ou matrícula..."
							class="input input-bordered w-full pl-10"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Lista de 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">Solicitações Recebidas</h2>
				{#if Array.isArray(solicitacoes) && solicitacoes.length > 0}
					<div class="badge badge-outline">
						Total: {solicitacoes.length} | Exibindo: {solicitacoesFiltradas.length}
					</div>
				{/if}
			</div>

			{#if solicitacoesQueryResult === undefined}
				<div class="flex items-center justify-center py-20">
					<span class="loading loading-spinner loading-lg text-primary"></span>
				</div>
			{:else if solicitacoes.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">
						{#if statusFiltro || tipoFiltro}
							Nenhuma solicitação encontrada com os filtros aplicados
						{:else}
							Nenhuma solicitação encontrada
						{/if}
					</p>
					{#if statusFiltro || tipoFiltro}
						<button
							onclick={() => {
								statusFiltro = null;
								tipoFiltro = null;
								termoBusca = '';
							}}
							class="btn btn-sm btn-outline mt-4"
						>
							Limpar Filtros
						</button>
					{/if}
				</div>
			{:else if solicitacoesFiltradas.length === 0 && termoBusca}
				<div class="py-10 text-center">
					<Search class="text-base-content/30 mx-auto mb-4 h-16 w-16" />
					<p class="text-base-content/60">
						Nenhuma solicitação encontrada com o termo "{termoBusca}"
					</p>
					<button onclick={() => (termoBusca = '')} class="btn btn-sm btn-outline mt-4">
						Limpar Busca
					</button>
				</div>
			{:else}
				<div class="space-y-4">
					{#each solicitacoesFiltradas 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-3 flex items-start justify-between">
								<div class="flex-1">
									<div class="mb-2 flex items-center gap-3">
										<StatusIcon class="text-base-content/60 h-5 w-5" />
										<h3 class="text-lg font-semibold">
											{getTipoLabel(solicitacao.tipo)}
										</h3>
										<span class="badge {statusInfo.class}">{statusInfo.label}</span>
									</div>

									<div class="text-base-content/70 space-y-2 text-sm">
										<div class="flex items-center gap-2">
											<User class="h-4 w-4 text-base-content/50" />
											<div>
												<span class="font-semibold">Solicitante:</span> {solicitacao.usuarioNome}
												{#if solicitacao.usuarioMatricula}
													<span class="text-base-content/50"> ({solicitacao.usuarioMatricula})</span>
												{/if}
											</div>
										</div>
										<div class="flex items-center gap-2">
											<Mail class="h-4 w-4 text-base-content/50" />
											<div>
												<span class="font-semibold">E-mail:</span> {solicitacao.usuarioEmail}
											</div>
										</div>
										{#if solicitacao.usuarioMatricula}
											<div class="flex items-center gap-2">
												<Hash class="h-4 w-4 text-base-content/50" />
												<div>
													<span class="font-semibold">Matrícula:</span> {solicitacao.usuarioMatricula}
												</div>
											</div>
										{/if}
										{#if solicitacao.dadosSolicitados}
											<div class="mt-2 rounded-lg bg-base-200 p-3">
												<p class="mb-1 text-xs font-semibold uppercase text-base-content/60">
													Dados Solicitados:
												</p>
												<p class="text-base-content/80 whitespace-pre-wrap text-sm">
													{solicitacao.dadosSolicitados}
												</p>
											</div>
										{/if}
										{#if solicitacao.observacoes}
											<div class="mt-2 rounded-lg bg-base-200 p-3">
												<p class="mb-1 text-xs font-semibold uppercase text-base-content/60">
													Observações do Solicitante:
												</p>
												<p class="text-base-content/80 whitespace-pre-wrap text-sm">
													{solicitacao.observacoes}
												</p>
											</div>
										{/if}
										{#if solicitacao.resposta}
											<div class="mt-2 rounded-lg bg-success/10 border border-success/20 p-3">
												<p class="mb-1 text-xs font-semibold uppercase text-success">Resposta:</p>
												<p class="text-base-content/80 whitespace-pre-wrap text-sm">
													{solicitacao.resposta}
												</p>
												{#if solicitacao.arquivoResposta}
													<div class="mt-2">
														<a
															href={solicitacao.arquivoResposta}
															target="_blank"
															class="btn btn-sm btn-outline btn-success gap-2"
														>
															<Download class="h-4 w-4" />
															Baixar Arquivo de Resposta
														</a>
													</div>
												{/if}
											</div>
										{/if}
										{#if solicitacao.consentimentoTermo}
											<div class="flex items-center gap-2">
												<span class="font-semibold">Termo de Consentimento:</span>
												<span class="badge badge-success badge-sm">Aceito</span>
												<span class="text-base-content/60 text-xs">
													(v.{solicitacao.consentimentoTermo.versao} em{' '}
													{format(new Date(solicitacao.consentimentoTermo.aceitoEm), 'dd/MM/yyyy', {
														locale: ptBR
													})})
												</span>
											</div>
										{:else}
											<div class="flex items-center gap-2">
												<span class="font-semibold">Termo de Consentimento:</span>
												<span class="badge badge-warning badge-sm">Não aceito</span>
											</div>
										{/if}
										<div>
											<span class="font-semibold">Criada em:</span>{' '}
											{format(new Date(solicitacao.criadoEm), "dd/MM/yyyy 'às' HH:mm", {
												locale: ptBR
											})}
										</div>
										{#if solicitacao.respondidoEm}
											<div>
												<span class="font-semibold">Respondida em:</span>{' '}
												{format(new Date(solicitacao.respondidoEm), "dd/MM/yyyy 'às' HH:mm", {
													locale: ptBR
												})}
											</div>
											{#if solicitacao.respondidoPorNome}
												<div>
													<span class="font-semibold">Respondida por:</span>{' '}
													{solicitacao.respondidoPorNome}
												</div>
											{/if}
										{/if}
										{#if solicitacao.status === 'pendente' || solicitacao.status === 'em_analise'}
											<div class="text-warning">
												<span class="font-semibold">Prazo:</span>{' '}
												{format(new Date(solicitacao.prazoResposta), 'dd/MM/yyyy', {
													locale: ptBR
												})}
											</div>
										{/if}
									</div>
								</div>

								{#if solicitacao.status === 'pendente' || solicitacao.status === 'em_analise'}
									<button
										onclick={() => (solicitacaoSelecionada = solicitacao._id)}
										class="btn btn-primary btn-sm"
									>
										Responder
									</button>
								{/if}
							</div>
						</div>
					{/each}
				</div>
			{/if}
		</div>
	</div>

	<!-- Modal de Resposta -->
	{#if solicitacaoSelecionada && solicitacaoDetalhes}
		<div class="modal modal-open">
			<div class="modal-box max-w-3xl max-h-[90vh] overflow-y-auto">
				<h3 class="mb-4 text-lg font-bold">Responder Solicitação</h3>

				<!-- Informações da Solicitação -->
				<div class="mb-6 rounded-lg bg-base-200 p-4">
					<div class="mb-3">
						<h4 class="mb-2 font-semibold">Tipo de Solicitação:</h4>
						<p class="text-base-content/80">{getTipoLabel(solicitacaoDetalhes.tipo)}</p>
					</div>
					<div class="mb-3">
						<h4 class="mb-2 font-semibold">Solicitante:</h4>
						<p class="text-base-content/80">
							{solicitacaoDetalhes.usuarioNome}
							{#if solicitacaoDetalhes.usuarioMatricula}
								<span class="text-base-content/50"> ({solicitacaoDetalhes.usuarioMatricula})</span>
							{/if}
						</p>
						<p class="text-base-content/60 text-sm">{solicitacaoDetalhes.usuarioEmail}</p>
					</div>
					{#if solicitacaoDetalhes.dadosSolicitados}
						<div class="mb-3">
							<h4 class="mb-2 font-semibold">Dados Solicitados:</h4>
							<p class="text-base-content/80 whitespace-pre-wrap text-sm">
								{solicitacaoDetalhes.dadosSolicitados}
							</p>
						</div>
					{/if}
					{#if solicitacaoDetalhes.observacoes}
						<div>
							<h4 class="mb-2 font-semibold">Observações:</h4>
							<p class="text-base-content/80 whitespace-pre-wrap text-sm">
								{solicitacaoDetalhes.observacoes}
							</p>
						</div>
					{/if}
				</div>

				<!-- Instruções -->
				<div class="alert alert-info mb-4">
					<AlertCircle class="h-5 w-5" />
					<div class="text-sm">
						<p class="font-semibold">Instruções:</p>
						<p>{getInstrucoesResposta(solicitacaoDetalhes.tipo)}</p>
					</div>
				</div>

				<div class="form-control mb-4">
					<label class="label">
						<span class="label-text font-semibold">Status da Resposta *</span>
					</label>
					<select bind:value={statusResposta} class="select select-bordered">
						<option value="concluida">Concluída</option>
						<option value="rejeitada">Rejeitada</option>
						<option value="em_analise">Em Análise</option>
					</select>
					<label class="label">
						<span class="label-text-alt text-base-content/60">
							{#if statusResposta === 'concluida'}
								A solicitação foi atendida com sucesso
							{:else if statusResposta === 'rejeitada'}
								A solicitação foi rejeitada (informe o motivo na resposta)
							{:else}
								A solicitação está em análise e será respondida posteriormente
							{/if}
						</span>
					</label>
				</div>

				<div class="form-control mb-4">
					<label class="label">
						<span class="label-text font-semibold">Resposta *</span>
					</label>
					<textarea
						bind:value={resposta}
						class="textarea textarea-bordered"
						placeholder="Digite a resposta para o solicitante..."
						rows="6"
					></textarea>
					<label class="label">
						<span class="label-text-alt text-base-content/60">
							Forneça uma resposta clara e objetiva conforme as regras da LGPD
						</span>
					</label>
				</div>

				<!-- Upload de Arquivo (obrigatório para portabilidade concluída) -->
				{#if solicitacaoDetalhes.tipo === 'portabilidade' || solicitacaoDetalhes.tipo === 'acesso'}
					<div class="form-control mb-4">
						<label class="label">
							<span class="label-text font-semibold">
								Arquivo de Resposta
								{#if solicitacaoDetalhes.tipo === 'portabilidade' && statusResposta === 'concluida'}
									<span class="text-error">*</span>
								{/if}
							</span>
						</label>
						<input
							type="file"
							accept=".json,.csv,.txt,.pdf"
							onchange={(e) => {
								const file = (e.target as HTMLInputElement).files?.[0];
								arquivoResposta = file || null;
							}}
							class="file-input file-input-bordered w-full"
						/>
						<label class="label">
							<span class="label-text-alt text-base-content/60">
								{#if solicitacaoDetalhes.tipo === 'portabilidade'}
									Para portabilidade, anexe o arquivo com os dados em formato estruturado (JSON, CSV,
									etc)
								{:else}
									Opcional: Anexe arquivo com informações adicionais ou dados exportados
								{/if}
							</span>
						</label>
						{#if arquivoResposta}
							<div class="mt-2 flex items-center gap-2">
								<FileText class="h-4 w-4 text-base-content/60" />
								<span class="text-sm text-base-content/80">{arquivoResposta.name}</span>
								<button
									type="button"
									onclick={() => (arquivoResposta = null)}
									class="btn btn-xs btn-ghost"
								>
									Remover
								</button>
							</div>
						{/if}
					</div>
				{/if}

				<div class="modal-action">
					<button
						onclick={() => {
							solicitacaoSelecionada = null;
							resposta = '';
							arquivoResposta = null;
						}}
						class="btn btn-ghost"
						disabled={carregando}
					>
						Cancelar
					</button>
					<button
						onclick={responder}
						disabled={!resposta.trim() || carregando || uploadandoArquivo}
						class="btn btn-primary gap-2"
					>
						{#if carregando || uploadandoArquivo}
							<span class="loading loading-spinner loading-sm"></span>
							{uploadandoArquivo ? 'Enviando arquivo...' : 'Enviando...'}
						{:else}
							Enviar Resposta
						{/if}
					</button>
				</div>
			</div>
			<div
				class="modal-backdrop"
				onclick={() => {
					if (!carregando) {
						solicitacaoSelecionada = null;
						resposta = '';
						arquivoResposta = null;
					}
				}}
			></div>
		</div>
	{/if}
</div>
