import type { Block } from 'payload'

/**
 * Testimonials Block
 *
 * Zeigt Kundenstimmen aus der Testimonials Collection mit:
 * - Verschiedenen Layouts (Slider, Grid, Masonry, Liste)
 * - Erweiterten Slider-Optionen (Animation, Navigation, Autoplay)
 * - Flexiblen Anzeigeoptionen
 */
export const TestimonialsBlock: Block = {
  slug: 'testimonials-block',
  labels: {
    singular: 'Testimonials',
    plural: 'Testimonials',
  },
  fields: [
    // Überschrift & Untertitel
    {
      name: 'title',
      type: 'text',
      defaultValue: 'Das sagen unsere Kunden',
      label: 'Überschrift',
      localized: true,
    },
    {
      name: 'subtitle',
      type: 'text',
      label: 'Untertitel',
      localized: true,
    },

    // Layout-Auswahl
    {
      name: 'layout',
      type: 'select',
      defaultValue: 'slider',
      label: 'Layout',
      options: [
        { label: 'Slider/Karussell', value: 'slider' },
        { label: 'Grid (Karten)', value: 'grid' },
        { label: 'Einzeln (Featured)', value: 'single' },
        { label: 'Masonry', value: 'masonry' },
        { label: 'Liste', value: 'list' },
      ],
    },
    {
      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 === 'masonry',
      },
    },

    // Testimonial-Auswahl
    {
      name: 'displayMode',
      type: 'select',
      defaultValue: 'all',
      label: 'Auswahl',
      options: [
        { label: 'Alle aktiven Testimonials', value: 'all' },
        { label: 'Handverlesene Auswahl', value: 'selected' },
      ],
    },
    {
      name: 'selectedTestimonials',
      type: 'relationship',
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      relationTo: 'testimonials' as any,
      hasMany: true,
      label: 'Testimonials auswählen',
      admin: {
        condition: (_, siblingData) => siblingData?.displayMode === 'selected',
      },
    },
    {
      name: 'limit',
      type: 'number',
      defaultValue: 6,
      min: 1,
      max: 20,
      label: 'Maximale Anzahl',
      admin: {
        condition: (_, siblingData) => siblingData?.displayMode === 'all',
      },
    },

    // Anzeige-Optionen
    {
      name: 'displayOptions',
      type: 'group',
      label: 'Anzeige-Optionen',
      fields: [
        {
          name: 'showRating',
          type: 'checkbox',
          defaultValue: true,
          label: 'Sterne-Bewertung anzeigen',
        },
        {
          name: 'showImage',
          type: 'checkbox',
          defaultValue: true,
          label: 'Foto anzeigen',
        },
        {
          name: 'showCompany',
          type: 'checkbox',
          defaultValue: true,
          label: 'Unternehmen anzeigen',
        },
        {
          name: 'showSource',
          type: 'checkbox',
          defaultValue: false,
          label: 'Quelle anzeigen',
        },
        {
          name: 'showDate',
          type: 'checkbox',
          defaultValue: false,
          label: 'Datum anzeigen',
        },
        {
          name: 'truncateText',
          type: 'checkbox',
          defaultValue: false,
          label: 'Text kürzen',
          admin: {
            description: 'Lange Testimonials werden abgeschnitten mit "Mehr lesen"',
          },
        },
        {
          name: 'maxLength',
          type: 'number',
          defaultValue: 200,
          min: 100,
          max: 500,
          label: 'Max. Zeichenanzahl',
          admin: {
            condition: (_, siblingData) => siblingData?.truncateText,
          },
        },
      ],
    },

    // Slider-Einstellungen (nur bei layout=slider)
    {
      name: 'slider',
      type: 'group',
      label: 'Slider-Einstellungen',
      admin: {
        condition: (_, siblingData) => siblingData?.layout === 'slider',
      },
      fields: [
        // Animation
        {
          name: 'effect',
          type: 'select',
          defaultValue: 'slide',
          label: 'Animationstyp',
          options: [
            { label: 'Schieben (Slide)', value: 'slide' },
            { label: 'Überblenden (Fade)', value: 'fade' },
            { label: 'Karten (Cards)', value: 'cards' },
            { label: 'Coverflow', value: 'coverflow' },
            { label: 'Keine Animation', value: 'none' },
          ],
        },
        {
          name: 'speed',
          type: 'select',
          defaultValue: '500',
          label: 'Animationsdauer',
          options: [
            { label: 'Schnell (300ms)', value: '300' },
            { label: 'Normal (500ms)', value: '500' },
            { label: 'Langsam (800ms)', value: '800' },
          ],
        },
        // Anzahl sichtbarer Slides
        {
          name: 'perView',
          type: 'select',
          defaultValue: '1',
          label: 'Sichtbare Testimonials',
          options: [
            { label: '1 (Vollbild)', value: '1' },
            { label: '2', value: '2' },
            { label: '3', value: '3' },
            { label: 'Auto (responsive)', value: 'auto' },
          ],
          admin: {
            description: 'Anzahl gleichzeitig sichtbarer Testimonials',
          },
        },
        {
          name: 'gap',
          type: 'select',
          defaultValue: '24',
          label: 'Abstand zwischen Slides',
          options: [
            { label: 'Kein Abstand', value: '0' },
            { label: 'Klein (16px)', value: '16' },
            { label: 'Normal (24px)', value: '24' },
            { label: 'Groß (32px)', value: '32' },
            { label: 'Sehr groß (48px)', value: '48' },
          ],
        },
        // Autoplay
        {
          name: 'auto',
          type: 'checkbox',
          defaultValue: true,
          label: 'Autoplay aktivieren',
        },
        {
          name: 'delay',
          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: '8 Sekunden', value: '8000' },
            { label: '10 Sekunden', value: '10000' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.auto,
          },
        },
        {
          name: 'hoverPause',
          type: 'checkbox',
          defaultValue: true,
          label: 'Bei Hover pausieren',
          admin: {
            condition: (_, siblingData) => siblingData?.auto,
          },
        },
        // Loop
        {
          name: 'loop',
          type: 'checkbox',
          defaultValue: true,
          label: 'Endlosschleife',
        },
        // Zentrierung
        {
          name: 'centered',
          type: 'checkbox',
          defaultValue: false,
          label: 'Aktiven Slide zentrieren',
          admin: {
            description: 'Der aktive Slide wird in der Mitte angezeigt',
          },
        },
      ],
    },

    // Navigation
    {
      name: 'nav',
      type: 'group',
      label: 'Navigation',
      admin: {
        condition: (_, siblingData) => siblingData?.layout === 'slider',
      },
      fields: [
        // Pfeile
        {
          name: 'arrows',
          type: 'checkbox',
          defaultValue: true,
          label: 'Pfeile anzeigen',
        },
        {
          name: 'arrowStyle',
          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' },
            { label: 'Außerhalb', value: 'outside' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.arrows,
          },
        },
        {
          name: 'arrowPos',
          type: 'select',
          defaultValue: 'sides',
          label: 'Pfeil-Position',
          options: [
            { label: 'Seitlich', value: 'sides' },
            { label: 'Unten links', value: 'bl' },
            { label: 'Unten rechts', value: 'br' },
            { label: 'Unten zentriert', value: 'bc' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.arrows,
          },
        },
        // Dots/Pagination
        {
          name: 'dots',
          type: 'checkbox',
          defaultValue: true,
          label: 'Punkte anzeigen',
        },
        {
          name: 'dotStyle',
          type: 'select',
          defaultValue: 'dots',
          label: 'Punkte-Stil',
          options: [
            { label: 'Punkte (rund)', value: 'dots' },
            { label: 'Striche', value: 'lines' },
            { label: 'Nummern', value: 'numbers' },
            { label: 'Fortschritt', value: 'progress' },
            { label: 'Fraktion (1/5)', value: 'fraction' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.dots,
          },
        },
        {
          name: 'dotPos',
          type: 'select',
          defaultValue: 'bottom',
          label: 'Punkte-Position',
          options: [
            { label: 'Unten', value: 'bottom' },
            { label: 'Unten links', value: 'bl' },
            { label: 'Unten rechts', value: 'br' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.dots,
          },
        },
        // Touch & Keyboard
        {
          name: 'swipe',
          type: 'checkbox',
          defaultValue: true,
          label: 'Touch-Swipe aktivieren',
        },
        {
          name: 'keys',
          type: 'checkbox',
          defaultValue: true,
          label: 'Tastaturnavigation',
        },
      ],
    },

    // Darstellung
    {
      name: 'style',
      type: 'group',
      label: 'Darstellung',
      fields: [
        {
          name: 'bg',
          type: 'select',
          defaultValue: 'light',
          label: 'Hintergrund',
          options: [
            { label: 'Weiß', value: 'white' },
            { label: 'Hell (Grau)', value: 'light' },
            { label: 'Dunkel', value: 'dark' },
            { label: 'Akzentfarbe', value: 'accent' },
            { label: 'Transparent', value: 'none' },
          ],
        },
        {
          name: 'card',
          type: 'select',
          defaultValue: 'shadow',
          label: 'Karten-Stil',
          options: [
            { label: 'Karte mit Schatten', value: 'shadow' },
            { label: 'Karte mit Rahmen', value: 'border' },
            { label: 'Flach (kein Rand)', value: 'flat' },
            { label: 'Glassmorphism', value: 'glass' },
          ],
        },
        {
          name: 'quote',
          type: 'select',
          defaultValue: 'icon',
          label: 'Zitat-Stil',
          options: [
            { label: 'Mit Icon', value: 'icon' },
            { label: 'Anführungszeichen', value: 'quotes' },
            { label: 'Ohne', value: 'none' },
            { label: 'Groß', value: 'large' },
          ],
        },
        {
          name: 'imgPos',
          type: 'select',
          defaultValue: 'top',
          label: 'Bild-Position',
          options: [
            { label: 'Oben', value: 'top' },
            { label: 'Links', value: 'left' },
            { label: 'Unten', value: 'bottom' },
            { label: 'Hintergrund', value: 'bg' },
          ],
        },
        {
          name: 'imgSize',
          type: 'select',
          defaultValue: 'md',
          label: 'Bild-Größe',
          options: [
            { label: 'Klein (48px)', value: 'sm' },
            { label: 'Mittel (64px)', value: 'md' },
            { label: 'Groß (80px)', value: 'lg' },
            { label: 'Sehr groß (96px)', value: 'xl' },
          ],
        },
        {
          name: 'align',
          type: 'select',
          defaultValue: 'center',
          label: 'Text-Ausrichtung',
          options: [
            { label: 'Links', value: 'left' },
            { label: 'Zentriert', value: 'center' },
            { label: 'Rechts', value: 'right' },
          ],
        },
        {
          name: 'spacing',
          type: 'select',
          defaultValue: 'normal',
          label: 'Innenabstand',
          options: [
            { label: 'Kompakt', value: 'sm' },
            { label: 'Normal', value: 'normal' },
            { label: 'Großzügig', value: 'lg' },
          ],
        },
      ],
    },

    // Accessibility (nur für Slider)
    {
      name: 'a11y',
      type: 'group',
      label: 'Barrierefreiheit',
      admin: {
        condition: (_, siblingData) => siblingData?.layout === 'slider',
      },
      fields: [
        {
          name: 'label',
          type: 'text',
          defaultValue: 'Kundenstimmen',
          label: 'ARIA Label',
          localized: true,
        },
        {
          name: 'reducedMotion',
          type: 'checkbox',
          defaultValue: true,
          label: 'Reduzierte Bewegung respektieren',
          admin: {
            description: 'Autoplay deaktivieren bei "prefers-reduced-motion"',
          },
        },
      ],
    },
  ],
}
