import type { GlobalConfig } from 'payload'

import { link } from '@/fields/link'
import { revalidateHeader } from './hooks/revalidateHeader'

export const Header: GlobalConfig = {
  slug: 'header',
  access: {
    read: () => true,
  },
  fields: [
    {
      type: 'tabs',
      tabs: [
        {
          label: 'Navigation',
          fields: [
            {
              name: 'navItems',
              type: 'array',
              label: 'Main Navigation',
              fields: [
                link({
                  appearances: false,
                }),
              ],
              maxRows: 6,
              admin: {
                description: 'Main navigation menu items',
                initCollapsed: true,
                components: {
                  RowLabel: '@/Header/RowLabel#RowLabel',
                },
              },
            },
            {
              name: 'ctaButton',
              type: 'group',
              label: 'CTA Button',
              fields: [
                {
                  name: 'enabled',
                  type: 'checkbox',
                  defaultValue: true,
                  admin: {
                    description: 'Show CTA button in header',
                  },
                },
                {
                  name: 'text',
                  type: 'text',
                  localized: true,
                  admin: {
                    description: 'Button text (e.g., "Get in Touch", "Hire Me", "Let\'s Talk")',
                    condition: (data) => data.ctaButton?.enabled === true,
                  },
                },
                {
                  name: 'link',
                  type: 'text',
                  admin: {
                    description: 'Button URL or page slug',
                    condition: (data) => data.ctaButton?.enabled === true,
                  },
                },
                {
                  name: 'style',
                  type: 'select',
                  options: [
                    { label: 'Primary', value: 'primary' },
                    { label: 'Secondary', value: 'secondary' },
                    { label: 'Outline', value: 'outline' },
                  ],
                  defaultValue: 'primary',
                  admin: {
                    description: 'Button visual style',
                    condition: (data) => data.ctaButton?.enabled === true,
                  },
                },
              ],
            },
          ],
        },
        {
          label: 'Announcement Bar',
          fields: [
            {
              name: 'announcementBar',
              type: 'group',
              label: 'Announcement Bar',
              fields: [
                {
                  name: 'enabled',
                  type: 'checkbox',
                  defaultValue: false,
                  admin: {
                    description: 'Show announcement bar above header',
                  },
                },
                {
                  name: 'message',
                  type: 'text',
                  localized: true,
                  admin: {
                    description: 'Announcement text',
                    condition: (data) => data.announcementBar?.enabled === true,
                  },
                },
                {
                  name: 'link',
                  type: 'text',
                  admin: {
                    description: 'Optional link URL',
                    condition: (data) => data.announcementBar?.enabled === true,
                  },
                },
                {
                  name: 'linkText',
                  type: 'text',
                  localized: true,
                  admin: {
                    description: 'Link text (e.g., "Learn more")',
                    condition: (data) => data.announcementBar?.enabled === true,
                  },
                },
                {
                  name: 'type',
                  type: 'select',
                  options: [
                    { label: 'Info', value: 'info' },
                    { label: 'Success', value: 'success' },
                    { label: 'Warning', value: 'warning' },
                    { label: 'Promotion', value: 'promotion' },
                  ],
                  defaultValue: 'info',
                  admin: {
                    description: 'Bar style/color',
                    condition: (data) => data.announcementBar?.enabled === true,
                  },
                },
                {
                  name: 'dismissible',
                  type: 'checkbox',
                  defaultValue: true,
                  admin: {
                    description: 'Allow users to close the announcement',
                    condition: (data) => data.announcementBar?.enabled === true,
                  },
                },
              ],
            },
          ],
        },
      ],
    },
  ],
  hooks: {
    afterChange: [revalidateHeader],
  },
}
