<template>
  <Modal
    :open="open"
    size="lg"
    :title="title"
    subtitle="Diese Hauptkategorie bekommt automatisch alle globalen Unterkategorien der ausgewählten Season. Die Beschreibung erscheint auf der Landingpage in der Awards-Karte."
    @close="$emit('close')"
  >
    <div class="grid gap-4 md:grid-cols-2">
      <label class="space-y-2 md:col-span-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Name</span>
        <input
          :value="form.groupName"
          type="text"
          class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
          placeholder="z. B. Gaming"
          @input="form.groupName = ($event.target as HTMLInputElement).value"
        />
      </label>

      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Reihenfolge</span>
        <input
          :value="form.sortOrder"
          type="number"
          min="1"
          max="200"
          class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
          @input="form.sortOrder = toPositiveInteger(($event.target as HTMLInputElement).value, 1)"
        />
      </label>

      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Nominierungs-Limit</span>
        <input
          :value="form.maxNomineesPerUser"
          type="number"
          min="1"
          max="10"
          class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
          @input="form.maxNomineesPerUser = toPositiveInteger(($event.target as HTMLInputElement).value, 3)"
        />
      </label>

      <label class="space-y-2 md:col-span-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Landingpage-Beschreibung</span>
        <textarea
          :value="form.description"
          class="min-h-28 w-full rounded-2xl border border-violet-200 px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
          placeholder="Kurzer Beschreibungstext für die Awards-Sektion auf der Landingpage"
          @input="form.description = ($event.target as HTMLTextAreaElement).value"
        />
      </label>
    </div>

    <p v-if="!canCreateGroup && !isEditing" class="mt-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700">
      Lege zuerst globale Unterkategorien an, bevor du neue Hauptkategorien erzeugst.
    </p>

    <template #footer>
      <Button
        v-if="isEditing"
        variant="ghost"
        class="mr-auto gap-2 border-rose-200 bg-rose-50 text-rose-600 hover:bg-rose-100"
        @click="$emit('delete')"
      >
        <Trash2 class="h-4 w-4" />
        Loeschen
      </Button>
      <Button variant="ghost" @click="$emit('close')">Abbrechen</Button>
      <Button :disabled="!canSave || saving" @click="$emit('save')">
        {{ saving ? 'Speichert ...' : isEditing ? 'Hauptkategorie speichern' : 'Hauptkategorie anlegen' }}
      </Button>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import { Trash2 } from '@lucide/vue'

import Button from '../ui/Button.vue'
import Modal from '../ui/Modal.vue'

defineProps<{
  open: boolean
  title: string
  form: {
    groupName: string
    description: string
    sortOrder: number
    maxNomineesPerUser: number
  }
  canSave: boolean
  canCreateGroup: boolean
  saving: boolean
  isEditing: boolean
}>()

defineEmits<{
  close: []
  save: []
  delete: []
}>()

function toPositiveInteger(value: string, fallback: number) {
  const number = Number(value)
  return Number.isFinite(number) ? Math.max(1, Math.round(number)) : fallback
}
</script>
