import * as React from 'react'
import { useVirtualizer } from '@tanstack/react-virtual'
import { cn } from '../lib/cn'

export interface VirtualListProps<T> {
  items: T[]
  estimateSize: number // estimated row height in px
  renderItem: (item: T, index: number) => React.ReactNode
  overscan?: number // default: 5
  className?: string
}

/**
 * Virtualized list (TanStack Virtual v3) — renders only visible rows. Use for
 * infinite-scroll patterns (notification inbox, audit log, chat). Virtualize when
 * a list can plausibly exceed ~200 rows. The scroll container needs a bounded
 * height; default is `h-96` and can be overridden via `className`.
 */
export function VirtualList<T>({
  items,
  estimateSize,
  renderItem,
  overscan = 5,
  className,
}: VirtualListProps<T>) {
  const parentRef = React.useRef<HTMLDivElement>(null)

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => estimateSize,
    overscan,
  })

  return (
    <div ref={parentRef} className={cn('h-96 overflow-auto', className)}>
      <div className="relative w-full" style={{ height: `${virtualizer.getTotalSize()}px` }}>
        {virtualizer.getVirtualItems().map((virtualRow) => {
          const item = items[virtualRow.index]
          if (item === undefined) return null
          return (
            <div
              key={virtualRow.key}
              className="absolute inset-x-0 top-0"
              style={{
                height: `${virtualRow.size}px`,
                transform: `translateY(${virtualRow.start}px)`,
              }}
            >
              {renderItem(item, virtualRow.index)}
            </div>
          )
        })}
      </div>
    </div>
  )
}