<script lang="ts">
	import { Settings2, Receipt, ChevronRight } from 'lucide-svelte';
	import * as Card from '$lib/components/ui/card';
	import { Button } from '$lib/components/ui/button';
	import { authStore, userHasPermission } from '$lib/auth';

	const canViewIssuerSettings = $derived(userHasPermission($authStore.user, 'fin.settings.view'));
</script>

<svelte:head>
	<title>Configuración General</title>
</svelte:head>

<div class="space-y-6">
	<div>
		<h1 class="text-2xl font-bold tracking-tight flex items-center gap-2">
			<Settings2 class="h-6 w-6" />
			Configuración General
		</h1>
		<p class="text-muted-foreground text-sm mt-1">
			Ajustes globales de la aplicación.
		</p>
	</div>

	{#if canViewIssuerSettings}
		<Card.Root>
			<Card.Header>
				<Card.Title class="flex items-center gap-2">
					<Receipt class="h-5 w-5" />
					Facturación
				</Card.Title>
				<Card.Description>
					Datos fiscales del emisor: razón social, RFC, régimen fiscal y lugar de expedición.
				</Card.Description>
			</Card.Header>
			<Card.Content>
				<Button variant="outline" href="/dashboard/settings/facturacion">
					Abrir datos fiscales <ChevronRight class="ml-1 h-4 w-4" />
				</Button>
			</Card.Content>
		</Card.Root>
	{/if}

	<Card.Root>
		<Card.Header>
			<Card.Title>Configuración del sistema</Card.Title>
			<Card.Description>Agrega aquí los ajustes de configuración de tu proyecto.</Card.Description>
		</Card.Header>
		<Card.Content>
			<p class="text-sm text-muted-foreground">Sección en construcción.</p>
		</Card.Content>
	</Card.Root>
</div>
