<!--
  VoipLineDetail — vue NATIVE d'une ligne VoIP (DID, statut, SIP, E911). LECTURE SEULE (le mot de passe SIP
  n'est jamais affiché). Remplace la grille générique + bouton desk ERPNext.
-->
<template>
  <div>
    <div class="vl-head">
      <q-icon name="call" size="20px" color="teal-7" class="q-mr-xs" />
      <span class="vl-did">{{ doc.did || 'Ligne VoIP' }}</span>
      <span v-if="doc.status" class="ops-badge q-ml-sm">{{ doc.status }}</span>
      <q-badge :color="doc.e911_synced ? 'green-7' : 'orange-8'" class="q-ml-sm">
        {{ doc.e911_synced ? '911 synchronisé' : '911 non synchronisé' }}
      </q-badge>
    </div>

    <div class="vl-grid">
      <div v-if="doc.customer" class="vl-row"><span class="vl-k">Client</span>
        <router-link :to="'/clients/' + encodeURIComponent(doc.customer)" class="erp-link">{{ doc.customer_name || doc.customer }}</router-link>
      </div>
      <div v-if="doc.service_location" class="vl-row"><span class="vl-k">Adresse</span>{{ doc.service_location }}</div>
      <div v-if="doc.sip_user" class="vl-row"><span class="vl-k">SIP</span><code>{{ doc.sip_user }}</code></div>
      <div v-if="doc.sip_domain" class="vl-row"><span class="vl-k">Domaine</span><code>{{ doc.sip_domain }}</code></div>
      <div v-if="doc.provider" class="vl-row"><span class="vl-k">Fournisseur</span>{{ doc.provider }}</div>
    </div>

    <!-- E911 (adresse d'urgence) -->
    <div v-if="e911Addr" class="q-mt-md">
      <div class="info-block-title"><q-icon name="emergency" size="15px" class="q-mr-xs" />Adresse 911</div>
      <div class="vl-e911" :class="{ 'vl-e911-warn': !doc.e911_synced }">
        {{ e911Addr }}
        <span v-if="!doc.e911_synced" class="vl-e911-flag">⚠ non synchronisée avec le fournisseur 911</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({ doc: { type: Object, required: true }, docName: { type: String, default: '' } })
const e911Addr = computed(() => {
  const d = props.doc
  const parts = [d.e911_civic_number, d.e911_street_name, d.e911_city, d.e911_postal_code].filter(Boolean)
  return parts.length ? parts.join(' ') : ''
})
</script>

<style scoped>
.vl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.vl-did { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vl-grid { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.vl-row { display: flex; gap: 8px; }
.vl-k { min-width: 72px; color: #90a4ae; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; padding-top: 2px; }
.vl-e911 { font-size: 13px; padding: 8px 10px; background: var(--ops-soft, #eef2f7); border-radius: 8px; }
.vl-e911-warn { background: #fbf0dc; color: #8a5a00; }
.vl-e911-flag { display: block; font-size: 11px; margin-top: 2px; }
</style>
