/**
 * 数据表格族:DataTable / MobileCardList / ResponsiveTable。
 * 原位于 admin/components.tsx。
 *
 * ResponsiveTable 按断点二选一渲染:桌面表格 / 移动卡片。
 */
import type { ReactNode } from 'react'
import { EmptyState } from './Feedback'

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function DataTable<T = any>({
  columns,
  data,
  rowKey,
  emptyText = '暂无数据',
}: {
  columns: { key: string; label: string; render?: (row: T) => ReactNode; width?: string }[]
  data: T[]
  rowKey: (row: T) => string | number
  emptyText?: string
}) {
  if (data.length === 0) {
    return <EmptyState text={emptyText} />
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-left text-sm">
        <thead>
          <tr className="border-b border-ink-900 text-2xs tracking-wider text-ink-500">
            {columns.map(col => (
              <th key={col.key} className="px-3 py-2 font-medium" style={{ width: col.width }}>
                {col.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map(row => (
            <tr
              key={rowKey(row)}
              className="border-b border-ink-200 transition-colors hover:bg-paper-100"
            >
              {columns.map(col => (
                <td key={col.key} className="px-3 py-2.5 text-ink-800">
                  {col.render
                    ? col.render(row)
                    : row != null && typeof row === 'object' && col.key in row
                      ? String((row as Record<string, unknown>)[col.key] ?? '—')
                      : '—'}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

// ── 移动端卡片列表 (替代桌面端表格) ────────────────────────────

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function MobileCardList<T = any>({
  data,
  renderCard,
  emptyText = '暂无数据',
}: {
  data: T[]
  renderCard: (row: T, index: number) => ReactNode
  emptyText?: string
}) {
  if (data.length === 0) {
    return <EmptyState text={emptyText} />
  }

  return (
    <div className="space-y-3 lg:hidden">
      {data.map((row, idx) => (
        <div key={idx} className="border border-ink-900 bg-paper-50 p-4">
          {renderCard(row, idx)}
        </div>
      ))}
    </div>
  )
}

// ── 响应式表格容器 ──────────────────────────────────────────────

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function ResponsiveTable<T = any>({
  columns,
  data,
  rowKey,
  cardRender,
  emptyText = '暂无数据',
}: {
  columns: { key: string; label: string; render?: (row: T) => ReactNode; width?: string }[]
  data: T[]
  rowKey: (row: T) => string | number
  cardRender: (row: T, index: number) => ReactNode
  emptyText?: string
}) {
  if (data.length === 0) {
    return <EmptyState text={emptyText} />
  }

  return (
    <>
      {/* 桌面端表格 */}
      <div className="hidden overflow-x-auto lg:block">
        <DataTable columns={columns} data={data} rowKey={rowKey} emptyText={emptyText} />
      </div>
      {/* 移动端卡片 */}
      <MobileCardList data={data} renderCard={cardRender} emptyText={emptyText} />
    </>
  )
}