<template>
  <div class="mlist" :class="{ 'mlist-compact': compact }">
    <div class="mlist-head">
      <q-btn unelevated no-caps rounded icon="edit" label="Composer" class="mlist-compose" @click="openCompose">
        <q-tooltip>Nouveau message (courriel par défaut, ou texto)</q-tooltip>
      </q-btn>
      <q-btn-toggle v-model="chanView" :options="chanOptions" dense unelevated no-caps toggle-color="primary" color="grey-2" text-color="grey-7" class="mlist-chanseg" />
      <q-input v-model="search" dense outlined clearable debounce="200" placeholder="Rechercher (nom, courriel, sujet…)" class="mlist-search">
        <template #prepend><q-icon name="search" size="18px" /></template>
      </q-input>
      <q-btn flat dense round :icon="compact ? 'density_small' : 'density_medium'" size="sm" @click="toggleDensity"><q-tooltip>{{ compact ? 'Affichage confortable' : 'Affichage compact' }}</q-tooltip></q-btn>
      <q-btn flat dense round :icon="notifyEnabled ? 'notifications_active' : 'notifications_none'" :color="notifyEnabled ? 'primary' : 'grey-6'" size="sm" @click="toggleNotify"><q-tooltip>{{ notifyEnabled ? 'Notifications navigateur activées' : 'Activer les notifications de nouveaux courriels' }}</q-tooltip></q-btn>
      <q-btn flat dense round icon="refresh" size="sm" :loading="refreshing || loading" @click="refreshNow"><q-tooltip>Rafraîchir — chercher les nouveaux courriels maintenant</q-tooltip></q-btn>
      <!-- Admin : voir la Boîte (vue/filtres) comme un autre utilisateur, en lecture seule -->
      <q-btn v-if="isAdmin" flat dense round icon="visibility" :color="impersonating ? 'deep-orange-6' : 'grey-6'" size="sm" @click="openViewAs">
        <q-tooltip>Voir la Boîte comme un autre utilisateur (admin · lecture seule)</q-tooltip>
        <q-menu>
          <q-list dense style="min-width:230px">
            <q-item-label header class="q-py-xs">Voir comme… (lecture seule)</q-item-label>
            <q-item v-for="a in agentList" :key="a" clickable v-close-popup @click="viewAs(a)" :active="a === impersonating" active-class="bg-deep-orange-1">
              <q-item-section avatar><q-avatar size="22px" color="blue-grey-5" text-color="white" style="font-size:10px">{{ agentInitials(a) }}</q-avatar></q-item-section>
              <q-item-section>{{ agentName(a) }}</q-item-section>
            </q-item>
            <q-item v-if="!agentList.length"><q-item-section class="text-grey-5 text-caption">Chargement…</q-item-section></q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </div>

    <!-- Bandeau lecture seule pendant l'impersonation admin -->
    <div v-if="impersonating" class="mlist-impersonate row items-center no-wrap">
      <q-icon name="visibility" size="15px" class="q-mr-xs" />
      <span>Vue de <b>{{ agentName(impersonating) }}</b> — lecture seule (vos préférences ne changent pas)</span>
      <q-space />
      <q-btn flat dense size="sm" no-caps icon="logout" label="Quitter" color="white" @click="exitViewAs" />
    </div>

    <!-- Case « tout cocher » + filtres OU actions de lot DANS LA MÊME LIGNE (hauteur constante → pas de décalage au clic) -->
    <div class="mlist-tabs">
      <!-- Mode TICKETS : critères de filtre obligatoires (statut + assignés à moi) -->
      <template v-if="ticketMode">
        <q-icon name="confirmation_number" color="positive" size="16px" class="q-ml-xs q-mr-sm" />
        <q-btn-toggle v-model="ticketStatus" :options="TStatusOpts" dense unelevated no-caps toggle-color="primary" color="grey-2" text-color="grey-7" size="sm" />
        <q-chip dense clickable size="sm" class="q-ml-sm" :color="ticketMine ? 'primary' : 'grey-3'" :text-color="ticketMine ? 'white' : 'grey-8'" @click="ticketMine = !ticketMine">À moi<span v-if="ticketMineCount" class="mlist-cnt">{{ ticketMineCount }}</span><q-tooltip>Tickets qui me sont assignés (ERPNext)</q-tooltip></q-chip>
        <q-space />
        <span class="text-caption text-grey-6">{{ shownTickets.length }} ticket(s)</span>
      </template>
      <template v-else>
      <q-checkbox dense size="xs" class="mlist-allcb" :model-value="headState" @update:model-value="toggleAll"><q-tooltip>{{ checked.size ? 'Tout décocher' : 'Tout cocher' }}</q-tooltip></q-checkbox>
      <template v-if="checked.size">
        <span class="text-weight-medium text-grey-8">{{ checked.size }} sélectionné(s)</span>
        <q-space />
        <q-btn dense flat no-caps size="sm" color="positive" icon="confirmation_number" label="→ Ticket" :loading="batchBusy">
          <q-menu auto-close>
            <q-list dense style="min-width:190px">
              <q-item-label header class="q-py-xs">Créer un ticket dans…</q-item-label>
              <q-item v-for="dep in TICKET_DEPTS" :key="dep.cat" clickable @click="batchTicket(dep)">
                <q-item-section avatar><q-icon :name="dep.icon" :color="dep.color" size="18px" /></q-item-section>
                <q-item-section>{{ dep.label }}</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
        <q-btn dense flat no-caps size="sm" color="grey-7" icon="archive" label="Archiver" :loading="batchBusy" @click="batchArchive" />
        <q-btn dense flat no-caps size="sm" color="negative" icon="delete" label="Supprimer" :loading="batchBusy" @click="batchDelete" />
        <q-btn dense flat round size="sm" icon="close" @click="checked = new Set()"><q-tooltip>Annuler la sélection</q-tooltip></q-btn>
      </template>
      <template v-else>
        <q-chip dense clickable size="sm" :color="sel.size === 0 ? 'primary' : 'grey-3'" :text-color="sel.size === 0 ? 'white' : 'grey-8'" @click="toggle('all')">
          Tous<span class="mlist-cnt">{{ visible.length }}</span>
        </q-chip>
        <q-chip v-for="f in chips" :key="f.key" dense clickable size="sm"
          :color="sel.has(f.key) ? 'primary' : 'grey-3'" :text-color="sel.has(f.key) ? 'white' : 'grey-8'"
          @click="toggle(f.key)">
          {{ f.label }}<span v-if="f.count" class="mlist-cnt">{{ f.count }}</span>
        </q-chip>
      </template>
      </template>
    </div>

    <div class="mlist-body">
      <!-- Mode TICKETS : liste des tickets ERPNext (Issues) filtrés -->
      <template v-if="ticketMode">
        <div v-for="t in shownTickets" :key="t.name" class="mrow mrow-ticket" @click="openTicket(t)">
          <q-icon name="confirmation_number" color="positive" size="17px" class="mrow-chan" />
          <span class="mrow-name">{{ t.customer || '—' }}</span>
          <q-badge class="mrow-tag" :color="t.status === 'Open' ? 'orange-1' : 'blue-1'" :text-color="t.status === 'Open' ? 'orange-9' : 'blue-9'">{{ t.status === 'Open' ? 'Ouvert' : t.status === 'Replied' ? 'Répondu' : t.status }}</q-badge>
          <div class="mrow-subject"><span class="mrow-subj-strong">{{ t.subject || t.name }}</span><span class="mrow-snip"> — {{ t.name }}</span></div>
          <div class="mrow-right">
            <q-icon v-if="t.convToken" name="forum" size="13px" color="green-5" class="mrow-rep"><q-tooltip>Fil de conversation lié — clic pour l'ouvrir</q-tooltip></q-icon>
            <q-badge v-if="t.priority && t.priority !== 'Medium'" class="mrow-tag" :color="['High', 'Urgent'].includes(t.priority) ? 'red-2' : 'grey-3'" :text-color="['High', 'Urgent'].includes(t.priority) ? 'red-9' : 'grey-8'">{{ t.priority }}</q-badge>
            <span class="mrow-time">{{ relTime(t.modified) }}</span>
          </div>
        </div>
        <div v-if="!shownTickets.length" class="mlist-empty">Aucun ticket{{ ticketStatus !== 'all' || ticketMine || search ? ' (filtre actif)' : '' }}</div>
      </template>
      <!-- Mode CONVERSATIONS (défaut) -->
      <template v-else>
      <!-- RÉSULTATS DE RECHERCHE FLOUE (SQL pg_trgm) : nom/courriel/sujet + CORPS DES MESSAGES, typo-tolérant, sur TOUTES les convs (même archivées) -->
      <template v-if="searchResults !== null">
        <div v-for="r in searchResults" :key="'s:' + r.token" class="mrow" @click="openSearchResult(r)">
          <q-icon v-if="r.channel" :name="channelMeta(r.channel).icon" :color="channelMeta(r.channel).color" size="16px" class="mrow-chan" />
          <span class="mrow-name">{{ r.customerName || r.email || 'Inconnu' }}</span>
          <q-badge v-if="r.queue" class="mrow-tag" color="blue-grey-1" text-color="blue-grey-8">{{ qLabel(r.queue) }}</q-badge>
          <q-badge v-if="r.status && r.status !== 'active'" class="mrow-tag" color="grey-3" text-color="grey-7">archivé</q-badge>
          <div class="mrow-subject"><span v-if="r.subject" class="mrow-subj-strong">{{ r.subject }}</span><span class="mrow-snip">{{ r.subject && r.snippet ? ' — ' : '' }}{{ r.snippet }}</span></div>
          <div class="mrow-right"><span class="mrow-time">{{ relTime(r.lastActivity) }}</span></div>
        </div>
        <div v-if="searchBusy" class="mlist-empty">Recherche…</div>
        <div v-else-if="!searchResults.length" class="mlist-empty">Aucun résultat pour « {{ search }} »</div>
      </template>
      <template v-else>
      <div v-for="(d, idx) in shown" :key="d.id" class="mrow" :class="{ 'mrow-unread': isUnread(d), 'mrow-checked': checked.has(d.id) }" @click="open(d)">
        <q-checkbox :model-value="checked.has(d.id)" dense size="xs" class="mrow-cb" @click.stop="onRowCheck($event, idx, d.id)" />
        <!-- Drapeau de PRIORITÉ (style ClickUp) : coloré si défini, discret sinon ; clic = menu rapide (triage depuis la boîte) -->
        <q-btn flat dense round size="xs" class="mrow-flag" :class="{ 'mrow-flag-none': !d.priority }" :icon="priorityMeta(d.priority).icon" :color="priorityMeta(d.priority).color" @click.stop>
          <q-tooltip v-if="d.priority">Priorité : {{ priorityMeta(d.priority).label }}</q-tooltip>
          <q-menu auto-close anchor="bottom left" self="top left">
            <q-list dense style="min-width:168px">
              <q-item-label header class="q-py-xs">Priorité</q-item-label>
              <q-item v-for="lvl in PRIORITY_LEVELS" :key="lvl" clickable @click="setRowPriority(d, lvl)" :active="d.priority === lvl" active-class="bg-green-1">
                <q-item-section avatar><q-icon name="flag" :color="priorityMeta(lvl).color" size="18px" /></q-item-section>
                <q-item-section>{{ priorityMeta(lvl).label }}</q-item-section>
              </q-item>
              <q-separator />
              <q-item clickable @click="setRowPriority(d, '')"><q-item-section avatar><q-icon name="outlined_flag" color="grey-5" size="18px" /></q-item-section><q-item-section class="text-grey-7">Aucune</q-item-section></q-item>
            </q-list>
          </q-menu>
        </q-btn>
        <!-- icône de canal seulement pour SMS/chat/Facebook ; pour le courriel (cas par défaut) elle est redondante -->
        <q-icon v-if="d.channel" :name="channelMeta(d.channel).icon" :color="channelMeta(d.channel).color" size="16px" class="mrow-chan"><q-tooltip>{{ channelMeta(d.channel).label }}</q-tooltip></q-icon>
        <!-- Ligne unique pleine largeur (style Gmail) : Nom · file · Sujet — aperçu · indicateurs · heure -->
        <span class="mrow-name">{{ d.customerName || d.email || d.phone || 'Inconnu' }}</span>
        <span v-if="replyInfo(d).count > 1" class="mrow-count">{{ replyInfo(d).count }}</span>
        <q-badge v-if="d.queue" class="mrow-tag" color="blue-grey-1" text-color="blue-grey-8">{{ qLabel(d.queue) }}</q-badge>
        <div class="mrow-subject"><span v-if="subj(d)" class="mrow-subj-strong">{{ subj(d) }}</span><span class="mrow-snip">{{ subj(d) && snip(d) ? ' — ' : '' }}{{ snip(d) }}</span></div>
        <div class="mrow-right">
          <q-icon v-if="replyInfo(d).client" name="reply" size="14px" color="positive" class="mrow-rep"><q-tooltip>Le client a répondu</q-tooltip></q-icon>
          <q-icon v-if="replyInfo(d).team" name="forum" size="13px" color="green-5" class="mrow-rep"><q-tooltip>Un collègue a répondu</q-tooltip></q-icon>
          <q-avatar v-if="draftAgentOf(d)" size="19px" color="green-5" text-color="white" class="q-mr-xs mrow-draft">
            <span style="font-size:9px;font-weight:700">{{ agentInitials(draftAgentOf(d)) }}</span>
            <q-tooltip>✎ Brouillon en cours — {{ agentName(draftAgentOf(d)) }}</q-tooltip>
          </q-avatar>
          <ReaderStack :readers="readersOf(d)" :me="meEmail" :max="3" :size="17" />
          <span class="mrow-time">{{ relTime(lastTs(d)) }}</span>
        </div>
        <!-- Barre d'actions au survol RETIRÉE : elle cachait l'avatar de présence/lecteurs à droite. Répondre/ticket/archiver/supprimer
             se font dans le fil ouvert (clic sur la ligne) + la barre de lot (cases à cocher). Le filtre « masquer comme ceci » est dans le détail du fil. -->
      </div>
      <div v-if="!shown.length" class="mlist-empty">Aucune conversation{{ sel.size || search || chanView !== 'all' ? ' (filtre actif)' : '' }}</div>
      </template>
      </template>
    </div>

    <!-- « Filtrer les messages comme celui-ci » : crée une règle masquer/afficher (style Gmail) -->
    <q-dialog v-model="filterDialog.open">
      <q-card style="min-width:340px;max-width:92vw">
        <q-card-section class="row items-center q-pb-none"><q-icon name="filter_alt" color="blue-grey-6" size="20px" class="q-mr-sm" /><span class="text-subtitle1 text-weight-bold">Filtrer les messages comme celui-ci</span></q-card-section>
        <q-card-section>
          <div class="text-caption text-grey-7 q-mb-sm">Les messages correspondants (futurs <b>et déjà reçus</b>) seront <b>{{ filterDialog.action === 'mask' ? 'masqués de la boîte' : 'toujours affichés' }}</b>.</div>
          <q-option-group :model-value="filterDialog.field" @update:model-value="onFilterField" inline dense color="primary" :options="[{ label: 'Expéditeur', value: 'from' }, { label: 'Sujet', value: 'subject' }]" />
          <q-input dense outlined v-model="filterDialog.contains" class="q-mt-sm" :label="filterDialog.field === 'from' ? 'Expéditeur contient' : 'Sujet contient'" hint="Courriel complet, domaine (ex. targo.ca) ou mot-clé" />
          <q-option-group v-model="filterDialog.action" inline dense color="primary" class="q-mt-md" :options="[{ label: 'Masquer', value: 'mask' }, { label: 'Toujours afficher', value: 'allow' }]" />
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat no-caps label="Annuler" v-close-popup />
          <q-btn unelevated no-caps color="primary" icon="check" label="Créer la règle" @click="doSaveFilter" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useQuasar } from 'quasar'
