<script setup lang="ts">
import { ref } from 'vue'
import type { ParsedSystemMessage } from '@/types/transcript-debug'

defineProps<{
  message: ParsedSystemMessage
}>()

const expanded = ref(false)
</script>

<template>
  <div class="system-message">
    <button class="system-toggle" @click="expanded = !expanded">
      <span class="system-icon">&#9432;</span>
      <span class="system-label">System</span>
      <span v-if="message.subtype" class="subtype-badge">{{ message.subtype }}</span>
      <span class="content-preview">{{ message.content.slice(0, 80) }}{{ message.content.length > 80 ? '...' : '' }}</span>
    </button>
    <pre v-if="expanded" class="system-content">{{ message.content }}</pre>
  </div>
</template>

<style scoped>
.system-message {
  border-radius: 6px;
  overflow: hidden;
  border: 1px dashed rgba(251, 191, 36, 0.3);
}

.system-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  background: rgba(251, 191, 36, 0.04);
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  text-align: left;
}

.system-toggle:hover {
  background: rgba(251, 191, 36, 0.08);
}

.system-icon {
  color: #fbbf24;
  font-size: 13px;
}

.system-label {
  font-weight: 500;
  color: #fbbf24;
  font-size: 11px;
}

.subtype-badge {
  font-size: 10px;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.content-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  opacity: 0.7;
}

.system-content {
  margin: 0;
  padding: 0.75rem;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px dashed rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.02);
}
</style>
