import type { Block } from 'payload'

/**
 * HeroSliderBlock
 *
 * Ein vollwertiger Hero-Slider mit:
 * - Mehreren Slides (Bild, Headline, Subline, CTA)
 * - Verschiedenen Animationstypen
 * - Autoplay-Einstellungen
 * - Navigationsoptionen (Dots, Pfeile)
 * - Responsive Höheneinstellungen
 */
export const HeroSliderBlock: Block = {
  slug: 'hero-slider-block',
  labels: {
    singular: 'Hero Slider',
    plural: 'Hero Slider',
  },
  imageURL: '/assets/blocks/hero-slider.png',
  fields: [
    // Slides Array
    {
      name: 'slides',
      type: 'array',
      required: true,
      minRows: 1,
      maxRows: 10,
      label: 'Slides',
      labels: {
        singular: 'Slide',
        plural: 'Slides',
      },
      admin: {
        description: 'Mindestens 1 Slide erforderlich, maximal 10 Slides',
        initCollapsed: false,
      },
      fields: [
        // Hintergrundbild
        {
          name: 'backgroundImage',
          type: 'upload',
          relationTo: 'media',
          required: true,
          label: 'Hintergrundbild',
          admin: {
            description: 'Empfohlen: 1920x1080px oder größer',
          },
        },
        // Mobile Hintergrundbild (optional)
        {
          name: 'mobileBackgroundImage',
          type: 'upload',
          relationTo: 'media',
          label: 'Mobiles Hintergrundbild',
          admin: {
            description: 'Optional: Alternatives Bild für mobile Geräte (Portrait-Format empfohlen)',
          },
        },
        // Headline
        {
          name: 'headline',
          type: 'text',
          required: true,
          label: 'Überschrift',
          localized: true,
          admin: {
            description: 'Hauptüberschrift des Slides',
          },
        },
        // Subline
        {
          name: 'subline',
          type: 'textarea',
          label: 'Unterüberschrift',
          localized: true,
          admin: {
            description: 'Optionaler Untertitel oder kurze Beschreibung',
          },
        },
        // Text-Ausrichtung
        {
          name: 'textAlignment',
          type: 'select',
          defaultValue: 'center',
          label: 'Text-Ausrichtung',
          options: [
            { label: 'Links', value: 'left' },
            { label: 'Zentriert', value: 'center' },
            { label: 'Rechts', value: 'right' },
          ],
        },
        // Vertikale Position
        {
          name: 'verticalPosition',
          type: 'select',
          defaultValue: 'center',
          label: 'Vertikale Position',
          options: [
            { label: 'Oben', value: 'top' },
            { label: 'Mitte', value: 'center' },
            { label: 'Unten', value: 'bottom' },
          ],
        },
        // Overlay
        {
          name: 'overlay',
          type: 'group',
          label: 'Overlay',
          fields: [
            {
              name: 'enabled',
              type: 'checkbox',
              defaultValue: true,
              label: 'Overlay aktivieren',
            },
            {
              name: 'color',
              type: 'select',
              defaultValue: 'dark',
              label: 'Overlay-Farbe',
              options: [
                { label: 'Dunkel (Schwarz)', value: 'dark' },
                { label: 'Hell (Weiß)', value: 'light' },
                { label: 'Primärfarbe', value: 'primary' },
                { label: 'Gradient (Dunkel unten)', value: 'gradient-bottom' },
                { label: 'Gradient (Dunkel oben)', value: 'gradient-top' },
              ],
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'opacity',
              type: 'select',
              defaultValue: '50',
              label: 'Deckkraft',
              options: [
                { label: '20%', value: '20' },
                { label: '30%', value: '30' },
                { label: '40%', value: '40' },
                { label: '50%', value: '50' },
                { label: '60%', value: '60' },
                { label: '70%', value: '70' },
                { label: '80%', value: '80' },
              ],
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
          ],
        },
        // Primärer CTA
        {
          name: 'primaryCta',
          type: 'group',
          label: 'Primärer Button',
          fields: [
            {
              name: 'enabled',
              type: 'checkbox',
              defaultValue: true,
              label: 'Button anzeigen',
            },
            {
              name: 'text',
              type: 'text',
              label: 'Button-Text',
              localized: true,
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'link',
              type: 'text',
              label: 'Link',
              admin: {
                description: 'URL oder interner Pfad (z.B. /kontakt)',
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'style',
              type: 'select',
              defaultValue: 'primary',
              label: 'Button-Stil',
              options: [
                { label: 'Primär (gefüllt)', value: 'primary' },
                { label: 'Sekundär', value: 'secondary' },
                { label: 'Outline (Weiß)', value: 'outline-white' },
                { label: 'Outline (Dunkel)', value: 'outline-dark' },
              ],
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'openInNewTab',
              type: 'checkbox',
              defaultValue: false,
              label: 'In neuem Tab öffnen',
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
          ],
        },
        // Sekundärer CTA
        {
          name: 'secondaryCta',
          type: 'group',
          label: 'Sekundärer Button',
          fields: [
            {
              name: 'enabled',
              type: 'checkbox',
              defaultValue: false,
              label: 'Button anzeigen',
            },
            {
              name: 'text',
              type: 'text',
              label: 'Button-Text',
              localized: true,
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'link',
              type: 'text',
              label: 'Link',
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'style',
              type: 'select',
              defaultValue: 'outline-white',
              label: 'Button-Stil',
              options: [
                { label: 'Primär (gefüllt)', value: 'primary' },
                { label: 'Sekundär', value: 'secondary' },
                { label: 'Outline (Weiß)', value: 'outline-white' },
                { label: 'Outline (Dunkel)', value: 'outline-dark' },
                { label: 'Text-Link', value: 'text' },
              ],
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'openInNewTab',
              type: 'checkbox',
              defaultValue: false,
              label: 'In neuem Tab öffnen',
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
          ],
        },
        // Textfarbe
        {
          name: 'textColor',
          type: 'select',
          defaultValue: 'white',
          label: 'Textfarbe',
          options: [
            { label: 'Weiß', value: 'white' },
            { label: 'Dunkel', value: 'dark' },
            { label: 'Primärfarbe', value: 'primary' },
          ],
        },
      ],
    },

    // Slider-Einstellungen
    {
      name: 'settings',
      type: 'group',
      label: 'Slider-Einstellungen',
      fields: [
        // Animation
        {
          name: 'animation',
          type: 'select',
          defaultValue: 'fade',
          label: 'Animationstyp',
          options: [
            { label: 'Überblenden (Fade)', value: 'fade' },
            { label: 'Schieben (Slide)', value: 'slide' },
            { label: 'Zoom', value: 'zoom' },
            { label: 'Flip', value: 'flip' },
            { label: 'Keine Animation', value: 'none' },
          ],
          admin: {
            description: 'Art des Übergangs zwischen den Slides',
          },
        },
        // Animationsdauer
        {
          name: 'animationDuration',
          type: 'select',
          defaultValue: '500',
          label: 'Animationsdauer',
          options: [
            { label: 'Schnell (300ms)', value: '300' },
            { label: 'Normal (500ms)', value: '500' },
            { label: 'Langsam (800ms)', value: '800' },
            { label: 'Sehr langsam (1200ms)', value: '1200' },
          ],
        },
        // Autoplay
        {
          name: 'autoplay',
          type: 'group',
          label: 'Autoplay',
          fields: [
            {
              name: 'enabled',
              type: 'checkbox',
              defaultValue: true,
              label: 'Autoplay aktivieren',
            },
            {
              name: 'interval',
              type: 'select',
              defaultValue: '5000',
              label: 'Intervall',
              options: [
                { label: '3 Sekunden', value: '3000' },
                { label: '4 Sekunden', value: '4000' },
                { label: '5 Sekunden', value: '5000' },
                { label: '6 Sekunden', value: '6000' },
                { label: '7 Sekunden', value: '7000' },
                { label: '8 Sekunden', value: '8000' },
                { label: '10 Sekunden', value: '10000' },
              ],
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'pauseOnHover',
              type: 'checkbox',
              defaultValue: true,
              label: 'Bei Hover pausieren',
              admin: {
                description: 'Autoplay pausiert, wenn der Mauszeiger über dem Slider ist',
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'pauseOnInteraction',
              type: 'checkbox',
              defaultValue: true,
              label: 'Bei Interaktion pausieren',
              admin: {
                description: 'Autoplay pausiert nach manueller Navigation',
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
          ],
        },
        // Loop
        {
          name: 'loop',
          type: 'checkbox',
          defaultValue: true,
          label: 'Endlosschleife',
          admin: {
            description: 'Nach dem letzten Slide automatisch zum ersten springen',
          },
        },
      ],
    },

    // Navigations-Einstellungen
    {
      name: 'navigation',
      type: 'group',
      label: 'Navigation',
      fields: [
        // Pfeile
        {
          name: 'arrows',
          type: 'group',
          label: 'Pfeile',
          fields: [
            {
              name: 'enabled',
              type: 'checkbox',
              defaultValue: true,
              label: 'Pfeile anzeigen',
            },
            {
              name: 'style',
              type: 'select',
              defaultValue: 'default',
              label: 'Pfeil-Stil',
              options: [
                { label: 'Standard (Kreis)', value: 'default' },
                { label: 'Minimal', value: 'minimal' },
                { label: 'Eckig', value: 'square' },
                { label: 'Nur bei Hover', value: 'hover-only' },
              ],
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'position',
              type: 'select',
              defaultValue: 'sides',
              label: 'Position',
              options: [
                { label: 'Seitlich', value: 'sides' },
                { label: 'Unten links', value: 'bottom-left' },
                { label: 'Unten rechts', value: 'bottom-right' },
                { label: 'Unten zentriert', value: 'bottom-center' },
              ],
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'hideOnMobile',
              type: 'checkbox',
              defaultValue: false,
              label: 'Auf Mobilgeräten ausblenden',
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
          ],
        },
        // Dots
        {
          name: 'dots',
          type: 'group',
          label: 'Punkte (Dots)',
          fields: [
            {
              name: 'enabled',
              type: 'checkbox',
              defaultValue: true,
              label: 'Punkte anzeigen',
            },
            {
              name: 'style',
              type: 'select',
              defaultValue: 'dots',
              label: 'Punkt-Stil',
              options: [
                { label: 'Punkte (rund)', value: 'dots' },
                { label: 'Striche', value: 'lines' },
                { label: 'Nummern', value: 'numbers' },
                { label: 'Thumbnails', value: 'thumbnails' },
                { label: 'Fortschrittsbalken', value: 'progress' },
              ],
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'position',
              type: 'select',
              defaultValue: 'bottom-center',
              label: 'Position',
              options: [
                { label: 'Unten zentriert', value: 'bottom-center' },
                { label: 'Unten links', value: 'bottom-left' },
                { label: 'Unten rechts', value: 'bottom-right' },
                { label: 'Links vertikal', value: 'left' },
                { label: 'Rechts vertikal', value: 'right' },
              ],
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
            {
              name: 'color',
              type: 'select',
              defaultValue: 'white',
              label: 'Farbe',
              options: [
                { label: 'Weiß', value: 'white' },
                { label: 'Dunkel', value: 'dark' },
                { label: 'Primärfarbe', value: 'primary' },
              ],
              admin: {
                condition: (_, siblingData) => siblingData?.enabled,
              },
            },
          ],
        },
        // Swipe auf Touch-Geräten
        {
          name: 'swipe',
          type: 'checkbox',
          defaultValue: true,
          label: 'Touch-Swipe aktivieren',
          admin: {
            description: 'Ermöglicht Wischen auf Touch-Geräten',
          },
        },
        // Tastaturnavigation
        {
          name: 'keyboard',
          type: 'checkbox',
          defaultValue: true,
          label: 'Tastaturnavigation',
          admin: {
            description: 'Navigation mit Pfeiltasten ermöglichen',
          },
        },
      ],
    },

    // Layout-Einstellungen
    {
      name: 'layout',
      type: 'group',
      label: 'Layout',
      fields: [
        // Höhe
        {
          name: 'height',
          type: 'select',
          defaultValue: 'viewport',
          label: 'Höhe',
          options: [
            { label: 'Vollbild (100vh)', value: 'viewport' },
            { label: 'Groß (80vh)', value: 'large' },
            { label: 'Mittel (60vh)', value: 'medium' },
            { label: 'Klein (40vh)', value: 'small' },
            { label: 'Kompakt (400px)', value: 'compact' },
            { label: 'Auto (Bildverhältnis)', value: 'auto' },
          ],
        },
        // Mobile Höhe
        {
          name: 'mobileHeight',
          type: 'select',
          defaultValue: 'viewport',
          label: 'Mobile Höhe',
          options: [
            { label: 'Wie Desktop', value: 'same' },
            { label: 'Vollbild (100vh)', value: 'viewport' },
            { label: 'Groß (80vh)', value: 'large' },
            { label: 'Mittel (60vh)', value: 'medium' },
            { label: 'Klein (50vh)', value: 'small' },
            { label: 'Kompakt (300px)', value: 'compact' },
          ],
        },
        // Content-Breite
        {
          name: 'contentWidth',
          type: 'select',
          defaultValue: 'container',
          label: 'Inhaltsbreite',
          options: [
            { label: 'Container (max-width)', value: 'container' },
            { label: 'Schmal', value: 'narrow' },
            { label: 'Breit', value: 'wide' },
            { label: 'Volle Breite', value: 'full' },
          ],
        },
        // Volle Breite (Edge-to-Edge)
        {
          name: 'fullWidth',
          type: 'checkbox',
          defaultValue: true,
          label: 'Volle Bildschirmbreite',
          admin: {
            description: 'Slider nimmt die volle Bildschirmbreite ein',
          },
        },
      ],
    },

    // Accessibility
    {
      name: 'accessibility',
      type: 'group',
      label: 'Barrierefreiheit',
      admin: {
        condition: () => true, // Immer sichtbar, aber eingeklappt
      },
      fields: [
        {
          name: 'ariaLabel',
          type: 'text',
          defaultValue: 'Hero Slider',
          label: 'ARIA Label',
          localized: true,
          admin: {
            description: 'Beschreibung für Screenreader',
          },
        },
        {
          name: 'reducedMotion',
          type: 'checkbox',
          defaultValue: true,
          label: 'Reduzierte Bewegung respektieren',
          admin: {
            description: 'Autoplay deaktivieren, wenn der User "prefers-reduced-motion" aktiviert hat',
          },
        },
      ],
    },
  ],
}
