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

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;

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

export interface BoxProps<T extends ElementType> {
  as?: T;
  children?: React.ReactNode;
  className?: string;
  center?: boolean;
  fullWidth?: boolean;
  fullHeight?: boolean;
  m?: Spacing | ResponsiveSpacing;
  mt?: Spacing | ResponsiveSpacing;
  mb?: Spacing | ResponsiveSpacing;
  ml?: Spacing | 'auto' | ResponsiveSpacing;
  mr?: Spacing | 'auto' | ResponsiveSpacing;
  mx?: Spacing | 'auto' | ResponsiveSpacing;
  my?: Spacing | ResponsiveSpacing;
  p?: Spacing | ResponsiveSpacing;
  pt?: Spacing | ResponsiveSpacing;
  pb?: Spacing | ResponsiveSpacing;
  pl?: Spacing | ResponsiveSpacing;
  pr?: Spacing | ResponsiveSpacing;
  px?: Spacing | ResponsiveSpacing;
  py?: Spacing | ResponsiveSpacing;
  display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | ResponsiveValue<'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none'>;
  flexDirection?: 'row' | 'row-reverse' | 'col' | 'col-reverse' | ResponsiveValue<'row' | 'row-reverse' | 'col' | 'col-reverse'>;
  alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' | ResponsiveValue<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;
  justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | ResponsiveValue<'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'>;
  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
  flexShrink?: number;
  flexGrow?: number;
  gridCols?: number | string;
  responsiveGridCols?: {
    base?: number | string;
    md?: number | string;
    lg?: number | string;
  };
  gap?: Spacing | ResponsiveSpacing;
  colSpan?: number | string;
  responsiveColSpan?: {
    base?: number | string;
    md?: number | string;
    lg?: number | string;
  };
  position?: 'relative' | 'absolute' | 'fixed' | 'sticky';
  top?: Spacing | string;
  bottom?: Spacing | string;
  left?: Spacing | string;
  right?: Spacing | string;
  overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
  maxWidth?: string;
  minWidth?: string;
  maxHeight?: string;
  minHeight?: string;
  zIndex?: number;
  w?: string | ResponsiveValue<string>;
  h?: string | ResponsiveValue<string>;
  width?: string;
  height?: string;
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
  border?: boolean;
  borderTop?: boolean;
  borderBottom?: boolean;
  borderLeft?: boolean;
  borderRight?: boolean;
  borderColor?: string;
  bg?: string;
  color?: string;
  shadow?: string;
  hoverBorderColor?: string;
  transition?: boolean;
  cursor?: 'pointer' | 'default' | 'wait' | 'text' | 'move' | 'not-allowed';
  lineClamp?: 1 | 2 | 3 | 4 | 5 | 6;
  inset?: string;
  bgOpacity?: number;
  opacity?: number;
  blur?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  animate?: 'pulse' | 'bounce' | 'spin' | 'none';
  translateX?: string;
  textAlign?: 'left' | 'center' | 'right' | 'justify';
  hoverScale?: boolean;
  group?: boolean;
  groupHoverBorderColor?: string;
  groupHoverTextColor?: string;
  fontSize?: string;
  transform?: string;
  borderWidth?: string;
  hoverTextColor?: string;
  hoverBg?: string;
  borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
  ring?: string;
  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
  aspectRatio?: string;
  visibility?: 'visible' | 'hidden' | 'collapse';
  pointerEvents?: 'auto' | 'none';
  onMouseEnter?: React.MouseEventHandler<T>;
  onMouseLeave?: React.MouseEventHandler<T>;
  onClick?: React.MouseEventHandler<T>;
  onSubmit?: React.FormEventHandler<T>;
  style?: React.CSSProperties;
  hoverColor?: string;
  maskImage?: string;
  webkitMaskImage?: string;
  backgroundSize?: string;
  backgroundPosition?: string;
}

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

