import type { TokenResolver } from '../../tokens/resolver';
import type { ButtonPreset } from '../presets/types';
import type { ButtonVariant } from '../types';
import type { Theme } from '../../schema';
import type { InteractiveElementConfig } from '../../interactive/types';
import type { InteractiveElementType } from '../../interactive/types';
/**
 * Valid effect preset IDs
 *
 * This union type ensures type safety when referencing effects in button variants.
 * If you add a new effect to the registry, add its ID here.
 */
export type EffectId = 'darken-background' | 'lighten-background' | 'fade-background' | 'opacity-reduce' | 'animated-gradient' | 'background-on-hover' | 'background-on-hover-alpha' | 'border-glow' | 'drop-shadow' | 'inner-shadow' | 'neumorphic-shadow' | 'outer-glow' | 'retro-3d-shadow' | 'scale-up' | 'scale-down' | 'lift' | 'press-down' | 'pop' | 'aurora-glow' | 'cosmic-stardust' | 'gradient-border-fill' | 'animated-gradient-border-fill' | 'border-bottom-grow' | 'gradient-text' | 'text-color-change' | 'border-color-change' | 'sketchy-border' | 'pulse-animation' | 'nav-underline' | 'nav-frosted-base' | 'nav-frosted-hover' | 'nav-frosted-active';
/**
 * Effect category - determines which CSS properties an effect can modify
 *
 * Only one effect per category is allowed per state to prevent conflicts.
 */
export type EffectCategory = 'background' | 'shadow' | 'transform' | 'border' | 'overlay' | 'text' | 'animation';
/**
 * State group - determines when an effect is applied
 *
 * - base: Always applied (for persistent effects like cosmic glow)
 * - hover: Applied on :hover
 * - active: Applied on :active
 * - focus: Applied on :focus
 */
export type StateGroup = 'base' | 'hover' | 'active' | 'focus';
/**
 * Context passed to effect preset's generateCSS function
 */
export interface EffectContext {
    /** Theme ID for scoping CSS */
    themeId: string;
    /** Button variant ID for scoping CSS */
    variantId: string;
    /** Which state group this effect is part of (base, hover, active, focus) */
    stateGroup: StateGroup;
    /** User-provided customization options */
    options: Record<string, unknown>;
    /** Element configuration (access to background, colors, etc.) */
    buttonConfig: ButtonVariant | ButtonPreset | InteractiveElementConfig;
    /** Token resolver for converting tokens to CSS vars */
    tokens: TokenResolver;
    /** Theme configuration (for accessing theme-level settings like shadows) */
    theme: Theme;
}
/**
 * Customizable option type
 */
export type OptionType = 'colorToken' | 'number' | 'percentage' | 'select';
/**
 * Definition for a customizable option on an effect preset
 *
 * MVP: Only ONE customizable option per preset
 */
export interface CustomizableOption {
    /** Option name (used as key in options object) */
    name: string;
    /** Option type (determines UI widget) */
    type: OptionType;
    /** Label shown in UI */
    label: string;
    /** Default value */
    default: unknown;
    /** For 'select' type: available choices */
    options?: unknown[];
}
/**
 * Effect preset - a reusable CSS generator for button effects
 *
 * Effect presets are composable building blocks that can be combined to create complex button styles.
 * They must use theme tokens (not hardcoded colors) and declare which category they belong to.
 */
export interface EffectPreset {
    /** Unique identifier */
    id: string;
    /** Display name */
    name: string;
    /** Description of what this effect does */
    description: string;
    /** Effect category (determines which CSS properties it can modify) */
    category: EffectCategory;
    /**
     * Which pseudo-element this effect uses (for overlay effects)
     *
     * Only one effect per pseudo-element is allowed per button.
     */
    pseudoElement?: 'before' | 'after' | 'none';
    /**
     * Which interactive element types can use this effect
     *
     * If undefined, the effect is assumed to work with all element types (backward compatible).
     * Use this to restrict effects that only make sense for certain elements.
     *
     * Examples:
     * - 'button' only: darken-background, lighten-background (require solid background)
     * - 'nav-link' only: nav-underline, nav-frosted
     * - both: scale-up, border-glow, text-color-change
     */
    applicableTo?: InteractiveElementType[];
    /**
     * Customizable option (MVP: only one per preset)
     *
     * This allows users to customize the effect without breaking the design.
     */
    customizableOption?: CustomizableOption;
    /**
     * Generate CSS for this effect
     *
     * The effect can generate CSS for:
     * - Base state (always applied)
     * - State-specific (:hover, :active, :focus)
     * - Keyframe animations
     *
     * All CSS must be scoped to [data-theme-scope] and [data-button-variant].
     *
     * @param ctx - Effect context with tokens, button config, options
     * @returns CSS string (or empty string if effect doesn't apply to this button)
     */
    generateCSS: (ctx: EffectContext) => string;
    /**
     * Check if this effect is applicable to the given button configuration
     *
     * For example, 'darken-background' only works with solid backgrounds.
     *
     * @param buttonConfig - Button configuration (ButtonVariant or ButtonPreset)
     * @returns True if effect can be applied to this button
     */
    isApplicable?: (buttonConfig: ButtonVariant | ButtonPreset) => boolean;
}
/**
 * Reference to an effect preset with customization options
 *
 * This is what's stored in ButtonPreset.effects and ButtonVariant.effects
 */
export interface EffectReference {
    /** Effect preset ID (type-safe) */
    effectId: EffectId;
    /** User-provided customization options */
    options?: Record<string, unknown>;
}
