<!--
  PaymentMethodDetail — vue NATIVE d'un moyen de paiement (Stripe / Paysafe / prélèvement bancaire).
  LECTURE SEULE : affiche le fournisseur + identifiants + statut PPA. Ne DÉCLENCHE aucun paiement (aucun bouton
  de charge) — remplace juste la grille générique + bouton desk ERPNext.
-->
<template>
  <div>
    <div class="pm-head">
      <q-icon :name="providerIcon" size="20px" :color="providerColor" class="q-mr-xs" />
      <span class="pm-provider">{{ doc.provider || 'Moyen de paiement' }}</span>
      <q-badge v-if="isPpa" color="green-7" class="q-ml-sm">PPA auto</q-badge>
      <q-badge v-else color="grey-5" class="q-ml-sm">Manuel</q-badge>
    </div>

    <div class="pm-grid">
      <div v-if="doc.customer" class="pm-row"><span class="pm-k">Client</span>
        <router-link :to="'/clients/' + encodeURIComponent(doc.customer)" class="erp-link">{{ doc.customer_name || doc.customer }}</router-link>
      </div>
      <div v-if="detail" class="pm-row"><span class="pm-k">Référence</span><code>{{ detail }}</code></div>
      <div v-if="doc.card_last4" class="pm-row"><span class="pm-k">Carte</span>•••• {{ doc.card_last4 }}<span v-if="doc.card_exp"> · exp. {{ doc.card_exp }}</span></div>
      <div v-if="doc.ppa_name" class="pm-row"><span class="pm-k">Titulaire</span>{{ doc.ppa_name }}</div>
      <div v-if="doc.ppa_institution" class="pm-row"><span class="pm-k">Banque</span>{{ doc.ppa_institution }}<span v-if="doc.ppa_branch"> · transit {{ doc.ppa_branch }}</span></div>
      <div v-if="doc.status" class="pm-row"><span class="pm-k">Statut</span><span class="ops-badge">{{ doc.status }}</span></div>
    </div>

    <q-banner dense class="bg-blue-grey-1 text-blue-grey-9 pm-note">
      <template #avatar><q-icon name="lock" color="blue-grey-6" /></template>
      Vue lecture seule. Les charges/prélèvements se pilotent depuis la facturation (jamais d’ici).
    </q-banner>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({ doc: { type: Object, required: true }, docName: { type: String, default: '' } })

const isPpa = computed(() => !!(props.doc.is_auto_ppa || props.doc.stripe_ppa_enabled))
const providerIcon = computed(() => ({ Stripe: 'credit_card', Paysafe: 'credit_card', 'Bank Draft': 'account_balance' })[props.doc.provider] || 'payments')
const providerColor = computed(() => ({ Stripe: 'deep-purple-6', Paysafe: 'blue-7', 'Bank Draft': 'teal-7' })[props.doc.provider] || 'grey-7')
const detail = computed(() => {
  const d = props.doc
  if (d.provider === 'Stripe') return d.stripe_customer_id || ''
  if (d.provider === 'Paysafe') return d.paysafe_profile_id || ''
  if (d.provider === 'Bank Draft') return d.ppa_institution ? `${d.ppa_institution}-${d.ppa_branch || ''}` : (d.ppa_name || '')
  return ''
})
</script>

<style scoped>
.pm-head { display: flex; align-items: center; margin-bottom: 10px; }
.pm-provider { font-size: 15px; font-weight: 700; }
.pm-grid { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pm-row { display: flex; gap: 8px; }
.pm-k { min-width: 72px; color: #90a4ae; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; padding-top: 2px; }
.pm-note { border-radius: 8px; margin-top: 14px; font-size: 12px; }
</style>
