'use client';

/**
 * Skeleton — 데이터 로딩 placeholder.
 *
 * - variant: text(여러 줄 행) · circle(아바타) · rect(박스)
 * - shimmer 애니메이션은 Tailwind `animate-pulse` 기반 (저비용)
 * - lines props로 text variant에서 여러 줄 동시 렌더 가능
 */

import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';
import { cn } from '@/lib/cn';

export type SkeletonVariant = 'text' | 'circle' | 'rect';

export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  variant?: SkeletonVariant;
  /** width — 숫자(px) 또는 CSS 값 ('100%', '12rem'). default: 100% */
  width?: number | string;
  /** height — 숫자(px) 또는 CSS 값. default: variant별 적정값 */
  height?: number | string;
  /** rounded radius (text/rect만). default: variant별 */
  radius?: number | string;
  /** text variant 전용 — 여러 줄 동시 렌더 */
  lines?: number;
  /** 마지막 줄을 짧게 (text + lines>1일 때 default true) */
  lastLineShorter?: boolean;
}

function toCss(v: number | string | undefined): string | undefined {
  if (v == null) return undefined;
  return typeof v === 'number' ? `${v}px` : v;
}

const variantDefaults: Record<SkeletonVariant, { width: string; height: string; radius: string }> =
  {
    text: { width: '100%', height: '0.875rem', radius: '0.5rem' },
    circle: { width: '2.5rem', height: '2.5rem', radius: '9999px' },
    rect: { width: '100%', height: '6rem', radius: '0.75rem' },
  };

export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
  (
    {
      variant = 'text',
      width,
      height,
      radius,
      lines,
      lastLineShorter = true,
      className,
      style,
      ...rest
    },
    ref,
  ) => {
    const defaults = variantDefaults[variant];
    const w = toCss(width) ?? defaults.width;
    const h = toCss(height) ?? defaults.height;
    const r = toCss(radius) ?? defaults.radius;

    const baseClass = cn(
      'block animate-pulse bg-gradient-to-r from-slate-100 via-slate-200/70 to-slate-100',
      className,
    );
    const baseStyle: CSSProperties = {
      width: w,
      height: h,
      borderRadius: r,
      ...style,
    };

    if (variant === 'text' && lines && lines > 1) {
      return (
        <div ref={ref} className="flex flex-col gap-2" {...rest}>
          {Array.from({ length: lines }).map((_, i) => {
            const isLast = i === lines - 1;
            return (
              <span
                key={i}
                aria-hidden
                className={baseClass}
                style={{
                  ...baseStyle,
                  width: isLast && lastLineShorter ? '70%' : w,
                }}
              />
            );
          })}
        </div>
      );
    }

    return <div ref={ref} aria-hidden className={baseClass} style={baseStyle} {...rest} />;
  },
);

Skeleton.displayName = 'Skeleton';