<template>
  <Card id="content-socials" 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">Community</p>
        <h2 class="mt-1 text-xl font-bold text-slate-900">Social Links</h2>
        <p class="mt-2 text-sm leading-6 text-slate-500">Plattform, Label und URL werden auf der Landingpage im Host- und Community-Bereich verwendet. Der Share-Block nutzt die X- und Discord-Links aus dem Basis-Bereich.</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-violet-50 px-4 text-violet-700 shadow-none hover:bg-violet-100" @click="addSocialLink">
          <Plus class="h-4 w-4" />
          Link 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 ...' : 'Socials speichern' }}
        </Button>
      </div>
    </div>
    <div class="mt-6 space-y-4">
      <p v-if="iconUploadError" class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-700">{{ iconUploadError }}</p>
      <div v-for="(social, index) in form.socialLinks" :key="`${social.platform}-${index}`" class="rounded-[28px] border border-violet-100 bg-gradient-to-br from-white via-violet-50/40 to-white p-5 shadow-[0_16px_42px_rgba(124,92,255,0.08)]">
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
          <div class="flex items-center gap-3">
            <span class="grid h-9 w-9 place-items-center rounded-2xl bg-violet-100 text-sm font-black text-violet-700">{{ index + 1 }}</span>
            <div>
              <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-violet-500">Social Link</p>
              <h3 class="text-lg font-semibold text-slate-900">{{ social.label || 'Neuer Link' }}</h3>
            </div>
          </div>
          <Button variant="ghost" size="sm" class="h-10 w-10 rounded-2xl border border-rose-100 bg-rose-50 p-0 text-rose-600 shadow-none hover:bg-rose-100" aria-label="Social Link entfernen" @click="removeSocialLink(index)">
            <Trash2 class="h-4 w-4" />
          </Button>
        </div>

        <div class="grid gap-4 lg:grid-cols-2 2xl:grid-cols-[minmax(220px,0.85fr)_minmax(260px,1fr)_minmax(260px,0.8fr)]">
          <label class="min-w-0 space-y-2">
            <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
            <input v-model="social.label" type="text" class="h-11 w-full min-w-0 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="Twitch" />
          </label>
          <label class="min-w-0 space-y-2">
            <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform auswählen</span>
            <NativeSelect
              :model-value="selectedSocialIconValue(social)"
              :options="socialIconSelectOptions"
              @update:model-value="handleSocialIconSelection(String($event), index)"
            />
            <span class="block text-xs text-slate-400">Bekannte Plattformen nutzen automatisch Bibliotheks-Icons. Neue oder eingestellte Plattformen bleiben über Custom-Key plus Upload möglich.</span>
          </label>
          <div class="min-w-0 space-y-2">
            <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Custom Icon</span>
            <label class="group flex h-11 w-full min-w-0 cursor-pointer items-center justify-between gap-3 rounded-2xl border border-dashed border-violet-300 bg-white px-3 text-sm font-semibold text-violet-700 transition hover:border-violet-500 hover:bg-violet-50">
              <span class="flex min-w-0 items-center gap-2">
                <span class="grid h-7 w-7 shrink-0 place-items-center overflow-hidden rounded-xl bg-violet-100 text-violet-600">
                  <Upload class="h-4 w-4" />
                </span>
                <span class="truncate">{{ isUploadedIcon(social.icon) ? 'Icon ersetzen' : 'Icon hochladen' }}</span>
              </span>
              <input type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml" class="sr-only" @change="handleSocialIconUpload($event, index)" />
            </label>
          </div>
          <label v-if="selectedSocialIconValue(social) === 'custom'" class="min-w-0 space-y-2 lg:col-span-2 2xl:col-span-3">
            <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Andere Plattform / eigener Key</span>
            <input v-model="social.platform" type="text" class="h-11 w-full min-w-0 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="z.B. cake, booth, neue-plattform" />
            <span class="block text-xs text-slate-400">Für neue oder nicht mehr gepflegte Plattformen: Key speichern, eigenes Icon hochladen oder Stern-Fallback nutzen.</span>
          </label>
          <label class="min-w-0 space-y-2 lg:col-span-2 2xl:col-span-3">
            <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">URL</span>
            <input v-model="social.url" type="url" class="h-11 w-full min-w-0 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="https://..." />
          </label>
        </div>
        <div v-if="hasSocialIconPreview(social)" class="mt-4 grid gap-4 rounded-[22px] border border-violet-100 bg-white/82 p-4">
          <div>
            <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Icon Preview</p>
            <p class="mt-1 text-xs text-slate-500">Aktives Icon: {{ socialIconModeLabel(social) }}. Unbekannte Plattformen bleiben verlinkt und nutzen ein Fallback, bis du ein Custom Icon hochlädst.</p>
          </div>
          <div class="grid gap-3 md:grid-cols-2">
            <label class="flex items-center justify-between gap-4 rounded-[18px] border border-violet-100 bg-violet-50/60 p-3">
              <span class="flex items-center gap-3">
                <span class="grid h-9 w-9 place-items-center rounded-[11px] bg-[#f1ecfb]">
                  <img v-if="isUploadedIcon(social.icon)" :src="social.icon" :alt="`${social.label || social.platform} Host Icon Preview`" class="h-[22px] w-[22px] object-contain" />
                  <svg v-else-if="socialSimpleIconPath(social)" class="h-[22px] w-[22px]" viewBox="0 0 24 24" :fill="socialSimpleIconColor(social)"><path :d="socialSimpleIconPath(social)" /></svg>
                  <span v-else class="text-lg font-black text-violet-600">✦</span>
                </span>
                <span class="text-sm font-semibold text-slate-700">Host Größe</span>
              </span>
              <input v-model="social.showOnHost" type="checkbox" class="h-4 w-4 rounded border-violet-300 text-violet-600 focus:ring-violet-300" />
            </label>
            <label class="flex items-center justify-between gap-4 rounded-[18px] border border-violet-100 bg-white p-3">
              <span class="flex items-center gap-3">
                <span class="grid h-[46px] w-[46px] place-items-center rounded-[13px] border border-[#e9e0f8] bg-white shadow-[0_4px_12px_rgba(124,86,196,0.08)]">
                  <img v-if="isUploadedIcon(social.icon)" :src="social.icon" :alt="`${social.label || social.platform} Community Icon Preview`" class="h-6 w-6 object-contain" />
                  <svg v-else-if="socialSimpleIconPath(social)" class="h-6 w-6" viewBox="0 0 24 24" :fill="socialSimpleIconColor(social)"><path :d="socialSimpleIconPath(social)" /></svg>
                  <span v-else class="text-xl font-black text-violet-600">✦</span>
                </span>
                <span class="text-sm font-semibold text-slate-700">Community Größe</span>
              </span>
              <input v-model="social.showOnCommunity" type="checkbox" class="h-4 w-4 rounded border-violet-300 text-violet-600 focus:ring-violet-300" />
            </label>
          </div>
        </div>
        <div class="flex flex-wrap items-center gap-3 text-xs text-slate-500 lg:col-span-4">
          <span>PNG, JPG, WebP oder SVG · max. 256 KB · max. 512 x 512 px</span>
          <button v-if="social.icon" type="button" class="font-semibold text-rose-500 transition hover:text-rose-700" @click="clearSocialIcon(index)">Icon entfernen</button>
        </div>
      </div>
    </div>
  </Card>
