import React, { forwardRef, ForwardedRef, ElementType } from 'react';

/**
 * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
 * 
 * Box is a basic container primitive for spacing, sizing and basic layout.
 * 
 * - DO NOT add decoration props (bg, border, shadow) - use Surface instead.
 * - DO NOT add positioning props (absolute, top, zIndex) - create a specific component.
 * - DO NOT add animation props - create a specific component.
 * 
 * If you need more complex behavior, create a specific component in apps/website/components.
 */

export type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | string;

interface ResponsiveSpacing {
  base?: Spacing;
  sm?: Spacing;
  md?: Spacing;
  lg?: Spacing;
  xl?: Spacing;
}

export type ResponsiveValue<T> = {
  base?: T;
  sm?: T;
  md?: T;
  lg?: T;
  xl?: T;
  '2xl'?: T;
};

export interface BoxProps<T extends ElementType> {
  as?: T;
  children?: React.ReactNode;
  // Spacing
  margin?: Spacing | ResponsiveSpacing;
  marginTop?: Spacing | 'auto' | ResponsiveSpacing;
  marginBottom?: Spacing | 'auto' | ResponsiveSpacing;
  marginLeft?: Spacing | 'auto' | ResponsiveSpacing;
  marginRight?: Spacing | 'auto' | ResponsiveSpacing;
  marginX?: Spacing | 'auto' | ResponsiveSpacing;
  marginY?: Spacing | 'auto' | ResponsiveSpacing;
  padding?: Spacing | ResponsiveSpacing;
  paddingTop?: Spacing | ResponsiveSpacing;
  paddingBottom?: Spacing | ResponsiveSpacing;
  paddingLeft?: Spacing | ResponsiveSpacing;
  paddingRight?: Spacing | ResponsiveSpacing;
  paddingX?: Spacing | ResponsiveSpacing;
  paddingY?: Spacing | ResponsiveSpacing;
  
  // Aliases (Deprecated - use full names)
  m?: Spacing | ResponsiveSpacing;
  mt?: Spacing | 'auto' | ResponsiveSpacing;
  mb?: Spacing | 'auto' | ResponsiveSpacing;
  ml?: Spacing | 'auto' | ResponsiveSpacing;
  mr?: Spacing | 'auto' | ResponsiveSpacing;
  mx?: Spacing | 'auto' | ResponsiveSpacing;
  my?: Spacing | 'auto' | ResponsiveSpacing;
  p?: Spacing | ResponsiveSpacing;
  pt?: Spacing | ResponsiveSpacing;
  pb?: Spacing | ResponsiveSpacing;
  pl?: Spacing | ResponsiveSpacing;
  pr?: Spacing | ResponsiveSpacing;
  px?: Spacing | ResponsiveSpacing;
  py?: Spacing | ResponsiveSpacing;

  // Sizing
  width?: string | number | ResponsiveValue<string | number>;
  height?: string | number | ResponsiveValue<string | number>;
  maxWidth?: string | ResponsiveValue<string>;
  minWidth?: string | ResponsiveValue<string>;
  maxHeight?: string | ResponsiveValue<string>;
  minHeight?: string | ResponsiveValue<string>;
  fullWidth?: boolean;
  fullHeight?: boolean;
  aspectRatio?: string;
  
  // Aliases
  w?: string | number | ResponsiveValue<string | number>;
  h?: string | number | ResponsiveValue<string | number>;

