<template>
  <!-- Synchroniser les techniciens : réconciliation staff legacy ↔ Dispatch Technician ↔ groupe Authentik tech -->
  <q-dialog v-model="open">
    <q-card style="width: 720px; max-width: 96vw">
      <q-card-section class="row items-center q-pb-xs">
        <div class="text-subtitle2">👥 Synchroniser les techniciens</div>
        <q-space />
        <q-btn dense flat round icon="close" v-close-popup />
      </q-card-section>
      <q-card-section v-if="techSync.loading" class="text-center q-pa-lg"><q-spinner size="28px" color="primary" /></q-card-section>
      <template v-else-if="techSync.report">
        <q-card-section class="q-pt-none">
          <div class="text-caption text-grey-7 q-mb-sm">Staff legacy actifs : <b>{{ techSync.report.counts.staff_active }}</b> · Fiches roster : <b>{{ techSync.report.counts.fiches }}</b> · Groupe Authentik <code>tech</code> : <b>{{ techSync.report.authentik ? techSync.report.counts.tech_group : '—' }}</b></div>
          <q-expansion-item default-opened dense icon="group_add" header-class="text-green-8" :label="`À ajouter au roster (${techSync.report.staff_missing_fiche.length})`">
            <div v-if="!techSync.report.staff_missing_fiche.length" class="text-grey-6 q-pa-sm">Aucun — le roster est à jour ✅</div>
            <q-list v-else dense bordered class="ts-list">
              <q-item v-for="s in techSync.report.staff_missing_fiche" :key="s.staff_id" tag="label">
                <q-item-section side><q-checkbox v-model="techSync.sel[s.staff_id]" dense color="green-7" /></q-item-section>
                <q-item-section><q-item-label>{{ s.name }} <span class="text-grey-5">#{{ s.staff_id }}</span></q-item-label><q-item-label caption>{{ s.email || '— sans courriel —' }}</q-item-label></q-item-section>
                <q-item-section side><q-chip dense size="sm" :color="s.in_tech_group ? 'green-2' : 'orange-2'" :text-color="s.in_tech_group ? 'green-9' : 'orange-9'">{{ s.in_tech_group ? 'accès tech ✓' : 'hors groupe tech' }}</q-chip></q-item-section>
              </q-item>
            </q-list>
          </q-expansion-item>
          <q-expansion-item v-if="techSync.report.authentik && techSync.report.fiche_no_access.length" dense icon="lock" header-class="text-warning" :label="`Fiches SANS accès Ops (${techSync.report.fiche_no_access.length})`">
            <div class="text-caption text-grey-6 q-px-sm q-pt-xs">Pas dans le groupe Authentik <code>tech</code> → à ajouter manuellement sur auth.targo.ca (lecture seule ici).</div>
            <q-list dense class="ts-list"><q-item v-for="t in techSync.report.fiche_no_access" :key="t.technician_id"><q-item-section><q-item-label>{{ t.name }}</q-item-label><q-item-label caption>{{ t.email }}</q-item-label></q-item-section></q-item></q-list>
          </q-expansion-item>
          <q-expansion-item v-if="techSync.report.authentik && techSync.report.access_no_fiche.length" dense icon="help_outline" :label="`Dans le groupe tech, hors roster (${techSync.report.access_no_fiche.length})`">
            <div class="text-caption text-grey-6 q-px-sm q-pt-xs">Ont l'accès Ops mais aucune fiche (ex-employé ? courriel ≠ legacy ?).</div>
            <div class="q-pa-sm" style="font-size:11px;color:#78909c;line-height:1.6">{{ techSync.report.access_no_fiche.join(' · ') }}</div>
          </q-expansion-item>
          <q-banner v-if="!techSync.report.authentik" dense class="bg-orange-1 text-warning q-mt-sm"><template #avatar><q-icon name="warning" /></template>Authentik non joignable — vérif d'accès indisponible, seul l'ajout au roster fonctionne.</q-banner>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="Fermer" v-close-popup />
          <q-btn unelevated color="green-7" icon="group_add" :label="`Créer les fiches cochées (${techSyncSelCount})`" :loading="techSync.applying" :disable="!techSyncSelCount" @click="applyTechSync" />
        </q-card-actions>
      </template>
    </q-card>
  </q-dialog>
</template>

<script setup>
// Dialogue « Synchroniser les techniciens » — extrait de PlanificationPage (décomposition #4).
// Auto-contenu : ne LIT aucun état partagé de la page. Rapport self-fetch à l'ouverture.
// Seul lien sortant : après création de fiches, émet `applied` → le parent recharge sa liste (loadBase).
import { reactive, computed, watch } from 'vue'
import { useQuasar } from 'quasar'
import * as roster from 'src/api/roster'

const props = defineProps({ modelValue: { type: Boolean, default: false } })
const emit = defineEmits(['update:modelValue', 'applied'])
const $q = useQuasar()
const err = (e) => $q.notify({ type: 'negative', message: '' + (e.message || e) })

const open = computed({ get: () => props.modelValue, set: v => emit('update:modelValue', v) })
const techSync = reactive({ loading: false, applying: false, report: null, sel: {} })
const techSyncSelCount = computed(() => Object.values(techSync.sel).filter(Boolean).length)

// Charge le rapport de réconciliation à l'ouverture (remplace l'ancien openTechSync).
async function loadReport () {
  techSync.loading = true; techSync.report = null; techSync.sel = {}
  try {
    const r = await roster.techSyncReport(); techSync.report = r
    for (const s of (r.staff_missing_fiche || [])) techSync.sel[s.staff_id] = true // candidats cochés par défaut
  } catch (e) { err(e) } finally { techSync.loading = false }
}
async function applyTechSync () {
  const ids = Object.entries(techSync.sel).filter(([, v]) => v).map(([k]) => k)
  if (!ids.length) return
  techSync.applying = true
  try {
    const r = await roster.techSyncApply(ids)
    $q.notify({ type: r.created ? 'positive' : 'info', icon: 'group_add', message: `${r.created} fiche(s) technicien créée(s)` + (r.results ? ` · ${r.results.filter(x => x.skipped).length} déjà présente(s)` : '') })
    open.value = false
    emit('applied') // le parent recharge la liste des techniciens dans la grille (loadBase)
  } catch (e) { err(e) } finally { techSync.applying = false }
}
watch(() => props.modelValue, (v) => { if (v) loadReport() })
</script>
