<script lang="ts">
	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 type { FunctionReference } from 'convex/server';
	import { Mail, CheckCircle, XCircle, AlertTriangle, Save, Info } from 'lucide-svelte';

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

	let servidor = $state('');
	let porta = $state(587);
	let usuario = $state('');
	let senha = $state('');
	let emailRemetente = $state('');
	let nomeRemetente = $state('');
	let usarSSL = $state(false);
	let usarTLS = $state(true);
	let processando = $state(false);
	let testando = $state(false);
	let mensagem = $state<{ tipo: 'success' | 'error'; texto: string } | null>(null);

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

	let dataLoaded = $state(false);

	// Carregar config existente apenas uma vez
	$effect(() => {
		if (configAtual?.data && !dataLoaded) {
			servidor = configAtual.data.servidor || '';
			porta = configAtual.data.porta || 587;
			usuario = configAtual.data.usuario || '';
			emailRemetente = configAtual.data.emailRemetente || '';
			nomeRemetente = configAtual.data.nomeRemetente || '';
			usarSSL = configAtual.data.usarSSL || false;
			usarTLS = configAtual.data.usarTLS || true;
			dataLoaded = true;
		}
	});

	function toggleSSL() {
		usarSSL = !usarSSL;
		if (usarSSL) {
			usarTLS = false;
		}
	}

	function toggleTLS() {
		usarTLS = !usarTLS;
		if (usarTLS) {
			usarSSL = false;
		}
	}

	async function salvarConfiguracao() {
		// Validação de campos obrigatórios
		if (
			!servidor?.trim() ||
			!porta ||
			!usuario?.trim() ||
			!emailRemetente?.trim() ||
			!nomeRemetente?.trim()
		) {
			mostrarMensagem('error', 'Preencha todos os campos obrigatórios');
			return;
		}

		// Validação de porta (1-65535)
		const portaNum = Number(porta);
		if (isNaN(portaNum) || portaNum < 1 || portaNum > 65535) {
			mostrarMensagem('error', 'Porta deve ser um número entre 1 e 65535');
			return;
		}

		// Validação de formato de email
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		if (!emailRegex.test(emailRemetente.trim())) {
			mostrarMensagem('error', 'Email remetente inválido');
			return;
		}

		// Validação de senha: obrigatória apenas se não houver configuração existente
		const temConfigExistente = configAtual?.data?.ativo;
		if (!temConfigExistente && !senha) {
			mostrarMensagem('error', 'Senha é obrigatória para nova configuração');
			return;
		}

		if (!currentUser?.data) {
			mostrarMensagem('error', 'Usuário não autenticado');
			return;
		}

		processando = true;
		try {
			const resultado = await client.mutation(api.configuracaoEmail.salvarConfigEmail, {
				servidor: servidor.trim(),
				porta: portaNum,
				usuario: usuario.trim(),
				senha: senha || '', // Senha vazia será tratada no backend
				emailRemetente: emailRemetente.trim(),
				nomeRemetente: nomeRemetente.trim(),
				usarSSL,
				usarTLS,
				configuradoPorId: currentUser.data._id as Id<'usuarios'>
			});

			if (resultado.sucesso) {
				mostrarMensagem('success', 'Configuração salva com sucesso!');
				senha = ''; // Limpar senha
			} else {
				mostrarMensagem('error', resultado.erro);
			}
		} catch (error) {
			if (error instanceof Error) {
				console.error('Erro ao salvar configuração:', error);
				mostrarMensagem('error', error.message || 'Erro ao salvar configuração');
			}
		} finally {
			processando = false;
		}
	}

	async function testarConexao() {
		if (!servidor?.trim() || !porta || !usuario?.trim() || !senha) {
			mostrarMensagem('error', 'Preencha os dados de conexão antes de testar');
			return;
		}

		// Validação de porta
		const portaNum = Number(porta);
		if (isNaN(portaNum) || portaNum < 1 || portaNum > 65535) {
			mostrarMensagem('error', 'Porta deve ser um número entre 1 e 65535');
			return;
		}

		testando = true;
		try {
			const resultado = await client.action(api.configuracaoEmail.testarConexaoSMTP, {
				servidor: servidor.trim(),
				porta: portaNum,
				usuario: usuario.trim(),
				senha: senha,
				usarSSL,
				usarTLS
			});

			if (resultado.sucesso) {
				mostrarMensagem('success', 'Conexão testada com sucesso! Servidor SMTP está respondendo.');
			} else {
				mostrarMensagem('error', `Erro ao testar conexão: ${resultado.erro}`);
			}
		} catch (error) {
			if (error instanceof Error) {
				console.error('Erro ao testar conexão:', error);
				mostrarMensagem('error', error.message || 'Erro ao conectar com o servidor SMTP');
			}
		} finally {
			testando = false;
		}
	}

	const statusConfig = $derived(configAtual?.data?.ativo ? 'Configurado' : 'Não configurado');

	const isLoading = $derived(configAtual === undefined);
