import type { Block } from 'payload'
import { blockMetaFields } from '@/fields/blockMeta'
import { inclusionField } from '@/fields/inclusion'
import { richTextEditor } from '@/fields/richTextEditor'

export const HeroOfferV1: Block = {
  slug: 'heroOfferV1',
  labels: { singular: 'Hero (Offer)', plural: 'Hero (Offer)' },
  fields: [
    {
      name: 'variant',
      type: 'select',
      defaultValue: 'hero',
      options: [
        { label: 'Hero (Full Screen)', value: 'hero' },
        { label: 'Offer Banner (Contained Box)', value: 'offer-banner' },
      ],
      required: true,
    },
    {
      name: 'desktopImage',
      type: 'upload',
      relationTo: 'media',
      required: true,
      admin: {
        description: 'Large image for desktop views (Landscape).',
      },
    },
    {
      name: 'mobileImage',
      type: 'upload',
      relationTo: 'media',
      required: false,
      admin: {
        description:
          'Optional optimized image for mobile views (Portrait). Falls back to Desktop image if empty.',
      },
    },

    {
      name: 'headline',
      type: 'richText',
      required: true,
      editor: richTextEditor,
    },
    {
      name: 'subheadline',
      type: 'richText',
      editor: richTextEditor,
    },
    {
      name: 'price',
      type: 'group',
      fields: [
        { name: 'prefix', type: 'text', admin: { placeholder: 'e.g. From' } },
        { name: 'amount', type: 'text', admin: { placeholder: 'e.g. £1140' } },
        { name: 'suffix', type: 'text', admin: { placeholder: 'e.g. PER ROOM' } },
      ],
    },
    inclusionField,
    {
      name: 'highlights',
      type: 'array',
      maxRows: 8,
      fields: [
        { name: 'icon', type: 'upload', relationTo: 'media' },
        { name: 'label', type: 'text', required: true },
      ],
    },
    {
      name: 'ctas',
      type: 'array',
      maxRows: 4,
      fields: [
        { name: 'label', type: 'text', required: true, defaultValue: 'Send Request' },
        { name: 'href', type: 'text', required: true, defaultValue: '#send-request' },
        {
          name: 'style',
          type: 'select',
          defaultValue: 'primary',
          options: [
            { label: 'Primary', value: 'primary' },
            { label: 'Outline', value: 'outline' },
          ],
        },
        {
          name: 'ctaId',
          type: 'text',
          admin: {
            description: 'Optional HTML id attribute for tracking or scroll targeting (e.g. "hero-book-now").',
          },
        },
      ],
    },
    {
      name: 'footerText',
      type: 'textarea',
      admin: {
        condition: (data, siblingData) => siblingData?.variant === 'offer-banner',
        description: 'The small text at the bottom (e.g. "PERFECT FOR A REFRESHING...")',
      },
    },
    {
      name: 'expiresAt',
      type: 'date',
      admin: {
        condition: (data, siblingData) => siblingData?.variant === 'offer-banner',
        date: {
          pickerAppearance: 'dayAndTime',
        },
        description: 'Set an expiry date to enable the countdown timer on the frontend.',
      },
    },
    ...blockMetaFields,
  ],
}