import type { Block } from 'payload'

/**
 * ImageSliderBlock / GalleryBlock
 *
 * Vielseitiger Bild-Slider und Galerie-Block mit:
 * - Mehreren Layouts (Slider, Grid, Masonry)
 * - Lightbox-Funktion
 * - Thumbnail-Navigation
 * - Bildunterschriften
 * - Verschiedenen Animationen
 */
export const ImageSliderBlock: Block = {
  slug: 'image-slider-block',
  labels: {
    singular: 'Bildergalerie',
    plural: 'Bildergalerien',
  },
  imageURL: '/assets/blocks/image-slider.png',
  fields: [
    // Titel & Beschreibung
    {
      name: 'title',
      type: 'text',
      label: 'Titel',
      localized: true,
      admin: {
        description: 'Optionaler Titel über der Galerie',
      },
    },
    {
      name: 'description',
      type: 'textarea',
      label: 'Beschreibung',
      localized: true,
    },

    // Bilder Array
    {
      name: 'images',
      type: 'array',
      required: true,
      minRows: 1,
      maxRows: 50,
      label: 'Bilder',
      labels: {
        singular: 'Bild',
        plural: 'Bilder',
      },
      admin: {
        description: 'Mindestens 1 Bild, maximal 50 Bilder',
        initCollapsed: false,
      },
      fields: [
        {
          name: 'image',
          type: 'upload',
          relationTo: 'media',
          required: true,
          label: 'Bild',
        },
        {
          name: 'caption',
          type: 'text',
          label: 'Bildunterschrift',
          localized: true,
        },
        {
          name: 'alt',
          type: 'text',
          label: 'Alt-Text',
          localized: true,
          admin: {
            description: 'Alternativer Text für Barrierefreiheit (falls abweichend vom Media Alt)',
          },
        },
        {
          name: 'link',
          type: 'text',
          label: 'Link',
          admin: {
            description: 'Optionaler Link beim Klick (statt Lightbox)',
          },
        },
      ],
    },

    // Layout
    {
      name: 'layout',
      type: 'select',
      defaultValue: 'slider',
      label: 'Layout',
      options: [
        { label: 'Slider', value: 'slider' },
        { label: 'Grid', value: 'grid' },
        { label: 'Masonry', value: 'masonry' },
        { label: 'Einzelbild (Featured)', value: 'single' },
        { label: 'Thumbnails unten', value: 'thumbs' },
        { label: 'Filmstreifen', value: 'filmstrip' },
      ],
    },

    // Grid/Masonry Optionen
    {
      name: 'grid',
      type: 'group',
      label: 'Grid-Einstellungen',
      admin: {
        condition: (_, siblingData) =>
          siblingData?.layout === 'grid' || siblingData?.layout === 'masonry',
      },
      fields: [
        {
          name: 'cols',
          type: 'select',
          defaultValue: '3',
          label: 'Spalten',
          options: [
            { label: '2 Spalten', value: '2' },
            { label: '3 Spalten', value: '3' },
            { label: '4 Spalten', value: '4' },
            { label: '5 Spalten', value: '5' },
            { label: '6 Spalten', value: '6' },
          ],
        },
        {
          name: 'gap',
          type: 'select',
          defaultValue: '16',
          label: 'Abstand',
          options: [
            { label: 'Kein Abstand', value: '0' },
            { label: 'Klein (8px)', value: '8' },
            { label: 'Normal (16px)', value: '16' },
            { label: 'Groß (24px)', value: '24' },
            { label: 'Sehr groß (32px)', value: '32' },
          ],
        },
        {
          name: 'aspectRatio',
          type: 'select',
          defaultValue: 'square',
          label: 'Seitenverhältnis',
          options: [
            { label: 'Quadratisch (1:1)', value: 'square' },
            { label: 'Querformat (4:3)', value: '4-3' },
            { label: 'Breit (16:9)', value: '16-9' },
            { label: 'Hochformat (3:4)', value: '3-4' },
            { label: 'Original', value: 'auto' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.layout !== 'masonry',
          },
        },
      ],
    },

    // Slider-Einstellungen
    {
      name: 'slider',
      type: 'group',
      label: 'Slider-Einstellungen',
      admin: {
        condition: (_, siblingData) =>
          siblingData?.layout === 'slider' ||
          siblingData?.layout === 'thumbs' ||
          siblingData?.layout === 'filmstrip',
      },
      fields: [
        {
          name: 'effect',
          type: 'select',
          defaultValue: 'slide',
          label: 'Animation',
          options: [
            { label: 'Schieben (Slide)', value: 'slide' },
            { label: 'Überblenden (Fade)', value: 'fade' },
            { label: 'Zoom', value: 'zoom' },
            { label: 'Flip', value: 'flip' },
            { label: 'Coverflow', value: 'coverflow' },
            { label: 'Cube', value: 'cube' },
          ],
        },
        {
          name: 'speed',
          type: 'select',
          defaultValue: '500',
          label: 'Geschwindigkeit',
          options: [
            { label: 'Schnell (300ms)', value: '300' },
            { label: 'Normal (500ms)', value: '500' },
            { label: 'Langsam (800ms)', value: '800' },
          ],
        },
        {
          name: 'perView',
          type: 'select',
          defaultValue: '1',
          label: 'Sichtbare Bilder',
          options: [
            { label: '1', value: '1' },
            { label: '2', value: '2' },
            { label: '3', value: '3' },
            { label: '4', value: '4' },
            { label: 'Auto', value: 'auto' },
          ],
        },
        {
          name: 'gap',
          type: 'select',
          defaultValue: '0',
          label: 'Abstand',
          options: [
            { label: 'Kein Abstand', value: '0' },
            { label: 'Klein (8px)', value: '8' },
            { label: 'Normal (16px)', value: '16' },
            { label: 'Groß (24px)', value: '24' },
          ],
        },
        {
          name: 'auto',
          type: 'checkbox',
          defaultValue: false,
          label: 'Autoplay',
        },
        {
          name: 'delay',
          type: 'select',
          defaultValue: '4000',
          label: 'Intervall',
          options: [
            { label: '3 Sekunden', value: '3000' },
            { label: '4 Sekunden', value: '4000' },
            { label: '5 Sekunden', value: '5000' },
            { label: '6 Sekunden', value: '6000' },
            { label: '8 Sekunden', value: '8000' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.auto,
          },
        },
        {
          name: 'pauseHover',
          type: 'checkbox',
          defaultValue: true,
          label: 'Bei Hover pausieren',
          admin: {
            condition: (_, siblingData) => siblingData?.auto,
          },
        },
        {
          name: 'loop',
          type: 'checkbox',
          defaultValue: true,
          label: 'Endlosschleife',
        },
        {
          name: 'centered',
          type: 'checkbox',
          defaultValue: false,
          label: 'Aktives Bild zentrieren',
        },
      ],
    },

    // Navigation
    {
      name: 'nav',
      type: 'group',
      label: 'Navigation',
      admin: {
        condition: (_, siblingData) =>
          siblingData?.layout === 'slider' ||
          siblingData?.layout === 'thumbs' ||
          siblingData?.layout === 'filmstrip',
      },
      fields: [
        {
          name: 'arrows',
          type: 'checkbox',
          defaultValue: true,
          label: 'Pfeile anzeigen',
        },
        {
          name: 'arrowStyle',
          type: 'select',
          defaultValue: 'default',
          label: 'Pfeil-Stil',
          options: [
            { label: 'Standard', value: 'default' },
            { label: 'Minimal', value: 'minimal' },
            { label: 'Eckig', value: 'square' },
            { label: 'Nur bei Hover', value: 'hover' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.arrows,
          },
        },
        {
          name: 'dots',
          type: 'checkbox',
          defaultValue: true,
          label: 'Punkte anzeigen',
        },
        {
          name: 'dotStyle',
          type: 'select',
          defaultValue: 'dots',
          label: 'Punkte-Stil',
          options: [
            { label: 'Punkte', value: 'dots' },
            { label: 'Striche', value: 'lines' },
            { label: 'Nummern', value: 'numbers' },
            { label: 'Fortschritt', value: 'progress' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.dots,
          },
        },
        {
          name: 'counter',
          type: 'checkbox',
          defaultValue: false,
          label: 'Zähler anzeigen (1/10)',
        },
        {
          name: 'swipe',
          type: 'checkbox',
          defaultValue: true,
          label: 'Touch-Swipe',
        },
        {
          name: 'keys',
          type: 'checkbox',
          defaultValue: true,
          label: 'Tastaturnavigation',
        },
      ],
    },

    // Lightbox
    {
      name: 'lightbox',
      type: 'group',
      label: 'Lightbox',
      fields: [
        {
          name: 'enabled',
          type: 'checkbox',
          defaultValue: true,
          label: 'Lightbox aktivieren',
          admin: {
            description: 'Bilder bei Klick in Vollansicht öffnen',
          },
        },
        {
          name: 'zoom',
          type: 'checkbox',
          defaultValue: true,
          label: 'Zoom erlauben',
          admin: {
            condition: (_, siblingData) => siblingData?.enabled,
          },
        },
        {
          name: 'download',
          type: 'checkbox',
          defaultValue: false,
          label: 'Download-Button',
          admin: {
            condition: (_, siblingData) => siblingData?.enabled,
          },
        },
        {
          name: 'share',
          type: 'checkbox',
          defaultValue: false,
          label: 'Teilen-Button',
          admin: {
            condition: (_, siblingData) => siblingData?.enabled,
          },
        },
        {
          name: 'captions',
          type: 'checkbox',
          defaultValue: true,
          label: 'Bildunterschriften anzeigen',
          admin: {
            condition: (_, siblingData) => siblingData?.enabled,
          },
        },
        {
          name: 'thumbs',
          type: 'checkbox',
          defaultValue: true,
          label: 'Thumbnails anzeigen',
          admin: {
            condition: (_, siblingData) => siblingData?.enabled,
          },
        },
        {
          name: 'bg',
          type: 'select',
          defaultValue: 'dark',
          label: 'Hintergrund',
          options: [
            { label: 'Dunkel', value: 'dark' },
            { label: 'Hell', value: 'light' },
            { label: 'Blur', value: 'blur' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.enabled,
          },
        },
      ],
    },

    // Darstellung
    {
      name: 'style',
      type: 'group',
      label: 'Darstellung',
      fields: [
        {
          name: 'height',
          type: 'select',
          defaultValue: 'auto',
          label: 'Höhe',
          options: [
            { label: 'Auto (Bildverhältnis)', value: 'auto' },
            { label: 'Klein (300px)', value: '300' },
            { label: 'Mittel (400px)', value: '400' },
            { label: 'Groß (500px)', value: '500' },
            { label: 'Sehr groß (600px)', value: '600' },
            { label: 'Vollbild (100vh)', value: 'full' },
          ],
        },
        {
          name: 'imgFit',
          type: 'select',
          defaultValue: 'cover',
          label: 'Bildanpassung',
          options: [
            { label: 'Ausfüllen (cover)', value: 'cover' },
            { label: 'Einpassen (contain)', value: 'contain' },
            { label: 'Strecken (fill)', value: 'fill' },
          ],
        },
        {
          name: 'rounded',
          type: 'select',
          defaultValue: 'none',
          label: 'Ecken',
          options: [
            { label: 'Keine', value: 'none' },
            { label: 'Klein', value: 'sm' },
            { label: 'Mittel', value: 'md' },
            { label: 'Groß', value: 'lg' },
            { label: 'Rund', value: 'full' },
          ],
        },
        {
          name: 'shadow',
          type: 'checkbox',
          defaultValue: false,
          label: 'Schatten',
        },
        {
          name: 'border',
          type: 'checkbox',
          defaultValue: false,
          label: 'Rahmen',
        },
        {
          name: 'hoverEffect',
          type: 'select',
          defaultValue: 'none',
          label: 'Hover-Effekt',
          options: [
            { label: 'Keiner', value: 'none' },
            { label: 'Zoom', value: 'zoom' },
            { label: 'Aufhellen', value: 'brighten' },
            { label: 'Abdunkeln', value: 'darken' },
            { label: 'Overlay', value: 'overlay' },
          ],
        },
        {
          name: 'captionPos',
          type: 'select',
          defaultValue: 'below',
          label: 'Bildunterschrift-Position',
          options: [
            { label: 'Unterhalb', value: 'below' },
            { label: 'Overlay unten', value: 'overlay' },
            { label: 'Bei Hover', value: 'hover' },
            { label: 'Versteckt', value: 'hidden' },
          ],
        },
        {
          name: 'bg',
          type: 'select',
          defaultValue: 'none',
          label: 'Hintergrund',
          options: [
            { label: 'Keiner', value: 'none' },
            { label: 'Weiß', value: 'white' },
            { label: 'Grau', value: 'light' },
            { label: 'Dunkel', value: 'dark' },
          ],
        },
        {
          name: 'padding',
          type: 'select',
          defaultValue: 'none',
          label: 'Außenabstand',
          options: [
            { label: 'Keiner', value: 'none' },
            { label: 'Klein', value: 'sm' },
            { label: 'Normal', value: 'md' },
            { label: 'Groß', value: 'lg' },
          ],
        },
      ],
    },

    // Accessibility
    {
      name: 'a11y',
      type: 'group',
      label: 'Barrierefreiheit',
      fields: [
        {
          name: 'label',
          type: 'text',
          defaultValue: 'Bildergalerie',
          label: 'ARIA Label',
          localized: true,
        },
        {
          name: 'reducedMotion',
          type: 'checkbox',
          defaultValue: true,
          label: 'Reduzierte Bewegung respektieren',
        },
      ],
    },
  ],
}
