<template>
  <Card id="content-faq" class="p-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Support</p>
        <h2 class="mt-1 text-xl font-bold text-slate-900">FAQ verwalten</h2>
        <p class="mt-2 text-sm leading-6 text-slate-500">Fragen und Antworten erscheinen im FAQ-Abschnitt der Landingpage.</p>
      </div>
      <div class="flex flex-wrap gap-2 sm:justify-end">
        <Button variant="ghost" size="sm" class="gap-2 rounded-2xl border border-violet-200 bg-white px-4 text-violet-700 shadow-none hover:bg-violet-50" @click="$emit('open-preview')">
          <Eye class="h-4 w-4" />
          FAQ Preview
        </Button>
        <Button variant="ghost" size="sm" class="gap-2 rounded-2xl border border-violet-200 bg-violet-50 px-4 text-violet-700 shadow-none hover:bg-violet-100" @click="addFaqItem">
          <Plus class="h-4 w-4" />
          FAQ hinzufügen
        </Button>
        <Button :disabled="saving" size="sm" class="gap-2 rounded-2xl bg-gradient-to-r from-violet-600 to-fuchsia-500 shadow-violet-500/20" @click="onSave">
          <Save class="h-4 w-4" />
          {{ saving ? 'Speichert ...' : 'FAQ speichern' }}
        </Button>
      </div>
    </div>
    <div class="mt-6 space-y-3">
      <div v-for="(item, index) in form.faq" :key="`faq-${index}`" class="space-y-3 rounded-[22px] border border-violet-100 bg-white/80 p-4">
        <input v-model="item.question" type="text" class="h-11 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Frage" />
        <textarea v-model="item.answer" rows="3" class="w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Antwort" />
        <div class="flex justify-end">
          <Button variant="ghost" size="sm" class="gap-2 rounded-2xl border border-rose-100 bg-rose-50 px-4 text-rose-600 shadow-none hover:bg-rose-100" @click="removeFaqItem(index)">
            <Trash2 class="h-4 w-4" />
            Entfernen
          </Button>
        </div>
      </div>
    </div>
  </Card>
</template>

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

import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'
import type { AdminContentForm } from './adminContentTypes'

const props = defineProps<{
  form: AdminContentForm
  saving: boolean
  addFaqItem: () => void
  removeFaqItem: (index: number) => void
  saveSiteSettings: (sectionLabel?: string) => Promise<void>
}>()

defineEmits<{
  'open-preview': []
}>()

function onSave() {
  return props.saveSiteSettings('FAQ')
}
</script>
