<template>
  <q-page padding>
    <div class="row items-center q-mb-md">
      <div class="text-h6 text-weight-bold">File de courriels (ERPNext)</div>
      <DynamicFilter class="col q-mx-md" v-model="filterState" search-placeholder="Destinataire, référence…"
        :chip-groups="chipGroups" preset-key="filter.email-queue" :filtered-count="displayRows.length" @change="onFilterChange" />
      <q-btn flat dense icon="refresh" :loading="loading" @click="load" class="q-mr-sm" />
      <q-btn color="negative" outline dense icon="delete_sweep" label="Purger « Not Sent »"
             :disable="loading || !notSentCount" @click="confirmPurge" />
    </div>

    <q-banner dense rounded class="bg-blue-1 text-info q-mb-md">
      <template #avatar><q-icon name="mark_email_read" /></template>
      ERPNext est en <strong>mute_emails</strong> et le scheduler est en pause : <strong>rien ne s'envoie</strong>.
      Ces entrées sont seulement en file. Tu peux les inspecter et les supprimer en toute sécurité.
    </q-banner>

    <div class="row q-gutter-sm q-mb-md">
      <q-chip v-for="(n, s) in byStatus" :key="s" :color="statusColor(s)" text-color="white" dense>
        {{ s }} : {{ n }}
      </q-chip>
      <q-chip v-if="!rows.length && loaded" color="grey-4" text-color="grey-8" dense>File vide</q-chip>
    </div>

    <DataTable
      v-if="loaded"
      :rows="displayRows" :columns="columns" row-key="name"
      flat bordered dense class="ops-table"
      :pagination="{ rowsPerPage: 50, sortBy: 'creation', descending: true }"
      :loading="loading"
    >
      <template #body-cell-status="props">
        <q-td :props="props">
          <q-chip :color="statusColor(props.value)" text-color="white" dense size="sm" :label="props.value" />
        </q-td>
      </template>
      <template #body-cell-recipients="props">
        <q-td :props="props">
          <div v-for="(r, i) in (props.row.recipients || [])" :key="i" class="text-caption">{{ r }}</div>
          <span v-if="!(props.row.recipients || []).length" class="text-grey-5">—</span>
        </q-td>
      </template>
      <template #body-cell-reference="props">
        <q-td :props="props">
          <span v-if="props.row.reference_doctype" class="text-caption">
            {{ props.row.reference_doctype }} · {{ props.row.reference_name }}
          </span>
          <span v-else class="text-grey-5">—</span>
        </q-td>
      </template>
      <template #body-cell-creation="props">
        <q-td :props="props">{{ fmtDate(props.value) }}</q-td>
      </template>
      <template #body-cell-error="props">
        <q-td :props="props">
          <q-icon v-if="props.value" name="error_outline" color="negative" />
          <q-tooltip v-if="props.value" max-width="480px" class="text-body2">{{ props.value }}</q-tooltip>
          <span v-else class="text-grey-5">—</span>
        </q-td>
      </template>
      <template #body-cell-actions="props">
        <q-td :props="props">
          <q-btn dense flat round size="sm" icon="delete" color="negative" @click="confirmDelete(props.row)">
            <q-tooltip>Supprimer ce courriel de la file</q-tooltip>
          </q-btn>
        </q-td>
      </template>
    </DataTable>
  </q-page>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { formatDateTimeShort as fmtDate } from 'src/composables/useFormatters' // date+heure canonique (source unique)
import DataTable from 'src/components/shared/DataTable.vue'
import DynamicFilter from 'src/components/shared/DynamicFilter.vue'
import { useQuasar } from 'quasar'
import { listEmailQueue, deleteEmailQueueItem, purgeEmailQueue } from 'src/api/emailQueue'

const $q = useQuasar()
const rows = ref([])
const loading = ref(false)
const loaded = ref(false)
const status = ref('')
const byStatus = ref({})

const statusOptions = [
  { label: 'Tous', value: '' },
  { label: 'Not Sent', value: 'Not Sent' },
  { label: 'Sending', value: 'Sending' },
  { label: 'Sent', value: 'Sent' },
  { label: 'Error', value: 'Error' },
]

const columns = [
  { name: 'status', label: 'Statut', field: 'status', align: 'left', sortable: true },
  { name: 'recipients', label: 'Destinataire(s)', field: 'recipients', align: 'left' },
  { name: 'reference', label: 'Référence', field: 'reference_doctype', align: 'left' },
  { name: 'creation', label: 'Créé', field: 'creation', align: 'left', sortable: true },
  { name: 'error', label: 'Erreur', field: 'error', align: 'center' },
  { name: 'actions', label: '', field: 'name', align: 'center' },
]

const notSentCount = computed(() => byStatus.value['Not Sent'] || 0)

// Filtre dynamique : chips statut (→ rechargement serveur) + recherche destinataire/référence (client, sur les lignes chargées) + presets.
const filterState = ref({ search: '', chips: {} })
const chipGroups = [{ key: 'statut', label: 'Statut', icon: 'label', options: statusOptions.filter(o => o.value !== '') }]
const displayRows = computed(() => {
  const q = (filterState.value.search || '').toLowerCase().trim()
  if (!q) return rows.value
  return rows.value.filter(r => ((r.recipients || []).join(' ') + ' ' + (r.reference_doctype || '') + ' ' + (r.reference_name || '')).toLowerCase().includes(q))
})
function onFilterChange (s) { const ns = s.chips.statut || ''; if (ns !== status.value) { status.value = ns; load() } }

function statusColor (s) {
  return { 'Not Sent': 'orange-8', Sending: 'blue-6', Sent: 'green-7', Error: 'negative', Expired: 'grey-6' }[s] || 'grey-7'
}
// fmtDate → useFormatters.formatDateTimeShort (date+heure canonique)

async function load () {
  loading.value = true
  try {
    const data = await listEmailQueue(status.value)
    rows.value = data.rows || []
    byStatus.value = data.by_status || {}
    loaded.value = true
  } catch (e) {
    $q.notify({ type: 'negative', message: 'Erreur : ' + e.message })
  } finally {
    loading.value = false
  }
}

function confirmDelete (row) {
  $q.dialog({
    title: 'Supprimer',
    message: `Supprimer ce courriel de la file (${(row.recipients || []).join(', ') || row.name}) ?`,
    cancel: true, persistent: true,
  }).onOk(async () => {
    try { await deleteEmailQueueItem(row.name); $q.notify({ type: 'positive', message: 'Supprimé' }); load() }
    catch (e) { $q.notify({ type: 'negative', message: e.message }) }
  })
}

function confirmPurge () {
  $q.dialog({
    title: 'Purger',
    message: `Supprimer les ${notSentCount.value} courriel(s) « Not Sent » de la file ?`,
    cancel: true, persistent: true,
  }).onOk(async () => {
    try { const r = await purgeEmailQueue('Not Sent'); $q.notify({ type: 'positive', message: `${r.deleted} supprimé(s)` }); load() }
    catch (e) { $q.notify({ type: 'negative', message: e.message }) }
  })
}

onMounted(load)
</script>
