<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import { logout } from '$lib/auth';

	interface LicenseError {
		type: string;
		message: string;
		status: number;
	}

	let { error }: { error: LicenseError } = $props();

	const isHubOffline = error.type === 'HUB_OFFLINE' || error.type === 'HUB_ERROR';

	function handleLogout() {
		void logout();
	}
</script>

<div class="flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center p-8">
	<div class="flex max-w-md flex-col items-center gap-6 text-center">
		<!-- Icon -->
		{#if isHubOffline}
			<div class="flex h-20 w-20 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900/30">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-10 w-10 text-yellow-600 dark:text-yellow-400"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					stroke-width="1.5"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
					/>
				</svg>
			</div>
		{:else}
			<div class="flex h-20 w-20 items-center justify-center rounded-full bg-destructive/10">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-10 w-10 text-destructive"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					stroke-width="1.5"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"
					/>
				</svg>
			</div>
		{/if}

		<!-- Heading -->
		<div class="flex flex-col gap-2">
			<h1 class="text-2xl font-semibold tracking-tight text-foreground">
				{#if isHubOffline}
					Servicio de licencias no disponible
				{:else}
					Acceso suspendido
				{/if}
			</h1>
			<p class="text-sm text-muted-foreground">
				{error.message}
			</p>
		</div>

		<!-- Help text -->
		<div class="rounded-lg border bg-muted/50 px-4 py-3 text-sm text-muted-foreground">
			{#if isHubOffline}
				El servidor de licencias no está disponible en este momento. Por favor, inténtalo de nuevo
				en unos minutos o contacta a soporte si el problema persiste.
			{:else if error.type === 'LICENSE_ERROR'}
				Tu organización no cuenta con una licencia activa para acceder al sistema. Contacta a tu
				administrador o al equipo de soporte para regularizar tu suscripción.
			{:else}
				No tienes permisos para acceder al sistema. Contacta a tu administrador.
			{/if}
		</div>

		<!-- Actions -->
		<div class="flex gap-3">
			{#if isHubOffline}
				<Button variant="outline" onclick={() => window.location.reload()}>
					Reintentar
				</Button>
			{/if}
			<Button variant="destructive" onclick={handleLogout}>
				Cerrar sesión
			</Button>
		</div>
	</div>
</div>
