<template>
  <q-page class="q-pa-md">
    <PageHeader title="Événements" />

    <!-- Bandeau événement -->
    <div class="ops-card q-pa-md q-mb-md" style="border-radius:12px">
      <div class="row items-center ops-row-wrap q-gutter-sm">
        <div class="ev-badge"><b>20</b><span>ANS</span></div>
        <div class="col" style="min-width:0">
          <div class="text-h6 text-weight-bold ellipsis">{{ ev.name || 'Targo fête ses 20 ans' }}</div>
          <div class="text-caption text-grey-7">
            <q-icon name="event" size="16px" class="q-mr-xs" />{{ ev.when || '1ᵉʳ août, de 10 h à 15 h' }}
          </div>
        </div>
        <q-btn flat dense icon="refresh" :loading="loading" @click="load" class="col-auto"><q-tooltip>Rafraîchir</q-tooltip></q-btn>
      </div>
    </div>

    <!-- KPIs -->
    <div class="row q-col-gutter-sm q-mb-md">
      <div class="col-6 col-sm-4"><StatCard label="Inscriptions" :value="count" icon="how_to_reg" color="primary" hint="Réponses reçues" /></div>
      <div class="col-6 col-sm-4"><StatCard label="Personnes attendues" :value="headcount" icon="groups" color="green-7" hint="Total pour le food truck" /></div>
      <div class="col-6 col-sm-4"><StatCard label="À vérifier" :value="unmatched" icon="help_outline" :color="unmatched ? 'orange-8' : 'grey-5'" :value-class="unmatched ? 'text-orange-8' : ''" hint="N° client non reconnu" /></div>
    </div>

    <div class="row q-col-gutter-md">
      <!-- Colonne gauche : inviter -->
      <div class="col-12 col-md-4">
        <div class="ops-card q-pa-md q-mb-md" style="border-radius:12px">
          <div class="text-subtitle2 text-weight-bold q-mb-sm"><q-icon name="link" class="q-mr-xs" />Lien public d'inscription</div>
          <div class="text-caption text-grey-7 q-mb-sm">À mettre sur l'affiche, les réseaux sociaux ou un code QR. Le client saisit son numéro.</div>
          <q-input dense outlined readonly :model-value="publicUrl" class="q-mb-sm">
            <template #append><q-btn flat dense round icon="content_copy" @click="copy(publicUrl)"><q-tooltip>Copier</q-tooltip></q-btn></template>
          </q-input>
          <q-btn flat dense no-caps color="primary" icon="open_in_new" label="Ouvrir la page" :href="publicUrl" target="_blank" :disable="!publicUrl" />
        </div>

        <div class="ops-card q-pa-md" style="border-radius:12px">
          <div class="text-subtitle2 text-weight-bold q-mb-sm"><q-icon name="mail" class="q-mr-xs" />Invitation par courriel</div>
          <div class="text-caption text-grey-7 q-mb-sm">
            Chaque client reçoit un lien <b>personnalisé</b> : son numéro est pré-rempli et son inscription est rattachée automatiquement.
          </div>
          <q-btn unelevated no-caps color="primary" icon="send" label="Préparer l'envoi" @click="prepSend" />
          <div class="text-caption text-grey-5 q-mt-sm">Aucun courriel n'est envoyé sans confirmation.</div>
        </div>
      </div>

      <!-- Colonne droite : liste des inscrits -->
      <div class="col-12 col-md-8">
        <div class="ops-card q-pa-md" style="border-radius:12px">
          <div class="row items-center ops-row-wrap q-mb-sm">
            <div class="text-subtitle2 text-weight-bold">Inscriptions</div>
            <q-space />
            <q-btn flat dense no-caps icon="download" label="CSV" :disable="!filtered.length" @click="exportRows" />
          </div>
          <DynamicFilter v-model="filterState" dense search-placeholder="Nom, n° client, courriel…"
            :chip-groups="chipGroups" :filtered-count="filtered.length" class="q-mb-sm" />

          <q-banner v-if="error" dense rounded class="bg-orange-1 text-orange-9 q-mb-sm">
            <template #avatar><q-icon name="cloud_off" /></template>
            {{ error }}
          </q-banner>

          <DataTable
            :rows="filtered" :columns="columns" row-key="key"
            flat bordered dense :loading="loading"
            :pagination="{ rowsPerPage: 50, sortBy: 'updated', descending: true }"
            no-data-label="Aucune inscription pour l'instant.">
            <template #body-cell-client="props">
              <q-td :props="props">
                <div class="text-weight-medium ellipsis">{{ props.row.customer_name || props.row.customer_number || '—' }}</div>
                <div class="text-caption text-grey-6">{{ props.row.customer_number }}</div>
              </q-td>
            </template>
            <template #body-cell-party="props">
              <q-td :props="props" class="text-center"><q-chip dense square color="green-1" text-color="green-9" class="text-weight-bold">{{ props.value }}</q-chip></q-td>
            </template>
            <template #body-cell-email="props">
              <q-td :props="props">
                <div>{{ props.value || '—' }}</div>
                <div v-if="props.row.phone" class="text-caption text-grey-7"><q-icon name="call" size="12px" class="q-mr-xs" />{{ props.row.phone }}</div>
              </q-td>
            </template>
            <template #body-cell-allergies="props">
              <q-td :props="props">
                <span v-if="props.value" class="text-orange-9">⚠ {{ props.value }}</span>
                <span v-else class="text-grey-5">—</span>
              </q-td>
            </template>
            <template #body-cell-confidence="props">
              <q-td :props="props" class="text-center">
                <q-badge v-if="props.value === 'confirmed'" color="green-7" label="Confirmé"><q-tooltip>≥2 infos concordent : {{ (props.row.signals || []).join(', ') }}</q-tooltip></q-badge>
                <q-badge v-else-if="props.value === 'probable'" color="blue-6" label="Probable"><q-tooltip>1 info concorde : {{ (props.row.signals || []).join(', ') }} — à confirmer</q-tooltip></q-badge>
                <q-badge v-else color="orange-7" label="À vérifier"><q-tooltip>Aucune concordance — valider manuellement</q-tooltip></q-badge>
                <div v-if="props.row.account_name && props.row.account_name !== props.row.customer_name" class="text-caption text-grey-6 q-mt-xs">dossier : {{ props.row.account_name }}</div>
              </q-td>
            </template>
            <template #body-cell-updated="props">
              <q-td :props="props" class="text-caption">{{ fmtDate(props.value) }}</q-td>
            </template>
            <template #body-cell-actions="props">
              <q-td :props="props" class="text-center">
                <q-btn flat dense round size="sm" icon="delete" color="negative" @click="confirmDelete(props.row)"><q-tooltip>Retirer</q-tooltip></q-btn>
              </q-td>
            </template>
          </DataTable>
        </div>
      </div>
    </div>
    <!-- Dialogue d'envoi : test OU audience de masse (aperçu ; le blast reste à activer) -->
    <q-dialog v-model="showSend">
      <q-card style="min-width:340px;max-width:560px;width:100%">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">Envoyer une invitation</div><q-space />
          <q-btn flat round dense icon="close" v-close-popup />
        </q-card-section>

        <q-card-section class="q-pb-none">
          <q-btn-toggle v-model="sendMode" spread no-caps unelevated toggle-color="primary" color="grey-3" text-color="grey-8"
            :options="[{ label: 'Test à moi', value: 'test' }, { label: 'Envoi de masse', value: 'mass' }]" />
        </q-card-section>

        <!-- TEST -->
        <q-card-section v-if="sendMode === 'test'" class="q-gutter-sm">
          <div class="text-caption text-grey-7">Envoi d'un test (courriel avec lien personnalisé) à ton adresse.</div>
          <q-btn-toggle v-model="sendChannel" spread no-caps dense :options="[{ label: 'Mailjet (suivi)', value: 'mailjet' }, { label: 'Gmail direct', value: 'gmail' }]" />
          <q-input v-model="testEmail" dense outlined type="email" label="Courriel de test" autofocus />
        </q-card-section>

        <!-- MASSE -->
        <q-card-section v-else class="q-gutter-sm">
          <q-select v-model="template" :options="templates" dense outlined emit-value map-options label="Modèle de courriel" />
          <q-btn-toggle v-model="sendChannel" spread no-caps dense :options="[{ label: 'Mailjet (suivi)', value: 'mailjet' }, { label: 'Gmail direct', value: 'gmail' }]" />
          <div class="text-caption text-grey-7"><q-icon name="info" size="14px" /> Mailjet = suivi ouvertures/clics. Gmail direct = aucun suivi.</div>

          <div class="text-weight-medium text-grey-8 q-mt-sm">Audience</div>
          <q-btn-toggle v-model="audienceSource" spread no-caps dense @update:model-value="audPreview = null"
            :options="[{ label: 'Liste clients', value: 'list' }, { label: 'Import CSV', value: 'csv' }]" />

          <div v-if="audienceSource === 'list'" class="q-gutter-sm">
            <div class="row q-col-gutter-sm">
              <q-select class="col-12 col-sm-6" v-model="audFilters.statut" :options="[{ label: 'Clients actifs', value: 'active' }, { label: 'Tous', value: '' }]" dense outlined emit-value map-options label="Statut" @update:model-value="audPreview = null" />
              <q-select class="col-12 col-sm-6" v-model="audFilters.customer_type" :options="[{ label: 'Tous types', value: '' }, { label: 'Résidentiel', value: 'Individual' }, { label: 'Commercial', value: 'Company' }]" dense outlined emit-value map-options label="Type de client" @update:model-value="audPreview = null" />
            </div>
            <q-toggle v-model="audFilters.active_sub" label="Abonnement actif seulement" @update:model-value="onActiveSubToggle" />
            <q-input v-model.number="audFilters.min_monthly" type="number" min="0" dense outlined :disable="!audFilters.active_sub" label="Total mensuel minimum ($/mois)" @update:model-value="audPreview = null">
              <template #prepend><q-icon name="attach_money" /></template>
            </q-input>
            <div class="text-caption text-grey-6">Le « total mensuel » (somme des abonnements actifs) requiert d'activer « Abonnement actif ». « Résidentiel/Commercial » = type de compte.</div>
          </div>

          <div v-else class="q-gutter-sm">
            <q-file v-model="csvFile" dense outlined label="Fichier CSV" accept=".csv,text/csv" @update:model-value="onCsvFile">
              <template #prepend><q-icon name="upload_file" /></template>
            </q-file>
            <div class="text-caption text-grey-6">Colonne obligatoire : <b>email</b>. Optionnelles : firstname, lastname, language (fr/en), customer_id, phone.</div>
          </div>

          <q-btn outline no-caps color="primary" icon="groups" label="Aperçu de l'audience" :loading="previewing" @click="doPreview" />

          <q-banner v-if="audPreview" dense rounded class="bg-blue-1 text-blue-10">
            <b>{{ audPreview.count }}</b> destinataire(s)<span v-if="audPreview.dropped_no_email"> · {{ audPreview.dropped_no_email }} sans courriel écarté(s)</span><span v-if="audPreview.resiliated_excluded" class="text-orange-9"> · {{ audPreview.resiliated_excluded }} ex-client(s) résilié(s) exclus</span>
            <div v-if="audPreview.sample && audPreview.sample.length" class="text-caption q-mt-xs" style="opacity:.85">
              ex. {{ audPreview.sample.slice(0, 4).map(s => s.firstname || s.email).join(', ') }}…
            </div>
            <div v-if="audPreview.no_email && audPreview.no_email.length" class="q-mt-xs">
              <a class="cursor-pointer text-weight-medium text-blue-10" @click="showNoEmail = !showNoEmail">
                {{ showNoEmail ? '▾ Masquer' : '▸ Voir' }} les {{ audPreview.dropped_no_email }} comptes sans courriel (à valider)
              </a>
              <div v-if="showNoEmail" class="q-mt-xs q-pa-xs bg-white rounded-borders" style="max-height:170px;overflow:auto">
                <div v-for="ne in audPreview.no_email" :key="ne.customer_id" class="text-caption">
                  <a :href="'#/clients/' + ne.customer_id" target="_blank" class="text-primary">{{ ne.name }}</a>
                  <span class="text-grey-6"> · {{ ne.customer_id }}</span>
                </div>
                <div v-if="audPreview.dropped_no_email > audPreview.no_email.length" class="text-caption text-grey-6 q-mt-xs">…et {{ audPreview.dropped_no_email - audPreview.no_email.length }} autres (liste plafonnée à 300)</div>
              </div>
            </div>
          </q-banner>

          <q-banner dense rounded class="bg-grey-2 text-grey-8">
            <template #avatar><q-icon name="lock" color="grey-7" /></template>
            L'envoi réel (création de la campagne + envoi suivi) est la dernière étape à activer — rien n'est envoyé aux clients ici.
          </q-banner>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat no-caps label="Fermer" v-close-popup />
          <q-btn v-if="sendMode === 'test'" unelevated no-caps color="primary" icon="send" label="Envoyer un test" :loading="sending" @click="sendTestNow" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useQuasar } from 'quasar'
