<template>
  <div class="fixed inset-0 z-[120] flex items-center justify-center bg-slate-900/30 px-6 py-10 backdrop-blur dark:bg-slate-950/70" @click.self="$emit('close')">
    <div class="w-full max-w-md rounded-[2.5rem] border border-slate-200 bg-gradient-to-b from-white via-white to-slate-50 p-8 text-slate-900 shadow-[0_35px_80px_rgba(2,6,23,0.15)] transition-colors dark:border-white/10 dark:from-slate-900 dark:via-slate-900/90 dark:to-slate-950 dark:text-white dark:shadow-[0_35px_80px_rgba(2,6,23,0.65)]">
      <div class="flex items-start justify-between gap-4">
        <div>
          <p class="text-xs uppercase tracking-[0.5em] text-slate-400">{{ __('api.print_dialog.title') }}</p>
          <h2 class="mt-2 text-3xl font-semibold text-slate-900 dark:text-white">{{ __('api.print_dialog.quantity_prompt') }}</h2>
          <p class="mt-2 text-sm text-slate-300">
            Maximale Ausgabe pro Auftrag:
            <span class="font-semibold text-emerald-300">{{ maxCopies }}</span>
          </p>
        </div>
        <button
          type="button"
          class="rounded-full border border-slate-200 p-2 text-slate-500 transition hover:border-rose-300 hover:text-rose-400 dark:border-white/10 dark:text-slate-200"
          @click="$emit('close')"
          :aria-label="__('api.print_dialog.cancel_button')"
        >
          <font-awesome-icon :icon="['fas', 'xmark']" class="h-4 w-4" />
        </button>
      </div>

      <div class="mt-8 flex flex-col gap-6">
        <div class="rounded-3xl border border-slate-200 bg-white p-6 text-center text-slate-600 dark:border-white/10 dark:bg-white/5 dark:text-slate-200">
          <p class="text-sm uppercase tracking-[0.4em] text-slate-400">Anzahl</p>
          <div class="mt-4 flex items-center justify-center gap-6">
            <button
              type="button"
              class="flex h-14 w-14 items-center justify-center rounded-2xl border border-slate-200 bg-white text-3xl font-semibold text-slate-900 transition hover:border-emerald-300 hover:text-emerald-600 dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:text-emerald-200"
              @click="decrementQuantity"
              aria-label="-1"
            >
              <font-awesome-icon :icon="['fas', 'minus']" class="h-6 w-6" />
            </button>
            <div class="min-w-[4rem] text-6xl font-bold tracking-tight text-slate-900 dark:text-white">{{ quantity }}</div>
            <button
              type="button"
              class="flex h-14 w-14 items-center justify-center rounded-2xl border border-slate-200 bg-white text-3xl font-semibold text-slate-900 transition hover:border-emerald-300 hover:text-emerald-600 dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:text-emerald-200"
              @click="incrementQuantity"
              aria-label="+1"
            >
              <font-awesome-icon :icon="['fas', 'plus']" class="h-6 w-6" />
            </button>
          </div>
        </div>

        <p class="text-center text-xs uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
          Du steuerst direkt den Sofortdruck.
        </p>
      </div>

      <div class="mt-8 flex flex-wrap gap-3">
        <button
          type="button"
          class="flex-1 rounded-full border border-slate-300 bg-white px-5 py-3 text-center text-sm font-semibold uppercase tracking-[0.2em] text-slate-600 transition hover:border-rose-300 hover:text-rose-400 dark:border-white/20 dark:bg-white/5 dark:text-slate-200 dark:hover:text-rose-200"
          @click="$emit('close')"
        >
          {{ __('api.print_dialog.cancel_button') }}
        </button>
        <button
          type="button"
          class="flex-1 rounded-full border border-emerald-400 bg-emerald-50 px-5 py-3 text-center text-sm font-semibold uppercase tracking-[0.2em] text-emerald-700 transition hover:bg-emerald-100 dark:bg-emerald-400/20 dark:text-emerald-100 dark:hover:bg-emerald-400/40"
          @click="confirmPrint"
        >
          {{ __('api.print_dialog.print_button') }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  maxCopies: {
    type: Number,
    default: 10,
  },
});

const emit = defineEmits(['close', 'printConfirmed']);

const quantity = ref(1);

const incrementQuantity = () => {
  if (quantity.value < props.maxCopies) {
    quantity.value++;
  }
};

const decrementQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

const confirmPrint = () => {
  emit('printConfirmed', quantity.value);
};

watch(
  () => props.maxCopies,
  (newMax) => {
    if (quantity.value > newMax) {
      quantity.value = newMax;
    }
  }
);
</script>
