// ============= KEYSTATIC SCHEMA =============

import { fields, singleton } from '@keystatic/core';

export default singleton({
  label: 'Navigation',
  path: 'content/system/navigation',
  format: 'json',
  schema: {
    items: fields.array(
      fields.object({
        name: fields.text({
          label: 'Name',
          validation: { isRequired: true },
        }),

        path: fields.url({
          label: 'Path',
          description: 'Omit starting slash (/)',
          validation: { isRequired: true },
        }),

        gridPosition: fields.select({
          label: 'Grid Position',
          defaultValue: '',
          options: [
            { label: 'None', value: '' },
            { label: 'Area 1', value: 'area_1' },
            { label: 'Area 2', value: 'area_2' },
            { label: 'Area 3', value: 'area_3' },
            { label: 'Area 4', value: 'area_4' },
            { label: 'Area 5', value: 'area_5' },
          ],
        }),

        variant: fields.select({
          label: 'Style Variant',
          description: 'Visual style and animations for this menu item',
          defaultValue: 'default',
          options: [
            { label: 'Default', value: 'default' },
            { label: 'Advanced Warhammer Quest', value: 'awq' },
            { label: 'The Metatron', value: 'meta' },
            { label: 'Kitchensink', value: 'kitchensink' },
            { label: 'Worldburner', value: 'worldburner' },
            { label: 'Chainbreaker', value: 'chainbreaker' },
          ],
        }),

        background: fields.image({
          label: 'Background Image',
          description: 'Optional background image for this menu area',
          directory: 'public/images/categories',
          publicPath: '/images/categories',
        }),

        sublinks: fields.conditional(
          fields.checkbox({ label: 'Show Sublinks' }),
          {
            false: fields.empty(),
            true: fields.array(
              fields.object({
                name: fields.text({
                  label: 'Name',
                  validation: { isRequired: true },
                }),
                path: fields.url({
                  label: 'Path',
                  validation: { isRequired: true },
                }),
              }),
              {
                label: 'Sub Navigation Items',
                itemLabel: (props) =>
                  props.fields.name.value || 'Untitled Sub Item',
              }
            ),
          }
        ),

        subtitle: fields.conditional(
          fields.checkbox({ label: 'Show Subtitle' }),
          {
            false: fields.empty(),
            true: fields.object({
              content: fields.text({
                label: 'Subtitle Text',
                validation: { isRequired: true },
              }),

              divider: fields.conditional(
                fields.checkbox({
                  label: 'Show Divider',
                  defaultValue: false,
                }),
                {
                  true: fields.text({
                    label: 'Symbol',
                    description: 'Decorative symbol (e.g., ⚡, ◆, ▲)',
                    defaultValue: '◆',
                  }),
                  false: fields.empty(),
                }
              ),
            }),
          }
        ),
      }),
      {
        label: 'Menu Items',
        itemLabel: (props) =>
          `${props.fields.name.value || 'Untitled'} (${props.fields.gridPosition.value || 'No Position'})`,
      }
    ),
  },
});
