<template>
  <Card id="content-links" class="p-6">
    <div class="flex items-start justify-between gap-4">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Footer & Kontakt</p>
        <h2 class="mt-1 text-xl font-bold text-slate-900">Rechtliche Links und Kontaktwege</h2>
        <p class="mt-2 text-sm leading-6 text-slate-500">Diese URLs und Inhalte werden im Footer und in den öffentlichen Kontaktflächen ausgespielt.</p>
      </div>
      <div class="flex shrink-0 flex-col items-end gap-3">
        <Link2 class="h-6 w-6 text-violet-500" />
        <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 ...' : 'Footer speichern' }}
        </Button>
      </div>
    </div>
    <div class="mt-6 grid gap-4 md:grid-cols-2">
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Datenschutz E-Mail</span>
        <input v-model="form.privacyEmail" type="email" class="h-12 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" />
      </label>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Kontakt URL</span>
        <input v-model="form.contactUrl" type="url" class="h-12 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" />
      </label>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Impressum URL</span>
        <input v-model="form.imprintUrl" type="url" class="h-12 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" />
      </label>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Sponsoren & Partner URL</span>
        <input v-model="form.sponsorsUrl" type="url" class="h-12 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" />
      </label>
    </div>
    <div class="mt-7 space-y-5">
      <div class="space-y-3">
        <div class="flex 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', 'imprint')">
            <Eye class="h-4 w-4" />
            Impressum Preview
          </Button>
        </div>
        <AdminRichTextEditor
          v-model="form.imprintContent"
          label="Impressum Inhalt"
          placeholder="Impressumstext..."
          min-height-class="min-h-[300px]"
        />
      </div>
      <div class="space-y-3">
        <div class="flex 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', 'contact')">
            <Eye class="h-4 w-4" />
            Kontakt Preview
          </Button>
        </div>
        <AdminRichTextEditor
          v-model="form.contactContent"
          label="Kontakt Inhalt"
          placeholder="Kontakttext..."
          min-height-class="min-h-[260px]"
        />
      </div>
      <div class="space-y-3">
        <div class="flex 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', 'sponsors')">
            <Eye class="h-4 w-4" />
            Sponsoren Preview
          </Button>
        </div>
        <AdminRichTextEditor
          v-model="form.sponsorsContent"
          label="Sponsoren & Partner Inhalt"
          placeholder="Sponsor:innen, Partner und Hinweise..."
          min-height-class="min-h-[260px]"
        />
      </div>
    </div>
  </Card>
</template>

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

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

export type FooterPreviewKey = 'imprint' | 'contact' | 'sponsors'

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

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

function onSave() {
  return props.saveSiteSettings('Footer & Kontakt')
}
</script>
