<template>
  <Modal :open="open" :title="title" subtitle="Anzeigename und Handle sind Pflicht." @close="$emit('close')">
    <div class="space-y-4">
      <label class="block space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Kategorie</span>
        <NativeSelect :model-value="form.categoryId" :options="categoryOptions" @update:model-value="$emit('update:categoryId', Number($event) || 0)" />
      </label>
      <label class="block space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
        <input :value="form.displayName" type="text" class="h-11 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. Jayuhime" @input="$emit('update:displayName', ($event.target as HTMLInputElement).value)" />
      </label>
      <div class="grid gap-4 sm:grid-cols-2">
        <label class="block space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Handle</span>
          <input :value="form.channelSlug" type="text" class="h-11 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="@channel" @input="$emit('update:channelSlug', ($event.target as HTMLInputElement).value)" />
        </label>
        <label class="block space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform</span>
          <NativeSelect
            :model-value="selectedPlatformValue"
            :options="[
              ...candidatePlatformOptions.map((option) => ({ label: option.label, value: option.key })),
              { label: 'Eigene Plattform', value: 'custom' },
            ]"
            @update:model-value="$emit('platform-selection', String($event))"
          />
        </label>
      </div>
      <label v-if="selectedPlatformValue === 'custom'" class="block space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Eigene Plattform</span>
        <input :value="form.platform" type="text" class="h-11 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. Cake, Booth, neue Plattform" @input="$emit('update:platform', ($event.target as HTMLInputElement).value)" />
      </label>
    </div>
    <template #footer>
      <Button variant="ghost" @click="$emit('close')">Abbrechen</Button>
      <Button :disabled="saving || !canSave" @click="$emit('save')">{{ saving ? 'Speichert …' : 'Speichern' }}</Button>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import type { SocialIconOption } from '../../lib/socialIcons'
import Button from '../ui/Button.vue'
import Modal from '../ui/Modal.vue'
import NativeSelect from '../ui/NativeSelect.vue'

defineProps<{
  open: boolean
  title: string
  form: {
    categoryId: number
    displayName: string
    channelSlug: string
    platform: string
  }
  categoryOptions: Array<{ label: string; value: number }>
  candidatePlatformOptions: SocialIconOption[]
  selectedPlatformValue: string
  canSave: boolean
  saving: boolean
}>()

defineEmits<{
  close: []
  save: []
  'update:categoryId': [value: number]
  'update:displayName': [value: string]
  'update:channelSlug': [value: string]
  'update:platform': [value: string]
  'platform-selection': [value: string]
}>()
</script>
