<!--
  PaymentArrangementDetail — vue NATIVE d'une entente de paiement (échéancier). LECTURE SEULE : montant,
  dates, statut, versements. Aucune action de charge — remplace la grille générique + bouton desk.
-->
<template>
  <div>
    <div class="pa-head">
      <q-icon name="handshake" size="20px" color="indigo-6" class="q-mr-xs" />
      <span class="pa-title">Entente {{ doc.name }}</span>
      <span v-if="doc.status" class="ops-badge q-ml-sm">{{ doc.status }}</span>
    </div>

    <div class="pa-totals">
      <div class="pa-card">
        <div class="pa-cap">Montant total</div>
        <div class="pa-val">{{ formatMoney(doc.total_amount) }}</div>
      </div>
      <div v-if="doc.installment_count" class="pa-card">
        <div class="pa-cap">Versements</div>
        <div class="pa-val">{{ doc.installment_count }}</div>
      </div>
    </div>

    <div class="pa-grid">
      <div v-if="doc.customer" class="pa-row"><span class="pa-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.date_agreed" class="pa-row"><span class="pa-k">Convenu</span>{{ formatDate(doc.date_agreed) }}</div>
      <div v-if="doc.date_due" class="pa-row"><span class="pa-k">Échéance</span>{{ formatDate(doc.date_due) }}</div>
      <div v-if="doc.note" class="pa-row"><span class="pa-k">Note</span><span>{{ doc.note }}</span></div>
    </div>

    <!-- Versements (child table Payment Arrangement Installment, si présents) -->
    <div v-if="installments.length" class="q-mt-md">
      <div class="info-block-title">Échéancier ({{ installments.length }})</div>
      <div v-for="(it, i) in installments" :key="i" class="pa-inst">
        <span class="pa-inst-date">{{ formatDate(it.due_date || it.date) }}</span>
        <span class="pa-inst-amt">{{ formatMoney(it.amount) }}</span>
        <span class="pa-inst-st" :class="'pa-st-' + String(it.status || '').toLowerCase()">{{ it.status || '—' }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { formatMoney, formatDate } from 'src/composables/useFormatters'
const props = defineProps({ doc: { type: Object, required: true }, docName: { type: String, default: '' } })
const installments = computed(() => props.doc.installments || props.doc.schedule || [])
</script>

<style scoped>
.pa-head { display: flex; align-items: center; margin-bottom: 10px; }
.pa-title { font-size: 15px; font-weight: 700; }
.pa-totals { display: flex; gap: 10px; margin-bottom: 12px; }
.pa-card { background: var(--ops-soft, #eef2f7); border-radius: 8px; padding: 8px 14px; }
.pa-cap { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #90a4ae; }
.pa-val { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-grid { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pa-row { display: flex; gap: 8px; }
.pa-k { min-width: 64px; color: #90a4ae; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; padding-top: 2px; }
.pa-inst { display: flex; align-items: center; gap: 10px; font-size: 12.5px; border-top: 1px solid var(--ops-border, #e2e8f0); padding: 4px 0; }
.pa-inst:first-of-type { border-top: none; }
.pa-inst-date { min-width: 90px; }
.pa-inst-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.pa-inst-st { margin-left: auto; font-size: 11px; font-weight: 700; }
.pa-st-paid, .pa-st-paye { color: #2f855a; }
.pa-st-overdue, .pa-st-retard { color: #b83232; }
</style>
