import * as React from 'react'
import { cva } from 'class-variance-authority'

import { cn } from './utils'

/* ------------------------------------------------------------------ */
/*  Types                                                              */
/* ------------------------------------------------------------------ */

export type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'info' | 'none'

/* ------------------------------------------------------------------ */
/*  Variants                                                           */
/* ------------------------------------------------------------------ */

const severityVariants = cva(
  'inline-flex items-center gap-1.5 rounded-full text-xs font-medium transition-colors',
  {
    variants: {
      level: {
        critical: 'text-accent-rose',
        high: 'text-accent-rose/80',
        medium: 'text-accent-amber',
        low: 'text-accent-cyan',
        info: 'text-foreground-secondary',
        none: 'text-foreground-muted',
      },
      compact: {
        true: 'gap-1 text-[11px]',
        false: '',
      },
    },
    defaultVariants: {
      level: 'info',
      compact: false,
    },
  }
)

const dotVariants = cva('inline-block shrink-0 rounded-full', {
  variants: {
    level: {
      critical: 'bg-accent-rose',
      high: 'bg-accent-rose/80',
      medium: 'bg-accent-amber',
      low: 'bg-accent-cyan',
      info: 'bg-foreground-secondary',
      none: 'bg-foreground-muted',
    },
    compact: {
      true: 'size-1.5',
      false: 'size-2',
    },
  },
  defaultVariants: {
    level: 'info',
    compact: false,
  },
})

/* ------------------------------------------------------------------ */
/*  Labels                                                             */
/* ------------------------------------------------------------------ */

const LEVEL_LABELS: Record<SeverityLevel, string> = {
  critical: 'Critical',
  high: 'High',
  medium: 'Medium',
  low: 'Low',
  info: 'Info',
  none: 'None',
}

/* ------------------------------------------------------------------ */
/*  Component                                                          */
/* ------------------------------------------------------------------ */

export interface SeverityIndicatorProps extends React.ComponentProps<'span'> {
  level: SeverityLevel
  /** Show the text label. Defaults to true. */
  showLabel?: boolean
  /** Show the colored dot icon. Defaults to true. */
  showIcon?: boolean
  /** Compact mode with smaller sizing. */
  compact?: boolean
}

function SeverityIndicator({
  className,
  level,
  showLabel = true,
  showIcon = true,
  compact = false,
  ...props
}: SeverityIndicatorProps) {
  return (
    <span
      data-slot="severity-indicator"
      role="status"
      aria-label={`Severity: ${LEVEL_LABELS[level]}`}
      className={cn(severityVariants({ level, compact }), className)}
      {...props}
    >
      {showIcon && <span aria-hidden="true" className={dotVariants({ level, compact })} />}
      {showLabel && <span>{LEVEL_LABELS[level]}</span>}
    </span>
  )
}

export { SeverityIndicator, severityVariants }