import PageHeader from 'src/components/shared/PageHeader.vue'
import StatCard from 'src/components/shared/StatCard.vue'
import DataTable from 'src/components/shared/DataTable.vue'
import DynamicFilter from 'src/components/shared/DynamicFilter.vue'
import { formatDateTimeShort as fmtDate } from 'src/composables/useFormatters'
import { useCsvExport } from 'src/composables/useCsvExport'
import { usePermissions } from 'src/composables/usePermissions'
import { listRsvps, deleteRsvp, sendInvite, previewAudience, listTemplates } from 'src/api/events'

const $q = useQuasar()
const { exportCsv } = useCsvExport()
const EVENT_ID = 'fete-20-ans'

const loading = ref(false)
const error = ref('')
const ev = ref({})
const rows = ref([])
const count = ref(0)
const headcount = ref(0)
const matched = ref(0)
const unmatched = ref(0)

const { userEmail } = usePermissions()
const showSend = ref(false)
const sendChannel = ref('mailjet')
const testEmail = ref('')
const sending = ref(false)
// Envoi de masse (audience + modèle) — aperçu seulement ; le blast reste à activer.
const sendMode = ref('test')
const template = ref('')
const templates = ref([{ value: '', label: 'Invitation Fête 20 ans (TARGO)' }])
const audienceSource = ref('list')
const audFilters = ref({ statut: 'active', customer_type: '', active_sub: false, min_monthly: 0 })
const csvFile = ref(null)
const audCsvText = ref('')
const audPreview = ref(null)
const previewing = ref(false)
const showNoEmail = ref(false)

