<template>
  <div class="synapse-event">
    <div class="synapse-event-head">
      <i class="ph ph-lightning"></i>
      <span class="synapse-event-label">{{ t('messages.synapseEvent') }}</span>
      <span v-if="msg.eventType" class="synapse-event-type">{{ msg.eventType }}</span>
      <span v-if="msgTime" class="synapse-event-time">{{ msgTime }}</span>
    </div>
    <div class="synapse-event-body" v-html="renderMarkdown(msg.text)" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { renderMarkdown } from '@/composables/useMarkdown.js'
import { useTimeLabel } from '@/composables/useTime.js'
import { t } from '@/i18n/index.js'

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

const msgTime = useTimeLabel(computed(() => props.msg.time))
</script>

<style scoped>
/* Not a user bubble: a service record of what the platform asked for.
   Same visual language as the recall badge (icon + caption), quieter
   than a message and marked with an accent edge. */
.synapse-event {
  border-left: 2px solid var(--gn-color-secondary);
  padding: 2px 0 2px 12px;
  opacity: 0.9;
}

.synapse-event-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--gn-color-secondary);
  opacity: 0.85;
  margin-bottom: 4px;
}

.synapse-event-head i {
  font-size: 12px;
}

.synapse-event-type {
  font-family: var(--gn-font-mono, monospace);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gn-surface-panel-strong);
  color: var(--gn-color-text-dark);
}

.synapse-event-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--gn-color-text-dark);
}

.synapse-event-body {
  font-size: 13px;
  color: var(--gn-color-text-medium);
  word-break: break-word;
}

.synapse-event-body :deep(p) {
  margin: 0 0 8px;
}

.synapse-event-body :deep(p:last-child) {
  margin-bottom: 0;
}
</style>