import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
import { Box, BoxProps } from './Box';
import { ThemeRadii, ThemeShadows } from '../theme/Theme';

/**
 * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
 * 
 * Surface is a styled container with background, border, and shadow.
 * 
 * - DO NOT add layout props (flex, grid, gap) - use Stack or Grid instead.
 * - DO NOT add positioning props (absolute, top, zIndex).
 * 
 * If you need a more specific layout, create a new component in apps/website/components.
 */

export interface SurfaceProps<T extends ElementType = 'div'> extends BoxProps<T> {
  as?: T;
  children?: ReactNode;
  variant?: 'default' | 'dark' | 'muted' | 'glass' | 'discord' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord-inner' | 'outline';
  rounded?: keyof ThemeRadii | 'none';
  shadow?: keyof ThemeShadows | 'none';
}

export const Surface = forwardRef(<T extends ElementType = 'div'>(
  { 
    as,
    children, 
    variant = 'default',
    rounded = 'none',
    shadow = 'none',
    ...props 
  }: SurfaceProps<T>,
  ref: ForwardedRef<HTMLElement>
) => {
  const variantStyles: Record<string, React.CSSProperties> = {
    default: { backgroundColor: 'var(--ui-color-bg-surface)' },
    dark: { backgroundColor: 'var(--ui-color-bg-base)' },
    muted: { backgroundColor: 'var(--ui-color-bg-surface-muted)' },
    glass: { 
      backgroundColor: 'rgba(20, 22, 25, 0.6)', 
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)'
    },
    discord: {
      background: 'linear-gradient(to bottom, var(--ui-color-bg-base), var(--ui-color-bg-surface))'
    },
    'discord-inner': {
      background: 'linear-gradient(to br, var(--ui-color-bg-surface), var(--ui-color-bg-base), var(--ui-color-bg-surface))'
    },
    'gradient-blue': {
      background: 'linear-gradient(to br, rgba(25, 140, 255, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
    },
    'gradient-gold': {
      background: 'linear-gradient(to br, rgba(255, 190, 77, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
    },
    'gradient-purple': {
      background: 'linear-gradient(to br, rgba(147, 51, 234, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
    },
    'gradient-green': {
      background: 'linear-gradient(to br, rgba(111, 227, 122, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
    },
    outline: {
      backgroundColor: 'transparent',
      border: '1px solid var(--ui-color-border-default)'
    }
  };

  const style: React.CSSProperties = {
    ...variantStyles[variant],
    borderRadius: rounded !== 'none' ? `var(--ui-radius-${String(rounded)})` : undefined,
    boxShadow: shadow !== 'none' ? `var(--ui-shadow-${String(shadow)})` : undefined,
  };

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

Surface.displayName = 'Surface';
