<script setup lang="ts">
import { computed } from 'vue'
import type { ParsedToolResult } from '@/types/transcript-debug'
import CodeBlock from './CodeBlock.vue'

const props = defineProps<{
  result: ParsedToolResult
}>()

const content = computed(() => props.result.content)

const lang = computed(() => {
  const trimmed = content.value.trim()
  if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
      (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
    try {
      JSON.parse(trimmed)
      return 'json'
    } catch { /* not valid JSON */ }
  }
  return ''
})

const displayCode = computed(() => {
  if (lang.value === 'json') {
    try {
      return JSON.stringify(JSON.parse(content.value.trim()), null, 2)
    } catch { /* fallback */ }
  }
  return content.value
})
</script>

<template>
  <CodeBlock :code="displayCode" :lang="lang" max-height="300px" />
</template>
