export type BackgroundType = 
  | 'solid' 
  | 'linear-gradient' 
  | 'radial-gradient' 
  | 'conic-gradient'
  | 'pattern' 
  | 'image' 
  | 'animated' 
  | 'mesh' 
  | 'noise'
  | 'glass';

export type PatternType = 
  | 'dots'
  | 'grid'
  | 'stripes'
  | 'diagonal-stripes'
  | 'chevron'
  | 'waves'
  | 'hexagon'
  | 'triangles'
  | 'checkerboard'
  | 'circles'
  | 'crosshatch'
  | 'polka-dots';

export type GradientDirection = 
  | 'to-top'
  | 'to-top-right' 
  | 'to-right'
  | 'to-bottom-right'
  | 'to-bottom'
  | 'to-bottom-left'
  | 'to-left'
  | 'to-top-left';

export interface ColorStop {
  color: string;
  position?: string | number;
}

export interface SolidBackgroundConfig {
  type: 'solid';
  color: string;
}

export interface LinearGradientConfig {
  type: 'linear-gradient';
  direction?: GradientDirection | string;
  colors: ColorStop[];
}

export interface RadialGradientConfig {
  type: 'radial-gradient';
  shape?: 'circle' | 'ellipse';
  size?: 'closest-side' | 'closest-corner' | 'farthest-side' | 'farthest-corner';
  position?: string;
  colors: ColorStop[];
}

export interface ConicGradientConfig {
  type: 'conic-gradient';
  angle?: string | number;
  position?: string;
  colors: ColorStop[];
}

export interface PatternConfig {
  type: 'pattern';
  pattern: PatternType;
  primaryColor?: string;
  secondaryColor?: string;
  size?: string | number;
  opacity?: number;
}

export interface ImageBackgroundConfig {
  type: 'image';
  url: string;
  size?: 'auto' | 'cover' | 'contain' | string;
  position?: string;
  repeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
  attachment?: 'scroll' | 'fixed' | 'local';
  opacity?: number;
}

export interface AnimatedBackgroundConfig {
  type: 'animated';
  baseConfig: LinearGradientConfig | RadialGradientConfig | ConicGradientConfig | PatternConfig;
  duration?: string;
  timing?: string;
  iteration?: 'infinite' | number;
}

export interface MeshGradientConfig {
  type: 'mesh';
  colors: string[];
  complexity?: 'low' | 'medium' | 'high';
  seed?: number;
}

export interface NoiseConfig {
  type: 'noise';
  baseColor?: string;
  intensity?: number;
  scale?: number;
  opacity?: number;
}

export interface GlassConfig {
  type: 'glass';
  backdrop?: 'blur' | 'saturate' | 'both';
  intensity?: number;
  tint?: string;
  opacity?: number;
}

export type BackgroundConfig = 
  | SolidBackgroundConfig
  | LinearGradientConfig
  | RadialGradientConfig
  | ConicGradientConfig
  | PatternConfig
  | ImageBackgroundConfig
  | AnimatedBackgroundConfig
  | MeshGradientConfig
  | NoiseConfig
  | GlassConfig;

export interface BackgroundOptions {
  config: BackgroundConfig;
  zIndex?: number;
  fullScreen?: boolean;
  responsive?: boolean;
  className?: string;
}

export interface BackgroundState {
  active: boolean;
  config?: BackgroundConfig;
  element?: HTMLElement;
}