/**
 * Copyright IBM Corp. 2018, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { TokenGroup } from './TokenGroup';

export const background = TokenGroup.create({
  name: 'Background',
  properties: ['background'],
  tokens: [
    'background',
    {
      name: 'background-active',
      state: 'active',
    },
    {
      name: 'background-selected',
      state: 'selected',
    },
    {
      name: 'background-selected-hover',
      state: 'hover',
    },
    {
      name: 'background-hover',
      state: 'hover',
    },
    'background-brand',
    'background-inverse',
    {
      state: 'hover',
      name: 'background-inverse-hover',
    },
  ],
});

export const layer = TokenGroup.create({
  name: 'Layer',
  properties: ['background'],
  tokens: [
    {
      name: 'layer-01',
    },
    {
      state: 'active',
      name: 'layer-active-01',
    },
    {
      name: 'layer-background-01',
    },
    {
      state: 'hover',
      name: 'layer-hover-01',
    },
    {
      state: 'selected',
      name: 'layer-selected-01',
    },
    {
      state: 'hover',
      name: 'layer-selected-hover-01',
    },
    {
      name: 'layer-02',
    },
    {
      state: 'active',
      name: 'layer-active-02',
    },
    {
      name: 'layer-background-02',
    },
    {
      state: 'hover',
      name: 'layer-hover-02',
    },
    {
      state: 'selected',
      name: 'layer-selected-02',
    },
    {
      state: 'hover',
      name: 'layer-selected-hover-02',
    },
    {
      name: 'layer-03',
    },
    {
      state: 'active',
      name: 'layer-active-03',
    },
    {
      name: 'layer-background-03',
    },
    {
      state: 'hover',
      name: 'layer-hover-03',
    },
    {
      state: 'selected',
      name: 'layer-selected-03',
    },
    {
      state: 'hover',
      name: 'layer-selected-hover-03',
    },
    {
      name: 'layer-selected-inverse',
    },
    {
      state: 'disabled',
      name: 'layer-selected-disabled',
    },
    {
      name: 'layer-accent-01',
    },
    {
      state: 'active',
      name: 'layer-accent-active-01',
    },
    {
      state: 'hover',
      name: 'layer-accent-hover-01',
    },
    {
      name: 'layer-accent-02',
    },
    {
      state: 'active',
      name: 'layer-accent-active-02',
    },
    {
      state: 'hover',
      name: 'layer-accent-hover-02',
    },
    {
      name: 'layer-accent-03',
    },
    {
      state: 'active',
      name: 'layer-accent-active-03',
    },
    {
      state: 'hover',
      name: 'layer-accent-hover-03',
    },
  ],
});

export const field = TokenGroup.create({
  name: 'Field',
  properties: ['background'],
  tokens: [
    {
      name: 'field-01',
    },
    {
      state: 'hover',
      name: 'field-hover-01',
    },
    {
      name: 'field-02',
    },
    {
      state: 'hover',
      name: 'field-hover-02',
    },
    {
      name: 'field-03',
    },
    {
      state: 'hover',
      name: 'field-hover-03',
    },
  ],
});

export const border = TokenGroup.create({
  name: 'Borders',
  properties: ['border'],
  tokens: [
    {
      name: 'border-subtle-00',
    },
    {
      name: 'border-subtle-01',
    },
    {
      state: 'selected',
      name: 'border-subtle-selected-01',
    },
    {
      name: 'border-subtle-02',
    },
    {
      state: 'selected',
      name: 'border-subtle-selected-02',
    },
    {
      name: 'border-subtle-03',
    },
    {
      state: 'selected',
      name: 'border-subtle-selected-03',
    },

    // Border strong
    'border-strong-01',
    'border-strong-02',
    'border-strong-03',

    // Border tile
    'border-tile-01',
    'border-tile-02',
    'border-tile-03',

    // Border inverse
    'border-inverse',

    // Border interactive
    'border-interactive',

    {
      state: 'disabled',
      name: 'border-disabled',
    },
  ],
});

export const text = TokenGroup.create({
  name: 'Text',
  properties: ['text'],
  tokens: [
    'text-primary',
    'text-secondary',
    'text-placeholder',
    'text-helper',
    'text-error',
    'text-inverse',
    {
      name: 'text-on-color',
    },
    {
      state: 'disabled',
      name: 'text-on-color-disabled',
    },

    {
      state: 'disabled',
      name: 'text-disabled',
    },
  ],
});

export const link = TokenGroup.create({
  name: 'Link',
  properties: ['text'],
  tokens: [
    {
      name: 'link-primary',
    },
    {
      state: 'hover',
      name: 'link-primary-hover',
    },
    'link-secondary',
    {
      state: 'visited',
      name: 'link-inverse-visited',
    },
    'link-visited',
    'link-inverse',
    'link-inverse-active',
    'link-inverse-hover',
  ],
});

export const icon = TokenGroup.create({
  name: 'Icons',
  properties: ['background', 'fill', 'stroke'],
  tokens: [
    'icon-primary',
    'icon-secondary',
    'icon-inverse',
    {
      name: 'icon-on-color',
    },
    {
      state: 'disabled',
      name: 'icon-on-color-disabled',
    },
    {
      state: 'disabled',
      name: 'icon-disabled',
    },
    'icon-interactive',
  ],
});

export const support = TokenGroup.create({
  name: 'Support',
  properties: ['background', 'fill', 'stroke'],
  tokens: [
    'support-error',
    'support-success',
    'support-warning',
    'support-info',
    'support-error-inverse',
    'support-success-inverse',
    'support-warning-inverse',
    'support-info-inverse',
    'support-caution-major',
    'support-caution-minor',
    'support-caution-undefined',
  ],
});

export const focus = TokenGroup.create({
  name: 'Focus',
  properties: ['border'],
  tokens: ['focus', 'focus-inset', 'focus-inverse'],
});

export const skeleton = TokenGroup.create({
  name: 'Skeleton',
  properties: ['background'],
  tokens: ['skeleton-background', 'skeleton-element'],
});

export const contextual = TokenGroup.create({
  name: 'Contextual',
  properties: [],
  tokens: [
    'layer',
    'layer-active',
    'layer-hover',
    'layer-selected',
    'layer-selected-hover',
    'layer-accent',
    'layer-accent-hover',
    'layer-accent-active',
    'field',
    'field-hover',
    'border-subtle',
    'border-subtle-selected',
    'border-strong',
    'border-tile',
  ],
});

export const syntaxHighlight = TokenGroup.create({
  name: 'Syntax Highlighting',
  properties: ['text'],
  tokens: [
    'syntax-comment',
    'syntax-line-comment',
    'syntax-block-comment',
    'syntax-doc-comment',
    'syntax-doc-string',
    'syntax-keyword',
    'syntax-operator-keyword',
    'syntax-control-keyword',
    'syntax-definition-keyword',
    'syntax-module-keyword',
    'syntax-variable',
    'syntax-name',
    'syntax-variable-name',
    'syntax-label-name',
    'syntax-attribute',
    'syntax-attribute-name',
    'syntax-property-name',
    'syntax-tag',
    'syntax-tag-name',
    'syntax-type',
    'syntax-type-name',
    'syntax-class-name',
    'syntax-namespace',
    'syntax-macro-name',
    'syntax-atom',
    'syntax-literal',
    'syntax-bool',
    'syntax-null',
    'syntax-self',
    'syntax-number',
    'syntax-integer',
    'syntax-float',
    'syntax-unit',
    'syntax-string',
    'syntax-character',
    'syntax-attribute-value',
    'syntax-special-string',
    'syntax-regexp',
    'syntax-escape',
    'syntax-url',
    'syntax-color',
    'syntax-operator',
    'syntax-deref-operator',
    'syntax-arithmetic-operator',
    'syntax-logic-operator',
    'syntax-bitwise-operator',
    'syntax-compare-operator',
    'syntax-update-operator',
    'syntax-definition-operator',
    'syntax-type-operator',
    'syntax-control-operator',
    'syntax-modifier',
    'syntax-punctuation',
    'syntax-separator',
    'syntax-bracket',
    'syntax-angle-bracket',
    'syntax-square-bracket',
    'syntax-paren',
    'syntax-brace',
    'syntax-content',
    'syntax-heading',
    'syntax-heading-1',
    'syntax-heading-2',
    'syntax-heading-3',
    'syntax-heading-4',
    'syntax-heading-5',
    'syntax-heading-6',
    'syntax-content-separator',
    'syntax-list',
    'syntax-quote',
    'syntax-emphasis',
    'syntax-strong',
    'syntax-monospace',
    'syntax-link',
    'syntax-strikethrough',
    'syntax-invalid',
    'syntax-meta',
    'syntax-document-meta',
    'syntax-annotation',
    'syntax-processing-instruction',
    'syntax-definition',
    'syntax-constant',
    'syntax-function',
    'syntax-standard',
    'syntax-local',
    'syntax-special',
    'syntax-inserted',
    'syntax-deleted',
  ],
});

export const ai = TokenGroup.create({
  name: 'AI',
  properties: ['background'],
  tokens: [
    // Phase 2
    'ai-popover-background',
    'ai-popover-shadow-outer-01',
    'ai-popover-shadow-outer-02',
    // Linear gradient refactor
    'ai-inner-shadow',
    'ai-aura-start-sm',
    'ai-aura-start',
    'ai-aura-end',
    'ai-aura-hover-background',
    'ai-aura-hover-start',
    'ai-aura-hover-end',
    'ai-border-strong',
    'ai-border-start',
    'ai-border-end',
    'ai-drop-shadow',
    'ai-skeleton-background',
    'ai-skeleton-element-background',
    'ai-overlay',
    // Caret tokens
    'ai-popover-caret-center',
    'ai-popover-caret-bottom',
    'ai-popover-caret-bottom-background',
    'ai-popover-caret-bottom-background-actions',
    // Chat tokens
    'chat-prompt-background',
    'chat-prompt-border-start',
    'chat-prompt-border-end',
    'chat-prompt-text',
    'chat-bubble-user',
    'chat-bubble-user-text',
    'chat-bubble-agent',
    'chat-bubble-agent-text',
    'chat-bubble-border',
    'chat-avatar-bot',
    'chat-avatar-agent',
    'chat-avatar-user',
    'chat-shell-background',
    'chat-header-background',
    'chat-header-text',
    // Chat button tokens
    'chat-button',
    'chat-button-hover',
    'chat-button-text-hover',
    'chat-button-active',
    'chat-button-selected',
    'chat-button-text-selected',
  ],
});

export const group = TokenGroup.create({
  name: 'All',
  tokens: [
    background,
    layer,
    field,

    // Interactive
    {
      name: 'interactive',
      properties: ['background', 'text'],
    },

    border,
    text,
    link,
    icon,
    support,
    syntaxHighlight,
    ai,

    // Misc
    {
      name: 'highlight',
    },
    {
      name: 'overlay',
      properties: ['background'],
    },
    {
      name: 'color-scheme',
      properties: ['color-scheme'],
    },
    {
      name: 'toggle-off',
    },
    {
      name: 'shadow',
    },

    focus,
    skeleton,
  ],
});