<script lang="ts">
	import { page } from '$app/stores';
	import { useConvexClient, useQuery } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import type { FunctionReference } from 'convex/server';
	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import { FileText } from 'lucide-svelte';

	const client = useConvexClient();
	const currentUser = useQuery(api.auth.getCurrentUser as FunctionReference<'query'>);

	const templateIdParam = $derived($page.params.id ?? '');

	// Query específica para buscar o template por ID
	const templateQuery = useQuery(api.templatesMensagens.obterTemplatePorId, () => {
		if (!templateIdParam) return 'skip';
		// Validar se o ID tem o formato correto do Convex
		if (typeof templateIdParam === 'string' && templateIdParam.length > 0) {
			return { templateId: templateIdParam as Id<'templatesMensagens'> };
		}
		return 'skip';
	});

	// Extrair template da query
	const template = $derived.by(() => {
		if (templateQuery === undefined || templateQuery === null) return null;
		// useQuery retorna os dados diretamente
		if (templateQuery && typeof templateQuery === 'object') {
			// Se tem propriedade data, usar ela
			if (
				'data' in templateQuery &&
				templateQuery.data !== undefined &&
				templateQuery.data !== null
			) {
				return templateQuery.data as Doc<'templatesMensagens'> | null;
			}
			// Caso contrário, assumir que é o próprio template
			if (!('data' in templateQuery)) {
				return templateQuery as Doc<'templatesMensagens'> | null;
			}
		}
		return null;
	});

	const carregandoTemplate = $derived(templateQuery === undefined || templateQuery === null);
	const erroTemplate = $derived.by(() => {
		if (templateQuery && typeof templateQuery === 'object' && 'error' in templateQuery) {
			return templateQuery.error as Error | string | null;
		}
		return null;
	});

	let nome = $state('');
	let titulo = $state('');
	let corpo = $state('');
	let categoria = $state<'email' | 'chat' | 'ambos'>('email');
	let variaveisTexto = $state('');
	let tagsTexto = $state('');
	let salvando = $state(false);
	let mensagem = $state<{
		tipo: 'success' | 'error' | 'info';
		texto: string;
	} | null>(null);

	$effect(() => {
		if (template) {
			nome = template.nome ?? '';
			titulo = template.titulo ?? '';
			corpo = template.corpo ?? '';
			categoria = (template.categoria as 'email' | 'chat' | 'ambos') ?? 'email';
			variaveisTexto = (template.variaveis ?? []).join(', ');
			tagsTexto = (template.tags ?? []).join(', ');
		}
	});

	function mostrarMensagem(tipo: 'success' | 'error' | 'info', texto: string) {
		mensagem = { tipo, texto };
		setTimeout(() => {
			mensagem = null;
		}, 5000);
	}

	function parseLista(input: string): string[] {
		return input
			.split(/[;,\n]/)
			.map((v) => v.trim())
			.filter((v) => v.length > 0);
	}

	async function salvar() {
		if (!template) {
			mostrarMensagem('error', 'Template não encontrado.');
			return;
		}
		if (!currentUser.data) {
			mostrarMensagem('error', 'Usuário não autenticado.');
			return;
		}
		if (!nome.trim() || !titulo.trim() || !corpo.trim()) {
			mostrarMensagem('error', 'Preencha todos os campos obrigatórios.');
			return;
		}

		const variaveis = parseLista(variaveisTexto);
		const tags = parseLista(tagsTexto);

		try {
			salvando = true;
			const resultado = await client.mutation(api.templatesMensagens.editarTemplate, {
				templateId: template._id,
				nome: nome.trim(),
				titulo: titulo.trim(),
				corpo: corpo.trim(),
				variaveis,
				categoria,
				tags,
				editadoPorId: currentUser.data._id
			});

			if (resultado.sucesso) {
				mostrarMensagem('success', 'Template atualizado com sucesso!');
				await goto(resolve('/ti/notificacoes/templates'));
			} else {
				mostrarMensagem('error', resultado.erro || 'Erro ao atualizar template.');
			}
		} catch (error) {
			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
			mostrarMensagem('error', `Erro ao atualizar template: ${erro}`);
		} finally {
			salvando = false;
		}
	}
</script>

