<!--
  CommunicationDetail — vue NATIVE d'une Communication (courriel/appel/note) dans DetailModal.
  Ouverte depuis la timeline de la fiche client ; remplace la grille générique + bouton desk.
-->
<template>
  <div>
    <div class="cd-head">
      <q-icon :name="typeIcon" size="18px" class="q-mr-xs" :color="typeColor" />
      <span class="cd-type">{{ typeLabel }}</span>
      <span v-if="doc.communication_date" class="cd-date">{{ formatDateTime(doc.communication_date) }}</span>
    </div>

    <div v-if="doc.subject" class="cd-subject">{{ doc.subject }}</div>

    <div class="cd-grid">
      <div v-if="doc.sender" class="cd-row"><span class="cd-k">De</span><span>{{ doc.sender }}</span></div>
      <div v-if="doc.recipients" class="cd-row"><span class="cd-k">À</span><span>{{ doc.recipients }}</span></div>
      <div v-if="doc.cc" class="cd-row"><span class="cd-k">CC</span><span>{{ doc.cc }}</span></div>
      <div v-if="doc.reference_name" class="cd-row"><span class="cd-k">Lié à</span>
        <a class="erp-link" @click="$emit('navigate', doc.reference_doctype, doc.reference_name, doc.reference_name)">{{ doc.reference_doctype }} · {{ doc.reference_name }}</a>
      </div>
    </div>

    <q-separator class="q-my-sm" />

    <!-- Contenu (HTML nettoyé) ou texte brut -->
    <div v-if="doc.content" class="cd-body" v-html="safeContent" />
    <div v-else class="text-grey-6 q-pa-md text-center">Aucun contenu.</div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { formatDateTime } from 'src/composables/useFormatters'

const props = defineProps({
  doc: { type: Object, required: true },
  docName: { type: String, default: '' },
})
defineEmits(['navigate'])

const typeLabel = computed(() => ({ Communication: 'Courriel', Comment: 'Note', Chat: 'Clavardage', Notification: 'Notification', Feedback: 'Retour' })[props.doc.communication_medium] || ({ Email: 'Courriel', Phone: 'Appel', SMS: 'SMS', Chat: 'Clavardage' })[props.doc.communication_medium] || props.doc.communication_medium || 'Communication')
const typeIcon = computed(() => ({ Email: 'mail', Phone: 'call', SMS: 'sms', Chat: 'chat' })[props.doc.communication_medium] || 'forum')
const typeColor = computed(() => ({ Email: 'blue-7', Phone: 'green-7', SMS: 'teal-7' })[props.doc.communication_medium] || 'grey-7')

// Le contenu est déjà du HTML côté ERPNext ; on retire seulement les balises dangereuses (script/iframe/on*).
const safeContent = computed(() => String(props.doc.content || '')
  .replace(/<\s*(script|iframe|object|embed|style)\b[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, '')
  .replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, '')
  .replace(/javascript:/gi, ''))
</script>

<style scoped>
.cd-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #607d8b; }
.cd-type { font-weight: 700; }
.cd-date { margin-left: auto; color: #90a4ae; }
.cd-subject { font-size: 15px; font-weight: 600; margin: 6px 0; }
.cd-grid { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.cd-row { display: flex; gap: 8px; }
.cd-k { min-width: 44px; color: #90a4ae; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; padding-top: 2px; }
.cd-body { font-size: 13px; line-height: 1.5; overflow-x: auto; }
.cd-body :deep(img) { max-width: 100%; height: auto; }
.cd-body :deep(table) { max-width: 100%; }
.cd-body :deep(blockquote) { border-left: 3px solid #e0e6ef; margin: 6px 0; padding-left: 10px; color: #78909c; }
</style>
