<template>
  <dialog class="modal" :class="{ 'modal-open': open }">
    <div class="modal-box max-w-3xl">
      <form method="dialog" class="modal-close" @submit.prevent />
      <h3 class="font-bold text-lg mb-2">
        Préparer l'impression
      </h3>
      <p class="text-sm text-base-content/70 mb-4">
        Choisissez les sections à inclure avant de lancer l'impression.
      </p>

      <div class="flex flex-wrap gap-2 mb-4">
        <button type="button" class="btn btn-xs btn-outline" @click="emit('select-all')">
          Tout sélectionner
        </button>
        <button type="button" class="btn btn-xs btn-outline" @click="emit('deselect-all')">
          Tout désélectionner
        </button>
      </div>

      <div class="max-h-[420px] overflow-y-auto pr-2 space-y-6">
        <section class="bg-base-200/50 rounded-xl p-4 space-y-3">
          <h4 class="font-semibold text-sm uppercase tracking-wide text-base-content/70">
            Machine
          </h4>
          <label class="flex items-start gap-3">
            <input
              v-model="selection.machine.info"
              type="checkbox"
              class="checkbox checkbox-primary mt-1"
            >
            <div>
              <p class="font-medium">Informations générales</p>
              <p class="text-xs text-base-content/60">
                Nom, site et fournisseur de la machine.
              </p>
            </div>
          </label>
          <label class="flex items-start gap-3">
            <input
              v-model="selection.machine.customFields"
              type="checkbox"
              class="checkbox checkbox-primary mt-1"
            >
            <div>
              <p class="font-medium">Champs personnalisés</p>
              <p class="text-xs text-base-content/60">
                Valeurs spécifiques configurées pour cette machine.
              </p>
            </div>
          </label>
          <label class="flex items-start gap-3">
            <input
              v-model="selection.machine.documents"
              type="checkbox"
              class="checkbox checkbox-primary mt-1"
            >
            <div>
              <p class="font-medium">Documents</p>
              <p class="text-xs text-base-content/60">
                Pièces jointes liées directement à la machine.
              </p>
            </div>
          </label>
        </section>

        <section v-if="hasComponents" class="bg-base-200/30 rounded-xl p-4 space-y-3">
          <h4 class="font-semibold text-sm uppercase tracking-wide text-base-content/70">
            Composants & pièces
          </h4>
          <div class="space-y-3">
            <MachinePrintSelectionNode
              v-for="component in componentsList"
              :key="component.id"
              :component="component"
              :selection="selection"
            />
          </div>
        </section>

        <section v-if="hasPieces" class="bg-base-200/30 rounded-xl p-4 space-y-3">
          <h4 class="font-semibold text-sm uppercase tracking-wide text-base-content/70">
            Pièces indépendantes
          </h4>
          <div class="space-y-2">
            <label
              v-for="piece in piecesList"
              :key="piece.id"
              class="flex items-start gap-3"
            >
              <input
                v-model="selection.pieces[piece.id]"
                type="checkbox"
                class="checkbox checkbox-secondary mt-1"
              >
              <div>
                <p class="font-medium">{{ piece.name }}</p>
                <p class="text-xs text-base-content/60">
                  {{ piece.reference || 'Référence inconnue' }}
                </p>
              </div>
            </label>
          </div>
        </section>
      </div>

      <div class="modal-action">
        <button type="button" class="btn btn-ghost" @click="emit('close')">
          Annuler
        </button>
        <button type="button" class="btn btn-primary" @click="emit('confirm')">
          Imprimer
        </button>
      </div>
    </div>
  </dialog>
</template>

<script setup>
import { computed, toRef } from 'vue'
import MachinePrintSelectionNode from '~/components/MachinePrintSelectionNode.vue'

const props = defineProps({
  open: { type: Boolean, default: false },
  selection: { type: Object, required: true },
  components: { type: Array, default: () => [] },
  pieces: { type: Array, default: () => [] }
})

const emit = defineEmits(['close', 'confirm', 'select-all', 'deselect-all'])

const selection = toRef(props, 'selection')
const componentsList = computed(() => props.components || [])
const piecesList = computed(() => props.pieces || [])

const hasComponents = computed(() => componentsList.value.length > 0)
const hasPieces = computed(() => piecesList.value.length > 0)
</script>
