import { defineRecipe } from '@pandacss/dev'

export const alertRecipe = defineRecipe({
  className:'alert',
  base: {
    // the original implementation uses grid layout, not flex
    display: 'grid',
    alignItems: 'center',
    justifyContent: 'start',
    justifyItems: 'start',
    gridAutoFlow: 'column',
    gridTemplateColumns: 'auto',
    textAlign: 'start',
    // Explicit rem values (not spacing tokens): this project's panda.config.ts
    // has no rem-based spacing scale, so numeric tokens like '4' resolve to 4px.
    // the original's real gap-4/px-4/py-3 are 1rem/1rem/0.75rem.
    gap: 'token(spacing.4)',
    paddingInline: 'token(spacing.4)',
    paddingBlock: 'token(spacing.3)',
    // the original implementation grows the content column to fill remaining space once there's
    // a second child (e.g. icon + text), avoiding an unwanted gap when the
    // alert has only one child.
    '&:has(:nth-child(2))': {
      gridTemplateColumns: 'auto minmax(auto, 1fr)',
    },
    borderRadius: 'var(--radius-box)',
    fontSize: 'token(fontSizes.md)',
    lineHeight: 'token(spacing.5)',
    fontWeight: 'token(fontWeights.normal)',

    // Colors via CSS variables (the original implementation pattern)
    backgroundColor: 'var(--alert-color, token(colors.base-200))',
    color: 'base-content',
    borderWidth: 'var(--border, 1px)',
    borderStyle: 'solid',
    borderColor: 'var(--alert-border-color, token(colors.base-200))',

    // the original implementation visual effects
    backgroundImage: 'none, var(--fx-noise)',
    backgroundSize: 'auto, calc(var(--noise, 0) * 33%)',
    boxShadow: [
      '0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth, 1) * 0.08)) inset',
      '0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, token(colors.base-200))) calc(var(--depth, 1) * 20%), #0000)',
      '0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth, 1) * 0.08))',
    ].join(', '),

    // Icon defaults
    '& svg': {
      width: 'token(spacing.6)',
      height: 'token(spacing.6)',
      flexShrink: '0',
      stroke: 'currentColor',
    },

    // Title/description styling
    '& h3': {
      fontWeight: 'token(fontWeights.bold)',
      fontSize: 'inherit',
      lineHeight: 'inherit',
      margin: '0',
    },
    '& .alert-description': {
      fontSize: 'token(fontSizes.sm)',
      opacity: '0.8',
    },
  },
  variants: {
    color: {
      info: {
        '--alert-color': 'token(colors.info)',
        '--alert-border-color': 'token(colors.info)',
        color: 'info-content',
      },
      success: {
        '--alert-color': 'token(colors.success)',
        '--alert-border-color': 'token(colors.success)',
        color: 'success-content',
      },
      warning: {
        '--alert-color': 'token(colors.warning)',
        '--alert-border-color': 'token(colors.warning)',
        color: 'warning-content',
      },
      error: {
        '--alert-color': 'token(colors.error)',
        '--alert-border-color': 'token(colors.error)',
        color: 'error-content',
      },
    },
    variant: {
      outline: {
        backgroundColor: 'transparent',
        color: 'var(--alert-color)',
        boxShadow: 'none',
        backgroundImage: 'none',
      },
      dash: {
        backgroundColor: 'transparent',
        color: 'var(--alert-color)',
        borderStyle: 'dashed',
        boxShadow: 'none',
        backgroundImage: 'none',
      },
      soft: {
        color: 'var(--alert-color, token(colors.base-content))',
        backgroundColor: 'color-mix(in oklab, var(--alert-color, token(colors.base-content)) 8%, token(colors.base-100))',
        '--alert-border-color': 'color-mix(in oklab, var(--alert-color, token(colors.base-content)) 10%, token(colors.base-100))',
        boxShadow: 'none',
        backgroundImage: 'none',
      },
    },
    direction: {
      horizontal: {
        justifyContent: 'start',
        justifyItems: 'start',
        gridAutoFlow: 'column',
        gridTemplateColumns: 'auto',
        textAlign: 'start',
        '&:has(:nth-child(2))': {
          gridTemplateColumns: 'auto minmax(auto, 1fr)',
        },
      },
      vertical: {
        justifyContent: 'center',
        justifyItems: 'center',
        gridAutoFlow: 'row',
        gridTemplateColumns: 'auto',
        textAlign: 'center',
        '&:has(:nth-child(2))': {
          gridTemplateColumns: 'auto',
        },
      },
    },
  },
  defaultVariants: {
    direction: 'horizontal',
  },
})