import type { Block } from 'payload'

/**
 * Before/After Block
 *
 * Vergleichsslider für Vorher/Nachher-Bilder.
 * Ideal für Fotografie-Portfolios, Renovierungen, Transformationen.
 */
export const BeforeAfterBlock: Block = {
  slug: 'before-after',
  labels: {
    singular: 'Vorher/Nachher',
    plural: 'Vorher/Nachher',
  },
  fields: [
    {
      name: 'title',
      type: 'text',
      label: 'Überschrift',
      localized: true,
    },
    {
      name: 'subtitle',
      type: 'text',
      label: 'Untertitel',
      localized: true,
    },
    {
      name: 'description',
      type: 'textarea',
      label: 'Beschreibung',
      localized: true,
    },
    // Vergleiche
    {
      name: 'comparisons',
      type: 'array',
      required: true,
      minRows: 1,
      label: 'Vergleiche',
      fields: [
        {
          name: 'title',
          type: 'text',
          label: 'Titel',
          localized: true,
        },
        {
          type: 'row',
          fields: [
            {
              name: 'beforeImage',
              type: 'upload',
              relationTo: 'media',
              required: true,
              label: 'Vorher-Bild',
              admin: {
                width: '50%',
              },
            },
            {
              name: 'afterImage',
              type: 'upload',
              relationTo: 'media',
              required: true,
              label: 'Nachher-Bild',
              admin: {
                width: '50%',
              },
            },
          ],
        },
        {
          type: 'row',
          fields: [
            {
              name: 'beforeLabel',
              type: 'text',
              defaultValue: 'Vorher',
              label: 'Vorher-Label',
              localized: true,
              admin: {
                width: '50%',
              },
            },
            {
              name: 'afterLabel',
              type: 'text',
              defaultValue: 'Nachher',
              label: 'Nachher-Label',
              localized: true,
              admin: {
                width: '50%',
              },
            },
          ],
        },
        {
          name: 'description',
          type: 'textarea',
          label: 'Beschreibung',
          localized: true,
        },
        // Kategorie für Filterung
        {
          name: 'category',
          type: 'select',
          label: 'Kategorie',
          options: [
            { label: 'Hochzeit', value: 'wedding' },
            { label: 'Portrait', value: 'portrait' },
            { label: 'Retusche', value: 'retouch' },
            { label: 'Farbkorrektur', value: 'colorgrade' },
            { label: 'Restaurierung', value: 'restore' },
            { label: 'Composing', value: 'composing' },
            { label: 'Architektur', value: 'architecture' },
            { label: 'Produkt', value: 'product' },
            { label: 'Sonstiges', value: 'other' },
          ],
        },
        // Tags
        {
          name: 'tags',
          type: 'text',
          label: 'Tags',
          admin: {
            description: 'Komma-getrennte Tags für Filterung',
          },
        },
        // Zusätzliche Info
        {
          name: 'metadata',
          type: 'group',
          label: 'Zusatzinformationen',
          admin: {
            condition: (_, siblingData) => siblingData?.showMetadata,
          },
          fields: [
            {
              name: 'client',
              type: 'text',
              label: 'Kunde',
            },
            {
              name: 'date',
              type: 'date',
              label: 'Datum',
              admin: {
                date: {
                  pickerAppearance: 'monthOnly',
                  displayFormat: 'MMMM yyyy',
                },
              },
            },
            {
              name: 'tools',
              type: 'text',
              label: 'Verwendete Tools',
              admin: {
                description: 'z.B. Lightroom, Photoshop',
              },
            },
            {
              name: 'duration',
              type: 'text',
              label: 'Bearbeitungszeit',
            },
          ],
        },
        {
          name: 'showMetadata',
          type: 'checkbox',
          label: 'Metadaten anzeigen',
          defaultValue: false,
        },
      ],
    },
    // Display-Optionen
    {
      name: 'displayStyle',
      type: 'select',
      defaultValue: 'slider',
      label: 'Darstellung',
      options: [
        { label: 'Slider (Schieberegler)', value: 'slider' },
        { label: 'Hover-Effekt', value: 'hover' },
        { label: 'Click to Toggle', value: 'toggle' },
        { label: 'Nebeneinander', value: 'side-by-side' },
        { label: 'Übereinander (Fade)', value: 'fade' },
      ],
    },
    {
      name: 'sliderOrientation',
      type: 'select',
      defaultValue: 'horizontal',
      label: 'Slider-Richtung',
      options: [
        { label: 'Horizontal', value: 'horizontal' },
        { label: 'Vertikal', value: 'vertical' },
      ],
      admin: {
        condition: (data, siblingData) => siblingData?.displayStyle === 'slider',
      },
    },
    {
      name: 'sliderStartPosition',
      type: 'number',
      defaultValue: 50,
      min: 0,
      max: 100,
      label: 'Slider-Startposition (%)',
      admin: {
        condition: (data, siblingData) => siblingData?.displayStyle === 'slider',
        description: '0 = links/oben, 100 = rechts/unten',
      },
    },
    // Layout
    {
      name: 'layout',
      type: 'select',
      defaultValue: 'single',
      label: 'Layout',
      options: [
        { label: 'Einzeln (volle Breite)', value: 'single' },
        { label: 'Grid (2 Spalten)', value: 'grid-2' },
        { label: 'Grid (3 Spalten)', value: 'grid-3' },
        { label: 'Karussell', value: 'carousel' },
        { label: 'Masonry', value: 'masonry' },
      ],
    },
    {
      name: 'aspectRatio',
      type: 'select',
      defaultValue: 'original',
      label: 'Seitenverhältnis',
      options: [
        { label: 'Original', value: 'original' },
        { label: '16:9', value: '16-9' },
        { label: '4:3', value: '4-3' },
        { label: '3:2', value: '3-2' },
        { label: '1:1 (Quadrat)', value: '1-1' },
        { label: '2:3 (Portrait)', value: '2-3' },
        { label: '9:16 (Story)', value: '9-16' },
      ],
    },
    // Slider-Styling
    {
      name: 'sliderHandle',
      type: 'group',
      label: 'Slider-Griff',
      admin: {
        condition: (data, siblingData) => siblingData?.displayStyle === 'slider',
      },
      fields: [
        {
          name: 'style',
          type: 'select',
          defaultValue: 'circle',
          label: 'Stil',
          options: [
            { label: 'Kreis', value: 'circle' },
            { label: 'Linie', value: 'line' },
            { label: 'Pfeile', value: 'arrows' },
            { label: 'Custom Icon', value: 'custom' },
          ],
        },
        {
          name: 'color',
          type: 'select',
          defaultValue: 'white',
          label: 'Farbe',
          options: [
            { label: 'Weiß', value: 'white' },
            { label: 'Schwarz', value: 'black' },
            { label: 'Primär', value: 'primary' },
            { label: 'Akzent', value: 'accent' },
          ],
        },
        {
          name: 'size',
          type: 'select',
          defaultValue: 'medium',
          label: 'Größe',
          options: [
            { label: 'Klein', value: 'small' },
            { label: 'Mittel', value: 'medium' },
            { label: 'Groß', value: 'large' },
          ],
        },
        {
          name: 'showLine',
          type: 'checkbox',
          defaultValue: true,
          label: 'Trennlinie anzeigen',
        },
      ],
    },
    // Labels
    {
      name: 'showLabels',
      type: 'checkbox',
      defaultValue: true,
      label: 'Labels anzeigen',
    },
    {
      name: 'labelPosition',
      type: 'select',
      defaultValue: 'corners',
      label: 'Label-Position',
      options: [
        { label: 'Ecken', value: 'corners' },
        { label: 'Oben', value: 'top' },
        { label: 'Unten', value: 'bottom' },
        { label: 'Auf Bildern', value: 'overlay' },
      ],
      admin: {
        condition: (data, siblingData) => siblingData?.showLabels,
      },
    },
    {
      name: 'labelStyle',
      type: 'select',
      defaultValue: 'badge',
      label: 'Label-Stil',
      options: [
        { label: 'Badge', value: 'badge' },
        { label: 'Text', value: 'text' },
        { label: 'Pill', value: 'pill' },
      ],
      admin: {
        condition: (data, siblingData) => siblingData?.showLabels,
      },
    },
    // Filter & Kategorien
    {
      name: 'showFilter',
      type: 'checkbox',
      defaultValue: false,
      label: 'Kategorie-Filter anzeigen',
      admin: {
        condition: (data, siblingData) =>
          siblingData?.comparisons && siblingData.comparisons.length > 3,
      },
    },
    // Animation
    {
      name: 'animation',
      type: 'group',
      label: 'Animation',
      fields: [
        {
          name: 'enableAnimation',
          type: 'checkbox',
          defaultValue: true,
          label: 'Animation aktivieren',
        },
        {
          name: 'autoPlay',
          type: 'checkbox',
          defaultValue: false,
          label: 'Auto-Play (Slider bewegt sich)',
          admin: {
            condition: (data, siblingData) =>
              siblingData?.enableAnimation && data?.displayStyle === 'slider',
          },
        },
        {
          name: 'autoPlaySpeed',
          type: 'number',
          defaultValue: 3,
          min: 1,
          max: 10,
          label: 'Auto-Play Geschwindigkeit (Sekunden)',
          admin: {
            condition: (data, siblingData) => siblingData?.autoPlay,
          },
        },
        {
          name: 'scrollTrigger',
          type: 'checkbox',
          defaultValue: true,
          label: 'Animation bei Scroll auslösen',
          admin: {
            condition: (data, siblingData) => siblingData?.enableAnimation,
          },
        },
      ],
    },
    // Interaktivität
    {
      name: 'interactivity',
      type: 'group',
      label: 'Interaktivität',
      fields: [
        {
          name: 'enableZoom',
          type: 'checkbox',
          defaultValue: false,
          label: 'Zoom bei Klick',
        },
        {
          name: 'enableFullscreen',
          type: 'checkbox',
          defaultValue: true,
          label: 'Vollbild-Modus',
        },
        {
          name: 'enableSwipe',
          type: 'checkbox',
          defaultValue: true,
          label: 'Touch/Swipe aktivieren',
        },
        {
          name: 'enableKeyboard',
          type: 'checkbox',
          defaultValue: true,
          label: 'Tastatur-Navigation',
        },
      ],
    },
    // CTA
    {
      name: 'cta',
      type: 'group',
      label: 'Call-to-Action',
      fields: [
        {
          name: 'showCta',
          type: 'checkbox',
          defaultValue: false,
          label: 'CTA anzeigen',
        },
        {
          name: 'ctaText',
          type: 'text',
          label: 'Button-Text',
          localized: true,
          admin: {
            condition: (data, siblingData) => siblingData?.showCta,
          },
        },
        {
          name: 'ctaLink',
          type: 'text',
          label: 'Button-Link',
          admin: {
            condition: (data, siblingData) => siblingData?.showCta,
          },
        },
        {
          name: 'ctaStyle',
          type: 'select',
          defaultValue: 'primary',
          label: 'Button-Stil',
          options: [
            { label: 'Primär', value: 'primary' },
            { label: 'Sekundär', value: 'secondary' },
            { label: 'Outline', value: 'outline' },
            { label: 'Ghost', value: 'ghost' },
          ],
          admin: {
            condition: (data, siblingData) => siblingData?.showCta,
          },
        },
      ],
    },
    // Styling
    {
      name: 'backgroundColor',
      type: 'select',
      defaultValue: 'transparent',
      label: 'Hintergrund',
      options: [
        { label: 'Transparent', value: 'transparent' },
        { label: 'Weiß', value: 'white' },
        { label: 'Hell (Grau)', value: 'light' },
        { label: 'Dunkel', value: 'dark' },
        { label: 'Schwarz', value: 'black' },
      ],
    },
    {
      name: 'borderRadius',
      type: 'select',
      defaultValue: 'medium',
      label: 'Ecken-Rundung',
      options: [
        { label: 'Keine', value: 'none' },
        { label: 'Klein', value: 'small' },
        { label: 'Mittel', value: 'medium' },
        { label: 'Groß', value: 'large' },
      ],
    },
    {
      name: 'shadow',
      type: 'select',
      defaultValue: 'medium',
      label: 'Schatten',
      options: [
        { label: 'Kein', value: 'none' },
        { label: 'Klein', value: 'small' },
        { label: 'Mittel', value: 'medium' },
        { label: 'Groß', value: 'large' },
      ],
    },
    {
      name: 'spacing',
      type: 'select',
      defaultValue: 'medium',
      label: 'Abstand',
      options: [
        { label: 'Kein', value: 'none' },
        { label: 'Klein', value: 'small' },
        { label: 'Mittel', value: 'medium' },
        { label: 'Groß', value: 'large' },
      ],
    },
  ],
}