import { useConversations } from 'src/composables/useConversations'
import { useUserPrefs } from 'src/composables/useUserPrefs'
import { usePermissions } from 'src/composables/usePermissions'
import { HUB_URL } from 'src/config/hub'
import { useAuthStore } from 'src/stores/auth'
import { relTime } from 'src/composables/useFormatters'
import { channelMeta, priorityMeta, PRIORITY_LEVELS } from 'src/composables/useConversationDisplay'
import { useRouter } from 'vue-router'
import ReaderStack from './ReaderStack.vue'

const $q = useQuasar()
const router = useRouter()
const { discussions, tickets, fetchTickets, QUEUES, fetchList, pollNow, loading, openDiscussion, panelOpen, newDialogOpen, newDialogChannel, agentTyping, sharedDraft, bulkDelete, bulkArchive, createTicket, archiveDiscussion, notifyEnabled, requestNotifyPermission, fetchInboxRules, saveInboxRules, searchConversations, setPriority } = useConversations()
async function setRowPriority (d, p) { try { await setPriority(d.token, p); d.priority = p } catch (e) { /* */ } }
// Rafraîchir à la demande = forcer un pull Gmail immédiat puis recharger la liste (≠ simple relecture).
const refreshing = ref(false)
async function refreshNow () { refreshing.value = true; try { await pollNow() } finally { await fetchList(); refreshing.value = false } }
// « Filtrer comme ceci » (style Gmail) : crée une règle masquer/afficher par expéditeur ou sujet
const filterDialog = ref({ open: false, field: 'from', contains: '', action: 'mask', srcEmail: '', srcSubject: '' })
function openFilterLike (d) { filterDialog.value = { open: true, field: 'from', contains: d.email || d.customerName || '', action: 'mask', srcEmail: d.email || '', srcSubject: subj(d) || '' } }
function onFilterField (v) { filterDialog.value.field = v; filterDialog.value.contains = v === 'from' ? filterDialog.value.srcEmail : filterDialog.value.srcSubject }
async function doSaveFilter () {
  const f = filterDialog.value
  if (!String(f.contains || '').trim()) { $q.notify({ type: 'warning', message: 'Précisez un texte à filtrer.' }); return }
  try {
    const rules = await fetchInboxRules()
    rules.push({ id: 'r' + Date.now(), field: f.field, contains: String(f.contains).trim(), action: f.action })
    const r = await saveInboxRules(rules)
    $q.notify({ type: 'positive', message: (f.action === 'mask' ? 'Règle : masquer' : 'Règle : toujours afficher') + ` « ${f.contains} »` + (r.retro ? ` · ${r.retro} conv. mise(s) à jour` : '') })
    filterDialog.value.open = false
  } catch (e) { $q.notify({ type: 'negative', message: e.message }) }
}
async function toggleNotify () {
  if (notifyEnabled.value) { $q.notify({ type: 'info', message: 'Pour les désactiver, utilisez les réglages de notification du navigateur.' }); return }
  const ok = await requestNotifyPermission()
  $q.notify({ type: ok ? 'positive' : 'warning', message: ok ? 'Notifications activées — alerte à chaque nouveau courriel.' : 'Refusé — autorisez les notifications dans le navigateur.' })
}
const meEmail = computed(() => { try { return useAuthStore().user } catch { return null } })
// ── Brouillons : qui rédige une réponse pour ce client (live SSE OU brouillon persisté) → pastille avatar ──
function draftAgentOf (d) {
  for (const c of (d.conversations || [])) { const a = agentTyping.value[c.token]; if (a) return a }       // tape en ce moment
  for (const c of (d.conversations || [])) { const sd = sharedDraft.value[c.token]; if (sd && sd.agent) return sd.agent } // brouillon mirroré (live)
  return d.draftAgent || null                                                                                 // brouillon persisté (au chargement)
}
function agentInitials (a) {
  const parts = String(a || '').split('@')[0].replace(/[._-]+/g, ' ').trim().split(/\s+/).filter(Boolean)
  return ((parts[0] || '?')[0] + (parts[1] ? parts[1][0] : (parts[0] || '?').slice(1, 2))).toUpperCase()
}
function agentName (a) { return String(a || '').split('@')[0].replace(/[._-]+/g, ' ').replace(/\b\w/g, c => c.toUpperCase()) }

