/**
 * 数据表格组件 — 统一表头、行样式、排序状态和空状态
 * 支持列定义、行点击、选中行、固定列、对齐和空状态
 */
import { ReactNode } from 'react'
import clsx from 'clsx'
import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react'

export interface Column<T> {
  key: string
  header: string
  render?: (row: T) => ReactNode
  sortable?: boolean
  align?: 'left' | 'center' | 'right'
  width?: string
  fixed?: 'left' | 'right'
}

interface DataTableProps<T> {
  columns: Column<T>[]
  data: T[]
  rowKey: (row: T) => string
  onRowClick?: (row: T) => void
  sortBy?: string
  sortOrder?: 'asc' | 'desc'
  onSort?: (key: string) => void
  emptyState?: ReactNode
  dense?: boolean
  className?: string
}

/**
 * 数据表格 — 支持排序、行点击、空状态和密度切换
 */
export function DataTable<T>({
  columns,
  data,
  rowKey,
  onRowClick,
  sortBy,
  sortOrder,
  onSort,
  emptyState,
  dense,
  className,
}: DataTableProps<T>) {
  const alignClass = (align?: string) =>
    align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left'

  return (
    <div className={clsx('overflow-x-auto border border-[#DDE1DD] rounded-card bg-surface-card', className)}>
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-[#DDE1DD] bg-surface-muted">
            {columns.map((col) => (
              <th
                key={col.key}
                className={clsx(
                  'px-3 font-medium text-ink-600 whitespace-nowrap select-none',
                  dense ? 'py-1.5' : 'py-2.5',
                  alignClass(col.align),
                  col.fixed === 'left' && 'sticky left-0 z-10 bg-surface-muted',
                  col.fixed === 'right' && 'sticky right-0 z-10 bg-surface-muted',
                  onSort && col.sortable && 'cursor-pointer hover:text-ink-900',
                )}
                style={col.width ? { width: col.width } : undefined}
                onClick={col.sortable && onSort ? () => onSort(col.key) : undefined}
              >
                <span className="inline-flex items-center gap-1">
                  {col.header}
                  {col.sortable && onSort && (
                    <span className="inline-flex">
                      {sortBy === col.key ? (
                        sortOrder === 'asc' ? (
                          <ChevronUp className="w-3.5 h-3.5" />
                        ) : (
                          <ChevronDown className="w-3.5 h-3.5" />
                        )
                      ) : (
                        <ChevronsUpDown className="w-3.5 h-3.5 text-ink-400" />
                      )}
                    </span>
                  )}
                </span>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.length === 0 ? (
            <tr>
              <td colSpan={columns.length} className="text-center py-12 text-ink-400">
                {emptyState || '暂无数据'}
              </td>
            </tr>
          ) : (
            data.map((row) => (
              <tr
                key={rowKey(row)}
                onClick={onRowClick ? () => onRowClick(row) : undefined}
                className={clsx(
                  'border-b border-[#ECEEEC] transition-colors',
                  onRowClick && 'cursor-pointer hover:bg-surface-muted',
                )}
              >
                {columns.map((col) => (
                  <td
                    key={col.key}
                    className={clsx(
                      'px-3 text-ink-900 whitespace-nowrap',
                      dense ? 'py-1.5' : 'py-2.5',
                      alignClass(col.align),
                      col.fixed === 'left' && 'sticky left-0 z-10 bg-surface-card',
                      col.fixed === 'right' && 'sticky right-0 z-10 bg-surface-card',
                    )}
                  >
                    {col.render ? col.render(row) : (row as any)[col.key]}
                  </td>
                ))}
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  )
}
