<template>
  <details ref="detailsEl" class="thinking-card">
    <summary>
      <i class="ph ph-brain"></i>
      Thinking
      <span v-if="!msg.thinking.done" class="spinner" style="margin-left:auto"></span>
    </summary>
    <div class="thinking-body">{{ msg.thinking.text }}</div>
  </details>
</template>

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

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

const detailsEl = ref(null)

// Open when thinking object is first created (null → object with done:false)
watch(
  () => props.msg.thinking,
  (thinking) => {
    if (!detailsEl.value || !thinking || thinking.done) return
    detailsEl.value.setAttribute('open', '')
  },
  { immediate: true }
)

// Close when thinking.done flips to true (same object reference, so needs separate watch)
watch(
  () => props.msg.thinking?.done,
  (done) => {
    if (!detailsEl.value) return
    if (done === true) detailsEl.value.removeAttribute('open')
  }
)
</script>