import type { Block } from 'payload'

/**
 * Background color options
 */
const backgroundColorOptions = [
  { label: 'Weiß', value: 'white' },
  { label: 'Ivory', value: 'ivory' },
  { label: 'Sand', value: 'sand' },
  { label: 'Hell (Grau)', value: 'light' },
  { label: 'Dunkel', value: 'dark' },
]

/**
 * Item Type options
 */
const itemTypeOptions = [
  { label: 'Blog-Beitrag', value: 'post' },
  { label: 'Video', value: 'video' },
  { label: 'Serie', value: 'series' },
  { label: 'Externer Link', value: 'external' },
]

/**
 * FeaturedContentBlock
 *
 * Kuratierte Sammlung von verschiedenen Content-Typen.
 * Ermöglicht das Mischen von Posts, Videos, Serien und externen Links.
 */
export const FeaturedContentBlock: Block = {
  slug: 'featured-content-block',
  labels: {
    singular: 'Featured Content',
    plural: 'Featured Contents',
  },
  imageURL: '/assets/blocks/featured-content.png',
  fields: [
    // Header
    {
      name: 'title',
      type: 'text',
      label: 'Überschrift',
      localized: true,
    },
    {
      name: 'subtitle',
      type: 'text',
      label: 'Untertitel',
      localized: true,
    },

    // Items Array
    {
      name: 'items',
      type: 'array',
      required: true,
      minRows: 1,
      maxRows: 12,
      label: 'Inhalte',
      admin: {
        description: 'Wähle verschiedene Content-Typen aus',
      },
      fields: [
        // Item Type Selection
        {
          name: 'itemType',
          type: 'select',
          required: true,
          options: itemTypeOptions,
          label: 'Typ',
        },

        // Post Selection (condition: itemType === 'post')
        {
          name: 'post',
          type: 'relationship',
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          relationTo: 'posts' as any,
          label: 'Beitrag auswählen',
          admin: {
            condition: (_, siblingData) => siblingData?.itemType === 'post',
          },
        },

        // Video Selection (condition: itemType === 'video')
        {
          name: 'video',
          type: 'relationship',
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          relationTo: 'videos' as any,
          label: 'Video auswählen',
          admin: {
            condition: (_, siblingData) => siblingData?.itemType === 'video',
          },
        },

        // Series Selection (condition: itemType === 'series')
        {
          name: 'series',
          type: 'relationship',
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          relationTo: 'series' as any,
          label: 'Serie auswählen',
          admin: {
            condition: (_, siblingData) => siblingData?.itemType === 'series',
          },
        },

        // External Content (condition: itemType === 'external')
        {
          name: 'externalTitle',
          type: 'text',
          label: 'Titel',
          localized: true,
          admin: {
            condition: (_, siblingData) => siblingData?.itemType === 'external',
          },
        },
        {
          name: 'externalUrl',
          type: 'text',
          label: 'URL',
          admin: {
            condition: (_, siblingData) => siblingData?.itemType === 'external',
          },
          validate: (
            value: string | undefined | null,
            { siblingData }: { siblingData?: Record<string, unknown> }
          ) => {
            if (siblingData?.itemType !== 'external') return true
            if (!value) return 'URL ist erforderlich'
            try {
              new URL(value)
              return true
            } catch {
              return 'Bitte eine gültige URL eingeben'
            }
          },
        },
        {
          name: 'externalImage',
          type: 'upload',
          relationTo: 'media',
          label: 'Bild',
          admin: {
            condition: (_, siblingData) => siblingData?.itemType === 'external',
          },
        },
        {
          name: 'externalDescription',
          type: 'textarea',
          label: 'Beschreibung',
          maxLength: 200,
          localized: true,
          admin: {
            condition: (_, siblingData) => siblingData?.itemType === 'external',
          },
        },

        // Custom Label (for all types)
        {
          name: 'customLabel',
          type: 'text',
          label: 'Custom-Label',
          localized: true,
          admin: {
            description: 'Optionales Label (z.B. "NEU", "TRENDING", "MUSS-LESEN")',
          },
        },

        // Custom Order/Featured
        {
          name: 'featured',
          type: 'checkbox',
          defaultValue: false,
          label: 'Hervorgehoben',
          admin: {
            description: 'In featured-grid Layout größer darstellen',
          },
        },
      ],
    },

    // Layout
    {
      name: 'layout',
      type: 'select',
      defaultValue: 'grid',
      label: 'Layout',
      options: [
        { label: 'Grid', value: 'grid' },
        { label: 'Karussell', value: 'carousel' },
        { label: 'Liste', value: 'list' },
        { label: 'Featured Grid (erstes Element größer)', value: 'featured-grid' },
      ],
    },
    {
      name: 'columns',
      type: 'select',
      defaultValue: '3',
      label: 'Spalten',
      options: [
        { label: '2 Spalten', value: '2' },
        { label: '3 Spalten', value: '3' },
        { label: '4 Spalten', value: '4' },
      ],
      admin: {
        condition: (_, siblingData) =>
          siblingData?.layout === 'grid' ||
          siblingData?.layout === 'carousel' ||
          siblingData?.layout === 'featured-grid',
      },
    },

    // Display Options
    {
      name: 'showDates',
      type: 'checkbox',
      defaultValue: true,
      label: 'Datum anzeigen',
    },
    {
      name: 'showType',
      type: 'checkbox',
      defaultValue: true,
      label: 'Content-Typ anzeigen',
      admin: {
        description: 'Icon oder Label für Post/Video/Serie anzeigen',
      },
    },
    {
      name: 'showDescription',
      type: 'checkbox',
      defaultValue: true,
      label: 'Beschreibung anzeigen',
    },
    {
      name: 'showCustomLabels',
      type: 'checkbox',
      defaultValue: true,
      label: 'Custom-Labels anzeigen',
    },

    // Styling
    {
      name: 'backgroundColor',
      type: 'select',
      defaultValue: 'white',
      options: backgroundColorOptions,
      label: 'Hintergrundfarbe',
    },

    // Card Style
    {
      name: 'card',
      type: 'group',
      label: 'Karten-Stil',
      fields: [
        {
          name: 'bg',
          type: 'select',
          defaultValue: 'white',
          label: 'Karten-Hintergrund',
          options: [
            { label: 'Weiß', value: 'white' },
            { label: 'Transparent', value: 'transparent' },
            { label: 'Hell', value: 'light' },
          ],
        },
        {
          name: 'shadow',
          type: 'checkbox',
          defaultValue: true,
          label: 'Schatten',
        },
        {
          name: 'border',
          type: 'checkbox',
          defaultValue: false,
          label: 'Rahmen',
        },
        {
          name: 'imgRatio',
          type: 'select',
          defaultValue: '16:9',
          label: 'Bild-Verhältnis',
          options: [
            { label: '16:9', value: '16:9' },
            { label: '4:3', value: '4:3' },
            { label: '1:1 (Quadrat)', value: '1:1' },
            { label: '3:2', value: '3:2' },
          ],
        },
        {
          name: 'hover',
          type: 'select',
          defaultValue: 'lift',
          label: 'Hover-Effekt',
          options: [
            { label: 'Keiner', value: 'none' },
            { label: 'Anheben', value: 'lift' },
            { label: 'Zoom (Bild)', value: 'zoom' },
            { label: 'Schatten verstärken', value: 'shadow' },
          ],
        },
      ],
    },

    // CTA
    {
      name: 'cta',
      type: 'group',
      label: 'Call-to-Action',
      fields: [
        {
          name: 'showCta',
          type: 'checkbox',
          defaultValue: false,
          label: 'CTA-Button anzeigen',
        },
        {
          name: 'ctaText',
          type: 'text',
          label: 'Button-Text',
          defaultValue: 'Alle ansehen',
          localized: true,
          admin: {
            condition: (_, siblingData) => siblingData?.showCta,
          },
        },
        {
          name: 'ctaUrl',
          type: 'text',
          label: 'Button-Link',
          admin: {
            condition: (_, siblingData) => siblingData?.showCta,
          },
        },
      ],
    },
  ],
}
