<script lang="ts">
	import { resolve } from '$app/paths';
	import { useQuery } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { Shield, FileText, AlertTriangle, CheckCircle, Settings, Users } from 'lucide-svelte';
	import StatsCard from '$lib/components/ti/StatsCard.svelte';
	import { onMount } from 'svelte';

	const estatisticas = useQuery(api.lgpd.obterEstatisticasLGPD, {});

	onMount(() => {
		if (estatisticas?.error) {
			console.error('Erro ao carregar estatísticas LGPD:', estatisticas.error);
		}
	});
</script>

<div class="container mx-auto max-w-7xl px-4 py-6">
	<!-- Header -->
	<div class="mb-8 flex items-center justify-between">
		<div class="flex items-center gap-4">
			<div class="bg-primary/10 rounded-xl p-3">
				<Shield class="text-primary h-8 w-8" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-base-content text-3xl font-bold">LGPD - Proteção de Dados</h1>
				<p class="text-base-content/60 mt-1">
					Gestão de conformidade com a Lei Geral de Proteção de Dados
				</p>
			</div>
		</div>
	</div>

	<!-- Stats Cards -->
	{#if estatisticas === undefined}
		<div class="flex items-center justify-center py-20">
			<span class="loading loading-spinner loading-lg text-primary"></span>
		</div>
	{:else if estatisticas?.error}
		<div class="alert alert-error mb-6">
			<AlertTriangle class="h-5 w-5" />
			<span>Erro ao carregar estatísticas: {estatisticas.error}</span>
		</div>
	{:else if estatisticas?.data}
		<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
			<StatsCard
				title="Solicitações Pendentes"
				value={estatisticas.data.solicitacoesPendentes}
				description="Aguardando resposta"
				Icon={AlertTriangle}
				color="warning"
			/>

			<StatsCard
				title="Solicitações Vencendo"
				value={estatisticas.data.solicitacoesVencendo}
				description="Prazo próximo"
				Icon={AlertTriangle}
				color="error"
			/>

			<StatsCard
				title="Total de Solicitações"
				value={estatisticas.data.totalSolicitacoes}
				description="Todas as solicitações"
				Icon={FileText}
				color="info"
			/>

			<StatsCard
				title="Consentimentos Ativos"
				value={estatisticas.data.consentimentosAtivos}
				description="Consentimentos válidos"
				Icon={CheckCircle}
				color="success"
			/>
		</div>
	{/if}

	<!-- Ações Rápidas -->
	<div class="card bg-base-100 mb-8 shadow-xl">
		<div class="card-body">
			<h2 class="card-title mb-4 text-2xl">Ações Rápidas</h2>
			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
				<a href={resolve('/ti/lgpd/solicitacoes')} class="btn btn-primary btn-lg">
					<FileText class="h-5 w-5" strokeWidth={2} />
					Gerenciar Solicitações
				</a>

				<a href={resolve('/ti/lgpd/registros-tratamento')} class="btn btn-secondary btn-lg">
					<FileText class="h-5 w-5" strokeWidth={2} />
					Registros de Tratamento
				</a>

				<a href={resolve('/ti/lgpd/configuracoes')} class="btn btn-accent btn-lg">
					<Settings class="h-5 w-5" strokeWidth={2} />
					Configurações LGPD
				</a>
			</div>
		</div>
	</div>

	<!-- Informações -->
	{#if estatisticas?.data}
		<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
			<!-- Solicitações por Tipo -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<h2 class="card-title mb-4 text-xl">Solicitações por Tipo</h2>
					<div class="space-y-2">
						{#each Object.entries(estatisticas.data.solicitacoesPorTipo) as [tipo, quantidade]}
							<div class="bg-base-200 flex items-center justify-between rounded p-2">
								<span class="text-sm font-medium">{tipo}</span>
								<span class="badge badge-primary">{quantidade}</span>
							</div>
						{/each}
					</div>
				</div>
			</div>

			<!-- Resumo -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<h2 class="card-title mb-4 text-xl">Resumo</h2>
					<div class="space-y-3">
						<div class="flex justify-between">
							<span>Total de ROTs:</span>
							<span class="font-semibold">{estatisticas.data.totalROTs}</span>
						</div>
						<div class="flex justify-between">
							<span>ROTs Ativos:</span>
							<span class="text-success font-semibold">{estatisticas.data.rotsAtivos}</span>
						</div>
						<div class="flex justify-between">
							<span>Total de Consentimentos:</span>
							<span class="font-semibold">{estatisticas.data.totalConsentimentos}</span>
						</div>
						<div class="flex justify-between">
							<span>Consentimentos Ativos:</span>
							<span class="text-success font-semibold"
								>{estatisticas.data.consentimentosAtivos}</span
							>
						</div>
					</div>
				</div>
			</div>
		</div>
	{/if}
</div>
