<script lang="ts">
	import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
	import type { StoredMemoryCandidate } from '$lib/stores/memory.svelte';

	let { candidate }: { candidate: StoredMemoryCandidate } = $props();

	const sourceBadge = $derived.by(() => {
		switch (candidate.source) {
			case ResultSource.TOOL_OUTPUT:
				return { label: 'Tool Output', bg: 'bg-blue-100 dark:bg-blue-900/40', text: 'text-blue-800 dark:text-blue-300' };
			case ResultSource.MODEL_KNOWLEDGE:
				return { label: 'Model Knowledge', bg: 'bg-purple-100 dark:bg-purple-900/40', text: 'text-purple-800 dark:text-purple-300' };
			case ResultSource.WEB:
				return { label: 'Web', bg: 'bg-green-100 dark:bg-green-900/40', text: 'text-green-800 dark:text-green-300' };
			default:
				return { label: 'Unspecified', bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-800 dark:text-gray-300' };
		}
	});

	const confidencePct = $derived(Math.round(candidate.confidence * 100));

	const confidenceColor = $derived.by(() => {
		if (candidate.confidence >= 0.8) return { bar: 'bg-green-500', text: 'text-green-700 dark:text-green-400' };
		if (candidate.confidence >= 0.5) return { bar: 'bg-amber-500', text: 'text-amber-700 dark:text-amber-400' };
		return { bar: 'bg-red-500', text: 'text-red-700 dark:text-red-400' };
	});
</script>

<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4">
	<div class="mb-2 flex items-center justify-between gap-2">
		<span
			class="shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium {sourceBadge.bg} {sourceBadge.text}"
		>
			{sourceBadge.label}
		</span>
		<span class="text-xs font-medium {confidenceColor.text}">
			{confidencePct}%
		</span>
	</div>

	<p class="mb-3 text-sm text-gray-700 dark:text-gray-300">{candidate.content}</p>

	<div class="flex items-center gap-2">
		<div class="h-2 flex-1 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
			<div
				class="h-full rounded-full transition-all {confidenceColor.bar}"
				style="width: {confidencePct}%"
			></div>
		</div>
	</div>
</div>
