/**
 * CVA (Class Variance Authority) 변형 모듈
 * 프로젝트 전체에서 반복되는 Tailwind 패턴을 변형으로 통합
 */
import { cva } from 'class-variance-authority';

/** 카드 변형 — CSS 변수 기반으로 테마 반응 */
export const cardVariants = cva('rounded-xl border border-border', {
  variants: {
    variant: {
      default: 'bg-surface-raised',
      elevated: 'bg-card shadow-lg shadow-black/20',
      inner: 'bg-surface-overlay',
      transparent: 'bg-transparent border-transparent',
    },
  },
  defaultVariants: { variant: 'default' },
});

/** 뱃지 변형 — 위험도/상태별 150회+ 반복 패턴 통합
 *
 * 가독성 정책:
 *  - 배경: 색상별 진한 솔리드(-400) — 명확한 분류 식별
 *  - 텍스트: 시맨틱 토큰 text-on-bright (theme.css = #0f172a) — 테마 무관 일관 가독성
 *  - 보더: 같은 색상 계열 -600 (배경 강조)
 *  - 가운데 정렬
 *  - 폰트 크기: rem 기반 (root font-size 대비 비율) — 화면 비율에 따라 자동 조정
 *
 * className override는 cn(tailwind-merge) 덕분에 같은 그룹(text-color/font-size/bg) 충돌 시
 * 마지막 명시값이 적용 — !important 없이 의도된 override만 허용.
 */
export const badgeVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap rounded-md border px-2 py-0.5 font-semibold transition-colors text-center text-on-bright',
  {
    variants: {
      intent: {
        critical: 'bg-red-400 border-red-600',
        high: 'bg-orange-400 border-orange-600',
        warning: 'bg-yellow-400 border-yellow-600',
        info: 'bg-blue-400 border-blue-600',
        success: 'bg-green-400 border-green-600',
        muted: 'bg-slate-400 border-slate-600',
        purple: 'bg-purple-400 border-purple-600',
        cyan: 'bg-cyan-400 border-cyan-600',
      },
      // rem 기반 — root font-size 대비 비율, 화면 비율 변경 시 자동 조정
      // xs ≈ 11px, sm ≈ 12px, md ≈ 13px, lg ≈ 14px (root 14px 기준)
      size: {
        xs: 'text-[0.6875rem] leading-tight',
        sm: 'text-[0.75rem] leading-tight',
        md: 'text-[0.8125rem] leading-tight',
        lg: 'text-[0.875rem] leading-tight',
      },
    },
    defaultVariants: { intent: 'info', size: 'sm' },
  },
);

/** 상태 점(dot) 변형 */
export const statusDotVariants = cva('rounded-full', {
  variants: {
    status: {
      online: 'bg-green-500',
      warning: 'bg-yellow-500',
      danger: 'bg-red-500',
      offline: 'bg-slate-500',
    },
    size: {
      sm: 'w-1.5 h-1.5',
      md: 'w-2 h-2',
      lg: 'w-2.5 h-2.5',
    },
  },
  defaultVariants: { status: 'online', size: 'md' },
});

export type CardVariant = 'default' | 'elevated' | 'inner' | 'transparent';
export type BadgeIntent = 'critical' | 'high' | 'warning' | 'info' | 'success' | 'muted' | 'purple' | 'cyan';
export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
export type StatusDotStatus = 'online' | 'warning' | 'danger' | 'offline';