'use client';

/**
 * StatusBadge - 상태 표시용 배지 컴포넌트
 *
 * 사용 예시:
 * ```tsx
 * // 기본 사용 (프리셋 variant)
 * <StatusBadge variant="success">완료</StatusBadge>
 * <StatusBadge variant="warning">대기</StatusBadge>
 *
 * // 커스텀 className
 * <StatusBadge className="bg-purple-100 text-purple-800">커스텀</StatusBadge>
 *
 * // createStatusConfig와 함께 사용
 * <StatusBadge className={STATUS_STYLES[status]}>
 *   {STATUS_LABELS[status]}
 * </StatusBadge>
 *
 * // 또는 간단하게
 * <StatusBadge status={status} config={statusConfig} />
 * ```
 */

import { ReactNode } from 'react';
import { cn } from '@/lib/utils';
import {
  StatusStylePreset,
  BADGE_STYLE_PRESETS,
  TEXT_STYLE_PRESETS,
  StatusConfig,
} from '@/lib/utils/status-config';

export type StatusBadgeVariant = StatusStylePreset;
export type StatusBadgeMode = 'badge' | 'text';
export type StatusBadgeSize = 'sm' | 'md' | 'lg';

export interface StatusBadgeProps {
  /** 표시할 내용 */
  children?: ReactNode;
  /** 프리셋 variant (className보다 우선순위 낮음) */
  variant?: StatusBadgeVariant;
  /** 스타일 모드: 'badge' (배경+텍스트) 또는 'text' (텍스트만) */
  mode?: StatusBadgeMode;
  /** 배지 크기 */
  size?: StatusBadgeSize;
  /** 커스텀 className (variant보다 우선) */
  className?: string;
  /** createStatusConfig에서 생성된 설정과 함께 사용 */
  status?: string;
  /** StatusConfig 객체 (status와 함께 사용) */
  config?: StatusConfig<string>;
}

// 크기별 스타일
const sizeStyles: Record<StatusBadgeSize, string> = {
  sm: 'text-xs px-1.5 py-0.5',
  md: 'text-sm px-2 py-0.5',
  lg: 'text-sm px-2.5 py-1',
};

export function StatusBadge({
  children,
  variant = 'default',
  mode = 'badge',
  size = 'md',
  className,
  status,
  config,
}: StatusBadgeProps) {
  // config와 status가 제공된 경우 자동으로 라벨과 스타일 적용
  const displayContent = status && config ? config.getStatusLabel(status) : children;
  const configStyle = status && config ? config.getStatusStyle(status) : undefined;

  // 스타일 우선순위: className > configStyle > variant preset
  const presets = mode === 'badge' ? BADGE_STYLE_PRESETS : TEXT_STYLE_PRESETS;
  const variantStyle = presets[variant];

  // 최종 스타일 결정
  const finalStyle = className || configStyle || variantStyle;

  // Badge 모드일 때만 기본 rounded 스타일 추가
  const baseStyle = mode === 'badge' ? 'inline-flex items-center rounded-md font-medium' : 'inline-flex items-center';

  return (
    <span className={cn(baseStyle, sizeStyles[size], finalStyle)}>
      {displayContent}
    </span>
  );
}

/**
 * 간단한 상태 표시용 컴포넌트
 * createStatusConfig의 결과와 함께 사용
 */
export interface ConfiguredStatusBadgeProps<T extends string> {
  status: T;
  config: StatusConfig<T>;
  size?: StatusBadgeSize;
  mode?: StatusBadgeMode;
  className?: string;
}

export function ConfiguredStatusBadge<T extends string>({
  status,
  config,
  size = 'md',
  mode = 'badge',
  className,
}: ConfiguredStatusBadgeProps<T>) {
  return (
    <StatusBadge
      size={size}
      mode={mode}
      className={cn(config.getStatusStyle(status), className)}
    >
      {config.getStatusLabel(status)}
    </StatusBadge>
  );
}

export default StatusBadge;
