import type { Block } from 'payload'

/**
 * Tabs Block
 *
 * Tabbed Content für organisierte Informationen.
 * Unterstützt verschiedene Tab-Stile, Icons und
 * kann andere Blocks als Content enthalten.
 */
export const TabsBlock: Block = {
  slug: 'tabs',
  labels: {
    singular: 'Tabs',
    plural: 'Tabs',
  },
  fields: [
    {
      name: 'title',
      type: 'text',
      label: 'Überschrift',
      localized: true,
    },
    {
      name: 'subtitle',
      type: 'text',
      label: 'Untertitel',
      localized: true,
    },
    // Tabs
    {
      name: 'tabs',
      type: 'array',
      label: 'Tabs',
      minRows: 2,
      maxRows: 10,
      fields: [
        {
          name: 'label',
          type: 'text',
          required: true,
          label: 'Tab-Titel',
          localized: true,
        },
        {
          name: 'icon',
          type: 'select',
          label: 'Icon',
          options: [
            { label: 'Keines', value: 'none' },
            { label: 'Info', value: 'info' },
            { label: 'Stern', value: 'star' },
            { label: 'Herz', value: 'heart' },
            { label: 'Häkchen', value: 'check' },
            { label: 'Einstellungen', value: 'settings' },
            { label: 'Benutzer', value: 'user' },
            { label: 'Dokument', value: 'document' },
            { label: 'Bild', value: 'image' },
            { label: 'Video', value: 'video' },
            { label: 'Code', value: 'code' },
            { label: 'Chart', value: 'chart' },
            { label: 'Kalender', value: 'calendar' },
            { label: 'Standort', value: 'location' },
            { label: 'E-Mail', value: 'email' },
            { label: 'Telefon', value: 'phone' },
          ],
        },
        {
          name: 'customIcon',
          type: 'upload',
          relationTo: 'media',
          label: 'Eigenes Icon',
          admin: {
            description: 'Überschreibt das ausgewählte Icon',
          },
        },
        {
          name: 'badge',
          type: 'text',
          label: 'Badge',
          admin: {
            description: 'z.B. "Neu", "3", "Beta"',
          },
        },
        // Content
        {
          name: 'contentType',
          type: 'select',
          defaultValue: 'richtext',
          label: 'Content-Typ',
          options: [
            { label: 'Rich Text', value: 'richtext' },
            { label: 'Bild & Text', value: 'image-text' },
            { label: 'Feature-Liste', value: 'features' },
            { label: 'Code', value: 'code' },
            { label: 'Embed', value: 'embed' },
          ],
        },
        // Rich Text Content
        {
          name: 'content',
          type: 'richText',
          label: 'Inhalt',
          localized: true,
          admin: {
            condition: (data, siblingData) => siblingData?.contentType === 'richtext',
          },
        },
        // Image & Text Content
        {
          name: 'imgTxt',
          type: 'group',
          label: 'Bild & Text',
          admin: {
            condition: (data, siblingData) => siblingData?.contentType === 'image-text',
          },
          fields: [
            {
              name: 'img',
              type: 'upload',
              relationTo: 'media',
              label: 'Bild',
            },
            {
              name: 'imgPos',
              type: 'select',
              defaultValue: 'left',
              label: 'Bild-Position',
              options: [
                { label: 'Links', value: 'left' },
                { label: 'Rechts', value: 'right' },
                { label: 'Oben', value: 'top' },
              ],
            },
            {
              name: 'text',
              type: 'richText',
              label: 'Text',
              localized: true,
            },
          ],
        },
        // Features List
        {
          name: 'features',
          type: 'array',
          label: 'Features',
          admin: {
            condition: (data, siblingData) => siblingData?.contentType === 'features',
          },
          fields: [
            {
              name: 'title',
              type: 'text',
              required: true,
              label: 'Titel',
              localized: true,
            },
            {
              name: 'description',
              type: 'textarea',
              label: 'Beschreibung',
              localized: true,
            },
            {
              name: 'icon',
              type: 'select',
              label: 'Icon',
              options: [
                { label: 'Häkchen', value: 'check' },
                { label: 'Stern', value: 'star' },
                { label: 'Pfeil', value: 'arrow' },
                { label: 'Punkt', value: 'dot' },
                { label: 'Nummer', value: 'number' },
              ],
            },
          ],
        },
        // Code Content
        {
          name: 'code',
          type: 'group',
          label: 'Code',
          admin: {
            condition: (data, siblingData) => siblingData?.contentType === 'code',
          },
          fields: [
            {
              name: 'language',
              type: 'select',
              label: 'Sprache',
              options: [
                { label: 'JavaScript', value: 'javascript' },
                { label: 'TypeScript', value: 'typescript' },
                { label: 'HTML', value: 'html' },
                { label: 'CSS', value: 'css' },
                { label: 'JSON', value: 'json' },
                { label: 'Python', value: 'python' },
                { label: 'Bash', value: 'bash' },
                { label: 'SQL', value: 'sql' },
              ],
            },
            {
              name: 'code',
              type: 'code',
              label: 'Code',
            },
            {
              name: 'showLineNumbers',
              type: 'checkbox',
              defaultValue: true,
              label: 'Zeilennummern anzeigen',
            },
          ],
        },
        // Embed Content
        {
          name: 'embed',
          type: 'group',
          label: 'Embed',
          admin: {
            condition: (data, siblingData) => siblingData?.contentType === 'embed',
          },
          fields: [
            {
              name: 'type',
              type: 'select',
              label: 'Typ',
              options: [
                { label: 'YouTube', value: 'youtube' },
                { label: 'Vimeo', value: 'vimeo' },
                { label: 'iFrame', value: 'iframe' },
              ],
            },
            {
              name: 'url',
              type: 'text',
              label: 'URL',
            },
            {
              name: 'aspectRatio',
              type: 'select',
              defaultValue: '16:9',
              label: 'Seitenverhältnis',
              options: [
                { label: '16:9', value: '16:9' },
                { label: '4:3', value: '4:3' },
                { label: '1:1', value: '1:1' },
              ],
            },
          ],
        },
      ],
    },
    // Tab Style
    {
      name: 'tabStyle',
      type: 'select',
      defaultValue: 'underline',
      label: 'Tab-Stil',
      options: [
        { label: 'Unterstrichen', value: 'underline' },
        { label: 'Boxed', value: 'boxed' },
        { label: 'Pills', value: 'pills' },
        { label: 'Buttons', value: 'buttons' },
        { label: 'Vertikal', value: 'vertical' },
      ],
    },
    {
      name: 'tabPosition',
      type: 'select',
      defaultValue: 'top',
      label: 'Tab-Position',
      options: [
        { label: 'Oben', value: 'top' },
        { label: 'Links', value: 'left' },
        { label: 'Rechts', value: 'right' },
        { label: 'Unten', value: 'bottom' },
      ],
      admin: {
        condition: (data, siblingData) => siblingData?.tabStyle !== 'vertical',
      },
    },
    {
      name: 'tabAlignment',
      type: 'select',
      defaultValue: 'left',
      label: 'Tab-Ausrichtung',
      options: [
        { label: 'Links', value: 'left' },
        { label: 'Zentriert', value: 'center' },
        { label: 'Rechts', value: 'right' },
        { label: 'Gleichmäßig verteilt', value: 'stretch' },
      ],
      admin: {
        condition: (data, siblingData) =>
          siblingData?.tabPosition === 'top' || siblingData?.tabPosition === 'bottom',
      },
    },
    // Verhalten
    {
      name: 'defaultTab',
      type: 'number',
      defaultValue: 0,
      min: 0,
      label: 'Standard-Tab (Index)',
      admin: {
        description: '0 = erster Tab',
      },
    },
    {
      name: 'allowKeyboardNavigation',
      type: 'checkbox',
      defaultValue: true,
      label: 'Tastatur-Navigation',
    },
    {
      name: 'animated',
      type: 'checkbox',
      defaultValue: true,
      label: 'Animierter Übergang',
    },
    {
      name: 'lazy',
      type: 'checkbox',
      defaultValue: false,
      label: 'Lazy Loading',
      admin: {
        description: 'Tab-Inhalte erst bei Aktivierung laden',
      },
    },
    // Mobile
    {
      name: 'mobileStyle',
      type: 'select',
      defaultValue: 'scroll',
      label: 'Mobile-Ansicht',
      options: [
        { label: 'Scrollbar', value: 'scroll' },
        { label: 'Dropdown', value: 'dropdown' },
        { label: 'Accordion', value: 'accordion' },
        { label: 'Gestapelt', value: 'stacked' },
      ],
    },
    // Styling
    {
      name: 'backgroundColor',
      type: 'select',
      defaultValue: 'white',
      label: 'Hintergrund',
      options: [
        { label: 'Weiß', value: 'white' },
        { label: 'Hell (Grau)', value: 'light' },
        { label: 'Dunkel', value: 'dark' },
        { label: 'Transparent', value: 'transparent' },
      ],
    },
    {
      name: 'contentBackground',
      type: 'select',
      defaultValue: 'white',
      label: 'Content-Hintergrund',
      options: [
        { label: 'Weiß', value: 'white' },
        { label: 'Hell (Grau)', value: 'light' },
        { label: 'Transparent', value: 'transparent' },
      ],
    },
    {
      name: 'showBorder',
      type: 'checkbox',
      defaultValue: true,
      label: 'Rahmen anzeigen',
    },
    {
      name: 'fullWidth',
      type: 'checkbox',
      defaultValue: false,
      label: 'Volle Breite',
    },
  ],
}