</script>

<div class="container mx-auto max-w-4xl px-4 py-6">
	<!-- Header -->
	<div class="mb-6 flex items-center justify-between">
		<div class="flex items-center gap-4">
			<div class="bg-secondary/10 rounded-xl p-3">
				<Mail class="text-secondary h-8 w-8" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-base-content text-3xl font-bold">Configurações de Email (SMTP)</h1>
				<p class="text-base-content/60 mt-1">
					Configurar servidor de email para envio de notificações
				</p>
			</div>
		</div>
	</div>

	<!-- Mensagens -->
	{#if mensagem}
		<div
			class="alert mb-6"
			class:alert-success={mensagem.tipo === 'success'}
			class:alert-error={mensagem.tipo === 'error'}
		>
			{#if mensagem.tipo === 'success'}
				<CheckCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
			{:else}
				<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
			{/if}
			<span>{mensagem.texto}</span>
		</div>
	{/if}

	<!-- Loading State -->
	{#if isLoading}
		<div class="alert alert-info mb-6">
			<span class="loading loading-spinner loading-sm"></span>
			<span>Carregando configurações...</span>
		</div>
	{/if}

	<!-- Status -->
	{#if !isLoading}
		<div class="alert {configAtual?.data?.ativo ? 'alert-success' : 'alert-warning'} mb-6">
			{#if configAtual?.data?.ativo}
				<CheckCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
			{:else}
				<AlertTriangle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
			{/if}
			<span>
				<strong>Status:</strong>
				{statusConfig}
				{#if configAtual?.data?.testadoEm}
					- Última conexão testada em {new Date(configAtual.data.testadoEm).toLocaleString('pt-BR')}
				{/if}
			</span>
		</div>
	{/if}

	<!-- Formulário -->
	{#if !isLoading}
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<h2 class="card-title mb-4">Dados do Servidor SMTP</h2>

				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
					<!-- Servidor -->
					<div class="form-control md:col-span-1">
						<label class="label" for="smtp-servidor">
							<span class="label-text font-medium">Servidor SMTP *</span>
						</label>
						<input
							id="smtp-servidor"
							type="text"
							bind:value={servidor}
							placeholder="smtp.exemplo.com"
							class="input input-bordered"
						/>
						<div class="label">
							<span class="label-text-alt">Ex: smtp.gmail.com, smtp.office365.com</span>
						</div>
					</div>

					<!-- Porta -->
					<div class="form-control">
						<label class="label" for="smtp-porta">
							<span class="label-text font-medium">Porta *</span>
						</label>
						<input
							id="smtp-porta"
							type="number"
							bind:value={porta}
							placeholder="587"
							class="input input-bordered"
						/>
						<div class="label">
							<span class="label-text-alt">Comum: 587 (TLS), 465 (SSL), 25</span>
						</div>
					</div>

					<!-- Usuário -->
					<div class="form-control">
						<label class="label" for="smtp-usuario">
							<span class="label-text font-medium">Usuário/Email *</span>
						</label>
						<input
							id="smtp-usuario"
							type="text"
							bind:value={usuario}
							placeholder="usuario@exemplo.com"
							class="input input-bordered"
						/>
					</div>

					<!-- Senha -->
					<div class="form-control">
						<label class="label" for="smtp-senha">
							<span class="label-text font-medium">Senha *</span>
						</label>
						<input
							id="smtp-senha"
							type="password"
							bind:value={senha}
							placeholder="••••••••"
							class="input input-bordered"
						/>
						<div class="label">
							<span class="label-text-alt text-warning">
								{#if configAtual?.data?.ativo}
									Deixe em branco para manter a senha atual
								{:else}
									Digite a senha da conta de email
								{/if}
							</span>
						</div>
					</div>

					<!-- Email Remetente -->
					<div class="form-control">
						<label class="label" for="smtp-email-remetente">
							<span class="label-text font-medium">Email Remetente *</span>
						</label>
						<input
							id="smtp-email-remetente"
							type="email"
							bind:value={emailRemetente}
							placeholder="noreply@sgse.pe.gov.br"
							class="input input-bordered"
						/>
					</div>

					<!-- Nome Remetente -->
					<div class="form-control">
						<label class="label" for="smtp-nome-remetente">
							<span class="label-text font-medium">Nome Remetente *</span>
						</label>
						<input
							id="smtp-nome-remetente"
							type="text"
							bind:value={nomeRemetente}
							placeholder="SGSE - Sistema de Gerenciamento de Secretaria"
							class="input input-bordered"
						/>
					</div>
				</div>

				<!-- Opções de Segurança -->
				<div class="divider"></div>
				<h3 class="mb-2 font-bold">Configurações de Segurança</h3>

				<div class="flex flex-wrap gap-6">
					<div class="form-control">
						<label class="label cursor-pointer gap-3">
							<input
								type="checkbox"
								checked={usarSSL}
								onchange={toggleSSL}
								class="checkbox checkbox-primary"
							/>
							<span class="label-text">Usar SSL (porta 465)</span>
						</label>
					</div>

					<div class="form-control">
						<label class="label cursor-pointer gap-3">
							<input
								type="checkbox"
								checked={usarTLS}
								onchange={toggleTLS}
								class="checkbox checkbox-primary"
							/>
							<span class="label-text">Usar TLS (porta 587)</span>
						</label>
					</div>
				</div>

				<!-- Ações -->
				<div class="card-actions mt-6 justify-end gap-3">
					<button
						class="btn btn-outline btn-info"
						onclick={testarConexao}
						disabled={testando || processando}
					>
					{#if testando}
						<span class="loading loading-spinner loading-sm"></span>
					{:else}
						<CheckCircle class="h-5 w-5" strokeWidth={2} />
					{/if}
					Testar Conexão
					</button>

					<button
						class="btn btn-primary"
						onclick={salvarConfiguracao}
						disabled={processando || testando}
					>
					{#if processando}
						<span class="loading loading-spinner loading-sm"></span>
					{:else}
						<Save class="h-5 w-5" strokeWidth={2} />
					{/if}
					Salvar Configuração
					</button>
				</div>
			</div>
		</div>
	{/if}

	<!-- Exemplos Comuns -->
	<div class="card bg-base-100 mt-6 shadow-xl">
		<div class="card-body">
			<h2 class="card-title mb-4">Exemplos de Configuração</h2>

			<div class="overflow-x-auto">
				<table class="table-sm table">
					<thead>
						<tr>
							<th>Provedor</th>
							<th>Servidor</th>
							<th>Porta</th>
							<th>Segurança</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><strong>Gmail</strong></td>
							<td>smtp.gmail.com</td>
							<td>587</td>
							<td>TLS</td>
						</tr>
						<tr>
							<td><strong>Outlook/Office365</strong></td>
							<td>smtp.office365.com</td>
							<td>587</td>
							<td>TLS</td>
						</tr>
						<tr>
							<td><strong>Yahoo</strong></td>
							<td>smtp.mail.yahoo.com</td>
							<td>465</td>
							<td>SSL</td>
						</tr>
						<tr>
							<td><strong>SendGrid</strong></td>
							<td>smtp.sendgrid.net</td>
							<td>587</td>
							<td>TLS</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<!-- Avisos -->
	<div class="alert alert-info mt-6">
		<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
		<div>
			<p>
				<strong>Dica de Segurança:</strong> Para Gmail e outros provedores, você pode precisar gerar
				uma "senha de app" específica em vez de usar sua senha principal.
			</p>
			<p class="mt-1 text-sm">
				Gmail: Conta Google → Segurança → Verificação em duas etapas → Senhas de app
			</p>
		</div>
	</div>
</div>