  // Display
  display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | string | ResponsiveValue<'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | string | any>;
  center?: boolean;
  overflow?: 'auto' | 'hidden' | 'visible' | 'scroll' | string;
  overflowX?: 'auto' | 'hidden' | 'visible' | 'scroll';
  overflowY?: 'auto' | 'hidden' | 'visible' | 'scroll';
  textAlign?: 'left' | 'center' | 'right' | 'justify' | string;
  visibility?: 'visible' | 'hidden' | 'collapse';
  // Positioning
  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
  top?: string | number | ResponsiveValue<string | number>;
  right?: string | number | ResponsiveValue<string | number>;
  bottom?: string | number | ResponsiveValue<string | number>;
  left?: string | number | ResponsiveValue<string | number>;
  inset?: string | number;
  insetY?: string | number;
  insetX?: string | number;
  zIndex?: number;
  // Flex/Grid Item props
  flex?: number | string;
  flexShrink?: number;
  flexGrow?: number;
  flexDirection?: 'row' | 'row-reverse' | 'col' | 'col-reverse' | string | ResponsiveValue<string>;
  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | string;
  alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' | string | ResponsiveValue<string>;
  justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | string | ResponsiveValue<string>;
  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline';
  gap?: number | string | ResponsiveValue<number | string>;
  gridCols?: number | ResponsiveValue<number>;
  colSpan?: number | ResponsiveValue<number>;
  order?: number | string | ResponsiveValue<number | string>;
  // Interaction
  onClick?: React.MouseEventHandler<any>;
  onMouseEnter?: React.MouseEventHandler<any>;
  onMouseLeave?: React.MouseEventHandler<any>;
  id?: string;
  role?: React.AriaRole;
  tabIndex?: number;
  // Internal use only
  borderTop?: string | boolean;
  borderBottom?: string | boolean;
  borderLeft?: string | boolean;
  borderRight?: string | boolean;
  bg?: string;
  rounded?: string | boolean;
  borderColor?: string;
  border?: string | boolean;
  color?: string;
  opacity?: number;
  transition?: any;
  hoverBg?: string;
  group?: boolean;
  groupHoverOpacity?: number;
  groupHoverBorderColor?: string;
  groupHoverWidth?: string;
  animate?: any;
  blur?: string;
  backdropBlur?: string;
  pointerEvents?: string;
  bgOpacity?: number;
  borderWidth?: string | number;
  borderStyle?: string;
  initial?: any;
  variants?: any;
  whileHover?: any;
  whileTap?: any;
  onHoverStart?: any;
  onHoverEnd?: any;
  whileInView?: any;
  viewport?: any;
  custom?: any;
  exit?: any;
  translateX?: string;
  translateY?: string;
  translate?: string;
  rotate?: string;
  scale?: string | number;
  perspective?: string | number;
  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap';
  cursor?: string;
  fontSize?: string | ResponsiveValue<string>;
  fontWeight?: string | number;
  weight?: string | number;
  letterSpacing?: string;
  lineHeight?: string | number;
  font?: string;
  ring?: string;
  hideScrollbar?: boolean;
  truncate?: boolean;
  src?: string;
  alt?: string;
  draggable?: boolean | string;
  min?: string | number;
  max?: string | number;
  step?: string | number;
  value?: string | number;
  onChange?: React.ChangeEventHandler<any>;
  onError?: React.ReactEventHandler<any>;
  onScroll?: React.UIEventHandler<any>;
  onDragOver?: React.DragEventHandler<any>;
  onDragLeave?: React.DragEventHandler<any>;
  onDrop?: React.DragEventHandler<any>;
  placeholder?: string;
  title?: string;
  size?: string | number | ResponsiveValue<string | number>;
  accept?: string;
  multiple?: boolean;
  autoPlay?: boolean;
  loop?: boolean;
  muted?: boolean;
  playsInline?: boolean;
  objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
  type?: string;
  checked?: boolean;
  disabled?: boolean;
  onSubmit?: React.FormEventHandler<any>;
  onBlur?: React.FocusEventHandler<any>;
  onKeyDown?: React.KeyboardEventHandler<any>;
  onMouseDown?: React.MouseEventHandler<any>;
  onMouseUp?: React.MouseEventHandler<any>;
  onMouseMove?: React.MouseEventHandler<any>;
  responsiveColSpan?: number | ResponsiveValue<number>;
  responsiveGridCols?: number | ResponsiveValue<number>;
  clickable?: boolean;
  hoverScale?: boolean | number;
  hoverBorderColor?: string;
  hoverTextColor?: string;
  groupHoverScale?: boolean;
  groupHoverTextColor?: string;
  shadow?: string;
  transform?: boolean | string;
  lineClamp?: number;
  fill?: string | boolean;
  viewBox?: string;
  stroke?: string;
  strokeWidth?: string | number;
  backgroundSize?: string;
  backgroundPosition?: string;
  backgroundImage?: string;
  htmlFor?: string;
  minH?: string | number | ResponsiveValue<string | number>;
  borderOpacity?: number;
  rows?: number;
  backgroundColor?: string;
  outline?: string;
  focusBorderColor?: string;
  href?: string;
  name?: string;
  borderTopColor?: string;
  onPointerDown?: React.PointerEventHandler<any>;
  onPointerMove?: React.PointerEventHandler<any>;
  onPointerUp?: React.PointerEventHandler<any>;
  /** @deprecated DO NOT USE. Use semantic props instead. */
  className?: string;
  /** @deprecated DO NOT USE. Use semantic props instead. */
  style?: React.CSSProperties;
}

