import * as React from 'react';

export interface DeviceScale {
  width: number;
  height: number;
  pixels: {
    width: number;
    height: number;
  };
}

export interface ScreenResponsive {
  width: number;
  breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | string;
}

export interface DirectionState {
  direction: 'ltr' | 'rtl' | string;
  toggleDirection: () => void;
}

export interface UBDebugInfo {
  classCache: number;
  styleCount: number;
  totalRequests: number;
  cacheHits: number;
  totalSegmentRequests: number;
  version: string;
}

// React Hooks
export function useDirection(): DirectionState;
export function useResponsive(): ScreenResponsive;
export function useDeviceScale(): DeviceScale;

// Core Engine Functions
export function ub(str: any): string;
export function debugUB(): UBDebugInfo;
export function clearUBCache(): void;
export function oklch(
  name: 'red' | 'blue' | 'green' | 'purple' | 'orange' | 'pink' | 'teal' | 'amber' | 'gray' | string,
  shade: number,
  darkMode?: boolean
): string;

// Layout & Style Helpers
export function p(v: string | number): string;
export function m(v: string | number): string;
export function pl(v: string | number): string;
export function pr(v: string | number): string;
export function ml(v: string | number): string;
export function mr(v: string | number): string;
export function pt(v: string | number): string;
export function pb(v: string | number): string;
export function mt(v: string | number): string;
export function mb(v: string | number): string;
export function w(v: string | number): string;
export function h(v: string | number): string;
export function scale(v: string | number): string;

// Border Helpers
export function border(v?: string | number): string;
export function borderT(v?: string | number): string;
export function borderR(v?: string | number): string;
export function borderB(v?: string | number): string;
export function borderL(v?: string | number): string;
export function borderX(v?: string | number): string;
export function borderY(v?: string | number): string;

// Styling Modifiers
export function rounded(v: 'full' | string | number): string;
export function shadow(v: string | number): string;
export function opacity(v: string | number): string;

// Flex & Grid Layout Helpers
export function bg(c: string, s: string | number, o?: string | number): string;
export function text(c: string, s: string | number, o?: string | number): string;
export function grid(cols: number | string, rows: number | string, gap: number | string): string;
export function autoGrid(minWidth: number | string, gap: number | string): string;
export function autoLayout(
  direction: 'row' | 'col' | 'wrap' | string,
  alignment: 'left' | 'right' | 'center' | 'between' | 'around' | 'evenly' | 'start' | 'end' | 'stretch' | string,
  gap?: number | string
): string;
export function span(n: number | string): string;
export function row(n: number | string): string;
export function bgFill(
  direction: 'left' | 'right' | 'top' | 'bottom' | string,
  color: string,
  shade: number | string,
  duration: number | string
): string;

// Component Classes Dictionaries
export const btn: {
  base: string;
  sm: string;
  md: string;
  lg: string;
  primary: string;
  secondary: string;
  success: string;
  danger: string;
  warning: string;
  outline: string;
  ghost: string;
  glow: string;
};

export const input: {
  base: string;
  sm: string;
  md: string;
  lg: string;
  error: string;
  success: string;
};

export const card: {
  base: string;
  hover: string;
  click: string;
  glass: string;
};

// Gradient Helpers
export function gradient(fromColor: string, fromShade: number | string, toColor: string, toShade: number | string): string;
export function gradientAngle(angle: number | string, fromColor: string, fromShade: number | string, toColor: string, toShade: number | string): string;
export function gradientVertical(fromColor: string, fromShade: number | string, toColor: string, toShade: number | string): string;
export function gradientHorizontal(fromColor: string, fromShade: number | string, toColor: string, toShade: number | string): string;
export function gradientRadial(fromColor: string, fromShade: number | string, toColor: string, toShade: number | string): string;
export function gradientTriple(c1: string, s1: number | string, c2: string, s2: number | string, c3: string, s3: number | string): string;

/** Color name type for glass helpers */
export type GlassColor = 'red' | 'blue' | 'green' | 'purple' | 'orange' | 'pink' | 'teal' | 'amber' | 'gray' | string;
/** Shade value 0-255 */
export type GlassShade = number;
/** Opacity value 0-255 */
export type GlassOpacity = number;

// ============================================================
// GLASS HELPERS — World-Class Dynamic Glass Gradient System
// ============================================================
/**
 * Generate a dynamic glassmorphism class with 1-3 color stops.
 * @param c1 First color name
 * @param s1 First color shade (0-255)
 * @param c2 Second color name or glass opacity
 * @param s2 Second color shade (0-255) (optional)
 * @param c3 Third color name or glass opacity (optional)
 * @param s3 Third color shade (optional)
 * @param o Glass opacity (optional)
 * @example ub(glass('red', 180, 'purple', 100, 20))
 */
