<template>
  <section class="mb-6">
    <h2
      class="text-lg font-semibold mb-4"
      style="color: var(--nav-text);"
    >
      Commentaires
      <span
        v-if="comments.length"
        class="ml-2 text-sm font-normal"
        style="color: var(--nav-text-muted);"
      >({{ comments.length }})</span>
    </h2>

    <!-- Texte d'intro -->
    <p class="text-sm italic mb-4" style="color: var(--nav-text-muted);">
      Les commentaires servent à confirmer ou attester de la fiabilité des services des organismes référencés.
    </p>

    <!-- Chargement -->
    <div v-if="pending" class="text-sm py-4" style="color: var(--nav-text-muted);">
      Chargement des commentaires…
    </div>

    <!-- Liste -->
    <div v-else-if="comments.length" class="space-y-3">
      <article
        v-for="comment in comments"
        :key="comment.Id"
        class="rounded-xl p-4"
        style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);"
      >
        <!-- Méta auteur + date -->
        <div class="flex items-center gap-2 mb-2">
          <!-- Avatar initiale -->
          <div
            class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold shrink-0"
            style="background: var(--nav-primary); color: var(--nav-text-on-primary);"
          >{{ initiale(comment.auteur_pseudo) }}</div>

          <span class="text-sm font-medium" style="color: var(--nav-text);">
            {{ comment.auteur_pseudo || 'Anonyme' }}
          </span>

          <span v-if="comment.submitted_at" class="text-xs ml-auto" style="color: var(--nav-text-muted);">
            {{ formatDate(comment.submitted_at) }}
          </span>
        </div>

        <!-- Contenu -->
        <p class="text-sm leading-relaxed" style="color: var(--nav-text);">{{ comment.contenu }}</p>
      </article>
    </div>

    <!-- Vide -->
    <p v-else class="text-sm italic py-2" style="color: var(--nav-text-muted);">
      Aucun commentaire pour le moment. Partage ton expérience ci-dessous.
    </p>
  </section>
</template>

<script setup lang="ts">
interface Comment {
  Id: number
  auteur_pseudo?: string
  contenu: string
  orga_id: number
  published?: boolean
  submitted_at?: string
}

const props = defineProps<{
  orgId: number
  refresh?: number  // incrémenter pour forcer un rechargement
}>()

const { data, pending, refresh } = await useFetch<{ list: Comment[] }>(
  `/api/comment/${props.orgId}`,
  { key: `comments-${props.orgId}` }
)

const comments = computed<Comment[]>(() => data.value?.list ?? [])

// Rechargement si le parent incrément refresh
watch(() => props.refresh, () => {
  refresh()
})

// ── Helpers ─────────────────────────────────────────────────────────────
function initiale(pseudo?: string): string {
  if (!pseudo) return '?'
  return pseudo.trim().charAt(0).toUpperCase()
}

function formatDate(iso?: string): string {
  if (!iso) return ''
  const d = new Date(iso)
  return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
}
</script>
