<template>
  <div class="space-y-4">
    <div class="flex justify-end gap-2">
      <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="previewOpen = true">
        <Eye class="h-4 w-4" />
        Preview öffnen
      </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 ...' : `${props.label} speichern` }}
      </Button>
    </div>
    <AdminRichTextEditor
      v-model="form[props.contentKey]"
      :label="props.label"
      :placeholder="props.placeholder"
      min-height-class="min-h-[420px]"
    />
  </div>

  <AdminContentFooterPreviewModal
    :open="previewOpen"
    :title="props.label"
    url=""
    :content-html="previewHtml"
    @close="previewOpen = false"
  />
</template>

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

import { privacyContentToHtml } from '../../lib/privacyContent'
import Button from '../ui/Button.vue'
import AdminContentFooterPreviewModal from './AdminContentFooterPreviewModal.vue'
import AdminRichTextEditor from './AdminRichTextEditor.vue'
import type { AdminContentForm } from './adminContentTypes'

const props = defineProps<{
  form: AdminContentForm
  saving: boolean
  label: string
  placeholder: string
  contentKey: 'imprintContent' | 'contactContent' | 'sponsorsContent'
  saveSiteSettings: (sectionLabel?: string) => Promise<void>
}>()

const previewOpen = ref(false)
const previewHtml = computed(() => privacyContentToHtml(props.form[props.contentKey]))

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