/**
 * 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회+ 반복 패턴 통합
 *
 * 가독성 정책 (테마별 팔레트 분리 + classes 기반 카탈로그와 통일):
 *  - **다크 모드**: 반투명 배경(-500/20) + 밝은 글자(-400) + 반투명 보더(-500/30)
 *    → 어두운 페이지에서 은은하게 녹아들며 글자 강조 (classes 기반 4종과 동일 패턴)
 *  - **라이트 모드**: 파스텔 배경(-100) + 진한 글자(-900) + 부드러운 보더(-300)
 *    → 흰 배경에 어울리는 소프트 토큰, 글자와 배경 대비 충분
 *  - 가운데 정렬
 *  - 폰트 크기: rem 기반 — 화면 비율 대비 자동 조정
 *
 * className override는 cn(tailwind-merge) 덕분에 같은 그룹 충돌 시 마지막 명시값 적용.
 */
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',
  {
    variants: {
      intent: {
        critical:
          'bg-red-100 text-red-900 border-red-300 dark:bg-red-500/20 dark:text-red-400 dark:border-red-500/30',
        high: 'bg-orange-100 text-orange-900 border-orange-300 dark:bg-orange-500/20 dark:text-orange-400 dark:border-orange-500/30',
        warning:
          'bg-yellow-100 text-yellow-900 border-yellow-300 dark:bg-yellow-500/20 dark:text-yellow-400 dark:border-yellow-500/30',
        info: 'bg-blue-100 text-blue-900 border-blue-300 dark:bg-blue-500/20 dark:text-blue-400 dark:border-blue-500/30',
        success:
          'bg-green-100 text-green-900 border-green-300 dark:bg-green-500/20 dark:text-green-400 dark:border-green-500/30',
        muted:
          'bg-slate-100 text-slate-700 border-slate-300 dark:bg-slate-500/20 dark:text-slate-300 dark:border-slate-500/30',
        purple:
          'bg-purple-100 text-purple-900 border-purple-300 dark:bg-purple-500/20 dark:text-purple-400 dark:border-purple-500/30',
        cyan: 'bg-cyan-100 text-cyan-900 border-cyan-300 dark:bg-cyan-500/20 dark:text-cyan-400 dark:border-cyan-500/30',
      },
      // 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';

/** Button 변형 — 5 variant × 3 size = 15
 *
 * 색상 정책:
 * - primary/destructive: 솔리드 배경 + text-on-vivid (흰색, 테마 무관)
 * - secondary/ghost/outline: 텍스트 토큰 (text-label / text-heading on hover)
 */
export const buttonVariants = cva(
  'inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium rounded-md transition-colors ' +
    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 ' +
    'disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-blue-600 hover:bg-blue-500 text-on-vivid border border-blue-700',
        secondary:
          'bg-surface-overlay hover:bg-surface-raised text-label hover:text-heading border border-slate-600/40',
        ghost: 'bg-transparent hover:bg-surface-overlay text-label hover:text-heading border border-transparent',
        outline:
          'bg-transparent hover:bg-blue-500/10 text-blue-400 hover:text-blue-300 border border-blue-500/50',
        destructive: 'bg-red-600 hover:bg-red-500 text-on-vivid border border-red-700',
      },
      size: {
        sm: 'h-7 px-2.5 text-xs',
        md: 'h-8 px-3 text-sm',
        lg: 'h-10 px-4 text-base',
      },
    },
    defaultVariants: {
      variant: 'secondary',
      size: 'md',
    },
  },
);

export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'destructive';
export type ButtonSize = 'sm' | 'md' | 'lg';

/** Input / Select / 유사 폼 요소 공통 변형 */
export const inputVariants = cva(
  'w-full bg-surface-overlay border rounded-md text-label placeholder:text-hint ' +
    'focus:outline-none focus:border-blue-500/60 focus:ring-1 focus:ring-blue-500/30 ' +
    'transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
  {
    variants: {
      size: {
        sm: 'h-7 px-2 text-xs',
        md: 'h-8 px-3 text-sm',
        lg: 'h-10 px-3.5 text-base',
      },
      state: {
        default: 'border-slate-600/40',
        error: 'border-red-500/60 focus:border-red-500 focus:ring-red-500/30',
        success: 'border-green-500/60 focus:border-green-500 focus:ring-green-500/30',
      },
    },
    defaultVariants: {
      size: 'md',
      state: 'default',
    },
  },
);

export type InputSize = 'sm' | 'md' | 'lg';
export type InputState = 'default' | 'error' | 'success';

/** PageContainer 변형 — 표준 페이지 루트 padding/spacing */
export const pageContainerVariants = cva('', {
  variants: {
    size: {
      sm: 'p-4 space-y-3',
      md: 'p-5 space-y-4',
      lg: 'p-6 space-y-4',
    },
    fullBleed: {
      true: 'p-0 space-y-0',
      false: '',
    },
  },
  defaultVariants: {
    size: 'md',
    fullBleed: false,
  },
});

export type PageContainerSize = 'sm' | 'md' | 'lg';
