<script lang="ts">
	import type { PageData } from './$types';
	import { Button } from '$lib/components/ui/button';
	import * as Card from '$lib/components/ui/card';
	import { LogIn, Terminal } from 'lucide-svelte';

	let { data }: { data: PageData } = $props();
</script>

{#if data.devMode}
<div class="min-h-screen flex items-center justify-center bg-muted/40 p-4">
	<Card.Root class="w-full max-w-sm">
		<Card.Header class="text-center pb-2">
			<div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
				<Terminal class="h-6 w-6 text-primary" />
			</div>
			<Card.Title class="text-xl">Modo desarrollo</Card.Title>
			<Card.Description>
				Login local activo — sin Keycloak ni Hub.
			</Card.Description>
		</Card.Header>

		<Card.Content class="space-y-4">
			<form method="POST" action="?/dev_login">
				<Button type="submit" class="w-full">
					<LogIn class="mr-2 h-4 w-4" />
					Entrar como dev
				</Button>
			</form>

			<p class="text-xs text-center text-muted-foreground">
				Para usar el workspace, quita <code class="font-mono">DEV_LOCAL_AUTH=true</code> del entorno.
			</p>
		</Card.Content>
	</Card.Root>
</div>
{/if}