const sel = ref(new Set())     // filtres cumulables (départements OU entre eux ; unread/mine = ET)
const search = ref('')
// Recherche FLOUE omnichannel (SQL pg_trgm côté hub) : nom/courriel/sujet + corps des messages, sur TOUTES les convs.
const searchResults = ref(null) // null = pas de recherche active → liste normale ; tableau = résultats SQL
const searchBusy = ref(false)
let _searchSeq = 0
watch(search, async (v) => { // l'input est déjà debounce 200ms
  const q = String(v || '').trim()
  if (q.length < 2) { searchResults.value = null; searchBusy.value = false; return }
  const seq = ++_searchSeq
  searchBusy.value = true
  const r = await searchConversations(q)
  if (seq !== _searchSeq) return // frappe plus récente → résultat périmé ignoré
  searchResults.value = r; searchBusy.value = false
})
function openSearchResult (r) { if (r && r.token) router.push('/communications/c/' + r.token) } // peut ouvrir une conv archivée non chargée
// ── Vue par canal (style Gmail « Mail / Chat ») : Tous (défaut) · Courriel · Clavardage (SMS + chat web temps réel) ──
const chanView = ref('all')
const CHAT_CH = ['sms', 'webchat', '3cx', 'facebook']
const chanOptions = [
  { value: 'all', label: 'Tous', icon: 'all_inbox' },
  { value: 'email', label: 'Courriel', icon: 'mail' },
  { value: 'chat', label: 'Clavardage', icon: 'forum' },
  { value: 'tickets', label: 'Tickets', icon: 'confirmation_number' },
]
const ticketMode = computed(() => chanView.value === 'tickets')
// Composer (style Gmail) : ouvre la fenêtre de composition ; défaut = canal de la vue courante (Clavardage → texto).
function openCompose () { newDialogChannel.value = 'email'; newDialogOpen.value = true } // Compose = courriel par défaut ; SMS = choix secondaire dans la fenêtre
const compact = ref(false); try { compact.value = localStorage.getItem('mlist-density') === 'compact' } catch (e) { /* */ }
function toggleDensity () { compact.value = !compact.value; try { localStorage.setItem('mlist-density', compact.value ? 'compact' : '') } catch (e) { /* */ } }
const checked = ref(new Set()) // ids de discussions cochées (batch)

