<template>
  <!-- Bloc « Satisfaction » de la fiche client (extrait de ClientDetailPage, T7). Faible couplage :
       props latest/count + émet 'draft' (canal). Réutilisable dans le customer-360. -->
  <div v-if="latest" class="ops-card q-pa-md q-mb-sm" style="border-radius:10px">
    <div class="row items-center no-wrap">
      <q-icon name="star" color="warning" size="20px" class="q-mr-xs" />
      <span class="section-title" style="font-size:1rem">Satisfaction</span>
      <span class="q-ml-md" :style="{ color: latest.stars >= 5 ? '#00C853' : (latest.stars <= 2 ? '#e53935' : '#f5b50a'), letterSpacing: '2px', fontSize: '1.1rem' }">
        <span>{{ '★'.repeat(latest.stars || 0) }}</span><span style="color:#e2e8f0">{{ '☆'.repeat(5 - (latest.stars || 0)) }}</span>
      </span>
      <span class="text-caption text-grey-6 q-ml-sm">{{ latest.stars }}/5</span>
      <q-space />
      <span class="text-caption text-grey-5">{{ formatDateTime(latest.stars_ts || latest.comment_ts || latest.created) }}</span>
      <q-btn v-if="count > 1" dense flat size="sm" no-caps color="primary" :label="`${count} évaluations`" class="q-ml-sm" @click="$router.push('/evaluations')" />
    </div>
    <div v-if="latest.comment" class="q-mt-xs" style="white-space:pre-wrap;color:#334155">« {{ latest.comment }} »</div>
  </div>
  <!-- Pas encore d'évaluation : proposer d'en demander une (brouillon courriel/texto pré-rempli, langue du client) -->
  <div v-else class="ops-card q-px-md q-py-sm q-mb-sm row items-center" style="border-radius:10px">
    <q-icon name="star_outline" color="warning" size="20px" class="q-mr-sm" />
    <span class="text-grey-7">Aucune évaluation pour ce client.</span>
    <q-space />
    <q-btn dense unelevated no-caps color="warning" text-color="white" icon="reviews" label="Demander une évaluation">
      <q-tooltip>Ouvrir un brouillon d'invitation (coordonnées + message pré-remplis)</q-tooltip>
      <q-menu auto-close>
        <q-list dense style="min-width:210px">
          <q-item-label header class="q-py-xs">Brouillon d'invitation (langue du client)</q-item-label>
          <q-item clickable @click="$emit('draft', 'email')"><q-item-section avatar><q-icon name="mail" color="primary" /></q-item-section><q-item-section>Par courriel</q-item-section></q-item>
          <q-item clickable @click="$emit('draft', 'sms')"><q-item-section avatar><q-icon name="sms" color="positive" /></q-item-section><q-item-section>Par texto</q-item-section></q-item>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
</template>

<script setup>
import { formatDateTime } from 'src/composables/useFormatters'
defineProps({ latest: { type: Object, default: null }, count: { type: Number, default: 0 } })
defineEmits(['draft'])
</script>
