<script lang="ts">
	import { onMount } from 'svelte';

	interface HealthState {
		status: 'checking' | 'healthy' | 'unhealthy' | 'error';
		message: string;
		lastChecked: Date | null;
	}

	let { pollInterval = 30000 } = $props<{
		pollInterval?: number;
	}>();

	let health = $state<HealthState>({
		status: 'checking',
		message: '',
		lastChecked: null
	});

	async function checkHealth() {
		try {
			const res = await fetch('/api/llm-health');
			const data = await res.json();
			health = {
				status: data.status === 'healthy' ? 'healthy' : 'unhealthy',
				message: data.message,
				lastChecked: new Date()
			};
		} catch (e) {
			health = {
				status: 'error',
				message: e instanceof Error ? e.message : 'Network error',
				lastChecked: new Date()
			};
		}
	}

	// Use onMount instead of $effect for timer-based side effects
	// onMount only runs in browser, no SSR guard needed
	onMount(() => {
		checkHealth(); // Initial check
		const interval = setInterval(checkHealth, pollInterval);
		return () => clearInterval(interval);
	});
</script>

<div class="flex items-center gap-2 text-sm">
	<div class="flex items-center gap-1">
		{#if health.status === 'checking'}
			🟡 <span>Checking LLM...</span>
		{:else if health.status === 'healthy'}
			🟢 <span class="text-green-600">LLM Ready</span>
		{:else if health.status === 'unhealthy'}
			🔴 <span class="text-red-600">LLM Unavailable</span>
		{:else}
			🔴 <span class="text-red-600">LLM Error</span>
		{/if}
	</div>
	<div class="text-xs text-gray-500" title={health.message}>
		{health.lastChecked ? `Last: ${health.lastChecked.toLocaleTimeString()}` : ''}
	</div>
</div>
