import React, { ElementType, ReactNode, forwardRef } from 'react';
import { Box, BoxProps, ResponsiveValue } from './Box';

export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'base';

export interface TextProps extends BoxProps<any> {
  children: ReactNode;
  variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'inherit';
  size?: TextSize | ResponsiveValue<TextSize>;
  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
  as?: ElementType;
  align?: 'left' | 'center' | 'right';
  italic?: boolean;
  mono?: boolean;
  block?: boolean;
  uppercase?: boolean;
  capitalize?: boolean;
  letterSpacing?: string;
  leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
  truncate?: boolean;
  lineHeight?: string | number;
  font?: 'sans' | 'mono';
  hoverVariant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical';
  htmlFor?: string;
  cursor?: string;
}

export const Text = forwardRef<HTMLElement, TextProps>(({ 
  children, 
  variant = 'med', 
  size = 'md',
  weight = 'normal',
  as = 'p',
  align = 'left',
  italic = false,
  mono = false,
  block = false,
  uppercase = false,
  capitalize = false,
  letterSpacing,
  leading,
  truncate = false,
  lineHeight,
  font,
  hoverVariant,
  htmlFor,
  cursor,
  ...props
}, ref) => {
  const variantClasses = {
    high: 'text-[var(--ui-color-text-high)]',
    med: 'text-[var(--ui-color-text-med)]',
    low: 'text-[var(--ui-color-text-low)]',
    primary: 'text-[var(--ui-color-intent-primary)]',
    success: 'text-[var(--ui-color-intent-success)]',
    warning: 'text-[var(--ui-color-intent-warning)]',
    critical: 'text-[var(--ui-color-intent-critical)]',
    telemetry: 'text-[var(--ui-color-intent-telemetry)]',
    inherit: 'text-inherit',
  };

  const hoverVariantClasses = {
    high: 'hover:text-[var(--ui-color-text-high)]',
    med: 'hover:text-[var(--ui-color-text-med)]',
    low: 'hover:text-[var(--ui-color-text-low)]',
    primary: 'hover:text-[var(--ui-color-intent-primary)]',
    success: 'hover:text-[var(--ui-color-intent-success)]',
    warning: 'hover:text-[var(--ui-color-intent-warning)]',
    critical: 'hover:text-[var(--ui-color-intent-critical)]',
  };
  
  const sizeMap: Record<TextSize, string> = {
    xs: 'text-xs',
    sm: 'text-sm',
    base: 'text-base',
    md: 'text-base',
    lg: 'text-lg',
    xl: 'text-xl',
    '2xl': 'text-2xl',
    '3xl': 'text-3xl',
    '4xl': 'text-4xl',
  };

  const getResponsiveSizeClasses = (value: TextSize | ResponsiveValue<TextSize>) => {
    if (typeof value === 'string') return sizeMap[value];
    const classes = [];
    if (value.base) classes.push(sizeMap[value.base]);
    if (value.sm) classes.push(`sm:${sizeMap[value.sm]}`);
    if (value.md) classes.push(`md:${sizeMap[value.md]}`);
    if (value.lg) classes.push(`lg:${sizeMap[value.lg]}`);
    if (value.xl) classes.push(`xl:${sizeMap[value.xl]}`);
    return classes.join(' ');
  };
  
  const weightClasses = {
    light: 'font-light',
    normal: 'font-normal',
    medium: 'font-medium',
    semibold: 'font-semibold',
    bold: 'font-bold',
  };

  const leadingClasses = {
    none: 'leading-none',
    tight: 'leading-tight',
    snug: 'leading-snug',
    normal: 'leading-normal',
    relaxed: 'leading-relaxed',
    loose: 'leading-loose',
  };

  const classes = [
    variantClasses[variant],
    getResponsiveSizeClasses(size),
    weightClasses[weight],
    align === 'center' ? 'text-center' : (align === 'right' ? 'text-right' : 'text-left'),
    italic ? 'italic' : '',
    (mono || font === 'mono') ? 'font-mono' : 'font-sans',
    block ? 'block' : 'inline',
    uppercase ? 'uppercase tracking-wider' : '',
    capitalize ? 'capitalize' : '',
    leading ? leadingClasses[leading] : '',
    truncate ? 'truncate' : '',
    hoverVariant ? hoverVariantClasses[hoverVariant] : '',
  ].join(' ');

  const style: React.CSSProperties = {
    ...(letterSpacing ? { letterSpacing } : {}),
    ...(lineHeight ? { lineHeight } : {}),
    ...(cursor ? { cursor } : {}),
  };

  return (
    <Box as={as} ref={ref} className={classes} style={style} htmlFor={htmlFor} {...props}>
      {children}
    </Box>
  );
});

Text.displayName = 'Text';