// ── Vue TICKETS dans la Boîte (ERPNext Issues) — affichée seulement en mode « Tickets », avec critères de filtre OBLIGATOIRES (statut + assignés à moi + recherche) pour ne pas noyer la file ──
const ticketStatus = ref('open')   // 'open' | 'replied' | 'all'
const ticketMine = ref(false)
const TStatusOpts = [{ value: 'open', label: 'Ouverts' }, { value: 'replied', label: 'Répondus' }, { value: 'all', label: 'Tous' }]
const ticketMineCount = computed(() => { const me = String(meEmail.value || '').toLowerCase(); return (tickets.value || []).filter(t => (t.assignees || []).map(x => String(x).toLowerCase()).includes(me)).length })
const shownTickets = computed(() => {
  const q = search.value.trim().toLowerCase()
  const me = String(meEmail.value || '').toLowerCase()
  return (tickets.value || []).filter(t => {
    if (ticketStatus.value === 'open' && t.status !== 'Open') return false
    if (ticketStatus.value === 'replied' && t.status !== 'Replied') return false
    if (ticketMine.value && !(t.assignees || []).map(x => String(x).toLowerCase()).includes(me)) return false
    if (q && ![t.name, t.subject, t.customer].some(x => String(x || '').toLowerCase().includes(q))) return false
    return true
  }) // déjà trié « modified desc » par le hub
})
function openTicket (t) {
  if (t.convToken) { const d = (discussions.value || []).find(x => (x.conversations || []).some(c => c.token === t.convToken) || x.token === t.convToken); if (d) { open(d); return } router.push('/communications/c/' + t.convToken); return }
  if (t.customer) { router.push('/clients/' + encodeURIComponent(t.customer)); return }
  $q.notify({ type: 'info', message: t.name + (t.subject ? ' — ' + t.subject : '') })
}
watch(() => chanView.value === 'tickets', (on) => { if (on) fetchTickets() }) // (re)charge les tickets en entrant dans la vue

