nettown_frontend/src/routes/(app)/dashboard/settings/+page.svelte

<script>
	import { Settings, Phone, Bell, HelpCircle, ShieldCheck } from 'lucide-svelte';
	import SlaConfigManager from '$lib/features/sla/SlaConfigManager.svelte';

	// Settings sections
	const settingsSections = [
		{
			title: 'Integrações',
			icon: Phone,
			items: [
				{
					title: 'WhatsApp Business',
					description: 'Configure sua conta do WhatsApp Business para comunicação',
					status: 'connected',
					action: 'gerenciar'
				},
				{
					title: 'WhatsApp dos Vendedores',
					description: 'Adicione os números de WhatsApp da equipe de vendas',
					status: 'partial',
					action: 'configurar',
					count: '3 de 5 configurados'
				}
			]
		},
		{
			title: 'Notificações',
			icon: Bell,
			items: [
				{
					title: 'Alertas de Sentimento',
					description: 'Receba alertas sobre mudanças no sentimento dos clientes',
					status: 'enabled',
					action: 'configurar'
				},
				{
					title: 'Relatórios Diários',
					description: 'Receba relatórios automáticos por e-mail',
					status: 'disabled',
					action: 'ativar'
				}
			]
		},
		{
			title: 'Suporte',
			icon: HelpCircle,
			items: [
				{
					title: 'Central de Ajuda',
					description: 'Acesse nossa documentação e tutoriais',
					status: 'available',
					action: 'acessar'
				},
				{
					title: 'Contato',
					description: 'Fale com nossa equipe de suporte',
					status: 'available',
					action: 'abrir chamado'
				}
			]
		}
	];

	function handleAction(item) {
		// Handle different actions based on item
		console.log(`Action: ${item.action} for ${item.title}`);
		
		// For WhatsApp integration, we could open a modal or navigate to a specific page
		if (item.title === 'WhatsApp Business') {
			// TODO: Open WhatsApp configuration modal
		} else if (item.title === 'WhatsApp dos Vendedores') {
			// TODO: Open sellers WhatsApp configuration
		}
	}

	function getStatusBadge(status) {
		const statusConfig = {
			connected: { text: 'Conectado', class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' },
			partial: { text: 'Parcial', class: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400' },
			enabled: { text: 'Ativo', class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' },
			disabled: { text: 'Inativo', class: 'bg-slate-100 text-slate-800 dark:bg-slate-900/30 dark:text-slate-400' },
			configured: { text: 'Configurado', class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' },
			available: { text: 'Disponível', class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400' },
			dark: { text: 'Escuro', class: 'bg-slate-100 text-slate-800 dark:bg-slate-900/30 dark:text-slate-400' },
			'pt-BR': { text: 'Português', class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400' }
		};

		return statusConfig[status] || statusConfig.available;
	}
</script>

<div class="mx-auto max-w-[1600px] space-y-6">
	<!-- Header -->
	<div class="rounded-xl border border-slate-200 bg-white p-5 md:p-6 shadow-sm transition-colors duration-200 dark:border-slate-800 dark:bg-[#161f30]">
		<div class="flex items-center gap-3">
			<div class="h-8 w-8 shrink-0 rounded-lg bg-indigo-500/20 text-indigo-500 flex items-center justify-center">
				<Settings size={20} strokeWidth={2.5} />
			</div>
			<h1 class="text-xl font-bold text-slate-900 dark:text-white">Configurações</h1>
		</div>
		<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
			Gerencie as configurações do sistema, integrações e preferências da sua conta
		</p>
	</div>

	<!-- Settings Sections -->
	<div class="grid grid-cols-1 gap-6">
		{#each settingsSections as section}
			<div class="rounded-xl border border-slate-200 bg-white shadow-sm transition-colors duration-200 dark:border-slate-800 dark:bg-[#161f30]">
				<!-- Section Header -->
				<div class="border-b border-slate-200 p-5 dark:border-slate-800">
					<div class="flex items-center gap-3">
						<div class="h-8 w-8 shrink-0 rounded-lg bg-slate-100 text-slate-600 flex items-center justify-center dark:bg-slate-800 dark:text-slate-400">
							<section.icon size={18} strokeWidth={2} />
						</div>
						<h2 class="text-lg font-semibold text-slate-900 dark:text-white">{section.title}</h2>
					</div>
				</div>

				<!-- Section Items -->
				<div class="divide-y divide-slate-200 dark:divide-slate-800">
					{#each section.items as item}
						<div class="p-5 hover:bg-slate-50 transition-colors duration-150 dark:hover:bg-slate-800/50">
							<div class="flex items-center justify-between">
								<div class="flex-1 min-w-0">
									<div class="flex items-center gap-3">
										<h3 class="text-sm font-medium text-slate-900 dark:text-white">{item.title}</h3>
										<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {getStatusBadge(item.status).class}">
											{getStatusBadge(item.status).text}
										</span>
									</div>
									<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">{item.description}</p>
									{#if item.count}
										<p class="mt-1 text-xs text-amber-600 dark:text-amber-400">{item.count}</p>
									{/if}
								</div>
								<div class="ml-4">
									<button
										onclick={() => handleAction(item)}
										class="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-md bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-150"
									>
										{item.action}
									</button>
								</div>
							</div>
						</div>
					{/each}
				</div>
			</div>
		{/each}
	</div>

	<!-- SLA / Tempo de Resposta -->
	<div
		class="rounded-xl border border-slate-200 bg-white shadow-sm transition-colors duration-200 dark:border-slate-800 dark:bg-[#161f30]"
	>
		<div class="border-b border-slate-200 p-5 dark:border-slate-800">
			<div class="flex items-center gap-3">
				<div
					class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400"
				>
					<ShieldCheck size={18} strokeWidth={2} />
				</div>
				<div>
					<h2 class="text-lg font-semibold text-slate-900 dark:text-white">SLA por Departamento</h2>
					<p class="text-sm text-slate-500 dark:text-slate-400">
						Tempos de primeira resposta e resolução, com status em tempo real
					</p>
				</div>
			</div>
		</div>
		<div class="p-5">
			<SlaConfigManager />
		</div>
	</div>
</div>