<script setup lang="ts">
import { FileText, Link2, MessageCircleQuestion, Share2, ShieldCheck } from '@lucide/vue'
import { computed, ref } from 'vue'

import AdminContentBasicsSection from '../../components/admin/AdminContentBasicsSection.vue'
import AdminContentFaqPreviewModal from '../../components/admin/AdminContentFaqPreviewModal.vue'
import AdminContentFaqSection from '../../components/admin/AdminContentFaqSection.vue'
import AdminContentFooterPreviewModal from '../../components/admin/AdminContentFooterPreviewModal.vue'
import AdminContentLinksSection from '../../components/admin/AdminContentLinksSection.vue'
import type { FooterPreviewKey } from '../../components/admin/AdminContentLinksSection.vue'
import AdminContentPrivacyPreviewModal from '../../components/admin/AdminContentPrivacyPreviewModal.vue'
import AdminContentPrivacySection from '../../components/admin/AdminContentPrivacySection.vue'
import AdminContentSocialLinksSection from '../../components/admin/AdminContentSocialLinksSection.vue'
import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import Modal from '../../components/ui/Modal.vue'
import { watchAdminToast } from '../../composables/useAdminToast'
import { privacyContentToHtml } from '../../lib/privacyContent'
import { useAdminContentManager } from '../../components/admin/useAdminContentManager'

type ContentEditorKey = 'links' | 'socials' | 'faq' | 'privacy'

const {
  form,
  saving,
  saveMessage,
  saveError,
  privacyPreviewOpen,
  iconUploadError,
  privacyPreviewHtml,
  privacyUpdatedLabel,
  addSocialLink,
  removeSocialLink,
  addFaqItem,
  removeFaqItem,
  isUploadedIcon,
  selectedSocialIconValue,
  handleSocialIconSelection,
  hasSocialIconPreview,
  socialIconModeLabel,
  socialSimpleIconPath,
  socialSimpleIconColor,
  handleSocialIconUpload,
  clearSocialIcon,
  saveSiteSettings,
  adminSiteSettings,
} = useAdminContentManager()

watchAdminToast(saveMessage, saveError)

const footerPreviewOpen = ref(false)
const footerPreviewKey = ref<FooterPreviewKey>('imprint')
const faqPreviewOpen = ref(false)
const activeContentEditor = ref<ContentEditorKey | null>(null)

const footerPreviewPages = computed<Record<FooterPreviewKey, { title: string, url: string, content: string }>>(() => ({
  imprint: {
    title: 'Impressum',
    url: form.imprintUrl,
    content: form.imprintContent,
  },
  contact: {
    title: 'Kontakt',
    url: form.contactUrl,
    content: form.contactContent,
  },
  sponsors: {
    title: 'Sponsoren & Partner',
    url: form.sponsorsUrl,
    content: form.sponsorsContent,
  },
}))

const activeFooterPreview = computed(() => footerPreviewPages.value[footerPreviewKey.value])
const activeFooterPreviewHtml = computed(() => privacyContentToHtml(activeFooterPreview.value.content))
const contentEditors = computed(() => [
  {
    key: 'links' as const,
    eyebrow: 'Footer & Kontakt',
    title: 'Rechtliche Links',
    description: 'Kontaktwege, Impressum und Sponsoren-Inhalte bearbeiten.',
    metric: `${[form.contactUrl, form.imprintUrl, form.sponsorsUrl].filter(Boolean).length}/3 URLs`,
    icon: Link2,
  },
  {
    key: 'socials' as const,
    eyebrow: 'Community',
    title: 'Social Links',
    description: 'Plattformen, Labels, URLs und Custom Icons pflegen.',
    metric: `${form.socialLinks.length} Links`,
    icon: Share2,
  },
  {
    key: 'faq' as const,
    eyebrow: 'Support',
    title: 'FAQ',
    description: 'Fragen und Antworten für die Landingpage verwalten.',
    metric: `${form.faq.length} Fragen`,
    icon: MessageCircleQuestion,
  },
  {
    key: 'privacy' as const,
    eyebrow: 'Rechtstexte',
    title: 'Datenschutz',
    description: 'Datenschutzerklärung mit Preview bearbeiten.',
    metric: privacyUpdatedLabel.value,
    icon: ShieldCheck,
  },
])
const currentContentEditor = computed(() => contentEditors.value.find((item) => item.key === activeContentEditor.value) ?? null)

function openFooterPreview(key: FooterPreviewKey) {
  footerPreviewKey.value = key
  footerPreviewOpen.value = true
}

