<script lang="ts">
	import { Clock, CheckCircle2, XCircle, ChevronRight, TrendingUp } from 'lucide-svelte';
	import { resolve } from '$app/paths';
</script>

<div class="container mx-auto px-4 py-6">
	<!-- Header -->
	<div class="mb-6 flex items-center gap-4">
		<div class="bg-primary/10 rounded-xl p-3">
			<Clock class="text-primary h-8 w-8" strokeWidth={2} />
		</div>
		<div>
			<h1 class="text-base-content text-3xl font-bold">Controle de Ponto</h1>
			<p class="text-base-content/60 mt-1">Gerencie registros, homologações e dispensas de ponto</p>
		</div>
	</div>

	<!-- Grid de Cards -->
	<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
		<!-- Card 1: Gestão de Pontos -->
		<a
			href={resolve('/(dashboard)/recursos-humanos/registro-pontos')}
			class="card bg-base-100 transform shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
		>
			<div class="card-body">
				<div class="mb-4 flex items-start justify-between">
					<div class="rounded-2xl bg-blue-500/20 p-4">
						<Clock class="h-8 w-8 text-blue-600" strokeWidth={2} />
					</div>
					<ChevronRight class="text-base-content/30 h-5 w-5" strokeWidth={2} />
				</div>
				<h2 class="card-title mb-2 text-xl">Gestão de Pontos</h2>
				<p class="text-base-content/70">
					Visualizar e gerenciar registros de ponto dos funcionários, relatórios e histórico
				</p>
			</div>
		</a>

		<!-- Card 2: Homologação de Registro -->
		<a
			href={resolve('/(dashboard)/recursos-humanos/controle-ponto/homologacao')}
			class="card bg-base-100 transform shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
		>
			<div class="card-body">
				<div class="mb-4 flex items-start justify-between">
					<div class="rounded-2xl bg-green-500/20 p-4">
						<CheckCircle2 class="h-8 w-8 text-green-600" strokeWidth={2} />
					</div>
					<ChevronRight class="text-base-content/30 h-5 w-5" strokeWidth={2} />
				</div>
				<h2 class="card-title mb-2 text-xl">Homologação de Registro</h2>
				<p class="text-base-content/70">
					Edite registros de ponto do seu time, ajuste banco de horas (compensar, abonar ou
					descontar)
				</p>
			</div>
		</a>

		<!-- Card 3: Dispensa de Registro -->
		<a
			href={resolve('/(dashboard)/recursos-humanos/controle-ponto/dispensa')}
			class="card bg-base-100 transform shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
		>
			<div class="card-body">
				<div class="mb-4 flex items-start justify-between">
					<div class="rounded-2xl bg-orange-500/20 p-4">
						<XCircle class="h-8 w-8 text-orange-600" strokeWidth={2} />
					</div>
					<ChevronRight class="text-base-content/30 h-5 w-5" strokeWidth={2} />
				</div>
				<h2 class="card-title mb-2 text-xl">Dispensa de Registro</h2>
				<p class="text-base-content/70">
					Gerencie períodos onde funcionários estão dispensados de registrar ponto
				</p>
			</div>
		</a>

		<!-- Card 4: Banco de Horas -->
		<a
			href={resolve('/(dashboard)/recursos-humanos/controle-ponto/banco-horas')}
			class="card bg-base-100 transform shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
		>
			<div class="card-body">
				<div class="mb-4 flex items-start justify-between">
					<div class="rounded-2xl bg-purple-500/20 p-4">
						<TrendingUp class="h-8 w-8 text-purple-600" strokeWidth={2} />
					</div>
					<ChevronRight class="text-base-content/30 h-5 w-5" strokeWidth={2} />
				</div>
				<h2 class="card-title mb-2 text-xl">Banco de Horas</h2>
				<p class="text-base-content/70">
					Visão gerencial do banco de horas dos funcionários, com filtros, estatísticas e relatórios
				</p>
			</div>
		</a>
	</div>
</div>