const publicUrl = computed(() => ev.value.public_url || '')

const filterState = ref({ search: '', chips: {} })
const chipGroups = [{ key: 'statut', label: 'Compte', icon: 'label', options: [{ value: 'confirmed', label: 'Confirmés', color: 'green-7' }, { value: 'probable', label: 'Probables', color: 'blue-6' }, { value: 'unverified', label: 'À vérifier', color: 'orange-7' }] }]

const columns = [
  { name: 'client', label: 'Client', field: 'customer_name', align: 'left', sortable: true },
  { name: 'party', label: 'Personnes', field: 'party_size', align: 'center', sortable: true },
  { name: 'email', label: 'Courriel', field: 'email', align: 'left' },
  { name: 'allergies', label: 'Allergies', field: 'allergies', align: 'left' },
  { name: 'confidence', label: 'Compte', field: 'confidence', align: 'center', sortable: true },
  { name: 'updated', label: 'Répondu le', field: 'updated', align: 'left', sortable: true },
  { name: 'actions', label: '', field: 'key', align: 'center' },
]

const filtered = computed(() => {
  const st = filterState.value.chips.statut
  const q = (filterState.value.search || '').toLowerCase().trim()
  return rows.value.filter(r => {
    const conf = r.confidence || 'none'
    if (st === 'confirmed' && conf !== 'confirmed') return false
    if (st === 'probable' && conf !== 'probable') return false
    if (st === 'unverified' && conf !== 'none') return false
    if (q && !((r.customer_name || '') + ' ' + (r.customer_number || '') + ' ' + (r.email || '') + ' ' + (r.phone || '')).toLowerCase().includes(q)) return false
    return true
  })
})

