<template>
  <Card id="content-basics" class="overflow-hidden p-0">
    <div class="border-b border-violet-100 bg-gradient-to-r from-violet-50 via-white to-amber-50/60 px-6 py-5">
      <div class="flex items-start justify-between gap-4">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Basis</p>
          <h2 class="mt-1 text-xl font-bold text-slate-900">Host & Hero-Informationen</h2>
          <p class="mt-2 text-sm leading-6 text-slate-500">Diese Werte erscheinen direkt im Hero-Hostblock und im Community-Bereich.</p>
        </div>
        <div class="flex shrink-0 flex-col items-end gap-3">
          <Globe2 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 ...' : 'Basis speichern' }}
          </Button>
        </div>
      </div>
    </div>
    <div class="grid gap-4 p-6 md:grid-cols-2">
      <div class="md:col-span-2 grid gap-4 rounded-[24px] border border-violet-100 bg-gradient-to-br from-violet-50 via-white to-fuchsia-50/60 p-4 sm:grid-cols-[minmax(0,1fr)_220px]">
        <div class="flex flex-col justify-between gap-4">
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Hostbild Landingpage</p>
            <h3 class="mt-1 text-lg font-bold text-slate-900">Hero-Grafik austauschen</h3>
            <p class="mt-2 text-sm leading-6 text-slate-500">
              Wird rechts im Landingpage-Hero angezeigt und nach dem Upload dauerhaft gespeichert. Erlaubt sind PNG, JPG oder WebP bis 8 MB.
            </p>
          </div>
          <div class="flex flex-wrap items-center gap-3">
            <label class="inline-flex cursor-pointer items-center gap-2 rounded-2xl bg-violet-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/20 transition hover:-translate-y-0.5 hover:bg-violet-700">
              <Upload class="h-4 w-4" />
              {{ hostImageUploading ? 'Lädt hoch ...' : 'Hostbild hochladen' }}
              <input class="sr-only" type="file" accept="image/png,image/jpeg,image/webp" :disabled="hostImageUploading || saving" @change="handleHostImageUpload" />
            </label>
            <span class="text-xs font-semibold text-slate-400">Aktuell: {{ form.hostImageUrl || 'Fallback-Bild' }}</span>
          </div>
          <p v-if="hostImageUploadError" class="rounded-2xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-700">
            {{ hostImageUploadError }}
          </p>
        </div>
        <div class="relative min-h-[220px] overflow-hidden rounded-[22px] border border-white/80 bg-[#f4eefb] shadow-inner shadow-violet-100">
          <img
            :src="form.hostImageUrl || '/assets/amaterasu2sei_2.png'"
            alt="Aktuelles Hostbild"
            class="absolute inset-x-0 bottom-0 mx-auto h-[260px] w-auto object-contain drop-shadow-2xl"
          />
          <div class="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-[#f4eefb] to-transparent"></div>
        </div>
      </div>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Host Name</span>
        <input v-model="form.hostDisplayName" type="text" 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">Artist Name</span>
        <input v-model="form.hostArtistName" type="text" placeholder="z.B. Illustrator:in des Hostbilds" 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 md:col-span-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Host Tagline</span>
        <input v-model="form.hostTagline" type="text" 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 md:col-span-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Newsletter URL</span>
        <input v-model="form.newsletterUrl" 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">Auf X teilen – URL</span>
        <input v-model="form.shareXUrl" type="url" placeholder="https://x.com/intent/tweet?..." 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">Auf Discord teilen – URL</span>
        <input v-model="form.shareDiscordUrl" type="url" placeholder="https://discord.gg/..." 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>
  </Card>
</template>

<script setup lang="ts">
import { Globe2, Save, Upload } 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
  hostImageUploading: boolean
  hostImageUploadError: string
  handleHostImageUpload: (event: Event) => Promise<void>
  saveSiteSettings: (sectionLabel?: string) => Promise<void>
}>()

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