import type { Block } from 'payload'

/**
 * MapBlock
 *
 * Zeigt eine interaktive Karte mit konfigurierbaren Markern.
 * Unterstützt verschiedene Map-Provider und Marker-Typen.
 */
export const MapBlock: Block = {
  slug: 'map-block',
  labels: {
    singular: 'Karte',
    plural: 'Karten',
  },
  imageURL: '/assets/blocks/map.png',
  fields: [
    {
      name: 'title',
      type: 'text',
      label: 'Überschrift',
      localized: true,
    },
    {
      name: 'subtitle',
      type: 'textarea',
      label: 'Untertitel',
      localized: true,
    },
    // Datenquelle
    {
      name: 'source',
      type: 'select',
      defaultValue: 'locations',
      label: 'Marker-Quelle',
      options: [
        { label: 'Aus Locations Collection', value: 'locations' },
        { label: 'Manuell definieren', value: 'manual' },
        { label: 'Einzelne Adresse', value: 'single' },
      ],
    },
    // Locations-basiert
    {
      name: 'locationType',
      type: 'select',
      label: 'Standort-Typ',
      hasMany: true,
      options: [
        { label: 'Alle', value: 'all' },
        { label: 'Hauptsitz', value: 'headquarters' },
        { label: 'Filiale', value: 'branch' },
        { label: 'Niederlassung', value: 'office' },
        { label: 'Lager/Logistik', value: 'warehouse' },
        { label: 'Produktion', value: 'production' },
        { label: 'Showroom', value: 'showroom' },
        { label: 'Service-Center', value: 'service' },
        { label: 'Partner', value: 'partner' },
      ],
      defaultValue: ['all'],
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'locations',
      },
    },
    {
      name: 'selectedLocations',
      type: 'relationship',
      relationTo: 'locations',
      hasMany: true,
      label: 'Standorte auswählen',
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'locations',
        description: 'Optional: Bestimmte Standorte auswählen (sonst alle vom gewählten Typ)',
      },
    },
    // Manuelle Marker
    {
      name: 'markers',
      type: 'array',
      label: 'Marker',
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'manual',
      },
      fields: [
        {
          name: 'name',
          type: 'text',
          required: true,
          label: 'Name',
          localized: true,
        },
        {
          name: 'address',
          type: 'textarea',
          label: 'Adresse',
          localized: true,
        },
        {
          name: 'lat',
          type: 'number',
          required: true,
          label: 'Breitengrad',
          admin: {
            step: 0.000001,
          },
        },
        {
          name: 'lng',
          type: 'number',
          required: true,
          label: 'Längengrad',
          admin: {
            step: 0.000001,
          },
        },
        {
          name: 'markerType',
          type: 'select',
          label: 'Marker-Typ',
          options: [
            { label: 'Standard', value: 'default' },
            { label: 'Hauptstandort', value: 'main' },
            { label: 'Highlight', value: 'highlight' },
            { label: 'Custom', value: 'custom' },
          ],
        },
        {
          name: 'customIcon',
          type: 'upload',
          relationTo: 'media',
          label: 'Custom Icon',
          admin: {
            condition: (_, siblingData) => siblingData?.markerType === 'custom',
          },
        },
        {
          name: 'popupContent',
          type: 'richText',
          label: 'Popup-Inhalt',
          localized: true,
        },
        {
          name: 'link',
          type: 'text',
          label: 'Link',
        },
      ],
    },
    // Einzelne Adresse
    {
      name: 'singleAddress',
      type: 'group',
      label: 'Adresse',
      admin: {
        condition: (_, siblingData) => siblingData?.source === 'single',
      },
      fields: [
        {
          name: 'name',
          type: 'text',
          label: 'Name/Titel',
          localized: true,
        },
        {
          name: 'street',
          type: 'text',
          label: 'Straße',
        },
        {
          name: 'zip',
          type: 'text',
          label: 'PLZ',
        },
        {
          name: 'city',
          type: 'text',
          label: 'Stadt',
        },
        {
          name: 'country',
          type: 'text',
          defaultValue: 'Deutschland',
          label: 'Land',
        },
        {
          name: 'lat',
          type: 'number',
          label: 'Breitengrad',
          admin: {
            step: 0.000001,
            description: 'Optional - wird sonst per Geocoding ermittelt',
          },
        },
        {
          name: 'lng',
          type: 'number',
          label: 'Längengrad',
          admin: {
            step: 0.000001,
          },
        },
      ],
    },
    // Map Provider
    {
      name: 'provider',
      type: 'select',
      defaultValue: 'osm',
      label: 'Karten-Anbieter',
      options: [
        { label: 'OpenStreetMap', value: 'osm' },
        { label: 'Google Maps', value: 'google' },
        { label: 'Mapbox', value: 'mapbox' },
        { label: 'Leaflet (Custom Tiles)', value: 'leaflet' },
      ],
    },
    {
      name: 'mapStyle',
      type: 'select',
      defaultValue: 'default',
      label: 'Karten-Stil',
      options: [
        { label: 'Standard', value: 'default' },
        { label: 'Hell', value: 'light' },
        { label: 'Dunkel', value: 'dark' },
        { label: 'Satellite', value: 'satellite' },
        { label: 'Hybrid', value: 'hybrid' },
        { label: 'Terrain', value: 'terrain' },
      ],
    },
    // Karten-Einstellungen
    {
      name: 'mapSettings',
      type: 'group',
      label: 'Karten-Einstellungen',
      fields: [
        {
          name: 'height',
          type: 'select',
          defaultValue: '400',
          label: 'Höhe',
          options: [
            { label: 'Klein (300px)', value: '300' },
            { label: 'Normal (400px)', value: '400' },
            { label: 'Groß (500px)', value: '500' },
            { label: 'Sehr groß (600px)', value: '600' },
            { label: 'Vollbild-Höhe', value: 'fullscreen' },
          ],
        },
        {
          name: 'zoom',
          type: 'number',
          defaultValue: 12,
          min: 1,
          max: 20,
          label: 'Zoom-Level',
          admin: {
            description: '1 = Welt, 20 = Gebäude-Details',
          },
        },
        {
          name: 'autoFit',
          type: 'checkbox',
          defaultValue: true,
          label: 'Zoom automatisch anpassen',
          admin: {
            description: 'Zoom so anpassen, dass alle Marker sichtbar sind',
          },
        },
        {
          name: 'centerLat',
          type: 'number',
          label: 'Mittelpunkt Breitengrad',
          admin: {
            step: 0.000001,
            description: 'Optional - wird automatisch berechnet wenn leer',
          },
        },
        {
          name: 'centerLng',
          type: 'number',
          label: 'Mittelpunkt Längengrad',
          admin: {
            step: 0.000001,
          },
        },
      ],
    },
    // Interaktion
    {
      name: 'interaction',
      type: 'group',
      label: 'Interaktion',
      fields: [
        {
          name: 'scrollZoom',
          type: 'checkbox',
          defaultValue: false,
          label: 'Zoom mit Mausrad',
        },
        {
          name: 'dragging',
          type: 'checkbox',
          defaultValue: true,
          label: 'Verschieben erlauben',
        },
        {
          name: 'zoomControl',
          type: 'checkbox',
          defaultValue: true,
          label: 'Zoom-Buttons',
        },
        {
          name: 'fullscreenControl',
          type: 'checkbox',
          defaultValue: false,
          label: 'Vollbild-Button',
        },
        {
          name: 'locateControl',
          type: 'checkbox',
          defaultValue: false,
          label: 'Standort-Button',
          admin: {
            description: 'User-Standort ermitteln',
          },
        },
      ],
    },
    // Marker-Darstellung
    {
      name: 'markerStyle',
      type: 'group',
      label: 'Marker-Darstellung',
      fields: [
        {
          name: 'type',
          type: 'select',
          defaultValue: 'pin',
          label: 'Marker-Typ',
          options: [
            { label: 'Pin', value: 'pin' },
            { label: 'Punkt', value: 'dot' },
            { label: 'Icon', value: 'icon' },
            { label: 'Custom', value: 'custom' },
          ],
        },
        {
          name: 'color',
          type: 'text',
          defaultValue: '#3B82F6',
          label: 'Marker-Farbe',
          admin: {
            description: 'HEX-Farbcode, z.B. #3B82F6',
          },
        },
        {
          name: 'size',
          type: 'select',
          defaultValue: 'md',
          label: 'Größe',
          options: [
            { label: 'Klein', value: 'sm' },
            { label: 'Mittel', value: 'md' },
            { label: 'Groß', value: 'lg' },
          ],
        },
        {
          name: 'clustering',
          type: 'checkbox',
          defaultValue: true,
          label: 'Marker clustern',
          admin: {
            description: 'Nahe beieinander liegende Marker gruppieren',
          },
        },
        {
          name: 'clusterRadius',
          type: 'number',
          defaultValue: 50,
          label: 'Cluster-Radius',
          admin: {
            condition: (_, siblingData) => siblingData?.clustering,
          },
        },
      ],
    },
    // Popup-Einstellungen
    {
      name: 'popup',
      type: 'group',
      label: 'Popup-Einstellungen',
      fields: [
        {
          name: 'show',
          type: 'checkbox',
          defaultValue: true,
          label: 'Popups anzeigen',
        },
        {
          name: 'trigger',
          type: 'select',
          defaultValue: 'click',
          label: 'Öffnen bei',
          options: [
            { label: 'Klick', value: 'click' },
            { label: 'Hover', value: 'hover' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.show,
          },
        },
        {
          name: 'showAddress',
          type: 'checkbox',
          defaultValue: true,
          label: 'Adresse anzeigen',
          admin: {
            condition: (_, siblingData) => siblingData?.show,
          },
        },
        {
          name: 'showDirectionsLink',
          type: 'checkbox',
          defaultValue: true,
          label: 'Routenplaner-Link',
          admin: {
            condition: (_, siblingData) => siblingData?.show,
          },
        },
        {
          name: 'showPhone',
          type: 'checkbox',
          defaultValue: true,
          label: 'Telefon anzeigen',
          admin: {
            condition: (_, siblingData) => siblingData?.show,
          },
        },
        {
          name: 'showOpeningHours',
          type: 'checkbox',
          defaultValue: false,
          label: 'Öffnungszeiten anzeigen',
          admin: {
            condition: (_, siblingData) => siblingData?.show,
          },
        },
        {
          name: 'showDetailLink',
          type: 'checkbox',
          defaultValue: true,
          label: 'Detail-Link anzeigen',
          admin: {
            condition: (_, siblingData) => siblingData?.show,
          },
        },
      ],
    },
    // Sidebar/Liste
    {
      name: 'sidebar',
      type: 'group',
      label: 'Standort-Liste',
      fields: [
        {
          name: 'show',
          type: 'checkbox',
          defaultValue: false,
          label: 'Liste neben Karte',
        },
        {
          name: 'position',
          type: 'select',
          defaultValue: 'right',
          label: 'Position',
          options: [
            { label: 'Links', value: 'left' },
            { label: 'Rechts', value: 'right' },
            { label: 'Unten', value: 'bottom' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.show,
          },
        },
        {
          name: 'width',
          type: 'select',
          defaultValue: '300',
          label: 'Breite',
          options: [
            { label: 'Schmal (250px)', value: '250' },
            { label: 'Normal (300px)', value: '300' },
            { label: 'Breit (400px)', value: '400' },
          ],
          admin: {
            condition: (_, siblingData) =>
              siblingData?.show && siblingData?.position !== 'bottom',
          },
        },
        {
          name: 'searchable',
          type: 'checkbox',
          defaultValue: true,
          label: 'Suchfeld in Liste',
          admin: {
            condition: (_, siblingData) => siblingData?.show,
          },
        },
        {
          name: 'clickToCenter',
          type: 'checkbox',
          defaultValue: true,
          label: 'Klick zentriert Karte',
          admin: {
            condition: (_, siblingData) => siblingData?.show,
          },
        },
      ],
    },
    // Styling
    {
      name: 'style',
      type: 'group',
      label: 'Darstellung',
      fields: [
        {
          name: 'rounded',
          type: 'checkbox',
          defaultValue: true,
          label: 'Abgerundete Ecken',
        },
        {
          name: 'shadow',
          type: 'checkbox',
          defaultValue: true,
          label: 'Schatten',
        },
        {
          name: 'border',
          type: 'checkbox',
          defaultValue: false,
          label: 'Rahmen',
        },
        {
          name: 'padding',
          type: 'select',
          defaultValue: 'none',
          label: 'Außenabstand',
          options: [
            { label: 'Keiner', value: 'none' },
            { label: 'Klein', value: 'sm' },
            { label: 'Normal', value: 'md' },
            { label: 'Groß', value: 'lg' },
          ],
        },
      ],
    },
    // Fallback
    {
      name: 'fallback',
      type: 'group',
      label: 'Fallback',
      fields: [
        {
          name: 'showStaticImage',
          type: 'checkbox',
          defaultValue: false,
          label: 'Statisches Bild als Fallback',
        },
        {
          name: 'staticImage',
          type: 'upload',
          relationTo: 'media',
          label: 'Fallback-Bild',
          admin: {
            condition: (_, siblingData) => siblingData?.showStaticImage,
          },
        },
        {
          name: 'noJsMessage',
          type: 'text',
          label: 'Nachricht ohne JavaScript',
          localized: true,
          defaultValue: 'Bitte aktivieren Sie JavaScript, um die Karte anzuzeigen.',
        },
      ],
    },
  ],
}