</template>

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

import { SOCIAL_ICON_OPTION_GROUPS } from '../../lib/socialIcons'
import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'
import NativeSelect from '../ui/NativeSelect.vue'
import type { AdminContentForm, SocialLinkForm } from './adminContentTypes'

const props = defineProps<{
  form: AdminContentForm
  saving: boolean
  iconUploadError: string
  addSocialLink: () => void
  removeSocialLink: (index: number) => void
  isUploadedIcon: (icon: string) => boolean
  selectedSocialIconValue: (social: SocialLinkForm) => string
  handleSocialIconSelection: (value: string, index: number) => void
  hasSocialIconPreview: (social: SocialLinkForm) => boolean
  socialIconModeLabel: (social: SocialLinkForm) => string
  socialSimpleIconPath: (social: SocialLinkForm) => string
  socialSimpleIconColor: (social: SocialLinkForm) => string
  handleSocialIconUpload: (event: Event, index: number) => Promise<void>
  clearSocialIcon: (index: number) => void
  saveSiteSettings: (sectionLabel?: string) => Promise<void>
}>()

const socialIconSelectOptions = [
  ...SOCIAL_ICON_OPTION_GROUPS.flatMap((group) =>
    group.options.map((option) => ({
      label: option.label,
      value: option.key,
      group: group.label,
    })),
  ),
  { label: 'Andere Plattform / eigenes Icon', value: 'custom' },
]

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