export function glass(c1: GlassColor, s1: GlassShade, c2: GlassColor | GlassOpacity, s2?: GlassShade, c3?: GlassColor | GlassOpacity, s3?: GlassShade, o?: GlassOpacity): string;

/** Vertical (top→bottom) gradient glassmorphism. */
export function glassVert(c1: GlassColor, s1: GlassShade, c2: GlassColor | GlassOpacity, s2?: GlassShade, c3?: GlassColor | GlassOpacity, s3?: GlassShade, o?: GlassOpacity): string;

/** Horizontal (left→right) gradient glassmorphism. */
export function glassHoriz(c1: GlassColor, s1: GlassShade, c2: GlassColor | GlassOpacity, s2?: GlassShade, c3?: GlassColor | GlassOpacity, s3?: GlassShade, o?: GlassOpacity): string;

/** Radial (center glow) gradient glassmorphism. */
export function glassRadial(c1: GlassColor, s1: GlassShade, c2: GlassColor | GlassOpacity, s2?: GlassShade, o?: GlassOpacity): string;

// Animation Helpers
export function animate(prop: string, from: number | string, to: number | string, duration: number | string, infinite?: boolean): string;
export function widthAnim(from: number | string, to: number | string, duration: number | string, infinite?: boolean): string;
export function heightAnim(from: number | string, to: number | string, duration: number | string, infinite?: boolean): string;
export function paddingAnim(from: number | string, to: number | string, duration: number | string, infinite?: boolean): string;
export function marginAnim(from: number | string, to: number | string, duration: number | string, infinite?: boolean): string;
export function bgAnim(fromColor: string, fromShade: number | string, toColor: string, toShade: number | string, duration: number | string, infinite?: boolean): string;
export function opacityAnim(from: number | string, to: number | string, duration: number | string, infinite?: boolean): string;
export function roundedAnim(from: number | string, to: number | string, duration: number | string, infinite?: boolean): string;
export function scaleAnim(from: number | string, to: number | string, duration: number | string, infinite?: boolean): string;
export function infiniteAnim(prop: string, from: number | string, to: number | string, duration: number | string): string;
export function clickAnim(prop: string, from: number | string, to: number | string, duration: number | string): string;

// ============================================================
// ============================================================
// MAPPING HELPER — Universal Value to 0-255 Scale Mapping
// ============================================================

export interface ColorStop {
  at: number;
  color: string;
}

/**
 * Universal map() function - Maps any input range to 0-255 scale
 * Works for colors, width, height, padding, opacity, scale, etc.
 * 
 * @param value - Current value
 * @param min - Minimum value of input range
 * @param max - Maximum value of input range
 * @param config - Property type (w/h/p/m/opacity/scale), color name, or color array
 * @returns ub class string or normalized value
 * 
 * @examples
 * // Single color
 * map(28, 0, 50, 'red')                    // → 'red-142'
 * 
 * // Multi-color gradient
 * map(75, 0, 100, ['red', 'orange', 'green']) // → 'green-191'
 * 
 * // Width/Height
 * map(500, 0, 1000, 'w')                   // → 'w-128' (→ 512px)
 * map(300, 0, 600, 'h')                    // → 'h-128' (→ 512px)
 * 
 * // Spacing
 * map(20, 0, 40, 'p')                      // → 'p-128' (→ 512px padding)
 * map(10, 0, 20, 'm')                      // → 'm-128' (→ 512px margin)
 * 
 * // Opacity
 * map(50, 0, 100, 'opacity')               // → 'opacity-128' (50% opacity)
 * 
 * // Scale
 * map(150, 0, 200, 'scale')                // → 'scale-191' (1.91x scale)
 * 
 * // Custom color stops
 * map(50, 0, 100, [
 *   { at: 0, color: 'blue' },
 *   { at: 128, color: 'purple' },
 *   { at: 255, color: 'red' }
 * ])                                       // → 'purple-128'
 * 
 * // Raw normalized value (no config)
 * map(50, 0, 100)                          // → 128
 */
export function map(value: number, min: number, max: number): number;
export function map(value: number, min: number, max: number, config: 'w' | 'h' | 'width' | 'height' | 'p' | 'padding' | 'pt' | 'pb' | 'pl' | 'pr' | 'm' | 'margin' | 'mt' | 'mb' | 'ml' | 'mr' | 'gap' | 'opacity' | 'scale' | 'border'): string;
export function map(value: number, min: number, max: number, config: string): string;
export function map(value: number, min: number, max: number, config: string[]): string;
export function map(value: number, min: number, max: number, config: ColorStop[]): string;