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

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

	// Queries
	const templatesQuery = useQuery(api.templatesMensagens.listarTemplates, {});

	const templates = $derived.by(() => {
		if (templatesQuery === undefined || templatesQuery === null) {
			return [];
		}
		if ('data' in templatesQuery && templatesQuery.data !== undefined) {
			return Array.isArray(templatesQuery.data) ? templatesQuery.data : [];
		}
		if (Array.isArray(templatesQuery)) {
			return templatesQuery;
		}
		return [];
	});

	// Estados
	let templateEditando = $state<Doc<'templatesMensagens'> | null>(null);
	let modalAberto = $state(false);
	let filtroCategoria = $state<'todos' | 'email' | 'chat' | 'ambos'>('todos');
	let buscaTexto = $state('');
	let processando = $state(false);
	let mensagem = $state<{ tipo: 'success' | 'error' | 'info'; texto: string } | null>(null);

	// Filtrar templates
	const templatesFiltrados = $derived.by(() => {
		let filtrados = templates;

		// Filtro por categoria
		if (filtroCategoria !== 'todos') {
			filtrados = filtrados.filter((t) => t.categoria === filtroCategoria);
		}

		// Filtro por busca
		if (buscaTexto.trim()) {
			const busca = buscaTexto.toLowerCase();
			filtrados = filtrados.filter(
				(t) =>
					t.nome.toLowerCase().includes(busca) ||
					t.codigo.toLowerCase().includes(busca) ||
					t.titulo.toLowerCase().includes(busca)
			);
		}

		return filtrados;
	});

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

	async function excluirTemplate(templateId: Id<'templatesMensagens'>) {
		if (!currentUser.data) return;
		if (!confirm('Tem certeza que deseja excluir este template?')) return;

		try {
			processando = true;
			const resultado = await client.mutation(api.templatesMensagens.excluirTemplate, {
				templateId,
				excluidoPorId: currentUser.data._id
			});

			if (resultado.sucesso) {
				mostrarMensagem('success', 'Template excluído com sucesso!');
			} else {
				mostrarMensagem('error', resultado.erro || 'Erro ao excluir template');
			}
		} catch (error) {
			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
			mostrarMensagem('error', `Erro ao excluir template: ${erro}`);
		} finally {
			processando = false;
		}
	}

	function abrirModalEdicao(template: Doc<'templatesMensagens'>) {
		templateEditando = template;
		modalAberto = true;
	}

	function fecharModal() {
		modalAberto = false;
		templateEditando = null;
	}
</script>

<div class="container mx-auto max-w-7xl 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"
	>
		<!-- Header -->
		<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg: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">
					<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">Gerenciar Templates</h1>
					<p class="text-base-content/60 mt-1 text-sm lg:text-base">
						Crie, edite e organize templates de <span class="font-semibold">chat</span> (texto puro)
						e
						<span class="font-semibold">email HTML padronizado</span> usados em todas as notificações
						do SGSE.
					</p>
				</div>
			</div>
			<a href="/ti/notificacoes" class="btn btn-outline gap-2">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-5 w-5"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M10 19l-7-7m0 0l7-7m-7 7h18"
					/>
				</svg>
				Voltar para Notificações
			</a>
		</div>

		<!-- Mensagens de Feedback -->
		{#if mensagem}
			<div
				class="alert 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}

		<!-- Filtros e Busca -->
		<div class="card bg-base-100 border-base-200 border shadow-sm">
			<div class="card-body">
				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
					<div class="form-control">
						<label class="label">
							<span class="label-text font-medium">Buscar</span>
						</label>
						<input
							type="text"
							bind:value={buscaTexto}
							placeholder="Buscar por nome, código ou título..."
							class="input input-bordered"
						/>
					</div>
					<div class="form-control">
						<label class="label">
							<span class="label-text font-medium">Categoria</span>
						</label>
						<select bind:value={filtroCategoria} class="select select-bordered">
							<option value="todos">Todas</option>
							<option value="email">Email</option>
							<option value="chat">Chat</option>
							<option value="ambos">Ambos</option>
						</select>
					</div>
				</div>
			</div>
		</div>

		<!-- Lista de Templates -->
		<div class="card bg-base-100 border-base-200 border shadow-sm">
			<div class="card-body">
				<div class="mb-4 flex items-center justify-between">
					<h2 class="card-title">Templates ({templatesFiltrados.length})</h2>
					<a href={resolve('/ti/notificacoes/templates/novo')} class="btn btn-primary gap-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="h-5 w-5"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M12 4v16m8-8H4"
							/>
						</svg>
						Novo Template
					</a>
				</div>

				{#if templatesFiltrados.length === 0}
					<div class="py-10 text-center">
						<p class="text-base-content/60">Nenhum template encontrado.</p>
					</div>
				{:else}
					<div class="overflow-x-auto">
						<table class="table-zebra table">
							<thead>
								<tr>
									<th>Código</th>
									<th>Nome</th>
									<th>Tipo</th>
									<th>Categoria</th>
									<th>Variáveis</th>
									<th>Ações</th>
								</tr>
							</thead>
							<tbody>
								{#each templatesFiltrados as template (template._id)}
									<tr>
										<td>
											<code class="badge badge-ghost">{template.codigo}</code>
										</td>
										<td>
											<div class="font-medium">{template.nome}</div>
											<div class="text-base-content/60 text-sm">{template.titulo}</div>
										</td>
										<td>
											{#if template.tipo === 'sistema'}
												<span class="badge badge-info">Sistema</span>
											{:else}
												<span class="badge badge-success">Customizado</span>
											{/if}
										</td>
										<td>
											{#if template.categoria}
												<span class="badge badge-outline">{template.categoria}</span>
											{:else}
												<span class="badge badge-ghost">-</span>
											{/if}
										</td>
										<td>
											{#if template.variaveis && template.variaveis.length > 0}
												<div class="flex flex-wrap gap-1">
													{#each template.variaveis.slice(0, 3) as variavel}
														<span class="badge badge-sm">{{ variavel }}</span>
													{/each}
													{#if template.variaveis.length > 3}
														<span class="badge badge-sm">+{template.variaveis.length - 3}</span>
													{/if}
												</div>
											{:else}
												<span class="text-base-content/40">-</span>
											{/if}
										</td>
										<td>
											<div class="flex gap-2">
												<a
													href={resolve(`/ti/notificacoes/templates/${template._id}`)}
													class="btn btn-sm btn-ghost"
													title="Editar"
												>
													<svg
														xmlns="http://www.w3.org/2000/svg"
														class="h-4 w-4"
														fill="none"
														viewBox="0 0 24 24"
														stroke="currentColor"
													>
														<path
															stroke-linecap="round"
															stroke-linejoin="round"
															stroke-width="2"
															d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
														/>
													</svg>
												</a>
												{#if template.tipo === 'customizado'}
													<button
														type="button"
														class="btn btn-sm btn-ghost text-error"
														onclick={() => excluirTemplate(template._id)}
														disabled={processando}
														title="Excluir"
													>
														<svg
															xmlns="http://www.w3.org/2000/svg"
															class="h-4 w-4"
															fill="none"
															viewBox="0 0 24 24"
															stroke="currentColor"
														>
															<path
																stroke-linecap="round"
																stroke-linejoin="round"
																stroke-width="2"
																d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
															/>
														</svg>
													</button>
												{/if}
											</div>
										</td>
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				{/if}
			</div>
		</div>
	</div>
</div>
