import { cn } from '@/lib/utils'

interface TableProps {
  columns: { key: string; label: string; sortable?: boolean; className?: string }[]
  data: Record<string, any>[]
  onSort?: (key: string) => void
  sortKey?: string
  sortDir?: 'asc' | 'desc'
  searchPlaceholder?: string
  searchValue?: string
  onSearch?: (val: string) => void
  emptyMessage?: string
  className?: string
  loading?: boolean
}

export function Table({
  columns, data, onSort, sortKey, sortDir,
  searchPlaceholder, searchValue, onSearch,
  emptyMessage = 'No data found.', className, loading
}: TableProps) {
  return (
    <div className={cn('glass rounded-2xl overflow-hidden', className)}>
      {onSearch && (
        <div className="px-5 py-3 border-b border-white/5">
          <input
            type="text"
            value={searchValue || ''}
            onChange={e => onSearch(e.target.value)}
            placeholder={searchPlaceholder || 'Search...'}
            className="w-full max-w-xs bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50"
          />
        </div>
      )}
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="border-b border-white/5">
              {columns.map(col => (
                <th
                  key={col.key}
                  onClick={() => col.sortable && onSort?.(col.key)}
                  className={cn(
                    'px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider',
                    col.sortable && 'cursor-pointer hover:text-white select-none',
                    col.className
                  )}
                >
                  <span className="flex items-center gap-1">
                    {col.label}
                    {col.sortable && sortKey === col.key && (
                      <span className="text-cyan-400">{sortDir === 'asc' ? '↑' : '↓'}</span>
                    )}
                  </span>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {loading ? (
              Array.from({ length: 5 }).map((_, i) => (
                <tr key={i} className="border-b border-white/[0.02]">
                  {columns.map((col, j) => (
                    <td key={j} className="px-5 py-3">
                      <div className="h-4 bg-white/5 rounded animate-pulse" />
                    </td>
                  ))}
                </tr>
              ))
            ) : data.length === 0 ? (
              <tr>
                <td colSpan={columns.length} className="px-5 py-12 text-center text-sm text-slate-500">
                  {emptyMessage}
                </td>
              </tr>
            ) : (
              data.map((row, i) => (
                <tr key={i} className="border-b border-white/[0.02] hover:bg-white/[0.02] transition-colors">
                  {columns.map(col => (
                    <td key={col.key} className={cn('px-5 py-3 text-sm text-slate-300', col.className)}>
                      {row[col.key]}
                    </td>
                  ))}
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}