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

	let showConversations = $state(false);

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape' && chat.isOpen) {
			if (showConversations) {
				showConversations = false;
			} else {
				chat.close();
			}
		}
	}

	function toggleConversations() {
		showConversations = !showConversations;
	}
</script>

<svelte:window onkeydown={handleKeydown} />

{#if chat.isOpen}
	<!-- Backdrop for mobile -->
	<button
		type="button"
		class="fixed inset-0 z-40 bg-black/30 sm:hidden"
		onclick={() => chat.close()}
		aria-label="Close chat"
	></button>

	<!-- Chat panel -->
	<div
		class="fixed right-0 bottom-0 z-50 flex h-[calc(100dvh-3.5rem)] w-full flex-col bg-white shadow-xl sm:right-4 sm:bottom-20 sm:h-[600px] sm:max-h-[calc(100dvh-8rem)] sm:w-96 sm:rounded-2xl dark:bg-gray-800"
		transition:fly={{ y: 20, duration: 200 }}
		role="dialog"
		aria-modal="true"
		aria-label="Chat"
	>
		<!-- Header -->
		<div
			class="flex shrink-0 items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700"
		>
			<div class="flex items-center gap-3">
				<button
					type="button"
					onclick={toggleConversations}
					class="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
					aria-label="Show conversations"
				>
					<svg
						class="h-5 w-5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						stroke-width="2"
					>
						<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" />
					</svg>
				</button>

				<div>
					<h2 class="text-sm font-semibold text-gray-900 dark:text-white">
						{chat.activeConversation?.title || 'New Chat'}
					</h2>
					<p class="text-xs text-gray-500 dark:text-gray-400">
						{#if chat.connectionStatus === 'connected'}
							AI Assistant
						{:else if chat.connectionStatus === 'connecting'}
							Connecting...
						{:else}
							Disconnected
						{/if}
					</p>
				</div>
			</div>

			<button
				type="button"
				onclick={() => chat.close()}
				class="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
				aria-label="Close chat"
			>
				<svg class="h-5 w-5" 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>
			</button>
		</div>

		<!-- Main content area -->
		<div class="relative flex min-h-0 flex-1 flex-col">
			<!-- Messages -->
			<MessageList />

			<!-- Input -->
			<MessageInput />

			<!-- Conversation list overlay -->
			{#if showConversations}
				<div
					class="absolute inset-0 bg-white dark:bg-gray-800"
					transition:fly={{ x: -100, duration: 200 }}
				>
					<ConversationList onClose={() => (showConversations = false)} />
				</div>
			{/if}
		</div>
	</div>
{/if}