// ── MOTEUR DE PRÉFÉRENCES par utilisateur (serveur, suit l'usager entre appareils + lisible par l'admin) : vue/filtres/densité de la Boîte persistés ──
const impersonating = ref('')                      // PHASE 3 — courriel de l'utilisateur dont on regarde la Boîte ('' = soi-même). Déclaré AVANT les watch (le watch immédiat le lit → éviter le TDZ).
const { prefs: inboxPrefs, save: saveInbox } = useUserPrefs('inbox', { chanView: 'all', filters: [], compact: false, ticketStatus: 'open', ticketMine: false })
let _lastSaved = ''
function _prefSig () { return JSON.stringify({ chanView: chanView.value, filters: [...sel.value].sort(), compact: compact.value, ticketStatus: ticketStatus.value, ticketMine: ticketMine.value }) }
function applyInboxPrefs (p) {                    // applique un jeu de préférences à l'état local (les miennes OU celles d'un autre en mode « voir comme »)
  if (!p) return
  chanView.value = p.chanView || 'all'
  sel.value = new Set(Array.isArray(p.filters) ? p.filters : [])
  compact.value = !!p.compact
  ticketStatus.value = p.ticketStatus || 'open'
  ticketMine.value = !!p.ticketMine
}
watch(inboxPrefs, (p) => {                        // localStorage (instantané) puis serveur → applique à l'état local
  if (impersonating.value) return                 // en mode « voir comme » : ne PAS écraser la vue avec mes propres prefs
  applyInboxPrefs(p)
  _lastSaved = _prefSig()                          // évite de re-sauver ce qu'on vient d'appliquer (anti-écho)
}, { immediate: true, deep: true })
watch([chanView, sel, compact, ticketStatus, ticketMine], () => {
  if (impersonating.value) return                 // LECTURE SEULE pendant l'impersonation : on n'enregistre rien
  const sig = _prefSig(); if (sig === _lastSaved) return
  _lastSaved = sig
  saveInbox({ chanView: chanView.value, filters: [...sel.value], compact: compact.value, ticketStatus: ticketStatus.value, ticketMine: ticketMine.value })
}, { deep: true })

// ── PHASE 3 — ADMIN : « Voir comme… » un autre utilisateur (lecture seule). Le serveur (/prefs?as=) n'autorise QUE les admins (x-authentik-groups) ; sinon il renvoie nos propres prefs (repli sûr). ──
const { isAdmin } = usePermissions()
const agentList = ref([])
async function openViewAs () { if (!agentList.value.length) agentList.value = await fetchAgents() }
async function viewAs (email) {
  try {
    const r = await fetch(`${HUB_URL}/prefs?as=${encodeURIComponent(email)}`).then(x => x.ok ? x.json() : null)
    if (!r) throw new Error('chargement échoué')
    impersonating.value = email                    // active la lecture seule AVANT d'appliquer (bloque la sauvegarde)
    applyInboxPrefs((r.prefs && r.prefs.inbox) || {})
    if (chanView.value === 'tickets') fetchTickets()
    $q.notify({ type: 'info', icon: 'visibility', message: 'Vue de ' + agentName(email) + ' — lecture seule' })
  } catch (e) { impersonating.value = ''; $q.notify({ type: 'negative', message: 'Voir comme : ' + e.message }) }
}
async function exitViewAs () {
  impersonating.value = ''
  try { const r = await fetch(`${HUB_URL}/prefs`).then(x => x.ok ? x.json() : null); applyInboxPrefs((r && r.prefs && r.prefs.inbox) || {}); _lastSaved = _prefSig() } catch (e) { /* on garde l'état courant */ }
  $q.notify({ type: 'positive', message: 'Retour à vos préférences' })
}
const batchBusy = ref(false)

