<script lang="ts">
	import { onMount } from 'svelte';
	import { goto } from '$app/navigation';
	import { isAuthenticated, currentUser, logout } from '$lib/auth';
	import { api } from '$lib/api';

	let licenseInfo: any = $state(null);
	let loadingLicense = $state(false);

	onMount(async () => {
		// La autenticación ya se inicializó en +layout.svelte
		// Solo cargar información de licencia si está autenticado
		if ($isAuthenticated && $currentUser?.tenantId) {
			loadLicenseInfo(); // Sin await - carga en background
		}
	});

	async function loadLicenseInfo() {
		loadingLicense = true;
		const response = await api.licenses.myLicense();
		if (response.data) {
			licenseInfo = response.data;
		}
		loadingLicense = false;
	}

	async function handleLogin() {
		goto('/login');
	}

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

<div class="min-h-screen bg-gray-50">
	<!-- Header -->
	<header class="bg-white shadow">
		<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
			<div class="flex items-center justify-between">
				<div>
					<h1 class="text-3xl font-bold tracking-tight text-gray-900">Anexo76</h1>
					<p class="mt-1 text-sm text-gray-500">Gestión de Comercio Exterior</p>
				</div>
				
				<div class="flex items-center gap-4">
					{#if $isAuthenticated}
						<div class="text-right">
							<p class="text-sm font-medium text-gray-900">{$currentUser?.name || $currentUser?.username}</p>
							<p class="text-xs text-gray-500">{$currentUser?.email}</p>
						</div>
						<button
							onclick={handleLogout}
							class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-red-600"
						>
							Cerrar Sesión
						</button>
					{:else}
						<button
							onclick={handleLogin}
							class="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-blue-600"
						>
							Iniciar Sesión
						</button>
					{/if}
				</div>
			</div>
		</div>
	</header>

	<!-- Main Content -->
	<main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
			<!-- Landing Page -->
			<div class="text-center">
				<div class="mx-auto max-w-2xl">
					<h2 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
						Bienvenido a Anexo76
					</h2>
					<p class="mt-6 text-lg leading-8 text-gray-600">
						Plataforma SaaS para gestión de comercio exterior conforme a Anexos 24, 30 y 22 del SAT.
						Ideal para maquilas, empresas IMMEX y agentes aduanales.
					</p>
					<div class="mt-10 flex items-center justify-center gap-x-6">
						<a
							href="/register"
							class="rounded-md border-2 border-blue-600 px-6 py-3 text-base font-semibold text-blue-600 hover:bg-blue-50 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-blue-600"
						>
							Registrarse
						</a>
						<button
							onclick={handleLogin}
							class="rounded-md bg-blue-600 px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-blue-600"
						>
							Iniciar Sesión
						</button>
					</div>
				</div>

				<!-- Features -->
				<div class="mx-auto mt-16 max-w-5xl">
					<h3 class="text-2xl font-bold text-gray-900">Características principales</h3>
					<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
						<div class="rounded-lg bg-white p-6 shadow">
							<h4 class="text-lg font-semibold text-gray-900">Multi-tenant</h4>
							<p class="mt-2 text-sm text-gray-600">
								Arquitectura híbrida con BD compartida o dedicada según necesidades
							</p>
						</div>
						<div class="rounded-lg bg-white p-6 shadow">
							<h4 class="text-lg font-semibold text-gray-900">Seguridad</h4>
							<p class="mt-2 text-sm text-gray-600">
								Autenticación con Keycloak y control de acceso basado en roles
							</p>
						</div>
						<div class="rounded-lg bg-white p-6 shadow">
							<h4 class="text-lg font-semibold text-gray-900">Licencias</h4>
							<p class="mt-2 text-sm text-gray-600">
								Planes flexibles desde Free hasta Enterprise con features personalizadas
							</p>
						</div>
					</div>
				</div>
			</div>
	</main>

	<!-- Footer -->
	<footer class="mt-16 bg-white">
		<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
			<p class="text-center text-sm text-gray-500">
				© 2025 Anexo76. Desarrollado para la industria de comercio exterior mexicana.
			</p>
		</div>
	</footer>
</div>
