<script lang="ts">
	// Eine einzelne Chat-Message (Phase 8: VS-Code-Look)
	//
	// Layout: Avatar (Kreis 24px) links, Content rechts.
	// User + Assistant beide linksbuendig — wie in der Claude-Code-Extension.
	//
	// Hover-Actions rechts oben: Edit (User), Regenerate (letzte Assistant),
	// Copy, Das-merken, Rewind (Assistant).

	import { messages, type Message, type InlineToolCall, type KnowledgeHint, type MessagePart } from '$lib/stores';
	import { processingPhase } from '$lib/stores/events';
	import { renderMarkdown } from '$lib/utils/markdown';
	import ToolCardAuto from './ToolCardAuto.svelte';
	import KnowledgeHintPill from './KnowledgeHintPill.svelte';

	interface Props {
		message: Message;
		isLast?: boolean;
		isStreaming?: boolean;
		onEdit?: (id: string) => void;
		onRegenerate?: (id: string) => void;
		onRemember?: (m: Message) => void;
		onRewind?: (id: string) => void;
	}

	let {
		message,
		isLast = false,
		isStreaming = false,
		onEdit,
		onRegenerate,
		onRemember,
		onRewind,
	}: Props = $props();

	const userInitial = 'E';

	const avatarChar = $derived.by(() => {
		if (message.role === 'user') return userInitial;
		if (message.role === 'system') return '!';
		return '✱'; // ✱ Spark
	});

	const roleLabel = $derived.by(() => {
		if (message.role === 'user') return 'Du';
		if (message.role === 'system') return 'System';
		return 'Claude';
	});

	const timeStr = $derived(
		new Date(message.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
	);

	// Streaming-Sub-Label aus processingPhase
	const phaseLabel = $derived.by(() => {
		if (!isStreaming) return '';
		switch ($processingPhase) {
			case 'thinking': return 'denkt nach …';
			case 'streaming': return 'streamt …';
			case 'tool-use': return 'nutzt Tool …';
			case 'subagent': return 'Subagent aktiv …';
			default: return '';
		}
	});

	// Klassische Hover-Actions
	let copied = $state(false);
	async function copyContent() {
		try {
			await navigator.clipboard.writeText(message.content);
			copied = true;
			setTimeout(() => (copied = false), 1500);
		} catch { /* ignore */ }
	}

	const showRegenerate = $derived(message.role === 'assistant' && isLast && onRegenerate);
	const showEdit = $derived(message.role === 'user' && onEdit);
	const showRewind = $derived(message.role === 'assistant' && onRewind);

	const toolCalls = $derived<InlineToolCall[]>(message.toolCalls || []);
	const knowledgeHints = $derived<KnowledgeHint[]>(message.knowledgeHints || []);

	// Phase 11: chronologische Render-Liste. Wenn parts gesetzt sind (neue
	// Messages + DB-rehydrierte), nutzen wir sie. Sonst Fallback auf alte
	// Aufteilung (kann nach voller Migration entfallen).
	const renderParts = $derived.by((): MessagePart[] => {
		if (message.parts && message.parts.length > 0) return message.parts;
		const fallback: MessagePart[] = [];
		for (const c of toolCalls) fallback.push({ type: 'tool', call: c });
		if (message.content) fallback.push({ type: 'text', content: message.content });
		return fallback;
	});

	// Index des LETZTEN text-parts — nur dort darf der Streaming-Cursor stehen.
	const lastTextIdx = $derived.by(() => {
		for (let i = renderParts.length - 1; i >= 0; i--) {
			if (renderParts[i].type === 'text') return i;
		}
		return -1;
	});

	// Copy-Buttons fuer Code-Bloecke (sicher: nur Effekt auf content-Aenderung,
	// kein MutationObserver — verhindert OOM bei langem Streaming)
	let contentEl: HTMLDivElement | null = null;
	function decorateCodeBlocks() {
		if (!contentEl) return;
		const wrappers = contentEl.querySelectorAll('.code-block-wrapper:not([data-copy-added])');
		wrappers.forEach((wrapper) => {
			wrapper.setAttribute('data-copy-added', 'true');
			const lang = wrapper.getAttribute('data-lang') || '';
			const codeEl = wrapper.querySelector('code');
			const codeText = codeEl?.textContent || '';
			const header = document.createElement('div');
			header.className = 'code-header';
			if (lang) {
				const langSpan = document.createElement('span');
				langSpan.className = 'code-lang';
				langSpan.textContent = lang;
				header.appendChild(langSpan);
			}
			const btn = document.createElement('button');
			btn.className = 'copy-btn';
			btn.title = 'Code kopieren';
			btn.innerHTML = '📋';
			btn.onclick = async () => {
				try {
					await navigator.clipboard.writeText(codeText);
					btn.innerHTML = '✓';
					setTimeout(() => (btn.innerHTML = '📋'), 1500);
				} catch { /* ignore */ }
			};
			header.appendChild(btn);
			wrapper.insertBefore(header, wrapper.firstChild);
		});
	}

	$effect(() => {
		void message.content;     // bei Content-Aenderung neu dekorieren
		queueMicrotask(decorateCodeBlocks);
	});
</script>

<article class="msg" class:user={message.role === 'user'} class:assistant={message.role === 'assistant'} class:system={message.role === 'system'} class:queued={message.queued}>
	<div class="avatar" aria-hidden="true">{avatarChar}</div>

	<div class="body">
		<header class="msg-header">
			<span class="role">{roleLabel}</span>
			<span class="time">· {timeStr}</span>
			{#if message.queued}
				<span class="queued-tag">wartet</span>
			{/if}
			{#if isStreaming && phaseLabel}
				<span class="phase">· {phaseLabel}</span>
			{/if}

			<span class="actions">
				{#if showEdit}
					<button class="act" title="Bearbeiten" onclick={() => onEdit?.(message.id)}>✏️</button>
				{/if}
				{#if showRegenerate}
					<button class="act" title="Neu generieren" onclick={() => onRegenerate?.(message.id)}>🔄</button>
				{/if}
				<button class="act" title={copied ? 'Kopiert' : 'Kopieren'} onclick={copyContent}>
					{copied ? '✓' : '📋'}
				</button>
				{#if onRemember}
					<button class="act" title="Das merken" onclick={() => onRemember?.(message)}>💡</button>
				{/if}
				{#if showRewind}
					<button class="act" title="Hierhin zuruecksetzen" onclick={() => onRewind?.(message.id)}>↶</button>
				{/if}
			</span>
		</header>

		<!-- KB-Hints sind Hintergrund-Hinweise (kein Stream-Event), daher oben.
		     Alles Andere (Text, Tool-Calls, eingebettete Gedanken) wird ueber
		     parts in echter chronologischer Reihenfolge gerendert. -->
		{#if knowledgeHints.length > 0}
			<div class="kb-hints">
				{#each knowledgeHints as hint (hint.id)}
					<KnowledgeHintPill {hint} />
				{/each}
			</div>
		{/if}

		{#if renderParts.length > 0}
			<div class="content" bind:this={contentEl}>
				{#each renderParts as part, i (i)}
					{#if part.type === 'text'}
						<div class="text-part">
							{@html renderMarkdown(part.content)}
							{#if isStreaming && i === lastTextIdx}
								<span class="cursor">▍</span>
							{/if}
						</div>
					{:else if part.type === 'tool'}
						<div class="tool-part">
							<ToolCardAuto call={part.call} />
						</div>
					{/if}
				{/each}
			</div>
		{:else if isStreaming}
			<div class="content faint">▍</div>
		{/if}
	</div>
</article>

<style>
	.msg {
		display: grid;
		grid-template-columns: 28px 1fr;
		column-gap: 10px;
		padding: 10px 14px;
		/* User-konfigurierbar via chatAppearance Store (Settings → Chat-Darstellung) */
		font-family: var(--chat-font-family, inherit);
		font-size: var(--chat-font-size, 13px);
		line-height: var(--chat-line-height, 1.55);
		color: var(--vscode-editor-foreground);
		border-bottom: 1px solid transparent;
	}

	.msg + .msg { margin-top: 0; }

	.msg.user {
		background: transparent;
	}
	.msg.assistant {
		background: rgba(255, 255, 255, 0.012);
	}
	.msg.system {
		background: rgba(244, 135, 113, 0.06);
		border-left: 2px solid var(--vscode-errorForeground);
	}
	.msg.queued {
		opacity: 0.7;
		border-left: 2px solid var(--vscode-warningForeground);
	}

	.avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 700;
		font-family: var(--font-sans);
		user-select: none;
		margin-top: 1px;
	}
	.msg.user .avatar {
		background: var(--vscode-badge-background);
		color: var(--vscode-badge-foreground);
	}
	.msg.assistant .avatar {
		background: var(--vscode-button-background);
		color: var(--vscode-button-foreground);
	}
	.msg.system .avatar {
		background: var(--vscode-errorForeground);
		color: #1e1e1e;
	}

	.body { min-width: 0; }

	.msg-header {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 12px;
		color: var(--vscode-descriptionForeground);
		margin-bottom: 2px;
	}
	.role {
		font-weight: 600;
		color: var(--vscode-editor-foreground);
	}
	.time { color: var(--vscode-descriptionForeground); }
	.phase {
		color: var(--vscode-progressBar-background);
		font-style: italic;
	}
	.queued-tag {
		background: var(--vscode-warningForeground);
		color: #1e1e1e;
		font-size: 10px;
		font-weight: 700;
		padding: 0 6px;
		border-radius: 2px;
		margin-left: 4px;
	}

	.actions {
		margin-left: auto;
		display: flex;
		gap: 2px;
		opacity: 0;
		transition: opacity 0.12s;
	}
	.msg:hover .actions { opacity: 1; }

	.act {
		font-size: 11px;
		padding: 1px 5px;
		border-radius: 2px;
		background: transparent;
		color: var(--vscode-descriptionForeground);
	}
	.act:hover {
		color: var(--vscode-editor-foreground);
		background: var(--vscode-list-hoverBackground);
	}

	.content {
		/* Schrift wird von .msg geerbt (User-konfigurierbar) */
		word-wrap: break-word;
	}
	.content.faint { color: var(--vscode-descriptionForeground); }

	/* Markdown global styles innerhalb .content — kommen aus app.css fuer
	   pre/code; wir setzen nur ein paar Anpassungen fuer den VS-Code-Look. */
	.content :global(p) { margin: 4px 0; }
	.content :global(ul), .content :global(ol) { margin: 4px 0 4px 20px; }
	.content :global(h1), .content :global(h2), .content :global(h3) {
		margin: 10px 0 4px 0;
		font-weight: 600;
	}
	.content :global(h1) { font-size: 1.25em; }
	.content :global(h2) { font-size: 1.13em; }
	.content :global(h3) { font-size: 1.05em; }
	.content :global(.code-block-wrapper) {
		background: var(--vscode-terminal-background);
		border: 1px solid var(--vscode-input-border);
		border-radius: 4px;
		margin: 6px 0;
		overflow: hidden;
	}
	.content :global(.code-header) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 3px 10px;
		background: rgba(0, 0, 0, 0.25);
		font-size: 10.5px;
		gap: 6px;
	}
	.content :global(.code-lang) {
		color: var(--vscode-descriptionForeground);
		font-family: var(--font-mono);
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	.content :global(.copy-btn) {
		margin-left: auto;
		padding: 1px 6px;
		background: transparent;
		border: 1px solid var(--vscode-input-border);
		border-radius: 2px;
		color: var(--vscode-descriptionForeground);
		font-size: 11px;
		cursor: pointer;
	}
	.content :global(.copy-btn:hover) {
		background: var(--vscode-list-hoverBackground);
		color: var(--vscode-editor-foreground);
	}
	.content :global(.code-block-wrapper pre) {
		margin: 0;
		padding: 6px 10px;
		background: transparent;
		border: 0;
		font-size: var(--chat-code-font-size, 12px);
		line-height: 1.55;
		overflow-x: auto;
	}
	.content :global(code) {
		font-family: var(--font-mono);
		background: rgba(255, 255, 255, 0.05);
		font-size: var(--chat-code-font-size, 12.5px);
	}
	.content :global(.thinking-inline) {
		display: block;
		margin: 6px 0;
		padding: 6px 10px;
		background: rgba(99, 102, 241, 0.06);
		border-left: 3px solid rgba(99, 102, 241, 0.4);
		border-radius: 2px;
		font-size: 12px;
		color: var(--vscode-descriptionForeground);
	}
	.content :global(.thinking-label) { margin-right: 4px; }
	.content :global(a) { color: var(--link); }

	.cursor {
		display: inline-block;
		color: var(--vscode-progressBar-background, var(--accent, #007acc));
		margin-left: 2px;
		font-weight: 600;
		/* weicheres Pulsieren statt hartem on/off — wirkt "lebendiger",
		   aehnlich Codium/Claude-Code-Extension */
		animation: caret-pulse 1.1s ease-in-out infinite;
		text-shadow: 0 0 4px var(--vscode-progressBar-background, var(--accent, #007acc));
	}
	@keyframes caret-pulse {
		0%, 100% { opacity: 0.25; transform: scaleY(1); }
		45%      { opacity: 1;    transform: scaleY(1.05); }
		50%      { opacity: 1;    transform: scaleY(1.05); }
	}

	.tool-calls {
		margin: 2px 0 8px 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	/* Phase 11: einzelner Tool-Part im chronologischen Strom */
	.tool-part {
		margin: 6px 0;
	}
	.text-part + .tool-part,
	.tool-part + .text-part,
	.tool-part + .tool-part {
		margin-top: 4px;
	}
	.text-part:not(:first-child) {
		margin-top: 4px;
	}

	.kb-hints {
		margin: 2px 0 4px 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}
</style>
