<script lang="ts">
	import { resolve } from '$app/paths';
	import WidgetGestaoPontos from '$lib/components/ponto/WidgetGestaoPontos.svelte';
	import { Clock, ChevronRight, Info } from 'lucide-svelte';
	
	const menuItems = [
		{
			categoria: 'Gestão de Ausências',
			descricao: 'Gerencie solicitações de ausências e aprovações',
			iconComponent: Clock,
			gradient: 'from-orange-500/10 to-orange-600/20',
			accentColor: 'text-orange-600',
			bgIcon: 'bg-orange-500/20',
			opcoes: [
				{
					nome: 'Gestão de Ausências',
					descricao: 'Visualizar e gerenciar solicitações de ausências',
					href: '/secretaria-executiva/gestao-ausencias',
					iconComponent: Clock
				}
			]
		}
	];
</script>

<main class="container mx-auto px-4 py-4">
	<!-- Breadcrumb -->
	<div class="breadcrumbs mb-4 text-sm">
		<ul>
			<li><a href={resolve('/')} class="text-primary hover:underline">Dashboard</a></li>
			<li>Secretaria Executiva</li>
		</ul>
	</div>

	<!-- Cabeçalho -->
	<div class="mb-8">
		<h1 class="text-primary mb-2 text-4xl font-bold">Secretaria Executiva</h1>
		<p class="text-base-content/70 text-lg">Gerencie processos executivos e administrativos</p>
	</div>

	<!-- Menu de Opções -->
	<div class="space-y-8">
		{#each menuItems as categoria}
			<div class="card bg-base-100 shadow-xl transition-all duration-300 hover:shadow-2xl">
				<div class="card-body">
					<!-- Cabeçalho da Categoria -->
					<div class="mb-6 flex items-start gap-6">
						<div class="p-4 {categoria.bgIcon} rounded-2xl">
							<svelte:component this={categoria.iconComponent} class="h-12 w-12 {categoria.accentColor}" strokeWidth={2} />
						</div>
						<div class="flex-1">
							<h2 class="card-title mb-2 text-2xl {categoria.accentColor}">
								{categoria.categoria}
							</h2>
							<p class="text-base-content/70">{categoria.descricao}</p>
						</div>
					</div>

					<!-- Grid de Opções -->
					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
						{#each categoria.opcoes as opcao}
							<a
								href={opcao.href}
								class="group border-base-300 relative overflow-hidden rounded-xl border-2 bg-linear-to-br {categoria.gradient} hover:border-primary transform p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
							>
								<div class="flex h-full flex-col">
									<div class="mb-4 flex items-start justify-between">
										<div
											class="bg-base-100 group-hover:bg-primary rounded-lg p-3 transition-colors duration-300 group-hover:text-white"
										>
											<svelte:component this={opcao.iconComponent} class="h-5 w-5 {categoria.accentColor} group-hover:text-white" strokeWidth={2} />
										</div>
										<ChevronRight class="text-base-content/30 group-hover:text-primary h-5 w-5 transition-colors duration-300" strokeWidth={2} />
									</div>
									<h3
										class="text-base-content group-hover:text-primary mb-2 text-lg font-bold transition-colors duration-300"
									>
										{opcao.nome}
									</h3>
									<p class="text-base-content/70 flex-1 text-sm">
										{opcao.descricao}
									</p>
								</div>
							</a>
						{/each}
					</div>
				</div>
			</div>
		{/each}
	</div>

	<!-- Widget Gestão de Pontos -->
	<div class="mt-8">
		<WidgetGestaoPontos />
	</div>

	<!-- Card de Ajuda -->
	<div class="alert alert-info mt-8 shadow-lg">
		<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
		<div>
			<h3 class="font-bold">Precisa de ajuda?</h3>
			<div class="text-sm">
				Entre em contato com o suporte técnico ou consulte a documentação do sistema para mais
				informações sobre as funcionalidades da Secretaria Executiva.
			</div>
		</div>
	</div>
</main>

<style>
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.card {
		animation: fadeInUp 0.5s ease-out;
	}
</style>
