<script lang="ts">
	import type { ChatMessage } from '$lib/types';
	import MessageList from '$lib/components/MessageList.svelte';
	import MessageInput from '$lib/components/MessageInput.svelte';
	import { processRequest, OrchestratorError } from '$lib/services/orchestrator';

	let messages: ChatMessage[] = $state([]);
	let isStreaming = $state(false);
	let error: string | null = $state(null);
	let sessionId = $state(crypto.randomUUID());

	async function handleSend(content: string) {
		error = null;

		const userMessage: ChatMessage = {
			id: crypto.randomUUID(),
			role: 'user',
			content,
			timestamp: new Date()
		};
		messages.push(userMessage);

		const assistantMessage: ChatMessage = {
			id: crypto.randomUUID(),
			role: 'assistant',
			content: '',
			timestamp: new Date()
		};
		messages.push(assistantMessage);

		isStreaming = true;

		try {
			for await (const response of processRequest(sessionId, content)) {
				const idx = messages.length - 1;
				messages[idx] = {
					...messages[idx],
					content: response.message
				};
			}
		} catch (err) {
			const msg =
				err instanceof OrchestratorError
					? `Error (${err.code}): ${err.message}`
					: 'An unexpected error occurred';
			error = msg;
			// Update the assistant message with the error
			const idx = messages.length - 1;
			messages[idx] = {
				...messages[idx],
				content: `⚠ ${msg}`
			};
		} finally {
			isStreaming = false;
		}
	}
</script>

<div class="flex h-screen flex-col">
	<header class="border-b border-gray-200 bg-white px-4 py-3">
		<h1 class="text-lg font-semibold text-gray-900">Chat</h1>
	</header>

	<MessageList {messages} />

	{#if isStreaming && messages.length > 0 && messages[messages.length - 1].content === ''}
		<div class="flex justify-start px-4 pb-2">
			<div class="flex items-center gap-1.5 rounded-2xl bg-gray-200 px-4 py-2.5">
				<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:0ms]"
				></span>
				<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:150ms]"
				></span>
				<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:300ms]"
				></span>
			</div>
		</div>
	{/if}

	{#if error}
		<div class="mx-4 mb-2 rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600">
			{error}
		</div>
	{/if}

	<MessageInput onSend={handleSend} disabled={isStreaming} />
</div>
