<script lang="ts">
	// Generische Tool-Card fuer alles, was keine eigene Spezialisierung hat
	// (Grep, Glob, WebFetch, WebSearch, MCP-Tools, Task, TodoWrite, ...).
	// Zeigt Input + Result als formatiertes JSON / Text.

	import ToolCallCard from './ToolCallCard.svelte';
	import type { InlineToolCall } from '$lib/stores';

	interface Props {
		call: InlineToolCall;
	}
	let { call }: Props = $props();

	function formatInput(input: Record<string, unknown>): string {
		try {
			return JSON.stringify(input, null, 2);
		} catch {
			return String(input);
		}
	}

	const inputStr = $derived(formatInput(call.input));
	const showInput = $derived(Object.keys(call.input || {}).length > 0);

	const MAX_RESULT_LINES = 30;
	const allLines = $derived((call.result || '').split('\n'));
	const visibleLines = $derived(allLines.slice(0, MAX_RESULT_LINES));
	const hiddenCount = $derived(Math.max(0, allLines.length - MAX_RESULT_LINES));
</script>

<ToolCallCard {call}>
	{#snippet children()}
		{#if showInput}
			<details class="input-details">
				<summary>Input</summary>
				<pre class="raw">{inputStr}</pre>
			</details>
		{/if}

		{#if call.status === 'running'}
			<div class="placeholder">… laeuft …</div>
		{:else if call.result}
			<pre class="raw" class:err={call.status === 'error'}>{visibleLines.join('\n')}</pre>
			{#if hiddenCount > 0}
				<div class="more-hint">… +{hiddenCount} weitere Zeilen</div>
			{/if}
		{/if}
	{/snippet}
</ToolCallCard>

<style>
	.input-details {
		margin-bottom: 6px;
		font-size: 11px;
	}
	.input-details summary {
		cursor: pointer;
		color: var(--vscode-descriptionForeground);
		user-select: none;
	}
	.input-details summary:hover {
		color: var(--vscode-editor-foreground);
	}

	.raw {
		font-family: var(--font-mono);
		font-size: 11.5px;
		line-height: 1.5;
		background: var(--vscode-terminal-background);
		color: var(--vscode-editor-foreground);
		border: 1px solid var(--vscode-input-border);
		border-radius: 3px;
		padding: 6px 8px;
		max-height: 280px;
		overflow: auto;
		white-space: pre-wrap;
		word-break: break-word;
	}
	.raw.err {
		color: var(--vscode-errorForeground);
		border-color: var(--vscode-errorForeground);
	}

	.placeholder {
		color: var(--vscode-descriptionForeground);
		font-size: 11.5px;
		font-family: var(--font-mono);
	}
	.more-hint {
		font-size: 11px;
		color: var(--vscode-descriptionForeground);
		font-style: italic;
		margin-top: 4px;
	}
</style>
