/**
 * [INPUT]: 依赖 extracted.css 的 .zzm-sort（表头排序键悬停/焦点）
 * [OUTPUT]: 对外提供 DataTable 组件——浅灰 mono 表头 + 可排序列 + 细线分行 + 窄屏只横向滚动的数据窗口
 * [POS]: src/extracted 的数据模式，1:1 提炼自 edu AdmDesign「10 · 数据窗口」样张（后台邀请关系/激活码表格同款）。
 *   columns=[{key,label,fr,mono,accent,render}]；sort={key,dir:'asc'|'desc'} 受控，onSort(key) 由调用方切换方向
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

const ACCENT = 'var(--zzm-accent, #A6402F)'
const MONO = "ui-monospace,'SF Mono',Menlo,monospace"

export function DataTable({ columns = [], rows = [], sort, onSort, minWidth = 680, rowKey = (r, i) => i }) {
  const grid = columns.map((c) => `${c.fr ?? 1}fr`).join(' ')
  const arrow = (c) => (sort?.key === c.key ? (sort.dir === 'desc' ? '↓' : '↑') : '↕')
  return (
    <div style={{ border: '1px solid rgba(0,0,0,.09)', borderRadius: 16, overflowX: 'auto', background: '#FFFFFF' }}>
      <div role="table" style={{ minWidth }}>
        <div role="row" style={{
          display: 'grid', gridTemplateColumns: grid, gap: 10, padding: '10px 18px', background: '#FAFAF8',
          borderBottom: '1px solid rgba(0,0,0,.07)', fontFamily: MONO, fontSize: 10, letterSpacing: 1, color: '#A2A29C',
        }}>
          {columns.map((c) => (
            <span key={c.key} role="columnheader" aria-sort={sort?.key === c.key ? (sort.dir === 'desc' ? 'descending' : 'ascending') : undefined}>
              {onSort && c.sortable !== false ? (
                <button type="button" className="zzm-sort" onClick={() => onSort(c.key)} style={{
                  padding: 0, border: 0, background: 'transparent', font: 'inherit', letterSpacing: 'inherit',
                  color: sort?.key === c.key ? '#3F3F3B' : 'inherit', cursor: 'pointer', borderRadius: 4,
                }}>{c.label} {arrow(c)}</button>
              ) : c.label}
            </span>
          ))}
        </div>
        {rows.map((r, i) => (
          <div key={rowKey(r, i)} role="row" style={{
            display: 'grid', gridTemplateColumns: grid, gap: 10, padding: '11px 18px', alignItems: 'center', fontSize: 12,
            borderTop: i ? '1px solid rgba(0,0,0,.07)' : 0, color: '#3F3F3B',
          }}>
            {columns.map((c) => (
              <span key={c.key} role="cell" style={{
                fontFamily: c.mono ? MONO : undefined, letterSpacing: c.mono ? 1 : undefined,
                color: c.accent ? ACCENT : undefined, minWidth: 0,
              }}>{c.render ? c.render(r) : r[c.key]}</span>
            ))}
          </div>
        ))}
      </div>
    </div>
  )
}