<div class="container mx-auto max-w-4xl px-4 py-8">
	<div
		class="bg-base-100/80 border-base-200/60 space-y-6 rounded-2xl border p-6 shadow-xl backdrop-blur lg:p-8"
	>
		<div class="mb-4 flex items-center justify-between">
			<div class="flex items-center gap-4">
				<div class="from-info/15 via-primary/10 to-secondary/10 rounded-2xl bg-gradient-to-br p-3">
					<FileText class="text-info h-9 w-9" strokeWidth={2} />
				</div>
				<div>
					<h1 class="text-base-content text-3xl font-bold">Editar Template</h1>
					<p class="text-base-content/60 mt-1 text-sm lg:text-base">
						Ajuste o texto base usado em <span class="font-semibold">chat</span> e na versão HTML de
						<span class="font-semibold">email</span>. Templates de sistema podem ter restrições de
						edição.
					</p>
				</div>
			</div>
			<a href={resolve('/ti/notificacoes/templates')} class="btn btn-outline"> Voltar </a>
		</div>

		{#if carregandoTemplate}
			<div class="flex flex-col items-center justify-center gap-4 py-10">
				<span class="loading loading-spinner loading-lg"></span>
				<p class="text-base-content/60 text-sm">Carregando template...</p>
			</div>
		{:else if erroTemplate}
			<div class="alert alert-error">
				<span
					>Erro ao carregar template: {typeof erroTemplate === 'string'
						? erroTemplate
						: erroTemplate?.message || 'Erro desconhecido'}</span
				>
				<a href={resolve('/ti/notificacoes/templates')} class="btn btn-sm btn-outline">
					Voltar para Templates
				</a>
			</div>
		{:else if !template}
			<div class="alert alert-error">
				<span>Template não encontrado. Verifique se o ID está correto.</span>
				<div class="mt-2 text-xs opacity-70">ID: {templateIdParam}</div>
				<a href={resolve('/ti/notificacoes/templates')} class="btn btn-sm btn-outline mt-2">
					Voltar para Templates
				</a>
			</div>
		{:else}
			{#if mensagem}
				<div
					class="alert mb-4 shadow-lg"
					class:alert-success={mensagem.tipo === 'success'}
					class:alert-error={mensagem.tipo === 'error'}
					class:alert-info={mensagem.tipo === 'info'}
				>
					<span class="font-medium">{mensagem.texto}</span>
					<button
						type="button"
						class="btn btn-sm btn-circle btn-ghost"
						onclick={() => {
							mensagem = null;
						}}
					>
						✕
					</button>
				</div>
			{/if}

			<div class="card bg-base-100 border-base-200 border shadow-sm">
				<div class="card-body space-y-4">
					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
						<div class="form-control">
							<label class="label" for="nome">
								<span class="label-text font-medium">Nome *</span>
							</label>
							<input
								id="nome"
								type="text"
								bind:value={nome}
								class="input input-bordered"
								maxlength="100"
							/>
						</div>
						<div class="form-control">
							<label class="label" for="titulo">
								<span class="label-text font-medium">Título *</span>
							</label>
							<input
								id="titulo"
								type="text"
								bind:value={titulo}
								class="input input-bordered"
								maxlength="200"
							/>
						</div>
					</div>

					<div class="form-control">
						<label class="label" for="categoria">
							<span class="label-text font-medium">Categoria</span>
						</label>
						<select id="categoria" bind:value={categoria} class="select select-bordered max-w-xs">
							<option value="email">Email</option>
							<option value="chat">Chat</option>
							<option value="ambos">Ambos</option>
						</select>
						<label class="label">
							<span class="label-text-alt">
								<span class="font-semibold">Chat:</span> usa o texto puro do corpo.
								<span class="font-semibold">Email:</span> usa uma versão HTML profissional gerada automaticamente
								com cabeçalho e assinatura SGSE.
							</span>
						</label>
					</div>

					<div class="form-control">
						<label class="label" for="corpo">
							<span class="label-text font-medium">Corpo da Mensagem *</span>
						</label>
						<textarea
							id="corpo"
							bind:value={corpo}
							class="textarea textarea-bordered h-40"
							placeholder="Digite o conteúdo em TEXTO. Você pode usar &#123;&#123;variavel&#125;&#125; para valores dinâmicos."
						></textarea>
						<label class="label">
							<span class="label-text-alt">
								Este texto será usado diretamente nas mensagens de
								<span class="font-semibold">chat</span>. Para
								<span class="font-semibold">email</span>, o sistema gera automaticamente um layout
								HTML padronizado com logo e assinatura.
							</span>
						</label>
					</div>

					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
						<div class="form-control">
							<label class="label" for="variaveis">
								<span class="label-text font-medium">Variáveis (opcional)</span>
							</label>
							<input
								id="variaveis"
								type="text"
								bind:value={variaveisTexto}
								class="input input-bordered"
								placeholder="nome, data, valor"
							/>
							<label class="label" for="variaveis">
								<span class="label-text-alt">
									Liste as variáveis que podem ser usadas no corpo (separadas por vírgula ou ponto e
									vírgula).
								</span>
							</label>
						</div>
						<div class="form-control">
							<label class="label" for="tags">
								<span class="label-text font-medium">Tags (opcional)</span>
							</label>
							<input
								id="tags"
								type="text"
								bind:value={tagsTexto}
								class="input input-bordered"
								placeholder="avisos, chamados, rh"
							/>
						</div>
					</div>

					<div class="mt-6 flex justify-end gap-3">
						<a href={resolve('/ti/notificacoes/templates')} class="btn btn-ghost"> Cancelar </a>
						<button class="btn btn-primary" onclick={salvar} disabled={salvando}>
							{#if salvando}
								<span class="loading loading-spinner loading-sm"></span>
								Salvando...
							{:else}
								Salvar Alterações
							{/if}
						</button>
					</div>
				</div>
			</div>
		{/if}
	</div>
</div>
