<script lang="ts">
	import { chat } from '$lib/stores/chat.svelte';

	const statusColors = {
		disconnected: 'bg-gray-400',
		connecting: 'bg-yellow-400 animate-pulse',
		connected: 'bg-green-400',
		error: 'bg-red-400'
	};

	let statusColor = $derived(statusColors[chat.connectionStatus]);
</script>

<button
	type="button"
	onclick={() => chat.toggle()}
	class="fixed right-4 bottom-24 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 text-white shadow-lg transition-transform hover:scale-105 hover:bg-primary-700 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none md:bottom-6"
	aria-label={chat.isOpen ? 'Close chat' : 'Open chat'}
>
	{#if chat.isOpen}
		<!-- X icon -->
		<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
		</svg>
	{:else}
		<!-- Chat bubble icon -->
		<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
			/>
		</svg>
	{/if}

	<!-- Connection status indicator -->
	<span
		class="absolute top-0 right-0 h-3 w-3 rounded-full border-2 border-white {statusColor}"
		aria-hidden="true"
	></span>
</button>
