import type { Block } from 'payload'

/**
 * StatsBlock
 *
 * Zeigt Kennzahlen und Statistiken in verschiedenen Layouts.
 * Unterstützt Animationen und verschiedene Darstellungsformen.
 */
export const StatsBlock: Block = {
  slug: 'stats-block',
  labels: {
    singular: 'Statistiken',
    plural: 'Statistiken',
  },
  imageURL: '/assets/blocks/stats.png',
  fields: [
    {
      name: 'title',
      type: 'text',
      label: 'Überschrift',
      localized: true,
    },
    {
      name: 'subtitle',
      type: 'textarea',
      label: 'Untertitel',
      localized: true,
    },
    // Statistiken
    {
      name: 'stats',
      type: 'array',
      required: true,
      minRows: 1,
      maxRows: 8,
      label: 'Statistiken',
      fields: [
        {
          name: 'value',
          type: 'text',
          required: true,
          label: 'Wert',
          admin: {
            description: 'z.B. "500+", "99%", "24/7", "10.000"',
          },
        },
        {
          name: 'numericValue',
          type: 'number',
          label: 'Numerischer Wert',
          admin: {
            description: 'Für Zähl-Animation (z.B. 500 für "500+")',
          },
        },
        {
          name: 'prefix',
          type: 'text',
          label: 'Präfix',
          admin: {
            description: 'z.B. "€", "+"',
          },
        },
        {
          name: 'suffix',
          type: 'text',
          label: 'Suffix',
          admin: {
            description: 'z.B. "+", "%", "k", "Mio."',
          },
        },
        {
          name: 'label',
          type: 'text',
          required: true,
          label: 'Beschreibung',
          localized: true,
          admin: {
            description: 'z.B. "Zufriedene Kunden", "Erfolgsquote"',
          },
        },
        {
          name: 'description',
          type: 'textarea',
          label: 'Zusatztext',
          localized: true,
          admin: {
            description: 'Optionaler erklärender Text',
          },
        },
        {
          name: 'icon',
          type: 'select',
          label: 'Icon',
          options: [
            { label: 'Keins', value: 'none' },
            { label: 'Nutzer', value: 'users' },
            { label: 'Stern', value: 'star' },
            { label: 'Herz', value: 'heart' },
            { label: 'Check', value: 'check' },
            { label: 'Trophäe', value: 'trophy' },
            { label: 'Chart', value: 'chart' },
            { label: 'Uhr', value: 'clock' },
            { label: 'Kalender', value: 'calendar' },
            { label: 'Globus', value: 'globe' },
            { label: 'Gebäude', value: 'building' },
            { label: 'Dokument', value: 'document' },
            { label: 'Ziel', value: 'target' },
            { label: 'Rakete', value: 'rocket' },
            { label: 'Handshake', value: 'handshake' },
          ],
        },
        {
          name: 'color',
          type: 'select',
          label: 'Akzentfarbe',
          options: [
            { label: 'Standard', value: 'default' },
            { label: 'Primary', value: 'primary' },
            { label: 'Grün', value: 'green' },
            { label: 'Blau', value: 'blue' },
            { label: 'Orange', value: 'orange' },
            { label: 'Rot', value: 'red' },
          ],
        },
      ],
    },
    // Layout
    {
      name: 'layout',
      type: 'select',
      defaultValue: 'row',
      label: 'Layout',
      options: [
        { label: 'Horizontal', value: 'row' },
        { label: 'Grid', value: 'grid' },
        { label: 'Karten', value: 'cards' },
        { label: 'Vertikal', value: 'column' },
        { label: 'Inline (kompakt)', value: 'inline' },
        { label: 'Feature (groß)', value: 'feature' },
      ],
    },
    {
      name: 'columns',
      type: 'select',
      defaultValue: '4',
      label: 'Spalten',
      options: [
        { label: '2 Spalten', value: '2' },
        { label: '3 Spalten', value: '3' },
        { label: '4 Spalten', value: '4' },
        { label: 'Auto', value: 'auto' },
      ],
      admin: {
        condition: (_, siblingData) =>
          siblingData?.layout === 'grid' || siblingData?.layout === 'cards',
      },
    },
    {
      name: 'alignment',
      type: 'select',
      defaultValue: 'center',
      label: 'Ausrichtung',
      options: [
        { label: 'Links', value: 'left' },
        { label: 'Mitte', value: 'center' },
        { label: 'Rechts', value: 'right' },
      ],
    },
    // Animation
    {
      name: 'animation',
      type: 'group',
      label: 'Animation',
      fields: [
        {
          name: 'countUp',
          type: 'checkbox',
          defaultValue: true,
          label: 'Zähl-Animation',
          admin: {
            description: 'Zahlen hochzählen (benötigt numericValue)',
          },
        },
        {
          name: 'duration',
          type: 'select',
          defaultValue: '2000',
          label: 'Dauer',
          options: [
            { label: 'Schnell (1s)', value: '1000' },
            { label: 'Normal (2s)', value: '2000' },
            { label: 'Langsam (3s)', value: '3000' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.countUp,
          },
        },
        {
          name: 'trigger',
          type: 'select',
          defaultValue: 'viewport',
          label: 'Trigger',
          options: [
            { label: 'Beim Scrollen sichtbar', value: 'viewport' },
            { label: 'Sofort', value: 'immediate' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.countUp,
          },
        },
        {
          name: 'stagger',
          type: 'checkbox',
          defaultValue: true,
          label: 'Versetzt animieren',
          admin: {
            description: 'Statistiken nacheinander einblenden',
            condition: (_, siblingData) => siblingData?.countUp,
          },
        },
      ],
    },
    // 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: 'Dunkel', value: 'dark' },
            { label: 'Primary', value: 'primary' },
            { label: 'Gradient', value: 'gradient' },
          ],
        },
        {
          name: 'bgImage',
          type: 'upload',
          relationTo: 'media',
          label: 'Hintergrundbild',
          admin: {
            condition: (_, siblingData) => siblingData?.bg === 'none',
          },
        },
        {
          name: 'bgOverlay',
          type: 'select',
          defaultValue: 'dark',
          label: 'Overlay',
          options: [
            { label: 'Keins', value: 'none' },
            { label: 'Dunkel', value: 'dark' },
            { label: 'Hell', value: 'light' },
            { label: 'Primary', value: 'primary' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.bgImage,
          },
        },
        {
          name: 'textColor',
          type: 'select',
          defaultValue: 'auto',
          label: 'Textfarbe',
          options: [
            { label: 'Auto', value: 'auto' },
            { label: 'Dunkel', value: 'dark' },
            { label: 'Hell', value: 'light' },
          ],
        },
        {
          name: 'valueSize',
          type: 'select',
          defaultValue: 'xl',
          label: 'Zahlen-Größe',
          options: [
            { label: 'Normal', value: 'base' },
            { label: 'Groß', value: 'lg' },
            { label: 'Sehr groß', value: 'xl' },
            { label: 'Riesig', value: '2xl' },
          ],
        },
        {
          name: 'valueWeight',
          type: 'select',
          defaultValue: 'bold',
          label: 'Zahlen-Gewicht',
          options: [
            { label: 'Normal', value: 'normal' },
            { label: 'Medium', value: 'medium' },
            { label: 'Bold', value: 'bold' },
            { label: 'Extra Bold', value: 'extrabold' },
          ],
        },
        {
          name: 'showIcon',
          type: 'checkbox',
          defaultValue: true,
          label: 'Icons anzeigen',
        },
        {
          name: 'iconPosition',
          type: 'select',
          defaultValue: 'top',
          label: 'Icon-Position',
          options: [
            { label: 'Oben', value: 'top' },
            { label: 'Links', value: 'left' },
            { label: 'In Zahl', value: 'inline' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.showIcon,
          },
        },
        {
          name: 'dividers',
          type: 'checkbox',
          defaultValue: false,
          label: 'Trennlinien',
        },
        {
          name: 'cardBorder',
          type: 'checkbox',
          defaultValue: false,
          label: 'Karten-Rahmen',
          admin: {
            condition: (_, siblingData) => siblingData?.layout === 'cards',
          },
        },
        {
          name: 'cardShadow',
          type: 'checkbox',
          defaultValue: true,
          label: 'Karten-Schatten',
          admin: {
            condition: (_, siblingData) => siblingData?.layout === 'cards',
          },
        },
        {
          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: 'padding',
          type: 'select',
          defaultValue: 'md',
          label: 'Innenabstand',
          options: [
            { label: 'Keiner', value: 'none' },
            { label: 'Klein', value: 'sm' },
            { label: 'Normal', value: 'md' },
            { label: 'Groß', value: 'lg' },
          ],
        },
      ],
    },
  ],
}
