import type { Block } from 'payload'

/**
 * OrgChartBlock (Organigramm)
 *
 * Hierarchische Darstellung der Team-Struktur.
 * Nutzt reportsTo und hierarchyLevel aus der Team Collection.
 */
export const OrgChartBlock: Block = {
  slug: 'org-chart-block',
  labels: {
    singular: 'Organigramm',
    plural: 'Organigramme',
  },
  imageURL: '/assets/blocks/org-chart.png',
  fields: [
    {
      name: 'title',
      type: 'text',
      label: 'Überschrift',
      localized: true,
      defaultValue: 'Unsere Struktur',
    },
    {
      name: 'subtitle',
      type: 'textarea',
      label: 'Untertitel',
      localized: true,
    },
    // Datenquelle
    {
      name: 'source',
      type: 'select',
      defaultValue: 'auto',
      label: 'Datenquelle',
      options: [
        { label: 'Automatisch (aus Hierarchie)', value: 'auto' },
        { label: 'Nach Abteilung', value: 'department' },
        { label: 'Manuell auswählen', value: 'manual' },
      ],
    },
    {
      name: 'rootMember',
      type: 'relationship',
      relationTo: 'team',
      label: 'Wurzel-Person',
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'auto',
        description: 'Oberstes Element (z.B. Geschäftsführer). Leer = automatisch ermitteln.',
      },
    },
    {
      name: 'department',
      type: 'text',
      label: 'Abteilung',
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'department',
        description: 'Zeigt nur diese Abteilung',
      },
    },
    {
      name: 'selectedMembers',
      type: 'relationship',
      relationTo: 'team',
      hasMany: true,
      label: 'Mitglieder auswählen',
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'manual',
      },
    },
    {
      name: 'maxDepth',
      type: 'number',
      defaultValue: 5,
      min: 1,
      max: 10,
      label: 'Maximale Tiefe',
      admin: {
        description: 'Wie viele Hierarchie-Ebenen anzeigen',
      },
    },
    // Layout
    {
      name: 'layout',
      type: 'select',
      defaultValue: 'tree',
      label: 'Layout',
      options: [
        { label: 'Baum (vertikal)', value: 'tree' },
        { label: 'Baum (horizontal)', value: 'tree-horizontal' },
        { label: 'Organigramm (klassisch)', value: 'org' },
        { label: 'Radial/Kreis', value: 'radial' },
        { label: 'Ebenen (gestapelt)', value: 'layers' },
      ],
    },
    {
      name: 'direction',
      type: 'select',
      defaultValue: 'top',
      label: 'Richtung',
      options: [
        { label: 'Von oben nach unten', value: 'top' },
        { label: 'Von unten nach oben', value: 'bottom' },
        { label: 'Von links nach rechts', value: 'left' },
        { label: 'Von rechts nach links', value: 'right' },
      ],
      admin: {
        condition: (_, siblingData) =>
          siblingData?.layout === 'tree' || siblingData?.layout === 'org',
      },
    },
    // Node-Darstellung
    {
      name: 'node',
      type: 'group',
      label: 'Knoten-Darstellung',
      fields: [
        {
          name: 'style',
          type: 'select',
          defaultValue: 'card',
          label: 'Stil',
          options: [
            { label: 'Karte', value: 'card' },
            { label: 'Kompakt', value: 'compact' },
            { label: 'Nur Foto', value: 'avatar' },
            { label: 'Nur Text', value: 'text' },
          ],
        },
        {
          name: 'showImage',
          type: 'checkbox',
          defaultValue: true,
          label: 'Foto anzeigen',
        },
        {
          name: 'imageSize',
          type: 'select',
          defaultValue: 'md',
          label: 'Foto-Größe',
          options: [
            { label: 'Klein (40px)', value: 'sm' },
            { label: 'Mittel (60px)', value: 'md' },
            { label: 'Groß (80px)', value: 'lg' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.showImage,
          },
        },
        {
          name: 'imageShape',
          type: 'select',
          defaultValue: 'circle',
          label: 'Foto-Form',
          options: [
            { label: 'Rund', value: 'circle' },
            { label: 'Abgerundet', value: 'rounded' },
            { label: 'Quadratisch', value: 'square' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.showImage,
          },
        },
        {
          name: 'showName',
          type: 'checkbox',
          defaultValue: true,
          label: 'Name anzeigen',
        },
        {
          name: 'showRole',
          type: 'checkbox',
          defaultValue: true,
          label: 'Position anzeigen',
        },
        {
          name: 'showDepartment',
          type: 'checkbox',
          defaultValue: false,
          label: 'Abteilung anzeigen',
        },
        {
          name: 'showContact',
          type: 'checkbox',
          defaultValue: false,
          label: 'Kontakt anzeigen',
        },
        {
          name: 'clickAction',
          type: 'select',
          defaultValue: 'modal',
          label: 'Klick-Aktion',
          options: [
            { label: 'Keine', value: 'none' },
            { label: 'Detail-Modal', value: 'modal' },
            { label: 'Zur Profilseite', value: 'link' },
            { label: 'Untergeordnete ein-/ausklappen', value: 'expand' },
          ],
        },
        {
          name: 'profileBasePath',
          type: 'text',
          label: 'Profil-Basis-Pfad',
          defaultValue: '/team',
          admin: {
            condition: (_, siblingData) => siblingData?.clickAction === 'link',
          },
        },
      ],
    },
    // Verbindungslinien
    {
      name: 'connectors',
      type: 'group',
      label: 'Verbindungslinien',
      fields: [
        {
          name: 'style',
          type: 'select',
          defaultValue: 'straight',
          label: 'Linien-Stil',
          options: [
            { label: 'Gerade', value: 'straight' },
            { label: 'Abgewinkelt', value: 'angular' },
            { label: 'Gebogen', value: 'curved' },
            { label: 'Gestrichelt', value: 'dashed' },
          ],
        },
        {
          name: 'color',
          type: 'select',
          defaultValue: 'gray',
          label: 'Farbe',
          options: [
            { label: 'Grau', value: 'gray' },
            { label: 'Dunkel', value: 'dark' },
            { label: 'Akzent', value: 'accent' },
            { label: 'Gradient', value: 'gradient' },
          ],
        },
        {
          name: 'thickness',
          type: 'select',
          defaultValue: '2',
          label: 'Dicke',
          options: [
            { label: 'Dünn (1px)', value: '1' },
            { label: 'Normal (2px)', value: '2' },
            { label: 'Dick (3px)', value: '3' },
          ],
        },
        {
          name: 'animated',
          type: 'checkbox',
          defaultValue: false,
          label: 'Animation',
          admin: {
            description: 'Animierte Linien beim Laden',
          },
        },
      ],
    },
    // Hierarchie-Ebenen-Styling
    {
      name: 'levels',
      type: 'group',
      label: 'Ebenen-Styling',
      fields: [
        {
          name: 'colorByLevel',
          type: 'checkbox',
          defaultValue: true,
          label: 'Farblich unterscheiden',
          admin: {
            description: 'Verschiedene Farben pro Hierarchie-Ebene',
          },
        },
        {
          name: 'sizeByLevel',
          type: 'checkbox',
          defaultValue: true,
          label: 'Größe variieren',
          admin: {
            description: 'Höhere Ebenen größer darstellen',
          },
        },
        {
          name: 'collapsible',
          type: 'checkbox',
          defaultValue: true,
          label: 'Ebenen einklappbar',
        },
        {
          name: 'initiallyExpanded',
          type: 'number',
          defaultValue: 2,
          min: 1,
          max: 5,
          label: 'Initial ausgeklappt',
          admin: {
            condition: (_, siblingData) => siblingData?.collapsible,
            description: 'Wie viele Ebenen anfangs sichtbar',
          },
        },
      ],
    },
    // Interaktion
    {
      name: 'interaction',
      type: 'group',
      label: 'Interaktion',
      fields: [
        {
          name: 'zoomable',
          type: 'checkbox',
          defaultValue: true,
          label: 'Zoom erlauben',
        },
        {
          name: 'pannable',
          type: 'checkbox',
          defaultValue: true,
          label: 'Verschieben erlauben',
        },
        {
          name: 'minimap',
          type: 'checkbox',
          defaultValue: false,
          label: 'Minimap anzeigen',
          admin: {
            description: 'Kleine Übersichtskarte bei großen Organigrammen',
          },
        },
        {
          name: 'search',
          type: 'checkbox',
          defaultValue: false,
          label: 'Suche aktivieren',
        },
        {
          name: 'highlight',
          type: 'checkbox',
          defaultValue: true,
          label: 'Hover-Hervorhebung',
          admin: {
            description: 'Bei Hover Pfad zur Wurzel hervorheben',
          },
        },
        {
          name: 'fullscreen',
          type: 'checkbox',
          defaultValue: true,
          label: 'Vollbild-Modus',
        },
        {
          name: 'export',
          type: 'checkbox',
          defaultValue: false,
          label: 'Export erlauben',
          admin: {
            description: 'Als PNG oder PDF exportieren',
          },
        },
      ],
    },
    // Styling
    {
      name: 'style',
      type: 'group',
      label: 'Darstellung',
      fields: [
        {
          name: 'bg',
          type: 'select',
          defaultValue: 'light',
          label: 'Hintergrund',
          options: [
            { label: 'Transparent', value: 'none' },
            { label: 'Hell', value: 'light' },
            { label: 'Weiß', value: 'white' },
            { label: 'Dunkel', value: 'dark' },
            { label: 'Gradient', value: 'gradient' },
          ],
        },
        {
          name: 'nodeBg',
          type: 'select',
          defaultValue: 'white',
          label: 'Knoten-Hintergrund',
          options: [
            { label: 'Weiß', value: 'white' },
            { label: 'Hell', value: 'light' },
            { label: 'Transparent', value: 'transparent' },
            { label: 'Akzent', value: 'accent' },
          ],
        },
        {
          name: 'nodeShadow',
          type: 'checkbox',
          defaultValue: true,
          label: 'Knoten-Schatten',
        },
        {
          name: 'nodeBorder',
          type: 'checkbox',
          defaultValue: false,
          label: 'Knoten-Rahmen',
        },
        {
          name: 'spacing',
          type: 'select',
          defaultValue: 'md',
          label: 'Abstände',
          options: [
            { label: 'Kompakt', value: 'sm' },
            { label: 'Normal', value: 'md' },
            { label: 'Großzügig', value: 'lg' },
          ],
        },
        {
          name: 'minHeight',
          type: 'select',
          defaultValue: '400',
          label: 'Mindesthöhe',
          options: [
            { label: 'Auto', value: 'auto' },
            { label: '300px', value: '300' },
            { label: '400px', value: '400' },
            { label: '500px', value: '500' },
            { label: '600px', value: '600' },
            { label: 'Vollbild', value: 'full' },
          ],
        },
      ],
    },
    // Legend
    {
      name: 'showLegend',
      type: 'checkbox',
      defaultValue: false,
      label: 'Legende anzeigen',
      admin: {
        description: 'Erklärt Farben und Symbole',
      },
    },
    // Accessibility
    {
      name: 'a11yLabel',
      type: 'text',
      label: 'ARIA Label',
      localized: true,
      defaultValue: 'Organigramm der Unternehmensstruktur',
    },
  ],
}
