import * as React from 'react';
import { clsx } from 'clsx';

export interface SurfaceProps extends React.HTMLAttributes<HTMLElement> {
  as?: 'section' | 'aside' | 'article' | 'div';
  variant?: 'default' | 'muted' | 'elevated' | 'outline' | 'plain';
  padding?: 'none' | 'sm' | 'md' | 'lg';
}

const surfaceVariants: Record<NonNullable<SurfaceProps['variant']>, string> = {
  default: 'border border-[var(--bl-border)] bg-[var(--bl-surface-card)]',
  muted: 'border border-[var(--bl-border)] bg-[var(--bl-surface-muted)]',
  elevated: 'border border-[var(--bl-border)] bg-[var(--bl-bg-elevated)] shadow-sm',
  outline: 'border border-[var(--bl-border)] bg-transparent',
  plain: 'border-transparent bg-transparent',
};

const surfacePadding: Record<NonNullable<SurfaceProps['padding']>, string> = {
  none: '',
  sm: 'p-3',
  md: 'p-4',
  lg: 'p-6',
};

export function Surface({
  as: Comp = 'section',
  variant = 'default',
  padding = 'md',
  className,
  children,
  ...props
}: SurfaceProps) {
  return (
    <Comp
      className={clsx(
        'rounded-lg text-[var(--bl-text-primary)]',
        surfaceVariants[variant],
        surfacePadding[padding],
        className
      )}
      {...props}
    >
      {children}
    </Comp>
  );
}

export interface SurfaceListProps extends React.HTMLAttributes<HTMLDivElement> {
  density?: 'compact' | 'normal' | 'spacious';
  divided?: boolean;
}

const listDensity: Record<NonNullable<SurfaceListProps['density']>, string> = {
  compact: 'gap-1',
  normal: 'gap-2',
  spacious: 'gap-3',
};

export function SurfaceList({
  density = 'normal',
  divided,
  className,
  children,
  ...props
}: SurfaceListProps) {
  return (
    <div
      className={clsx(
        'grid',
        listDensity[density],
        divided &&
          'divide-y divide-[var(--bl-border)] overflow-hidden rounded-lg border border-[var(--bl-border)]',
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export interface SurfaceListItemProps extends React.HTMLAttributes<HTMLDivElement> {
  selected?: boolean;
}

export function SurfaceListItem({ selected, className, children, ...props }: SurfaceListItemProps) {
  return (
    <div
      data-selected={selected ? 'true' : undefined}
      className={clsx(
        'rounded-md border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-3 text-[var(--bl-text-primary)]',
        selected && 'border-[var(--bl-accent)] bg-[var(--bl-accent-muted,var(--bl-surface-card))]',
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}