import type { Block } from 'payload'

/**
 * LogoGridBlock
 *
 * Zeigt Partner-, Kunden- oder Zertifizierungs-Logos in verschiedenen Layouts.
 * Kann als Slider, Grid oder Marquee dargestellt werden.
 */
export const LogoGridBlock: Block = {
  slug: 'logo-grid-block',
  labels: {
    singular: 'Logo-Grid',
    plural: 'Logo-Grids',
  },
  imageURL: '/assets/blocks/logo-grid.png',
  fields: [
    {
      name: 'title',
      type: 'text',
      label: 'Überschrift',
      localized: true,
      admin: {
        description: 'z.B. "Unsere Partner", "Bekannt aus", "Zertifizierungen"',
      },
    },
    {
      name: 'subtitle',
      type: 'textarea',
      label: 'Untertitel',
      localized: true,
    },
    // Datenquelle
    {
      name: 'source',
      type: 'select',
      defaultValue: 'collection',
      label: 'Datenquelle',
      options: [
        { label: 'Aus Partner-Collection', value: 'collection' },
        { label: 'Manuell hochladen', value: 'manual' },
      ],
    },
    // Collection-basiert
    {
      name: 'partnerType',
      type: 'select',
      label: 'Partner-Typ',
      hasMany: true,
      options: [
        { label: 'Alle', value: 'all' },
        { label: 'Partner', value: 'partner' },
        { label: 'Kunden', value: 'client' },
        { label: 'Referenzen', value: 'reference' },
        { label: 'Sponsoren', value: 'sponsor' },
        { label: 'Zertifizierungen', value: 'certification' },
        { label: 'Mitgliedschaften', value: 'membership' },
        { label: 'Auszeichnungen', value: 'award' },
        { label: 'Lieferanten', value: 'supplier' },
        { label: 'Technologien', value: 'technology' },
      ],
      defaultValue: ['all'],
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'collection',
      },
    },
    {
      name: 'selectedPartners',
      type: 'relationship',
      relationTo: 'partners',
      hasMany: true,
      label: 'Partner auswählen',
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'collection',
        description: 'Optional: Bestimmte Partner auswählen (sonst alle vom gewählten Typ)',
      },
    },
    {
      name: 'featuredOnly',
      type: 'checkbox',
      defaultValue: false,
      label: 'Nur hervorgehobene',
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'collection',
      },
    },
    {
      name: 'limit',
      type: 'number',
      defaultValue: 12,
      min: 1,
      max: 50,
      label: 'Maximale Anzahl',
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'collection',
      },
    },
    // Manuell
    {
      name: 'logos',
      type: 'array',
      label: 'Logos',
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'manual',
      },
      fields: [
        {
          name: 'logo',
          type: 'upload',
          relationTo: 'media',
          required: true,
          label: 'Logo',
        },
        {
          name: 'name',
          type: 'text',
          label: 'Name',
          admin: {
            description: 'Für Alt-Text und Tooltip',
          },
        },
        {
          name: 'link',
          type: 'text',
          label: 'Link',
        },
      ],
    },
    // Layout
    {
      name: 'layout',
      type: 'select',
      defaultValue: 'grid',
      label: 'Layout',
      options: [
        { label: 'Grid', value: 'grid' },
        { label: 'Slider', value: 'slider' },
        { label: 'Marquee (endlos)', value: 'marquee' },
        { label: 'Inline (flexibel)', value: 'inline' },
        { label: 'Masonry', value: 'masonry' },
      ],
    },
    {
      name: 'columns',
      type: 'select',
      defaultValue: '4',
      label: 'Spalten',
      options: [
        { label: '3 Spalten', value: '3' },
        { label: '4 Spalten', value: '4' },
        { label: '5 Spalten', value: '5' },
        { label: '6 Spalten', value: '6' },
        { label: '8 Spalten', value: '8' },
      ],
      admin: {
        condition: (_, siblingData) => siblingData?.layout === 'grid',
      },
    },
    // Slider-Optionen
    {
      name: 'slider',
      type: 'group',
      label: 'Slider-Einstellungen',
      admin: {
        condition: (_, siblingData) =>
          siblingData?.layout === 'slider' || siblingData?.layout === 'marquee',
      },
      fields: [
        {
          name: 'perView',
          type: 'select',
          defaultValue: '4',
          label: 'Sichtbare Logos',
          options: [
            { label: '3', value: '3' },
            { label: '4', value: '4' },
            { label: '5', value: '5' },
            { label: '6', value: '6' },
            { label: 'Auto', value: 'auto' },
          ],
        },
        {
          name: 'autoplay',
          type: 'checkbox',
          defaultValue: true,
          label: 'Autoplay',
        },
        {
          name: 'speed',
          type: 'select',
          defaultValue: '3000',
          label: 'Geschwindigkeit',
          options: [
            { label: 'Langsam', value: '5000' },
            { label: 'Normal', value: '3000' },
            { label: 'Schnell', value: '2000' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.autoplay,
          },
        },
        {
          name: 'pauseOnHover',
          type: 'checkbox',
          defaultValue: true,
          label: 'Bei Hover pausieren',
        },
        {
          name: 'showArrows',
          type: 'checkbox',
          defaultValue: false,
          label: 'Pfeile anzeigen',
        },
        {
          name: 'showDots',
          type: 'checkbox',
          defaultValue: false,
          label: 'Punkte anzeigen',
        },
      ],
    },
    // Logo-Darstellung
    {
      name: 'logoStyle',
      type: 'group',
      label: 'Logo-Darstellung',
      fields: [
        {
          name: 'size',
          type: 'select',
          defaultValue: 'md',
          label: 'Größe',
          options: [
            { label: 'Klein', value: 'sm' },
            { label: 'Mittel', value: 'md' },
            { label: 'Groß', value: 'lg' },
          ],
        },
        {
          name: 'maxHeight',
          type: 'select',
          defaultValue: '60',
          label: 'Max. Höhe',
          options: [
            { label: '40px', value: '40' },
            { label: '50px', value: '50' },
            { label: '60px', value: '60' },
            { label: '80px', value: '80' },
            { label: '100px', value: '100' },
          ],
        },
        {
          name: 'grayscale',
          type: 'checkbox',
          defaultValue: true,
          label: 'Graustufen',
          admin: {
            description: 'Logos in Graustufen anzeigen',
          },
        },
        {
          name: 'colorOnHover',
          type: 'checkbox',
          defaultValue: true,
          label: 'Farbe bei Hover',
          admin: {
            condition: (_, siblingData) => siblingData?.grayscale,
          },
        },
        {
          name: 'opacity',
          type: 'select',
          defaultValue: '70',
          label: 'Deckkraft',
          options: [
            { label: '50%', value: '50' },
            { label: '70%', value: '70' },
            { label: '100%', value: '100' },
          ],
        },
        {
          name: 'hoverEffect',
          type: 'select',
          defaultValue: 'scale',
          label: 'Hover-Effekt',
          options: [
            { label: 'Keiner', value: 'none' },
            { label: 'Vergrößern', value: 'scale' },
            { label: 'Aufhellen', value: 'brighten' },
            { label: 'Schatten', value: 'shadow' },
          ],
        },
      ],
    },
    // Verhalten
    {
      name: 'behavior',
      type: 'group',
      label: 'Verhalten',
      fields: [
        {
          name: 'linkToWebsite',
          type: 'checkbox',
          defaultValue: false,
          label: 'Zur Partner-Website verlinken',
        },
        {
          name: 'openInNewTab',
          type: 'checkbox',
          defaultValue: true,
          label: 'In neuem Tab öffnen',
          admin: {
            condition: (_, siblingData) => siblingData?.linkToWebsite,
          },
        },
        {
          name: 'showTooltip',
          type: 'checkbox',
          defaultValue: true,
          label: 'Tooltip mit Namen',
        },
        {
          name: 'showName',
          type: 'checkbox',
          defaultValue: false,
          label: 'Namen unter Logo anzeigen',
        },
      ],
    },
    // Styling
    {
      name: 'style',
      type: 'group',
      label: 'Darstellung',
      fields: [
        {
          name: 'bg',
          type: 'select',
          defaultValue: 'none',
          label: 'Hintergrund',
          options: [
            { label: 'Keiner', value: 'none' },
            { label: 'Hell', value: 'light' },
            { label: 'Weiß', value: 'white' },
            { label: 'Dunkel', value: 'dark' },
          ],
        },
        {
          name: 'logoBg',
          type: 'select',
          defaultValue: 'none',
          label: 'Logo-Hintergrund',
          options: [
            { label: 'Keiner', value: 'none' },
            { label: 'Weiß', value: 'white' },
            { label: 'Hell', value: 'light' },
          ],
        },
        {
          name: 'logoPadding',
          type: 'checkbox',
          defaultValue: true,
          label: 'Logo-Padding',
        },
        {
          name: 'gap',
          type: 'select',
          defaultValue: '32',
          label: 'Abstand',
          options: [
            { label: 'Klein (16px)', value: '16' },
            { label: 'Normal (24px)', value: '24' },
            { label: 'Groß (32px)', value: '32' },
            { label: 'Sehr groß (48px)', value: '48' },
          ],
        },
        {
          name: 'alignment',
          type: 'select',
          defaultValue: 'center',
          label: 'Ausrichtung',
          options: [
            { label: 'Links', value: 'left' },
            { label: 'Mitte', value: 'center' },
            { label: 'Rechts', value: 'right' },
          ],
        },
        {
          name: 'divider',
          type: 'checkbox',
          defaultValue: false,
          label: 'Trennlinien zwischen Logos',
        },
      ],
    },
    // CTA
    {
      name: 'showCTA',
      type: 'checkbox',
      defaultValue: false,
      label: 'CTA anzeigen',
    },
    {
      name: 'ctaText',
      type: 'text',
      label: 'CTA-Text',
      localized: true,
      defaultValue: 'Alle Partner ansehen',
      admin: {
        condition: (_, siblingData) => siblingData?.showCTA,
      },
    },
    {
      name: 'ctaLink',
      type: 'text',
      label: 'CTA-Link',
      defaultValue: '/partner',
      admin: {
        condition: (_, siblingData) => siblingData?.showCTA,
      },
    },
  ],
}