export const Box = forwardRef(<T extends ElementType = 'div'>(
  { 
    as, 
    children, 
    className = '', 
    center = false,
    fullWidth = false,
    fullHeight = false,
    m, mt, mb, ml, mr, mx, my,
    p, pt, pb, pl, pr, px, py,
    display,
    flexDirection,
    alignItems,
    justifyContent,
    position,
    top,
    bottom,
    left,
    right,
    overflow,
    maxWidth,
    minWidth,
    maxHeight,
    minHeight,
    zIndex,
    gridCols,
    responsiveGridCols,
    colSpan,
    responsiveColSpan,
    gap,
    w,
    h,
    rounded,
    border,
    borderTop,
    borderBottom,
    borderLeft,
    borderRight,
    borderColor,
    bg,
    color,
    shadow,
    flexShrink,
    flexGrow,
    hoverBorderColor,
    transition,
    cursor,
    lineClamp,
    inset,
    bgOpacity,
    opacity,
    blur,
    animate,
    translateX,
    textAlign,
    hoverScale,
    group,
    groupHoverBorderColor,
    groupHoverTextColor,
    fontSize,
    transform,
    borderWidth,
    hoverTextColor,
    hoverBg,
    borderStyle,
    ring,
    objectFit,
    aspectRatio,
    visibility,
    pointerEvents,
    onMouseEnter,
    onMouseLeave,
    onClick,
    onSubmit,
    hoverColor,
    maskImage,
    webkitMaskImage,
    backgroundSize,
    backgroundPosition,
    ...props 
  }: BoxProps<T> & ComponentPropsWithoutRef<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'
  };

  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.md !== undefined) classes.push(`md:${prefix}-${spacingMap[value.md]}`);
      if (value.lg !== undefined) classes.push(`lg:${prefix}-${spacingMap[value.lg]}`);
      return classes.join(' ');
    }
    return `${prefix}-${spacingMap[value]}`;
  };

  const getResponsiveClasses = (prefix: string, value: string | ResponsiveValue<string> | undefined) => {
    if (value === undefined) return '';
    if (typeof value === 'object') {
      const classes = [];
      if (value.base !== undefined) classes.push(prefix ? `${prefix}-${value.base}` : 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}` : value;
  };

  const getFlexDirectionClass = (value: BoxProps<ElementType>['flexDirection']) => {
    if (!value) return '';
    if (typeof value === 'object') {
      const classes = [];
      if (value.base) classes.push(`flex-${value.base}`);
      if (value.sm) classes.push(`sm:flex-${value.sm}`);
      if (value.md) classes.push(`md:flex-${value.md}`);
      if (value.lg) classes.push(`lg:flex-${value.lg}`);
      if (value.xl) classes.push(`xl:flex-${value.xl}`);
      if (value['2xl']) classes.push(`2xl:flex-${value['2xl']}`);
      return classes.join(' ');
    }
    return `flex-${value}`;
  };

  const getAlignItemsClass = (value: BoxProps<ElementType>['alignItems']) => {
    if (!value) return '';
    const map: Record<string, string> = { start: 'items-start', center: 'items-center', end: 'items-end', stretch: 'items-stretch', baseline: 'items-baseline' };
    if (typeof value === 'object') {
      const classes = [];
      if (value.base) classes.push(map[value.base]);
      if (value.sm) classes.push(`sm:${map[value.sm]}`);
      if (value.md) classes.push(`md:${map[value.md]}`);
      if (value.lg) classes.push(`lg:${map[value.lg]}`);
      if (value.xl) classes.push(`xl:${map[value.xl]}`);
      if (value['2xl']) classes.push(`2xl:${map[value['2xl']]}`);
      return classes.join(' ');
    }
    return map[value];
  };

  const getJustifyContentClass = (value: BoxProps<ElementType>['justifyContent']) => {
    if (!value) return '';
    const map: Record<string, string> = { start: 'justify-start', center: 'justify-center', end: 'justify-end', between: 'justify-between', around: 'justify-around', evenly: 'justify-evenly' };
    if (typeof value === 'object') {
      const classes = [];
      if (value.base) classes.push(map[value.base]);
      if (value.sm) classes.push(`sm:${map[value.sm]}`);
      if (value.md) classes.push(`md:${map[value.md]}`);
      if (value.lg) classes.push(`lg:${map[value.lg]}`);
      if (value.xl) classes.push(`xl:${map[value.xl]}`);
      if (value['2xl']) classes.push(`2xl:${map[value['2xl']]}`);
      return classes.join(' ');
    }
    return map[value];
  };

  const classes = [
    center ? 'flex items-center justify-center' : '',
    fullWidth ? 'w-full' : '',
    fullHeight ? 'h-full' : '',
    getSpacingClass('m', m),
    getSpacingClass('mt', mt),
    getSpacingClass('mb', mb),
    getSpacingClass('ml', ml),
    getSpacingClass('mr', mr),
    getSpacingClass('mx', mx),
    getSpacingClass('my', my),
    getSpacingClass('p', p),
    getSpacingClass('pt', pt),
    getSpacingClass('pb', pb),
    getSpacingClass('pl', pl),
    getSpacingClass('pr', pr),
    getSpacingClass('px', px),
    getSpacingClass('py', py),
    getResponsiveClasses('w', w),
    getResponsiveClasses('h', h),
    rounded ? `rounded-${rounded}` : '',
    border ? 'border' : '',
    borderStyle ? `border-${borderStyle}` : '',
    borderTop ? 'border-t' : '',
    borderBottom ? 'border-b' : '',
    borderLeft ? 'border-l' : '',
    borderRight ? 'border-r' : '',
    borderColor ? borderColor : '',
    ring ? ring : '',
    bg ? bg : '',
    color ? color : '',
    hoverColor ? `hover:${hoverColor}` : '',
    shadow ? shadow : '',
    flexShrink !== undefined ? `flex-shrink-${flexShrink}` : '',
    flexGrow !== undefined ? `flex-grow-${flexGrow}` : '',
    hoverBorderColor ? `hover:${hoverBorderColor}` : '',
    hoverTextColor ? `hover:${hoverTextColor}` : '',
    hoverBg ? `hover:${hoverBg}` : '',
    transition ? 'transition-all' : '',
    lineClamp ? `line-clamp-${lineClamp}` : '',
    inset ? `inset-${inset}` : '',
    bgOpacity !== undefined ? `bg-opacity-${bgOpacity * 100}` : '',
    opacity !== undefined ? `opacity-${opacity * 100}` : '',
    blur ? `blur-${blur}` : '',
    animate ? `animate-${animate}` : '',
    translateX ? `translate-x-${translateX}` : '',
    hoverScale ? 'hover:scale-[1.02]' : '',
    group ? 'group' : '',
    groupHoverBorderColor ? `group-hover:border-${groupHoverBorderColor}` : '',
    groupHoverTextColor ? `group-hover:text-${groupHoverTextColor}` : '',
    getResponsiveClasses('', display),
    getFlexDirectionClass(flexDirection),
    getAlignItemsClass(alignItems),
    getJustifyContentClass(justifyContent),
    gridCols ? `grid-cols-${gridCols}` : '',
    responsiveGridCols?.base ? `grid-cols-${responsiveGridCols.base}` : '',
    responsiveGridCols?.md ? `md:grid-cols-${responsiveGridCols.md}` : '',
    responsiveGridCols?.lg ? `lg:grid-cols-${responsiveGridCols.lg}` : '',
    colSpan ? `col-span-${colSpan}` : '',
    responsiveColSpan?.base ? `col-span-${responsiveColSpan.base}` : '',
    responsiveColSpan?.md ? `md:col-span-${responsiveColSpan.md}` : '',
    responsiveColSpan?.lg ? `lg:col-span-${responsiveColSpan.lg}` : '',
    getSpacingClass('gap', gap),
    position ? position : '',
    top !== undefined && spacingMap[top as string | number] ? `top-${spacingMap[top as string | number]}` : '',
    bottom !== undefined && spacingMap[bottom as string | number] ? `bottom-${spacingMap[bottom as string | number]}` : '',
    left !== undefined && spacingMap[left as string | number] ? `left-${spacingMap[left as string | number]}` : '',
    right !== undefined && spacingMap[right as string | number] ? `right-${spacingMap[right as string | number]}` : '',
    overflow ? `overflow-${overflow}` : '',
    visibility ? visibility : '',
    zIndex !== undefined ? `z-${zIndex}` : '',
    cursor ? `cursor-${cursor}` : '',
    pointerEvents ? `pointer-events-${pointerEvents}` : '',
    className
  ].filter(Boolean).join(' ');

  const style: React.CSSProperties = {
    ...(maxWidth ? { maxWidth } : {}),
    ...(minWidth ? { minWidth } : {}),
    ...(maxHeight ? { maxHeight } : {}),
    ...(minHeight ? { minHeight } : {}),
    ...(fontSize ? { fontSize } : {}),
    ...(transform ? { transform } : {}),
    ...(borderWidth ? { borderWidth } : {}),
    ...(objectFit ? { objectFit } : {}),
    ...(aspectRatio ? { aspectRatio } : {}),
    ...(maskImage ? { maskImage } : {}),
    ...(webkitMaskImage ? { WebkitMaskImage: webkitMaskImage } : {}),
    ...(backgroundSize ? { backgroundSize } : {}),
    ...(backgroundPosition ? { backgroundPosition } : {}),
    ...(top !== undefined && !spacingMap[top as string | number] ? { top } : {}),
    ...(bottom !== undefined && !spacingMap[bottom as string | number] ? { bottom } : {}),
    ...(left !== undefined && !spacingMap[left as string | number] ? { left } : {}),
    ...(right !== undefined && !spacingMap[right as string | number] ? { right } : {}),
    ...((props as Record<string, unknown>).style as object || {})
  };

  return (
    <Tag 
      ref={ref as React.ForwardedRef<HTMLElement>} 
      className={classes} 
      onClick={onClick}
      onSubmit={onSubmit}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      {...props} 
      style={style as React.CSSProperties}
    >
      {children}
    </Tag>
  );
});

Box.displayName = 'Box';