'use client';

/**
 * EmptyState - 빈 상태 표시용 공통 컴포넌트
 *
 * 사용 예시:
 * ```tsx
 * // 기본 사용
 * <EmptyState message="데이터가 없습니다." />
 *
 * // 아이콘과 설명 포함
 * <EmptyState
 *   icon={<FileSearch className="h-12 w-12" />}
 *   message="검색 결과가 없습니다."
 *   description="다른 검색어로 다시 시도해 주세요."
 * />
 *
 * // 액션 버튼 포함
 * <EmptyState
 *   icon={<Inbox className="h-12 w-12" />}
 *   message="등록된 항목이 없습니다."
 *   action={{
 *     label: "새로 등록",
 *     onClick: () => router.push('/new'),
 *   }}
 * />
 *
 * // 테이블 내 사용 (compact)
 * <EmptyState
 *   message="데이터가 없습니다."
 *   variant="compact"
 * />
 * ```
 */

import { ReactNode } from 'react';
import { Button, type ButtonProps } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { Inbox, FileSearch, AlertCircle, FolderOpen } from 'lucide-react';

export type EmptyStateVariant = 'default' | 'compact' | 'large';
export type EmptyStatePreset = 'noData' | 'noResults' | 'noItems' | 'error';

export interface EmptyStateAction {
  /** 버튼 라벨 */
  label: string;
  /** 클릭 핸들러 */
  onClick: () => void;
  /** 버튼 variant */
  variant?: ButtonProps['variant'];
  /** 버튼 아이콘 */
  icon?: ReactNode;
}

export interface EmptyStateProps {
  /** 메인 메시지 */
  message?: string;
  /** 부가 설명 */
  description?: string;
  /** 아이콘 (ReactNode 또는 프리셋) */
  icon?: ReactNode | EmptyStatePreset;
  /** 액션 버튼 설정 */
  action?: EmptyStateAction;
  /** 스타일 variant */
  variant?: EmptyStateVariant;
  /** 프리셋 (icon과 message 자동 설정) */
  preset?: EmptyStatePreset;
  /** 커스텀 className */
  className?: string;
  /** children (완전 커스텀 콘텐츠) */
  children?: ReactNode;
}

// 프리셋 설정
const PRESETS: Record<
  EmptyStatePreset,
  { icon: ReactNode; message: string; description?: string }
> = {
  noData: {
    icon: <Inbox className="h-12 w-12" />,
    message: '데이터가 없습니다.',
    description: '아직 등록된 데이터가 없습니다.',
  },
  noResults: {
    icon: <FileSearch className="h-12 w-12" />,
    message: '검색 결과가 없습니다.',
    description: '다른 검색어로 다시 시도해 주세요.',
  },
  noItems: {
    icon: <FolderOpen className="h-12 w-12" />,
    message: '등록된 항목이 없습니다.',
    description: '새 항목을 등록해 주세요.',
  },
  error: {
    icon: <AlertCircle className="h-12 w-12" />,
    message: '데이터를 불러올 수 없습니다.',
    description: '잠시 후 다시 시도해 주세요.',
  },
};

// Variant 스타일
const variantStyles: Record<EmptyStateVariant, { container: string; icon: string; text: string }> = {
  default: {
    container: 'py-12',
    icon: 'h-12 w-12',
    text: 'text-base',
  },
  compact: {
    container: 'py-6',
    icon: 'h-8 w-8',
    text: 'text-sm',
  },
  large: {
    container: 'py-20 min-h-[400px]',
    icon: 'h-16 w-16',
    text: 'text-lg',
  },
};

export function EmptyState({
  message,
  description,
  icon,
  action,
  variant = 'default',
  preset,
  className,
  children,
}: EmptyStateProps) {
  // 프리셋 적용
  const presetConfig = preset ? PRESETS[preset] : null;
  const finalMessage = message ?? presetConfig?.message ?? '데이터가 없습니다.';
  const finalDescription = description ?? presetConfig?.description;

  // 아이콘 결정
  let finalIcon: ReactNode = null;
  if (icon) {
    // icon이 프리셋 키인 경우
    if (typeof icon === 'string' && icon in PRESETS) {
      finalIcon = PRESETS[icon as EmptyStatePreset].icon;
    } else {
      finalIcon = icon;
    }
  } else if (presetConfig) {
    finalIcon = presetConfig.icon;
  }

  const styles = variantStyles[variant];

  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center gap-4',
        styles.container,
        className
      )}
    >
      {children ? (
        children
      ) : (
        <>
          {finalIcon && (
            <div className="text-muted-foreground/50">{finalIcon}</div>
          )}

          <div className="text-center space-y-1">
            <p className={cn('text-muted-foreground font-medium', styles.text)}>
              {finalMessage}
            </p>
            {finalDescription && (
              <p className="text-muted-foreground/70 text-sm">
                {finalDescription}
              </p>
            )}
          </div>

          {action && (
            <Button
              variant={action.variant ?? 'outline'}
              onClick={action.onClick}
              className="mt-2"
            >
              {action.icon}
              {action.label}
            </Button>
          )}
        </>
      )}
    </div>
  );
}

/**
 * 테이블용 빈 상태 컴포넌트
 * TableCell 내에서 사용할 때 유용
 */
export interface TableEmptyStateProps {
  /** 컬럼 수 (colSpan 용) */
  colSpan: number;
  /** 메시지 */
  message?: string;
  /** variant */
  variant?: 'default' | 'compact';
}

export function TableEmptyState({
  colSpan,
  message = '데이터가 없습니다.',
  variant = 'default',
}: TableEmptyStateProps) {
  return (
    <tr>
      <td
        colSpan={colSpan}
        className={cn(
          'text-center text-muted-foreground',
          variant === 'compact' ? 'py-6' : 'py-12'
        )}
      >
        {message}
      </td>
    </tr>
  );
}

export default EmptyState;
