<script lang="ts">
	import { BarChart3, ClipboardCheck, Plus, CheckCircle2, Clock, TrendingUp } from 'lucide-svelte';
	import { resolve } from '$app/paths';
	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
</script>

<ProtectedRoute>
	<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>Controladoria</li>
			</ul>
		</div>

		<!-- Cabeçalho -->
		<div class="mb-6">
			<div class="mb-2 flex items-center gap-4">
				<div class="rounded-xl bg-purple-500/20 p-3">
					<BarChart3 class="h-8 w-8 text-purple-600" strokeWidth={2} />
				</div>
				<div>
					<h1 class="text-primary text-3xl font-bold">Controladoria</h1>
					<p class="text-base-content/70">Controle e auditoria interna da secretaria</p>
				</div>
			</div>
		</div>

		<!-- Card de Aviso -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<div class="flex flex-col items-center justify-center py-12 text-center">
					<div class="mb-6">
						<ClipboardCheck class="text-base-content/20 h-24 w-24" strokeWidth={1.5} />
					</div>
					<h2 class="mb-2 text-2xl font-bold">Módulo em Desenvolvimento</h2>
					<p class="text-base-content/70 mb-6 max-w-md">
						O módulo de Controladoria está sendo desenvolvido e em breve estará disponível com
						funcionalidades completas de controle e auditoria.
					</p>
					<div class="badge badge-warning badge-lg gap-2">
						<Plus class="h-4 w-4" strokeWidth={2} />
						Em Desenvolvimento
					</div>
				</div>
			</div>
		</div>

		<!-- Funcionalidades Previstas -->
		<div class="mt-6">
			<h3 class="mb-4 text-xl font-bold">Funcionalidades Previstas</h3>
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
				<div class="card bg-base-100 shadow-md transition-shadow hover:shadow-lg">
					<div class="card-body">
						<div class="mb-2 flex items-center gap-3">
							<div class="bg-primary/10 rounded-lg p-2">
								<CheckCircle2 class="text-primary h-6 w-6" strokeWidth={2} />
							</div>
							<h4 class="font-semibold">Auditoria Interna</h4>
						</div>
						<p class="text-base-content/70 text-sm">Controle e verificação de processos internos</p>
					</div>
				</div>

				<div class="card bg-base-100 shadow-md transition-shadow hover:shadow-lg">
					<div class="card-body">
						<div class="mb-2 flex items-center gap-3">
							<div class="bg-primary/10 rounded-lg p-2">
								<Clock class="text-primary h-6 w-6" strokeWidth={2} />
							</div>
							<h4 class="font-semibold">Compliance</h4>
						</div>
						<p class="text-base-content/70 text-sm">Conformidade com normas e regulamentos</p>
					</div>
				</div>

				<div class="card bg-base-100 shadow-md transition-shadow hover:shadow-lg">
					<div class="card-body">
						<div class="mb-2 flex items-center gap-3">
							<div class="bg-primary/10 rounded-lg p-2">
								<TrendingUp class="text-primary h-6 w-6" strokeWidth={2} />
							</div>
							<h4 class="font-semibold">Indicadores de Gestão</h4>
						</div>
						<p class="text-base-content/70 text-sm">Monitoramento de KPIs e métricas</p>
					</div>
				</div>
			</div>
		</div>
	</main>
</ProtectedRoute>
