<template>
  <!-- Entrée « Do Stuff » CANONIQUE (composant partagé) — même bouton partout : ouvre la vue équipement unique. -->
  <div class="q-mb-sm">
    <DoStuffButton :service-location="doc.service_location" :customer="doc.customer"
      @navigate="(dt, name, t) => $emit('navigate', dt, name, t)" />
  </div>
  <div class="modal-field-grid">
    <div class="mf"><span class="mf-label">Statut</span><span class="ops-badge" :class="subStatusClass(doc.status)">{{ doc.status }}</span></div>
    <div class="mf"><span class="mf-label">SKU</span><code>{{ doc.item_code }}</code></div>
    <div class="mf"><span class="mf-label">Article</span>{{ doc.item_name }}</div>
    <div class="mf"><span class="mf-label">Frequence</span>{{ doc.billing_frequency === 'A' ? 'Annuel' : 'Mensuel' }}</div>
    <div class="mf"><span class="mf-label">Debut</span>{{ doc.start_date || '---' }}</div>
    <div class="mf"><span class="mf-label">Fin</span>{{ doc.end_date || '---' }}</div>
    <div class="mf" v-if="doc.service_location"><span class="mf-label">Adresse</span>{{ doc.service_location }}</div>
    <div class="mf" v-if="doc.radius_user"><span class="mf-label">PPPoE</span><code>{{ doc.radius_user }}</code></div>
    <div class="mf" v-if="doc.radius_pwd"><span class="mf-label">Mot de passe</span><code>{{ doc.radius_pwd }}</code></div>
  </div>
  <div class="q-mt-md">
    <div class="info-block-title">Modifier</div>
    <div class="q-gutter-y-sm">
      <q-input v-model="doc.custom_description" dense outlined
        label="Description personnalisee" @change="$emit('save-field', doc, 'custom_description')" />
      <q-input v-model.number="doc.actual_price" dense outlined type="number" step="0.01"
        label="Prix" prefix="$" @change="$emit('save-field', doc, 'actual_price')" />
      <div class="row items-center q-gutter-x-md q-mt-sm">
        <q-toggle
          :model-value="!Number(doc.cancel_at_period_end)"
          @update:model-value="$emit('toggle-recurring', doc)"
          :color="Number(doc.cancel_at_period_end) ? 'grey' : 'green'"
          label="Recurrent"
        />
        <div v-if="doc.current_invoice_start" class="text-caption text-grey-6">
          Prochaine facture: {{ formatDate(doc.current_invoice_start) }} --- {{ formatDate(doc.current_invoice_end) }}
        </div>
      </div>
    </div>
  </div>
  <div v-if="doc.plans?.length" class="q-mt-md">
    <div class="info-block-title">Plans</div>
    <div v-for="p in doc.plans" :key="p.idx" class="info-row q-py-xs">
      <span>{{ p.plan || p.item }}</span>
      <q-space />
      <span>{{ formatMoney(p.cost) }}</span>
    </div>
  </div>
</template>

<script setup>
import DoStuffButton from 'src/components/shared/DoStuffButton.vue'
import { formatDate, formatMoney } from 'src/composables/useFormatters'
import { subStatusClass } from 'src/composables/useStatusClasses'

defineProps({
  doc: { type: Object, required: true },
  docName: String,
})
defineEmits(['save-field', 'toggle-recurring', 'navigate'])
</script>
