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

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

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

	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 (!currentUser.data) {
			mostrarMensagem('error', 'Usuário não autenticado.');
			return;
		}

		if (!codigo.trim() || !nome.trim() || !titulo.trim() || !corpo.trim()) {
			mostrarMensagem('error', 'Preencha todos os campos obrigatórios.');
			return;
		}

		const codigoNormalizado = codigo.trim().toUpperCase().replace(/\s+/g, '_');
		const variaveis = parseLista(variaveisTexto);
		const tags = parseLista(tagsTexto);

		try {
			criando = true;
			const resultado = await client.mutation(api.templatesMensagens.criarTemplate, {
				codigo: codigoNormalizado,
				nome: nome.trim(),
				titulo: titulo.trim(),
				corpo: corpo.trim(),
				variaveis,
				categoria,
				tags,
				criadoPorId: currentUser.data._id as Id<'usuarios'>
			});

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

<div class="container mx-auto max-w-4xl px-4 py-8">
	<div
		class="rounded-2xl bg-base-100/80 shadow-xl border border-base-200/60 p-6 lg:p-8 space-y-6 backdrop-blur"
	>
		<div class="mb-4 flex items-center justify-between">
			<div class="flex items-center gap-4">
				<div class="bg-gradient-to-br from-info/15 via-primary/10 to-secondary/10 rounded-2xl p-3">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="text-info h-9 w-9"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
						/>
					</svg>
				</div>
				<div>
					<h1 class="text-base-content text-3xl font-bold">Novo Template</h1>
					<p class="text-base-content/60 mt-1 text-sm lg:text-base">
						Defina o texto base que será usado em <span class="font-semibold">chat</span> e na versão
						HTML de <span class="font-semibold">email</span> com o estilo padrão do SGSE.
					</p>
				</div>
			</div>
			<a href={resolve('/ti/notificacoes/templates')} class="btn btn-outline"> Voltar </a>
		</div>

		{#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 shadow-sm border border-base-200">
			<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="codigo">
						<span class="label-text font-medium">Código *</span>
						<span class="label-text-alt">Ex: AVISO_IMPORTANTE</span>
					</label>
					<input
						id="codigo"
						type="text"
						bind:value={codigo}
						class="input input-bordered"
						maxlength="50"
					/>
				</div>
				<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>

			<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 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={criando}>
					{#if criando}
						<span class="loading loading-spinner loading-sm"></span>
						Salvando...
					{:else}
						Salvar Template
					{/if}
				</button>
			</div>
		</div>
	</div>
</div>