const QLABELS = { Facturations: 'Facturation', 'Service à la clientèle': 'Service client', Supports: 'Support', Technicien: 'Technicien' }
function qLabel (q) { return QLABELS[q] || q }
function chanIcon (c) { return c === 'email' ? 'mail' : c === 'webchat' ? 'forum' : c === 'facebook' ? 'chat' : 'sms' }
function chanColor (c) { return c === 'email' ? 'red-5' : c === 'webchat' ? 'purple-5' : c === 'facebook' ? 'blue-6' : 'teal-6' }
function lastTs (d) { return d.lastMessage && d.lastMessage.ts }
function subjectOf (d) { return d.subject || (d.lastMessage && (d.lastMessage.text || '')) || '—' }
function subj (d) { const s = d.subject; return (s && s !== '(courriel)') ? s : '' } // ligne de sujet (vide pour SMS/chat)
function snip (d) { return String((d.lastMessage && d.lastMessage.text) || '').replace(/^✉️[^\n]*\n+/, '').replace(/\s+/g, ' ').trim() } // aperçu du dernier message
function discToken (d) { const a = (d.conversations || []).find(c => c.status === 'active'); return (a && a.token) || d.token || ((d.conversations || [])[0] || {}).token || null }

function isUnread (d) {
  if (!d.lastMessage || d.lastMessage.from === 'agent') return false
  const mine = (d.readBy || {})[meEmail.value]
  if (!mine) return true
  return !mine.lastTs || String(mine.lastTs) < String(d.lastMessage.ts)
}
function readersOf (d) {
  const rb = d.readBy || {}
  return Object.keys(rb).map(e => ({ email: e, readAt: rb[e] && rb[e].readAt })).sort((a, b) => String(b.readAt || '').localeCompare(String(a.readAt || '')))
}
function typingLabel (d) {
  for (const c of (d.conversations || [])) { const a = agentTyping.value[c.token]; if (a) return a.includes('@') ? a.split('@')[0] : a }
  return ''
}
// Indicateurs « il y a eu des réponses » : nb total de messages + un collègue (agent) a répondu + le client a répondu (≥2 msgs client)
function replyInfo (d) {
  const ms = d.messages || []
  return { count: d.messageCount || ms.length, team: ms.some(m => m.from === 'agent'), client: ms.filter(m => m.from === 'customer').length > 1 }
}
function matchSearch (d, q) {
  return [d.customerName, d.email, d.phone, d.subject, d.lastMessage && d.lastMessage.text].some(x => String(x || '').toLowerCase().includes(q))
}

const CH_LABELS = { email: 'Courriel', sms: 'SMS', webchat: 'Chat web', facebook: 'Messenger' }
// Vue « Masqués » : affiche les conversations masquées (noise) au lieu de l'inbox normale
const maskedMode = computed(() => sel.value.has('masked'))
const visible = computed(() => (discussions.value || []).filter(d => d.status === 'active' && (maskedMode.value ? !!d.noise : !d.noise)))
const maskedCount = computed(() => (discussions.value || []).filter(d => d.status === 'active' && d.noise).length)
const chips = computed(() => {
  const base = [
    { key: 'unread', label: 'Non lus', count: visible.value.filter(isUnread).length },
    { key: 'mine', label: 'À moi', count: visible.value.filter(d => d.assignee === meEmail.value).length },
  ]
  const prioN = visible.value.filter(d => d.priority === 'urgent' || d.priority === 'high').length
  if (prioN) base.push({ key: 'prio', label: '🚩 Prioritaires', count: prioN })
  const draftN = visible.value.filter(draftAgentOf).length
  if (draftN) base.push({ key: 'draft', label: '✎ Brouillons', count: draftN })
  for (const q of QUEUES) base.push({ key: q, label: qLabel(q), count: visible.value.filter(d => (d.queue || '') === q).length })
  // (Filtre par canal = segment « Tous / Courriel / Clavardage » de l'en-tête, style Gmail.)
  if (maskedCount.value) base.push({ key: 'masked', label: '🔇 Masqués', count: maskedCount.value }) // voir ce qui est filtré/masqué
  return base
})
function toggle (k) {
  const s = new Set(sel.value)
  if (k === 'all') s.clear()
  else if (s.has(k)) s.delete(k); else s.add(k)
  sel.value = s
}
const shown = computed(() => {
  const q = search.value.trim().toLowerCase()
  const depts = [...sel.value].filter(k => QUEUES.includes(k))
  const needU = sel.value.has('unread'); const needM = sel.value.has('mine'); const needD = sel.value.has('draft'); const needPrio = sel.value.has('prio')
  return visible.value.filter(d => {
    if (depts.length && !depts.includes(d.queue || '')) return false
    const isChat = CHAT_CH.includes(d.channel || '')
    if (chanView.value === 'email' && isChat) return false
    if (chanView.value === 'chat' && !isChat) return false
    if (needD && !draftAgentOf(d)) return false
    if (needU && !isUnread(d)) return false
    if (needM && d.assignee !== meEmail.value) return false
    if (needPrio && !(d.priority === 'urgent' || d.priority === 'high')) return false
    if (q && !matchSearch(d, q)) return false
    return true
    // Tri : priorité d'abord (Urgent → Haute → Normale → Basse → aucune), puis récence dans chaque bande.
  }).sort((a, b) => (priorityMeta(b.priority).rank - priorityMeta(a.priority).rank) || String(lastTs(b) || '').localeCompare(String(lastTs(a) || '')))
})

