<template>
  <details
    ref="detailsEl"
    class="tool-card"
    :class="{
      'is-success': !tool.pending && tool.success,
      'is-error': !tool.pending && !tool.success
    }"
    style="font-size: 12px;"
  >
    <summary>
      <span class="tool-status-icon">
        <span v-if="tool.pending" class="spinner"></span>
        <i v-else-if="tool.success" class="ph ph-check-circle"></i>
        <i v-else class="ph ph-x-circle"></i>
      </span>
      <span class="tool-name">{{ tool.name }}</span>
      <i class="ph ph-caret-down tool-chevron"></i>
    </summary>
    <div class="tool-card-body">
      <div v-if="tool.args" class="tool-section">
        <pre class="tool-code">{{ formatJson(tool.args) }}</pre>
      </div>
      <div v-if="tool.result != null" class="tool-section">
        <pre class="tool-code">{{ formatResult(tool.result) }}</pre>
      </div>
    </div>
  </details>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({ tool: { type: Object, required: true } })

const detailsEl = ref(null)

watch(
  () => props.tool.pending,
  (pending, wasPending) => {
    if (!detailsEl.value) return
    if (pending) {
      detailsEl.value.setAttribute('open', '')
    } else if (wasPending !== undefined) {
      detailsEl.value.removeAttribute('open')
    }
  },
  { immediate: true }
)

function formatJson(val) {
  if (typeof val === 'string') {
    try { return JSON.stringify(JSON.parse(val), null, 2) } catch { return val }
  }
  return JSON.stringify(val, null, 2)
}

function formatResult(val) {
  if (typeof val === 'string') return val
  return JSON.stringify(val, null, 2)
}
</script>