export const Box = forwardRef(<T extends ElementType = 'div'>(
  { 
    as, 
    children, 
    margin, marginTop, marginBottom, marginLeft, marginRight, marginX, marginY,
    padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingX, paddingY,
    m, mt, mb, ml, mr, mx, my,
    p, pt, pb, pl, pr, px, py,
    width, height,
    w, h,
    maxWidth, minWidth, maxHeight, minHeight,
    fullWidth, fullHeight,
    aspectRatio,
    display,
    center,
    overflow, overflowX, overflowY,
    textAlign,
    visibility,
    position,
    top, right, bottom, left,
    inset, insetY, insetX,
    zIndex,
    flex,
    flexShrink,
    flexGrow,
    flexDirection,
    flexWrap,
    alignItems,
    justifyContent,
    alignSelf,
    gap,
    gridCols,
    colSpan,
    order,
    onClick,
    onMouseEnter,
    onMouseLeave,
    id,
    role,
    tabIndex,
    style: styleProp,
    className,
    borderTop,
    borderBottom,
    borderLeft,
    borderRight,
    bg,
    rounded,
    borderColor,
    border,
    color,
    opacity,
    transition,
    hoverBg,
    group,
    groupHoverOpacity,
    groupHoverBorderColor,
    groupHoverWidth,
    animate,
    blur,
    backdropBlur,
    pointerEvents,
    bgOpacity,
    borderWidth,
    borderStyle,
    initial,
    variants,
    whileHover,
    whileTap,
    onHoverStart,
    onHoverEnd,
    whileInView,
    viewport,
    custom,
    exit,
    translateX,
    translateY,
    translate,
    rotate,
    scale,
    perspective,
    whiteSpace,
    cursor,
    fontSize,
    fontWeight,
    weight,
    letterSpacing,
    lineHeight,
    font,
    ring,
    hideScrollbar,
    truncate,
    src,
    alt,
    draggable,
    min,
    max,
    step,
    value,
    onChange,
    onError,
    onScroll,
    onDragOver,
    onDragLeave,
    onDrop,
    placeholder,
    title,
    size,
    accept,
    multiple,
    autoPlay,
    loop,
    muted,
    playsInline,
    objectFit,
    type,
    checked,
    disabled,
    onSubmit,
    onBlur,
    onKeyDown,
    onMouseDown,
    onMouseUp,
    onMouseMove,
    responsiveColSpan,
    responsiveGridCols,
    clickable,
    hoverScale,
    hoverBorderColor,
    hoverTextColor,
    groupHoverScale,
    groupHoverTextColor,
    shadow,
    transform,
    lineClamp,
    fill,
    viewBox,
    stroke,
    strokeWidth,
    backgroundSize,
    backgroundPosition,
    backgroundImage,
    htmlFor,
    minH,
    borderOpacity,
    rows,
    backgroundColor,
    outline,
    focusBorderColor,
    href,
    name,
    borderTopColor,
    onPointerDown,
    onPointerMove,
    onPointerUp,
    ...props 
  }: BoxProps<T>,
  ref: ForwardedRef<HTMLElement>
) => {
  const Tag = (as as ElementType) || 'div';
  
  const spacingMap: Record<string | number, string> = {
    0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
    5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
    16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
    48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96',
    'auto': 'auto',
    'none': '0',
    'xs': '2',
    'sm': '4',
    'md': '6',
    'lg': '8',
    'xl': '12'
  };

  const getSpacingClass = (prefix: string, value: Spacing | 'auto' | ResponsiveSpacing | undefined) => {
    if (value === undefined) return '';
    if (typeof value === 'object') {
      const classes = [];
      if (value.base !== undefined) classes.push(`${prefix}-${spacingMap[value.base]}`);
      if (value.sm !== undefined) classes.push(`sm:${prefix}-${spacingMap[value.sm]}`);
      if (value.md !== undefined) classes.push(`md:${prefix}-${spacingMap[value.md]}`);
      if (value.lg !== undefined) classes.push(`lg:${prefix}-${spacingMap[value.lg]}`);
      if (value.xl !== undefined) classes.push(`xl:${prefix}-${spacingMap[value.xl]}`);
      return classes.join(' ');
    }
    return `${prefix}-${spacingMap[value]}`;
  };

  const getResponsiveClasses = (prefix: string, value: any | ResponsiveValue<any> | undefined) => {
    if (value === undefined) return '';
    if (typeof value === 'object') {
      const classes = [];
      if (value.base !== undefined) classes.push(prefix ? `${prefix}-${value.base}` : String(value.base));
      if (value.sm !== undefined) classes.push(prefix ? `sm:${prefix}-${value.sm}` : `sm:${value.sm}`);
      if (value.md !== undefined) classes.push(prefix ? `md:${prefix}-${value.md}` : `md:${value.md}`);
      if (value.lg !== undefined) classes.push(prefix ? `lg:${prefix}-${value.lg}` : `lg:${value.lg}`);
      if (value.xl !== undefined) classes.push(prefix ? `xl:${prefix}-${value.xl}` : `xl:${value.xl}`);
      if (value['2xl'] !== undefined) classes.push(prefix ? `2xl:${prefix}-${value['2xl']}` : `2xl:${value['2xl']}`);
      return classes.join(' ');
    }
    return prefix ? `${prefix}-${value}` : String(value);
  };

  const classes = [
    getSpacingClass('m', margin || m),
    getSpacingClass('mt', marginTop || mt),
    getSpacingClass('mb', marginBottom || mb),
    getSpacingClass('ml', marginLeft || ml),
    getSpacingClass('mr', marginRight || mr),
    getSpacingClass('mx', marginX || mx),
    getSpacingClass('my', marginY || my),
    getSpacingClass('p', padding || p),
    getSpacingClass('pt', paddingTop || pt),
    getSpacingClass('pb', paddingBottom || pb),
    getSpacingClass('pl', paddingLeft || pl),
    getSpacingClass('pr', paddingRight || pr),
    getSpacingClass('px', paddingX || px),
    getSpacingClass('py', paddingY || py),
    fullWidth ? 'w-full' : getResponsiveClasses('w', width || w),
    fullHeight ? 'h-full' : getResponsiveClasses('h', height || h),
    getResponsiveClasses('max-w', maxWidth),
    getResponsiveClasses('min-w', minWidth),
    getResponsiveClasses('max-h', maxHeight),
    getResponsiveClasses('min-h', minHeight || minH),
    getResponsiveClasses('', display),
    center ? 'flex items-center justify-center' : '',
    overflow ? (overflow.includes(':') ? overflow : `overflow-${overflow}`) : '',
    overflowX ? `overflow-x-${overflowX}` : '',
    overflowY ? `overflow-y-${overflowY}` : '',
    textAlign ? `text-${textAlign}` : '',
    visibility ? visibility : '',
    position ? position : '',
    getResponsiveClasses('top', top),
    getResponsiveClasses('right', right),
    getResponsiveClasses('bottom', bottom),
    getResponsiveClasses('left', left),
    inset !== undefined ? `inset-${inset}` : '',
    insetY !== undefined ? `inset-y-${insetY}` : '',
    insetX !== undefined ? `inset-x-${insetX}` : '',
    zIndex !== undefined ? `z-${zIndex}` : '',
    flex !== undefined ? `flex-${flex}` : '',
    flexShrink !== undefined ? `flex-shrink-${flexShrink}` : '',
    flexGrow !== undefined ? `flex-grow-${flexGrow}` : '',
    getResponsiveClasses('flex', flexDirection),
    flexWrap ? `flex-${flexWrap}` : '',
    getResponsiveClasses('items', alignItems),
    getResponsiveClasses('justify', justifyContent),
    alignSelf !== undefined ? `self-${alignSelf}` : '',
    gap ? getResponsiveClasses('gap', gap) : '',
    getResponsiveClasses('grid-cols', gridCols || responsiveGridCols),
    getResponsiveClasses('col-span', colSpan || responsiveColSpan),
    getResponsiveClasses('order', order),
    group ? 'group' : '',
    animate === 'spin' ? 'animate-spin' : (animate === 'pulse' ? 'animate-pulse' : ''),
    blur ? `blur-${blur}` : '',
    backdropBlur ? `backdrop-blur-${backdropBlur}` : '',
    pointerEvents ? `pointer-events-${pointerEvents}` : '',
    hideScrollbar ? 'scrollbar-hide' : '',
    truncate ? 'truncate' : '',
    clickable ? 'cursor-pointer' : '',
    lineClamp ? `line-clamp-${lineClamp}` : '',
    (bg || backgroundColor)?.startsWith('bg-') ? (bg || backgroundColor) : '',
    borderColor?.startsWith('border-') ? borderColor : '',
    color?.startsWith('text-') ? color : '',
    className
  ].filter(Boolean).join(' ');

  const style: React.CSSProperties = {
    ...(typeof width === 'string' || typeof width === 'number' ? { width } : {}),
    ...(typeof height === 'string' || typeof height === 'number' ? { height } : {}),
    ...(typeof maxWidth === 'string' ? { maxWidth } : {}),
    ...(typeof minWidth === 'string' ? { minWidth } : {}),
    ...(typeof maxHeight === 'string' ? { maxHeight } : {}),
    ...(typeof minHeight === 'string' ? { minHeight } : {}),
    ...(typeof minH === 'string' || typeof minH === 'number' ? { minHeight: minH } : {}),
    ...(aspectRatio ? { aspectRatio } : {}),
    ...(typeof top === 'string' || typeof top === 'number' ? { top } : {}),
    ...(typeof right === 'string' || typeof right === 'number' ? { right } : {}),
    ...(typeof bottom === 'string' || typeof bottom === 'number' ? { bottom } : {}),
    ...(typeof left === 'string' || typeof left === 'number' ? { left } : {}),
    ...(typeof borderTop === 'string' ? { borderTop } : (borderTop === true ? { borderTop: '1px solid var(--ui-color-border-default)' } : {})),
    ...(typeof borderBottom === 'string' ? { borderBottom } : (borderBottom === true ? { borderBottom: '1px solid var(--ui-color-border-default)' } : {})),
    ...(typeof borderLeft === 'string' ? { borderLeft } : (borderLeft === true ? { borderLeft: '1px solid var(--ui-color-border-default)' } : {})),
    ...(typeof borderRight === 'string' ? { borderRight } : (borderRight === true ? { borderRight: '1px solid var(--ui-color-border-default)' } : {})),
    ...(borderTopColor ? { borderTopColor: borderTopColor.startsWith('border-') ? undefined : borderTopColor } : {}),
    ...(borderOpacity !== undefined ? { borderOpacity } : {}),
    ...(bg || backgroundColor ? { background: (bg || backgroundColor)!.startsWith('bg-') ? undefined : (bg || backgroundColor) } : {}),
    ...(rounded === true ? { borderRadius: 'var(--ui-radius-md)' } : (typeof rounded === 'string' ? { borderRadius: rounded.includes('rem') || rounded.includes('px') ? rounded : `var(--ui-radius-${rounded})` } : {})),
    ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
    ...(border === true ? { border: '1px solid var(--ui-color-border-default)' } : (typeof border === 'string' ? { border } : {})),
    ...(color ? { color: color.startsWith('text-') ? undefined : color } : {}),
    ...(opacity !== undefined ? { opacity } : {}),
    ...(fontSize ? (typeof fontSize === 'string' ? { fontSize } : {}) : {}),
    ...(fontWeight ? { fontWeight } : {}),
    ...(weight ? { fontWeight: weight } : {}),
    ...(shadow ? { boxShadow: shadow.startsWith('shadow-') ? undefined : shadow } : {}),
    ...(transform === true ? { transform: 'auto' } : (typeof transform === 'string' ? { transform } : {})),
    ...(translateX ? { translateX } : {}),
    ...(translateY ? { translateY } : {}),
    ...(translate ? { translate } : {}),
    ...(rotate ? { rotate } : {}),
    ...(scale ? { scale } : {}),
    ...(perspective ? { perspective } : {}),
    ...(whiteSpace ? { whiteSpace } : {}),
    ...(typeof fill === 'string' ? { fill } : (fill === true ? { fill: 'currentColor' } : {})),
    ...(stroke ? { stroke } : {}),
    ...(strokeWidth ? { strokeWidth } : {}),
    ...(backgroundSize ? { backgroundSize } : {}),
    ...(backgroundPosition ? { backgroundPosition } : {}),
    ...(backgroundImage ? { backgroundImage } : {}),
    ...(styleProp || {})
  };

  return (
    <Tag 
      ref={ref as React.ForwardedRef<HTMLElement>} 
      className={classes} 
      onClick={onClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onMouseDown={onMouseDown}
      onMouseUp={onMouseUp}
      onMouseMove={onMouseMove}
      onKeyDown={onKeyDown}
      onBlur={onBlur}
      onSubmit={onSubmit}
      onScroll={onScroll}
      onDragOver={onDragOver}
      onDragLeave={onDragLeave}
      onDrop={onDrop}
      onError={onError}
      style={Object.keys(style).length > 0 ? style : undefined}
      id={id}
      role={role}
      tabIndex={tabIndex}
      type={type}
      src={src}
      alt={alt}
      draggable={draggable as any}
      min={min}
      max={max}
      step={step}
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      title={title}
      autoPlay={autoPlay}
      loop={loop}
      muted={muted}
      playsInline={playsInline}
      viewBox={viewBox}
      htmlFor={htmlFor}
      rows={rows}
      href={href}
      name={name}
      multiple={multiple}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      {...props} 
    >
      {children}
    </Tag>
  );
});

Box.displayName = 'Box';