<script lang="ts">
	import { onMount } from 'svelte';
	import { api } from '$lib/api';

	/**
	 * Componente para mostrar la versión de la aplicación
	 * Consume el endpoint /api/version del backend para obtener información de versión
	 */

	interface VersionInfo {
		service: string;
		version: string;
		environment: string;
		debug: boolean;
	}

	let versionInfo: VersionInfo | null = $state(null);
	let loading: boolean = $state(true);
	let error: string | null = $state(null);

	/**
	 * Obtener información de versión desde el backend
	 */
	async function fetchVersion() {
		try {
			loading = true;
			error = null;

			const response = await api.get<VersionInfo>('/version');

			if (response.error) {
				throw new Error(response.error);
			}

			if (response.data) {
				versionInfo = response.data;
			}
		} catch (err) {
			console.error('Error al obtener versión:', err);
			error = err instanceof Error ? err.message : 'Error desconocido';
		} finally {
			loading = false;
		}
	}

	// Cargar versión al montar el componente
	onMount(() => {
		fetchVersion();
	});

	/**
	 * Obtener color del badge según el entorno
	 */
	function getEnvironmentColor(env: string): string {
		switch (env?.toLowerCase()) {
			case 'production':
				return 'bg-green-600 text-white';
			case 'development':
				return 'bg-yellow-600 text-white';
			case 'staging':
				return 'bg-blue-600 text-white';
			default:
				return 'bg-gray-600 text-white';
		}
	}
</script>

<!-- Componente de versión -->
<div class="flex items-center app-version">
	{#if loading}
		<div class="text-xs text-muted-foreground">Cargando versión...</div>
	{:else if error}
		<div class="text-xs text-destructive">Error: {error}</div>
	{:else if versionInfo}
		<div class="flex items-center gap-2 text-xs">			

			<!-- Versión -->
			<span class="font-mono font-semibold text-foreground">
				v{versionInfo.version}
			</span>

			<!-- Indicador de debug (solo si está activo) -->
			{#if versionInfo.debug}
				<span class="rounded bg-orange-600 px-2 py-0.5 text-xs font-medium text-white">
					DEBUG
				</span>
			{/if}
		</div>
	{/if}
</div>
