import { GlobalConfig } from 'payload'
import { isAdmin } from '@/collections/access/admin'
import { revalidateTag } from 'next/cache'
import { FONT_OPTIONS } from '@/assets/fontOptions'

const hexColorValidation = (value: string | null | undefined) => {
  if (!value) return true
  if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value)) return true
  return 'Bitte geben Sie einen gültigen Hex-Farbwert ein (z.B. #016699)'
}

export const DesignGlobal: GlobalConfig = {
  slug: 'design',
  label: {
    de: 'Design',
  },
  admin: {
    description:
      'Hier können Sie die Farben und das Erscheinungsbild der Website konfigurieren.',
  },
  fields: [
    {
      type: 'collapsible',
      label: 'Farben',
      fields: [
        {
          name: 'baseColor',
          type: 'text',
          label: { de: 'Grundfarbe' },
          defaultValue: '#016699',
          validate: hexColorValidation,
        },
        {
          name: 'shade1',
          type: 'text',
          label: { de: 'Farbton 1' },
          defaultValue: '#67A3C2',
          validate: hexColorValidation,
        },
        {
          name: 'shade2',
          type: 'text',
          label: { de: 'Farbton 2' },
          defaultValue: '#DDECF7',
          validate: hexColorValidation,
        },
        {
          name: 'shade3',
          type: 'text',
          label: { de: 'Farbton 3' },
          defaultValue: '#eff6ff',
          validate: hexColorValidation,
        },
        {
          name: 'contrastColor',
          type: 'text',
          label: { de: 'Kontrastfarbe' },
          defaultValue: '#CE490F',
          validate: hexColorValidation,
        },
        {
          name: 'contrastShade1',
          type: 'text',
          label: { de: 'Kontrastfarbton 1' },
          defaultValue: '#DA764B',
          validate: hexColorValidation,
        },
      ],
    },
    {
      type: 'collapsible',
      label: 'Schriftarten',
      fields: [
        {
          name: 'defaultFont',
          type: 'select',
          label: { de: 'Standardschrift' },
          defaultValue: 'cairo',
          options: FONT_OPTIONS.map((o) => ({
            label: o.label,
            value: o.value,
          })),
          admin: {
            description:
              'Die Hauptschrift für den gesamten Text der Website.',
          },
        },
        {
          name: 'headerFont',
          type: 'select',
          label: { de: 'Überschriftenschrift' },
          defaultValue: 'faustina',
          options: FONT_OPTIONS.map((o) => ({
            label: o.label,
            value: o.value,
          })),
          admin: {
            description:
              'Die Schrift für Überschriften und hervorgehobenen Text.',
          },
        },
      ],
    },
    {
      name: 'borderRadius',
      type: 'text',
      label: { de: 'Eckenradius' },
      defaultValue: '13px',
    },
  ],
  access: {
    read: () => true,
    update: isAdmin(),
  },
  hooks: {
    afterChange: [() => revalidateTag('design')],
  },
}