import {
  ThemeDocument,
  ThemeElementStyleProperty,
  ThemeSchemaField
} from '../models/theme.model';

const RADIAL_GRADIENT_EXAMPLE = 'radial-gradient(circle at top, rgba(255,255,255,0.12), ' + 'transparent 60%)';

export const THEME_TOP_LEVEL_FIELDS: readonly ThemeSchemaField[] = [
  {
    key: 'css',
    description: 'Optional raw CSS applied after the theme JSON is active.',
    type: 'string',
    example: '.theme-settings { outline: 1px solid hsl(var(--primary)); }',
    examples: ['.theme-settings { outline: 1px solid hsl(var(--primary)); }']
  },
  {
    key: 'meta',
    description: 'Theme metadata used for naming, versioning, and describing the preset.',
    type: 'object',
    example: '{ "name": "Aurora" }',
    examples: ['{ "name": "Aurora" }']
  },
  {
    key: 'tokens',
    description: 'Global CSS-variable token overrides for colors, spacing, radii, and effects.',
    type: 'object',
    example: '{ "colors": { "background": "220 18% 10%" } }',
    examples: ['{ "colors": { "background": "220 18% 10%" } }']
  },
  {
    key: 'layout',
    description: 'Grid layout entries for registered moveable surfaces.',
    type: 'object',
    example: '{ "dmChatPanel": { "container": "dmLayout", "grid": { "x": 4, "y": 0, "w": 16, "h": 12 } } }',
    examples: ['{ "dmChatPanel": { "container": "dmLayout", "grid": { "x": 4, "y": 0, "w": 16, "h": 12 } } }']
  },
  {
    key: 'elements',
    description: 'Per-element visual overrides such as color, spacing, links, icons, and text.',
    type: 'object',
    example: '{ "titleBar": { "backgroundColor": "rgba(7,11,20,0.84)" } }',
    examples: ['{ "titleBar": { "backgroundColor": "rgba(7,11,20,0.84)" } }']
  },
  {
    key: 'animations',
    description: 'Animation class definitions keyed by class name. Entries can include timing and keyframes.',
    type: 'object',
    example: '{ "theme-fade-in": { "duration": "240ms" } }',
    examples: ['{ "theme-fade-in": { "duration": "240ms" } }']
  }
];

export const THEME_TOKEN_GROUP_FIELDS: readonly ThemeSchemaField[] = [
  {
    key: 'colors',
    description: 'Maps token names such as background or primary to CSS variable values.',
    type: 'object',
    example: '{ "background": "220 18% 10%" }',
    examples: ['{ "background": "220 18% 10%" }']
  },
  {
    key: 'spacing',
    description: 'Custom theme spacing variables exposed as --theme-spacing-* CSS variables.',
    type: 'object',
    example: '{ "panelGap": "12px" }',
    examples: ['{ "panelGap": "12px" }']
  },
  {
    key: 'radii',
    description: 'Theme radius variables exposed as --radius or --theme-radius-* CSS variables.',
    type: 'object',
    example: '{ "radius": "18px" }',
    examples: ['{ "radius": "18px" }']
  },
  {
    key: 'effects',
    description: 'Custom effect variables exposed as --theme-effect-* CSS variables.',
    type: 'object',
    example: '{ "glassBlur": "18px" }',
    examples: ['{ "glassBlur": "18px" }']
  }
];

export const THEME_LAYOUT_FIELDS: readonly ThemeSchemaField[] = [
  {
    key: 'container',
    description: 'The registered layout container that owns this grid item.',
    type: 'string',
    example: 'roomLayout',
    examples: [
      'appShell',
      'roomLayout',
      'dmLayout'
    ]
  },
  {
    key: 'grid',
    description: 'Grid coordinates for the item within its container.',
    type: 'object',
    example: '{ "x": 4, "y": 0, "w": 12, "h": 12 }',
    examples: ['{ "x": 4, "y": 0, "w": 12, "h": 12 }']
  }
];

export const THEME_GRID_FIELDS: readonly ThemeSchemaField[] = [
  {
    key: 'x',
    description: 'Horizontal grid start column, zero-based.',
    type: 'number',
    example: 4,
    examples: [
      0,
      1,
      4
    ]
  },
  {
    key: 'y',
    description: 'Vertical grid start row, zero-based.',
    type: 'number',
    example: 0,
    examples: [
      0,
      1,
      6
    ]
  },
  {
    key: 'w',
    description: 'Grid width in columns.',
    type: 'number',
    example: 12,
    examples: [
      1,
      4,
      12
    ]
  },
  {
    key: 'h',
    description: 'Grid height in rows.',
    type: 'number',
    example: 12,
    examples: [
      1,
      4,
      12
    ]
  }
];

