<template>
  <Modal :open="open" size="lg" :title="title" subtitle="Diese Unterkategorie wird spaeter bei allen Hauptkategorien verwendet." @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.name"
          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. Rising Star"
          @input="form.name = ($event.target as HTMLInputElement).value"
        />
      </label>

      <label class="space-y-2 md:col-span-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Slug</span>
        <div class="flex gap-2">
          <input
            :value="form.slug"
            type="text"
            class="h-12 min-w-0 flex-1 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="rising-star"
            @input="form.slug = ($event.target as HTMLInputElement).value"
          />
          <Button variant="ghost" class="border border-violet-200 bg-violet-50 text-violet-700 hover:bg-violet-100" @click="$emit('fill-slug')">
            Auto
          </Button>
        </div>
      </label>

      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Viewer von</span>
        <input
          :value="form.viewerRangeMin ?? ''"
          type="number"
          min="0"
          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="0"
          @input="form.viewerRangeMin = toNullableNumber(($event.target as HTMLInputElement).value)"
        />
      </label>

      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Viewer bis</span>
        <input
          :value="form.viewerRangeMax ?? ''"
          type="number"
          min="0"
          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="offen"
          @input="form.viewerRangeMax = toNullableNumber(($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"
          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 = Math.max(1, Number(($event.target as HTMLInputElement).value) || 1)"
        />
      </label>
    </div>

    <template #footer>
      <Button variant="ghost" @click="$emit('close')">Abbrechen</Button>
      <Button :disabled="!canSave" @click="$emit('save')">Unterkategorie speichern</Button>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import Button from '../ui/Button.vue'
import Modal from '../ui/Modal.vue'
import type { AdminSubcategoryDraft } from './useAdminCategoryManager'

defineProps<{
  open: boolean
  title: string
  form: AdminSubcategoryDraft
  canSave: boolean
}>()

defineEmits<{
  close: []
  save: []
  'fill-slug': []
}>()

function toNullableNumber(value: string) {
  const trimmed = value.trim()
  if (!trimmed) return null
  const number = Number(trimmed)
  return Number.isFinite(number) ? number : null
}
</script>
