import { cn } from '@/lib/utils'
import type { ReactNode } from 'react'

/**
 * Реюзабельный shimmer-плейсхолдер. Заменяет «Загрузка…» в data-таблицах,
 * карточках и edit-страницах на анимированный серый блок — пользователь
 * видит будущую структуру вместо пустого текста.
 *
 * Примеры:
 *   <Skeleton className="h-4 w-32" />                — линия (текст)
 *   <Skeleton className="h-9 w-full" />              — input
 *   <Skeleton variant="circle" className="w-10 h-10" /> — аватар
 *   <Skeleton variant="block" className="h-48 w-full" /> — карточка
 *
 * Под капотом: bg-slate-200 + анимация pulse. На dark — slate-700.
 */
interface SkeletonProps {
  className?: string
  variant?: 'line' | 'block' | 'circle'
  children?: ReactNode
}

export function Skeleton({ className, variant = 'line', children }: SkeletonProps) {
  return (
    <div
      aria-busy="true"
      role="status"
      className={cn(
        'animate-pulse bg-slate-200/80 dark:bg-slate-700/60',
        variant === 'circle' ? 'rounded-full' : variant === 'block' ? 'rounded-lg' : 'rounded',
        className,
      )}
    >
      {children}
    </div>
  )
}

/**
 * Готовый шаблон для скелета таблицы: N строк × M колонок, ширина рандомная
 * по seed чтобы выглядело естественно. Заменяет «Загрузка…» в DataTable.
 */
export function TableSkeleton({ rows = 8, columns = 5 }: { rows?: number; columns?: number }) {
  // Псевдо-random ширины — стабильные между рендерами и реалистичные.
  const widths = ['w-24', 'w-32', 'w-40', 'w-20', 'w-16', 'w-28']
  return (
    <>
      {Array.from({ length: rows }).map((_, r) => (
        <tr key={r}>
          {Array.from({ length: columns }).map((__, c) => (
            <td
              key={c}
              className="px-3 sm:px-4 py-2.5 border-b border-slate-100 dark:border-slate-800"
            >
              <Skeleton className={cn('h-4', widths[(r + c) % widths.length])} />
            </td>
          ))}
        </tr>
      ))}
    </>
  )
}

/**
 * Скелет для edit-страниц: 1 заголовок + 2 «секции» с полями.
 * Используется когда `existing.isLoading` пока тащит данные.
 */
export function FormSkeleton() {
  return (
    <div className="max-w-5xl mx-auto p-3 sm:p-6 space-y-4">
      <div className="flex items-center gap-3">
        <Skeleton className="h-7 w-48" />
        <Skeleton className="h-4 w-32" />
      </div>
      {[0, 1].map((s) => (
        <section
          key={s}
          className="bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 p-4"
        >
          <div className="grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-4">
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="space-y-1.5">
                <Skeleton className="h-3 w-24" />
                <Skeleton className="h-9 w-full" />
              </div>
            ))}
          </div>
        </section>
      ))}
    </div>
  )
}