export const THEME_ANIMATION_FIELDS: readonly ThemeSchemaField[] = [
  {
    key: 'duration',
    description: 'Animation duration.',
    type: 'string',
    example: '240ms',
    examples: [
      '200ms',
      '240ms',
      '600ms'
    ]
  },
  {
    key: 'easing',
    description: 'Animation easing function.',
    type: 'string',
    example: 'ease-out',
    examples: [
      'ease',
      'ease-out',
      'cubic-bezier(0.16, 1, 0.3, 1)'
    ]
  },
  {
    key: 'delay',
    description: 'Optional animation delay.',
    type: 'string',
    example: '0ms',
    examples: ['0ms', '120ms']
  },
  {
    key: 'iterationCount',
    description: 'How many times the animation should run.',
    type: 'string',
    example: '1',
    examples: ['1', 'infinite']
  },
  {
    key: 'fillMode',
    description: 'Animation fill behavior after running.',
    type: 'string',
    example: 'both',
    examples: [
      'none',
      'forwards',
      'backwards',
      'both'
    ]
  },
  {
    key: 'direction',
    description: 'Animation direction.',
    type: 'string',
    example: 'normal',
    examples: [
      'normal',
      'reverse',
      'alternate'
    ]
  },
  {
    key: 'keyframes',
    description: 'Optional keyframe map keyed by from, to, or percentages.',
    type: 'object',
    example: '{ "0%": { "opacity": "0" }, "100%": { "opacity": "1" } }',
    examples: ['{ "0%": { "opacity": "0" }, "100%": { "opacity": "1" } }']
  }
];

export const THEME_ELEMENT_STYLE_FIELDS: readonly ThemeSchemaField<ThemeElementStyleProperty>[] = [
  {
    key: 'width',
    description: 'CSS width applied to the selected element host.',
    type: 'string',
    example: '280px',
    examples: [
      '280px',
      '20rem',
      'min(24rem, 30vw)'
    ]
  },
  {
    key: 'height',
    description: 'CSS height applied to the selected element host.',
    type: 'string',
    example: '100%',
    examples: [
      '100%',
      '22rem',
      'calc(100vh - 4rem)'
    ]
  },
  {
    key: 'minWidth',
    description: 'CSS minimum width for the element host.',
    type: 'string',
    example: '16rem',
    examples: ['16rem', '240px']
  },
  {
    key: 'minHeight',
    description: 'CSS minimum height for the element host.',
    type: 'string',
    example: '14rem',
    examples: ['14rem', '200px']
  },
  {
    key: 'maxWidth',
    description: 'CSS maximum width for the element host.',
    type: 'string',
    example: '34rem',
    examples: ['34rem', '80vw']
  },
  {
    key: 'maxHeight',
    description: 'CSS maximum height for the element host.',
    type: 'string',
    example: '90vh',
    examples: ['90vh', '48rem']
  },
  {
    key: 'position',
    description: 'CSS positioning mode for the host element.',
    type: 'string',
    example: 'relative',
    examples: [
      'static',
      'relative',
      'absolute',
      'sticky'
    ]
  },
  {
    key: 'top',
    description: 'CSS top inset used with positioned elements.',
    type: 'string',
    example: '12px',
    examples: [
      '0',
      '12px',
      '2rem'
    ]
  },
  {
    key: 'right',
    description: 'CSS right inset used with positioned elements.',
    type: 'string',
    example: '12px',
    examples: [
      '0',
      '12px',
      '2rem'
    ]
  },
  {
    key: 'bottom',
    description: 'CSS bottom inset used with positioned elements.',
    type: 'string',
    example: '12px',
    examples: [
      '0',
      '12px',
      '2rem'
    ]
  },
  {
    key: 'left',
    description: 'CSS left inset used with positioned elements.',
    type: 'string',
    example: '12px',
    examples: [
      '0',
      '12px',
      '2rem'
    ]
  },
  {
    key: 'opacity',
    description: 'Element opacity between 0 and 1.',
    type: 'number',
    example: 0.96,
    examples: [
      0.72,
      0.88,
      1
    ]
  },
  {
    key: 'padding',
    description: 'CSS padding shorthand for internal spacing.',
    type: 'string',
    example: '12px',
    examples: [
      '12px',
      '12px 16px',
      '1rem 1.25rem'
    ]
  },
  {
    key: 'margin',
    description: 'CSS margin shorthand for external spacing.',
    type: 'string',
    example: '0',
    examples: [
      '0',
      '12px',
      '0 0 12px'
    ]
  },
  {
    key: 'border',
    description: 'CSS border shorthand.',
    type: 'string',
    example: '1px solid rgba(255,255,255,0.08)',
    examples: ['1px solid rgba(255,255,255,0.08)', '0']
  },
  {
    key: 'borderRadius',
    description: 'CSS border radius shorthand.',
    type: 'string',
    example: '16px',
    examples: [
      '12px',
      '16px',
      '999px'
    ]
  },
  {
    key: 'backgroundColor',
    description: 'CSS background-color value.',
    type: 'string',
    example: 'rgba(12, 18, 28, 0.88)',
    examples: ['rgba(12, 18, 28, 0.88)', 'hsl(var(--card))']
  },
  {
    key: 'color',
    description: 'CSS text color value.',
    type: 'string',
    example: 'hsl(var(--foreground))',
    examples: ['hsl(var(--foreground))', '#e8edf4']
  },
  {
    key: 'backgroundImage',
    description: 'CSS background-image value, local image path, or http/https image URL.',
    type: 'string',
    example: '/assets/themes/paper-noise.png',
    examples: [
      '/assets/themes/paper-noise.png',
      'https://example.com/bg.jpg',
      "url('/assets/themes/paper-noise.png')"
    ]
  },
  {
    key: 'backgroundSize',
    description: 'CSS background-size value.',
    type: 'string',
    example: 'cover',
    examples: [
      'cover',
      'contain',
      'auto 100%'
    ]
  },
  {
    key: 'backgroundPosition',
    description: 'CSS background-position value.',
    type: 'string',
    example: 'center',
    examples: [
      'center',
      'top left',
      '50% 20%'
    ]
  },
  {
    key: 'backgroundRepeat',
    description: 'CSS background-repeat value.',
    type: 'string',
    example: 'no-repeat',
    examples: [
      'no-repeat',
      'repeat',
      'repeat-x'
    ]
  },
  {
    key: 'gradient',
    description: 'CSS gradient layered above any background image.',
    type: 'string',
    example: 'linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.72))',
    examples: ['linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.72))', RADIAL_GRADIENT_EXAMPLE]
  },
  {
    key: 'boxShadow',
    description: 'CSS box-shadow value.',
    type: 'string',
    example: '0 18px 45px rgba(0,0,0,0.24)',
    examples: ['0 18px 45px rgba(0,0,0,0.24)', 'none']
  },
  {
    key: 'backdropFilter',
    description: 'CSS backdrop-filter value.',
    type: 'string',
    example: 'blur(18px)',
    examples: ['blur(18px)', 'saturate(140%) blur(12px)']
  },
  {
    key: 'icon',
    description: 'Optional theme icon string or image URL used by supported elements.',
    type: 'string',
    example: "url('/assets/themes/orb.svg')",
    examples: ["url('/assets/themes/orb.svg')", 'TX']
  },
  {
    key: 'textOverride',
    description: 'Replacement text for supported elements.',
    type: 'string',
    example: 'Studio Mode',
    examples: ['Studio Mode', 'Open to your crew']
  },
  {
    key: 'link',
    description: 'Safe http or https URL opened externally when supported elements are clicked.',
    type: 'string',
    example: 'https://example.com',
    examples: ['https://example.com', 'https://toju.app/themes']
  },
  {
    key: 'animationClass',
    description: 'Animation class name defined in the animations section or in app CSS.',
    type: 'string',
    example: 'theme-fade-in',
    examples: ['theme-fade-in', 'theme-glide-in']
  }
];

