<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';
	import { FileText, ArrowLeft, Plus, Edit, Trash2, X } from 'lucide-svelte';

	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">
					<FileText class="text-info h-9 w-9" strokeWidth={2} />
				</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">
				<ArrowLeft class="h-5 w-5" strokeWidth={2} />
				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)}
				>
					<X class="h-4 w-4" strokeWidth={2} />
				</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">
						<Plus class="h-5 w-5" strokeWidth={2} />
						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"
												>
													<Edit class="h-4 w-4" strokeWidth={2} />
												</a>
												{#if template.tipo === 'customizado'}
													<button
														type="button"
														class="btn btn-sm btn-ghost text-error"
														onclick={() => excluirTemplate(template._id)}
														disabled={processando}
														title="Excluir"
													>
														<Trash2 class="h-4 w-4" strokeWidth={2} />
													</button>
												{/if}
											</div>
										</td>
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				{/if}
			</div>
		</div>
	</div>
</div>