async function load () {
  loading.value = true; error.value = ''
  try {
    const d = await listRsvps(EVENT_ID)
    ev.value = d.event || {}
    rows.value = d.responses || []
    count.value = d.count || 0
    headcount.value = d.headcount || 0
    matched.value = d.matched || 0
    unmatched.value = d.unmatched || 0
  } catch (e) {
    error.value = 'Impossible de charger les inscriptions (' + e.message + '). La fonctionnalité doit être déployée sur le hub.'
  } finally { loading.value = false }
}

function copy (txt) {
  if (!txt) return
  navigator.clipboard?.writeText(txt).then(() => $q.notify({ type: 'positive', message: 'Lien copié', timeout: 1200 }))
    .catch(() => $q.notify({ type: 'warning', message: txt }))
}

function exportRows () {
  const conf = { confirmed: 'Confirmé', probable: 'Probable' }
  const headers = ['Client', 'N° client', 'ID compte', 'Nom au dossier', 'Téléphone', 'Personnes', 'Courriel', 'Allergies', 'Confiance', 'Signaux', 'Langue', 'IP', 'Créé le', 'Répondu le']
  const data = filtered.value.map(r => [r.customer_name || '', r.customer_number || '', r.customer_id || '', r.account_name || '', r.phone || '', r.party_size || 0, r.email || '', r.allergies || '', conf[r.confidence] || 'À vérifier', (r.signals || []).join(' + '), r.lang || '', r.ip || '', fmtDate(r.created), fmtDate(r.updated)])
  const totalRow = ['TOTAL', '', '', '', '', filtered.value.reduce((s, r) => s + (r.party_size || 0), 0), '', '', '', '', '', '', '', '']
  exportCsv(`inscriptions_${EVENT_ID}`, headers, data, { totalRow })
}