function openContentEditor(key: ContentEditorKey) {
  activeContentEditor.value = key
}
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="Content Hub"
      description="Landingpage, Footer, Social Links und Rechtstexte pflegen."
      :icon="FileText"
    />

    <AdminContentBasicsSection :form="form" :saving="saving" :save-site-settings="saveSiteSettings" />

    <section aria-labelledby="content-editor-title" class="space-y-4">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Weitere Bereiche</p>
        <h2 id="content-editor-title" class="mt-1 text-xl font-bold text-slate-900">Landingpage-Module bearbeiten</h2>
      </div>

      <div class="grid gap-3 lg:grid-cols-2">
        <button
          v-for="editor in contentEditors"
          :key="editor.key"
          type="button"
          class="group flex min-h-[132px] items-start gap-4 rounded-[24px] border border-violet-100 bg-white/86 p-5 text-left shadow-[0_16px_40px_rgba(124,92,255,0.07)] transition hover:-translate-y-0.5 hover:border-violet-200 hover:bg-violet-50/70 hover:shadow-[0_20px_48px_rgba(124,92,255,0.12)]"
          @click="openContentEditor(editor.key)"
        >
          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700 transition group-hover:bg-white">
            <component :is="editor.icon" class="h-5 w-5" />
          </span>
          <span class="min-w-0 flex-1">
            <span class="block text-[11px] font-semibold uppercase tracking-[0.2em] text-violet-500">{{ editor.eyebrow }}</span>
            <span class="mt-1 block text-lg font-bold text-slate-900">{{ editor.title }}</span>
            <span class="mt-2 block text-sm leading-6 text-slate-500">{{ editor.description }}</span>
          </span>
          <span class="shrink-0 rounded-2xl border border-violet-100 bg-violet-50 px-3 py-2 text-xs font-bold text-violet-700">{{ editor.metric }}</span>
        </button>
      </div>
    </section>

    <Modal
      :open="activeContentEditor !== null"
      :title="currentContentEditor?.title"
      :subtitle="currentContentEditor?.description"
      size="xl"
      @close="activeContentEditor = null"
    >
      <AdminContentLinksSection
        v-if="activeContentEditor === 'links'"
        :form="form"
        :saving="saving"
        :save-site-settings="saveSiteSettings"
        @open-preview="openFooterPreview"
      />
      <AdminContentSocialLinksSection
        v-else-if="activeContentEditor === 'socials'"
        :form="form"
        :saving="saving"
        :icon-upload-error="iconUploadError"
        :add-social-link="addSocialLink"
        :remove-social-link="removeSocialLink"
        :is-uploaded-icon="isUploadedIcon"
        :selected-social-icon-value="selectedSocialIconValue"
        :handle-social-icon-selection="handleSocialIconSelection"
        :has-social-icon-preview="hasSocialIconPreview"
        :social-icon-mode-label="socialIconModeLabel"
        :social-simple-icon-path="socialSimpleIconPath"
        :social-simple-icon-color="socialSimpleIconColor"
        :handle-social-icon-upload="handleSocialIconUpload"
        :clear-social-icon="clearSocialIcon"
        :save-site-settings="saveSiteSettings"
      />
      <AdminContentFaqSection
        v-else-if="activeContentEditor === 'faq'"
        :form="form"
        :saving="saving"
        :add-faq-item="addFaqItem"
        :remove-faq-item="removeFaqItem"
        :save-site-settings="saveSiteSettings"
        @open-preview="faqPreviewOpen = true"
      />
      <AdminContentPrivacySection
        v-else-if="activeContentEditor === 'privacy'"
        :form="form"
        :saving="saving"
        :updated-by="adminSiteSettings.privacyPolicyUpdatedBy"
        :updated-label="privacyUpdatedLabel"
        :save-site-settings="saveSiteSettings"
        @open-preview="privacyPreviewOpen = true"
      />
    </Modal>

    <AdminContentPrivacyPreviewModal
      :open="privacyPreviewOpen"
      :content-html="privacyPreviewHtml"
      :updated-label="privacyUpdatedLabel"
      @close="privacyPreviewOpen = false"
    />
    <AdminContentFooterPreviewModal
      :open="footerPreviewOpen"
      :title="activeFooterPreview.title"
      :url="activeFooterPreview.url"
      :content-html="activeFooterPreviewHtml"
      @close="footerPreviewOpen = false"
    />
    <AdminContentFaqPreviewModal
      :open="faqPreviewOpen"
      :faq="form.faq"
      @close="faqPreviewOpen = false"
    />
  </div>
</template>