// Sélection par plage (style Gmail) : cocher une case, puis SHIFT+clic sur une
// autre case sélectionne TOUTES les lignes entre les deux. Sinon, bascule simple.
// `lastIdx` = ancre (dernière case cliquée sans shift).
const lastIdx = ref(null)
function onRowCheck (e, idx, id) {
  const s = new Set(checked.value)
  if (e && e.shiftKey && lastIdx.value !== null && lastIdx.value !== idx) {
    const a = Math.min(lastIdx.value, idx)
    const b = Math.max(lastIdx.value, idx)
    for (let i = a; i <= b; i++) { const row = shown.value[i]; if (row) s.add(row.id) }
    if (window.getSelection) { try { window.getSelection().removeAllRanges() } catch (_) { /* évite la sélection de texte au shift-clic */ } }
  } else {
    s.has(id) ? s.delete(id) : s.add(id)
  }
  checked.value = s
  lastIdx.value = idx
}
const checkedDiscs = computed(() => shown.value.filter(d => checked.value.has(d.id)))
// Case maîtresse « tout cocher » : true=tout, null=indéterminé (partiel), false=rien
const allChecked = computed(() => shown.value.length > 0 && shown.value.every(d => checked.value.has(d.id)))
const headState = computed(() => checked.value.size ? (allChecked.value ? true : null) : false)
function toggleAll () { if (allChecked.value) { checked.value = new Set() } else { const s = new Set(); shown.value.forEach(d => s.add(d.id)); checked.value = s } }
async function batchDelete () {
  if (!checkedDiscs.value.length) return
  $q.dialog({ title: 'Supprimer', message: `Supprimer ${checkedDiscs.value.length} conversation(s) ? (courriels liés → corbeille Gmail)`, cancel: true, ok: { label: 'Supprimer', color: 'negative' } }).onOk(async () => {
    batchBusy.value = true
    try { await bulkDelete(checkedDiscs.value); $q.notify({ type: 'positive', message: 'Supprimé.' }); checked.value = new Set() } catch (e) { $q.notify({ type: 'negative', message: e.message }) } finally { batchBusy.value = false }
  })
}
async function batchTicket (dep) {
  const list = checkedDiscs.value.slice()
  if (!list.length) return
  batchBusy.value = true
  let ok = 0
  for (const d of list) {
    const tok = discToken(d); if (!tok) continue
    try { await createTicket(tok, { title: subjectOf(d).slice(0, 90), category: dep.cat, priority: 'Medium' }); ok++ } catch (e) { /* continue */ }
  }
  try { await bulkArchive(list) } catch (e) { /* */ } // retire de la boîte ; les tickets suivent le travail
  batchBusy.value = false
  checked.value = new Set()
  $q.notify({ type: ok ? 'positive' : 'negative', message: `${ok} ticket(s) « ${dep.label} » créé(s) · conversations archivées.` })
}
async function batchArchive () {
  const list = checkedDiscs.value.slice()
  if (!list.length) return
  batchBusy.value = true
  try { await bulkArchive(list); $q.notify({ type: 'positive', message: `${list.length} archivé(s).` }); checked.value = new Set() } catch (e) { $q.notify({ type: 'negative', message: e.message }) } finally { batchBusy.value = false }
}

// Actions au survol (style Gmail) : répondre / classer en ticket par département / archiver / supprimer
const TICKET_DEPTS = [
  { label: 'Support technique', cat: 'Support', icon: 'build', color: 'primary' },
  { label: 'Facturation', cat: 'Facturation', icon: 'receipt_long', color: 'green-7' },
  { label: 'Service client', cat: 'Service client', icon: 'support_agent', color: 'blue-6' },
  { label: 'Installation', cat: 'Installation', icon: 'cable', color: 'deep-orange-6' },
]
const rowBusy = ref(null)
async function ticketTo (d, dep) {
  const tok = discToken(d); if (!tok) return
  rowBusy.value = d.id
  try { await createTicket(tok, { title: subjectOf(d).slice(0, 90), category: dep.cat, priority: 'Medium' }); await archiveDiscussion(d); $q.notify({ type: 'positive', message: 'Ticket « ' + dep.label + ' » créé — conversation archivée' }) } catch (e) { $q.notify({ type: 'negative', message: e.message }) } finally { rowBusy.value = null }
}
async function quickArchive (d) {
  rowBusy.value = d.id
  try { await archiveDiscussion(d); $q.notify({ type: 'positive', message: 'Archivé' }) } catch (e) { $q.notify({ type: 'negative', message: e.message }) } finally { rowBusy.value = null }
}
function quickDelete (d) {
  $q.dialog({ title: 'Supprimer', message: 'Supprimer cette conversation ? (courriels liés → corbeille Gmail)', cancel: true, ok: { label: 'Supprimer', color: 'negative' } }).onOk(async () => {
    try { await bulkDelete([d]); $q.notify({ type: 'positive', message: 'Supprimé' }) } catch (e) { $q.notify({ type: 'negative', message: e.message }) }
  })
}
function open (d) { const tok = discToken(d); if (tok) router.push('/communications/c/' + tok); else { panelOpen.value = true; openDiscussion(d) } }
function openFiche (d) { if (d && d.customer) router.push('/clients/' + encodeURIComponent(d.customer)) } // lien direct liste → fiche client OPS 360
onMounted(() => { if (!discussions.value || !discussions.value.length) fetchList() })
</script>

