<script lang="ts">
import { appSettings } from "../settings.svelte.js";
import { tabStore } from "../tabs.svelte.js";
import type { ChatMessage } from "../types.js";
import MarkdownRenderer from "./MarkdownRenderer.svelte";
import ToolCallDisplay from "./ToolCallDisplay.svelte";

const { message, tabId }: { message: ChatMessage; tabId?: string } = $props();

const isUser = $derived(message.role === "user");
const isSystem = $derived(message.role === "system");

// Check if this message is queued: its id starts with "queued-"
const queuedMessageId = $derived(
	isUser && message.id.startsWith("queued-") ? message.id.slice("queued-".length) : null,
);
const isQueued = $derived(queuedMessageId !== null);

function cancelQueued() {
	if (tabId && queuedMessageId) {
		void tabStore.cancelQueuedMessage(tabId, queuedMessageId);
	}
}
</script>

{#if isSystem}
	<div class="flex justify-center my-2">
		<div class="badge badge-ghost gap-1 text-xs opacity-60">
			{#each message.content as segment}
				{#if segment.type === "text"}
					{segment.text}
				{/if}
			{/each}
		</div>
	</div>
{:else}
<div class="chat chat-start mb-2 [&>.chat-bubble]:max-w-full {isQueued ? 'opacity-60' : ''}">
	<div class="chat-bubble break-words {isUser ? 'chat-bubble-primary w-fit' : 'bg-transparent w-full'}">
		{#if message.thinking}
			<div class="collapse collapse-arrow mb-2 p-1">
				<input type="checkbox" checked={appSettings.autoExpandThinking} />
				<div class="collapse-title text-sm opacity-60 italic py-0 pl-0 pr-8 min-h-0">Thinking...</div>
				<div class="collapse-content text-sm opacity-60 italic p-0">
					<p class="whitespace-pre-wrap mt-1">{message.thinking}</p>
				</div>
			</div>
		{/if}
		{#each message.content as segment, i (segment.type === "tool-call" ? segment.id : i)}
			{#if segment.type === "text"}
				<MarkdownRenderer text={segment.text} streaming={message.isStreaming} />
			{:else if segment.type === "tool-call"}
				<ToolCallDisplay toolCall={segment} />
			{/if}
		{/each}
		{#if message.isStreaming}
			<span class="inline-block w-1.5 h-4 bg-current animate-pulse ml-0.5 align-middle rounded-sm"></span>
		{/if}
	</div>
	{#if isQueued}
		<div class="flex items-center gap-1 mt-0.5 ml-1">
			<span class="badge badge-ghost badge-xs text-base-content/40">queued</span>
			<button
				class="btn btn-xs btn-ghost text-base-content/40 hover:text-error px-1 min-h-0 h-auto"
				onclick={cancelQueued}
				title="Cancel queued message"
			>
				✕
			</button>
		</div>
	{/if}
</div>
{/if}
