import * as React from 'react';
import { cva } from 'class-variance-authority';
import { cn } from '@/lib/utils';

/**
 * Surface — the canonical container in the design system.
 *
 * Every card, panel and boxed region in the app is a Surface, so radius,
 * border, elevation and hover behaviour can only be defined in one place.
 * `glass` is the default because the app sits on a gradient-mesh background
 * that solid white cards flatten.
 */
const surfaceVariants = cva(
  'transition-all duration-base ease-out',
  {
    variants: {
      variant: {
        glass: 'glass-card border border-white/60',
        solid: 'bg-surface border border-border',
        subtle: 'bg-surface-subtle border border-border',
        sunken: 'bg-surface-sunken border border-transparent',
        outline: 'bg-transparent border border-border',
        /* The one dark surface — the Owliver panel */
        panel: 'panel-surface border border-panel-border text-panel-foreground',
      },
      elevation: {
        none: 'shadow-none',
        xs: 'shadow-xs',
        sm: 'shadow-sm',
        md: 'shadow-md',
        lg: 'shadow-lg',
        xl: 'shadow-xl',
      },
      radius: {
        md: 'rounded-lg',
        lg: 'rounded-xl',
        xl: 'rounded-2xl',
      },
      padding: {
        none: 'p-0',
        sm: 'p-4',
        default: 'p-5',
        lg: 'p-6',
      },
      interactive: {
        true: 'cursor-pointer hover:shadow-lg hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0A39DF]/60 focus-visible:ring-offset-2',
      },
    },
    defaultVariants: {
      variant: 'glass',
      elevation: 'sm',
      radius: 'xl',
      padding: 'default',
    },
  }
);

const Surface = React.forwardRef(
  ({ className, variant, elevation, radius, padding, interactive, as, ...props }, ref) => {
    const Comp = as || 'div';
    return (
      <Comp
        ref={ref}
        className={cn(surfaceVariants({ variant, elevation, radius, padding, interactive }), className)}
        {...props}
      />
    );
  }
);
Surface.displayName = 'Surface';

export { Surface, surfaceVariants };