<script lang="ts">
	import { onDestroy } from 'svelte';
	import { FormGroup, Label, Input, InputGroup, Button, Badge } from '@sveltestrap/sveltestrap';
	import { CollapsibleCard } from '$ui';
	import { t } from '$i18n';
	import { telemetryStore } from './telemetryStore.svelte';

	let satelliteInput = $state('');

	const STATUS_COLOR: Record<string, string> = {
		idle: 'secondary',
		connecting: 'warning',
		connected: 'success',
		error: 'danger',
	};

	function handleConnect() {
		const id = satelliteInput.trim();
		if (id) telemetryStore.connect(id);
	}

	function handleDisconnect() {
		telemetryStore.disconnect();
		satelliteInput = '';
	}

	onDestroy(() => {
		telemetryStore.disconnect();
	});
</script>

<CollapsibleCard title={$t('nav.track')}>
	<FormGroup spacing="mb-2">
		<Label class="small">{$t('tracking.satelliteId')}</Label>
		<div class="d-flex gap-1">
			<Input
				type="text"
				size="sm"
				bind:value={satelliteInput}
				placeholder={$t('tracking.satelliteIdPlaceholder')}
				disabled={telemetryStore.status !== 'idle'}
			/>
			{#if telemetryStore.status === 'idle'}
				<Button
					size="sm"
					color="primary"
					onclick={handleConnect}
					disabled={!satelliteInput.trim()}
				>
					{$t('tracking.connect')}
				</Button>
			{:else}
				<Button size="sm" color="secondary" onclick={handleDisconnect}>
					{$t('tracking.disconnect')}
				</Button>
			{/if}
		</div>
	</FormGroup>

	<FormGroup spacing="mb-2">
		<div class="d-flex align-items-center gap-2">
			<Label class="small mb-0">{$t('tracking.status')}</Label>
			<Badge color={STATUS_COLOR[telemetryStore.status]}>
				{$t(`tracking.status_${telemetryStore.status}`)}
			</Badge>
		</div>
		{#if telemetryStore.error}
			<small class="text-danger">{telemetryStore.error}</small>
		{/if}
	</FormGroup>

	{#if telemetryStore.latest}
		<FormGroup spacing="mb-2">
			<Label class="small">{$t('points.lat')}</Label>
			<InputGroup size="sm">
				<Input type="text" value={telemetryStore.latest.latitude.toFixed(6)} readonly />
			</InputGroup>
		</FormGroup>

		<FormGroup spacing="mb-2">
			<Label class="small">{$t('points.lon')}</Label>
			<InputGroup size="sm">
				<Input type="text" value={telemetryStore.latest.longitude.toFixed(6)} readonly />
			</InputGroup>
		</FormGroup>

		<FormGroup spacing="mb-2">
			<Label class="small">{$t('points.alt')}</Label>
			<InputGroup size="sm">
				<Input type="text" value={telemetryStore.latest.altitude.toFixed(1)} readonly />
			</InputGroup>
		</FormGroup>

		<small class="text-muted">
			{$t('tracking.packetCount', { count: telemetryStore.points.length })}
		</small>
	{:else if telemetryStore.status !== 'idle'}
		<small class="text-muted">{$t('tracking.waitingData')}</small>
	{/if}
</CollapsibleCard>