function confirmDelete (row) {
  $q.dialog({ title: 'Retirer l\'inscription', message: `Retirer ${row.customer_name || row.customer_number || 'cette inscription'} (${row.party_size} pers.) ?`, cancel: true, persistent: true })
    .onOk(async () => {
      try { await deleteRsvp(EVENT_ID, row.key); $q.notify({ type: 'positive', message: 'Retiré' }); load() }
      catch (e) { $q.notify({ type: 'negative', message: e.message }) }
    })
}

function prepSend () { testEmail.value = testEmail.value || userEmail.value || ''; if (templates.value.length <= 1) loadTemplates(); showSend.value = true }
async function loadTemplates () {
  try {
    const d = await listTemplates()
    const files = (d.templates || []).map(t => (typeof t === 'string' ? { value: t, label: t } : { value: t.name, label: t.label || t.name }))
    templates.value = [{ value: '', label: 'Invitation Fête 20 ans (TARGO)' }, ...files]
  } catch (e) { /* garde le défaut */ }
}
function onCsvFile (file) {
  audPreview.value = null
  if (!file) { audCsvText.value = ''; return }
  const rd = new FileReader()
  rd.onload = () => { audCsvText.value = String(rd.result || '') }
  rd.readAsText(file)
}
function onActiveSubToggle (v) { audPreview.value = null; if (!v) audFilters.value.min_monthly = 0 } // le montant n'a de sens qu'avec les abonnements actifs
async function doPreview () {
  previewing.value = true; audPreview.value = null; showNoEmail.value = false
  try {
    const body = audienceSource.value === 'csv' ? { mode: 'csv', csv: audCsvText.value } : { mode: 'filter', filters: audFilters.value }
    audPreview.value = await previewAudience(EVENT_ID, body)
  } catch (e) { $q.notify({ type: 'negative', message: e.message }) } finally { previewing.value = false }
}
async function sendTestNow () {
  const em = (testEmail.value || '').trim()
  if (!em) { $q.notify({ type: 'warning', message: 'Entrez un courriel de test' }); return }
  sending.value = true
  try {
    const r = await sendInvite(EVENT_ID, { test: true, test_emails: [em], channel: sendChannel.value })
    if (r.ok) $q.notify({ type: 'positive', message: `Courriel test envoyé à ${em}`, icon: 'send' })
    else $q.notify({ type: 'negative', message: 'Échec : ' + ((r.results && r.results[0] && r.results[0].error) || 'inconnu') })
  } catch (e) { $q.notify({ type: 'negative', message: e.message }) } finally { sending.value = false }
}

onMounted(load)
</script>

<style scoped>
.ev-badge { display:flex; flex-direction:column; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#21a34a; color:#fff; font-weight:800; line-height:1; flex:0 0 auto; }
.ev-badge b { font-size:1.15rem; }
.ev-badge span { font-size:.52rem; letter-spacing:1px; }
</style>
