<template>
  <q-dialog v-model="open">
    <q-card style="min-width:440px;max-width:96vw">
      <q-card-section class="row items-center q-pb-none">
        <q-icon name="bookmark" color="brown" size="20px" class="q-mr-sm" />
        <div class="text-subtitle1 text-weight-bold">Modèles de semaine</div><q-space />
        <q-btn flat round dense icon="close" v-close-popup />
      </q-card-section>
      <q-card-section class="q-pt-sm">
        <div class="text-caption text-grey-7 q-mb-sm">Un modèle mémorise le patron de quarts de la semaine (qui travaille quel quart, par jour). L'application est <b>consciente des absences</b> : les jours où un tech est absent sont sautés.</div>
        <EmptyState v-if="!templates.length" icon="bookmark_border" label="Aucun modèle enregistré" hint="Enregistre d'abord la semaine affichée comme modèle." />
        <q-list v-else separator dense>
          <q-item v-for="(tm, i) in templates" :key="i">
            <q-item-section avatar>
              <q-btn flat dense round size="sm" :icon="tm.default ? 'star' : 'star_border'" :color="tm.default ? 'amber-8' : 'grey-5'" @click="emit('set-default', i)"><q-tooltip>Modèle par défaut (★) — appliqué en 1 clic depuis la barre ⋮ ou ⌘K</q-tooltip></q-btn>
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ tm.name }}<q-badge v-if="tm.default" color="amber-8" class="q-ml-sm" label="défaut" /></q-item-label>
            </q-item-section>
            <q-item-section side class="row items-center no-wrap q-gutter-xs">
              <q-btn dense no-caps outline size="sm" color="primary" icon="play_arrow" label="Appliquer" @click="applyAndClose(tm)"><q-tooltip>Applique le patron à la semaine affichée (absences respectées)</q-tooltip></q-btn>
              <q-btn flat dense round size="sm" icon="delete" color="grey-6" @click="emit('delete', i)"><q-tooltip>Supprimer ce modèle</q-tooltip></q-btn>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
      <q-card-actions align="right" class="q-pt-none">
        <q-btn dense no-caps unelevated color="primary" icon="save" label="Enregistrer la semaine affichée…" @click="emit('save')" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
// Dialogue « Modèles de semaine » — extrait de PlanificationPage (sous-menu imbriqué du menu Outils → dialogue dédié,
// règle « pas de menu-dans-menu »). L'état (weekTemplates) et les mutations restent dans la PAGE (localStorage LS_TPL) :
// le dialogue est purement présentation → emits save / apply / set-default / delete.
import { computed } from 'vue'
import EmptyState from 'src/components/shared/EmptyState.vue'

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  templates: { type: Array, default: () => [] }, // [{ name, byDow, default? }] — LECTURE seule ici
})
const emit = defineEmits(['update:modelValue', 'save', 'apply', 'set-default', 'delete'])

const open = computed({ get: () => props.modelValue, set: v => emit('update:modelValue', v) })
function applyAndClose (tm) { emit('apply', tm); open.value = false }
</script>