export const THEME_SCHEMA = {
  topLevel: THEME_TOP_LEVEL_FIELDS,
  tokens: THEME_TOKEN_GROUP_FIELDS,
  layout: THEME_LAYOUT_FIELDS,
  grid: THEME_GRID_FIELDS,
  animation: THEME_ANIMATION_FIELDS,
  elementStyle: THEME_ELEMENT_STYLE_FIELDS
} as const;

export function findThemeElementStyleField(field: string): ThemeSchemaField<ThemeElementStyleProperty> | null {
  return THEME_ELEMENT_STYLE_FIELDS.find((entry) => entry.key === field) ?? null;
}

export function getSuggestedValueOptions(
  field: ThemeElementStyleProperty | string,
  animationKeys: readonly string[] = []
): readonly (string | number)[] {
  if (field === 'animationClass' && animationKeys.length > 0) {
    return animationKeys;
  }

  return findThemeElementStyleField(field)?.examples ?? [];
}

export function getSuggestedFieldDefault(field: ThemeElementStyleProperty, animationKeys: readonly string[] = []): string | number {
  return getSuggestedValueOptions(field, animationKeys)[0] ?? '';
}

export function createAnimationStarterDefinition(): ThemeDocument['animations'][string] {
  return {
    duration: '240ms',
    easing: 'ease-out',
    delay: '0ms',
    iterationCount: '1',
    fillMode: 'both',
    direction: 'normal',
    keyframes: {
      '0%': {
        opacity: '0',
        transform: 'translateY(10px)'
      },
      '100%': {
        opacity: '1',
        transform: 'translateY(0)'
      }
    }
  };
}