<style scoped>
/* Pleine hauteur et PLEINE LARGEUR : le panneau de messages est maintenant une
   fenêtre flottante (plus de volet ancré à droite), donc la boîte occupe tout l'espace. */
.mlist { display: flex; flex-direction: column; height: calc(100vh - 50px); width: 100%; }
.mlist-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; }
.mlist-impersonate { background: #f4511e; color: #fff; font-size: 0.8rem; padding: 5px 12px; gap: 4px; }
.mlist-impersonate b { font-weight: 700; }
.mlist-search { flex: 1; max-width: 520px; }
.mlist-compose { font-weight: 600; padding: 5px 18px; flex: 0 0 auto; background: #00C853 !important; color: #fff !important; }
.mlist-chanseg { border: 1px solid #e2e8f0; border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
/* Une SEULE ligne (les puces défilent horizontalement si trop nombreuses) → hauteur constante, donc la sélection ne décale jamais la liste */
.mlist-tabs { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--ops-border, #e2e8f0); overflow-x: auto; min-height: 40px; }
.mlist-tabs::-webkit-scrollbar { height: 0; }
.mlist-tabs .q-chip { flex: 0 0 auto; }
/* Mobile : la barre d'outils s'empile — recherche pleine largeur sous Composer + canal (les chips défilent déjà). */
@media (max-width: 599px) {
  .mlist-head { flex-wrap: wrap; padding: 8px 8px 4px; }
  .mlist-search { flex: 1 1 100%; order: 10; max-width: none; }
}
.mlist-allcb { flex: 0 0 auto; margin-right: 4px; }
.mlist-cnt { margin-left: 5px; font-size: 0.66rem; opacity: 0.8; }
.mlist-batch { display: flex; align-items: center; gap: 4px; padding: 6px 12px; background: #eef2ff; border-bottom: 1px solid #c7d2fe; font-size: 0.82rem; }
.mlist-body { flex: 1; overflow-y: auto; overflow-x: hidden; }
/* garantit que chaque ligne tient dans la largeur (pas de débordement horizontal ; le sujet/aperçu s'ellipse) */
.mrow { width: 100%; box-sizing: border-box; }
.mrow { display: flex; gap: 8px; padding: 8px 16px; border-bottom: 1px solid #f1f5f9; cursor: pointer; align-items: center; position: relative; }
.mrow:hover { background: var(--ops-bg-hover, #eef2ff); }
/* Actions au survol : apparaissent à droite (par-dessus heure/lecteurs), comme Gmail */
.mrow-actions { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none; align-items: center; gap: 1px; background: var(--ops-bg-hover, #eef2ff); padding: 2px 5px; border-radius: 8px; box-shadow: 0 1px 5px rgba(15, 23, 42, .12); }
.mrow:hover .mrow-actions { display: flex; }
.mrow-checked { background: #eef2ff; }
.mrow-cb { margin-top: 1px; flex: 0 0 auto; }
.mrow-flag { flex: 0 0 auto; transition: opacity .15s; }
.mrow-flag-none { opacity: .2; }            /* aucune priorité → drapeau discret (ne pollue pas la liste) */
.mrow:hover .mrow-flag-none { opacity: .55; } /* au survol → visible pour classer en 1 clic */
.mrow-chan { margin-top: 2px; flex: 0 0 auto; }
.mrow-main { flex: 1; min-width: 0; }
.mrow-line1 { display: flex; align-items: center; gap: 6px; }
.mlist-compact .mrow { padding-top: 5px; padding-bottom: 5px; }
.mlist-compact .mrow-subject, .mlist-compact .mrow-name { font-size: 0.76rem; }
.mrow-name { flex: 0 0 auto; width: 200px; max-width: 26%; min-width: 110px; font-size: 0.86rem; color: var(--ops-text, #1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sujet — aperçu : occupe toute la largeur restante, sur une seule ligne */
.mrow-subject { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.82rem; }
.mrow-subj-strong { color: var(--ops-text, #1e293b); }
.mrow-snip { color: var(--ops-text-muted, #64748b); }
.mrow-right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.mrow-tag { font-size: 0.62rem; }
.mrow-count { font-size: 0.66rem; color: #64748b; background: #eef2f7; border-radius: 9px; padding: 0 6px; line-height: 1.5; flex: 0 0 auto; }
.mrow-rep { margin-left: 4px; flex: 0 0 auto; }
.mrow-time { font-size: 0.7rem; color: var(--ops-text-muted, #64748b); flex: 0 0 auto; }
.mrow-sub { font-size: 0.78rem; color: var(--ops-text-muted, #64748b); margin-top: 1px; }
.mrow-foot { display: flex; align-items: center; min-height: 20px; margin-top: 5px; }
.mrow-typing { font-size: 0.7rem; color: #0d9488; font-weight: 500; display: flex; align-items: center; gap: 3px; }
.mrow-unread .mrow-name, .mrow-unread .mrow-subj-strong { font-weight: 700; }
.mrow-unread .mrow-snip { color: var(--ops-text, #334155); }
.mrow-unread { background: #fafbff; }
.mlist-empty { text-align: center; color: #94a3b8; padding: 32px; font-size: 0.85rem; }
</style>
