/**
 * Loading skeletons for route-level loading.tsx files. Neutral blocks only (no fake numbers, no
 * placeholder text that could be mistaken for data — CLAUDE.md §281). `aria-busy` + a visually
 * hidden status line announce the loading state to assistive technology.
 */
export function Skeleton({ className = '', w, h = 14 }: { className?: string; w?: string | number; h?: number }) {
  return <span aria-hidden className={`ci-skeleton block ${className}`} style={{ width: w ?? '100%', height: h }} />;
}

export function SkeletonText({ lines = 3, className = '' }: { lines?: number; className?: string }) {
  return (
    <div className={`space-y-2 ${className}`} aria-hidden>
      {Array.from({ length: lines }, (_, i) => (
        <Skeleton key={i} w={i === lines - 1 ? '62%' : '100%'} />
      ))}
    </div>
  );
}

export function SkeletonTable({ rows = 8, cols = 6, className = '' }: { rows?: number; cols?: number; className?: string }) {
  return (
    <div className={`ci-table-wrap ${className}`} aria-hidden>
      <div className="grid gap-x-3 gap-y-0 px-2" style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}>
        {Array.from({ length: cols }, (_, i) => (
          <Skeleton key={`h${i}`} h={10} className="my-3" w="60%" />
        ))}
        {Array.from({ length: rows * cols }, (_, i) => (
          <Skeleton key={i} h={12} className="my-[9px]" w={`${55 + ((i * 17) % 40)}%`} />
        ))}
      </div>
    </div>
  );
}

export function PageSkeleton({ title = 'Loading', tabs = 0, table = true }: { title?: string; tabs?: number; table?: boolean }) {
  return (
    <div aria-busy="true" className="pt-6">
      <p className="sr-only" role="status">
        {title}…
      </p>
      <Skeleton h={10} w={120} className="mb-3" />
      <Skeleton h={34} w="55%" className="mb-3" />
      <Skeleton h={12} w="35%" className="mb-6" />
      {tabs > 0 ? (
        <div className="mb-6 flex gap-5 border-b border-rule pb-2" aria-hidden>
          {Array.from({ length: tabs }, (_, i) => (
            <Skeleton key={i} h={12} w={64 + ((i * 23) % 40)} />
          ))}
        </div>
      ) : null}
      <SkeletonText lines={2} className="mb-6 max-w-2xl" />
      {table ? <SkeletonTable /> : null}
    </div>
  );
}