/**
 * [INPUT]: 依赖 extracted.css 的 .zzm-page（描边悬停加深 + 焦点光晕）
 * [OUTPUT]: 对外提供 Pagination 组件——26px 方格分页：当前页墨底白字，其余 .14 描边，省略号无框
 * [POS]: src/extracted 的导航控件，1:1 提炼自 edu AdmDesign「08 · 导航」样张（26/圆角 8 为样张原值）。
 *   页码序列：总页 ≤7 全显；否则首页 + 当前页前后各 1 + 末页，缺口折成 …
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

const box = (extra) => ({
  width: 26, height: 26, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center',
  fontSize: 11, padding: 0, fontFamily: 'inherit', background: 'transparent', border: '1px solid transparent', ...extra,
})

function pages(page, total) {
  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1)
  const keep = new Set([1, total, page - 1, page, page + 1].filter((n) => n >= 1 && n <= total))
  const out = []
  let prev = 0
  for (const n of [...keep].sort((a, b) => a - b)) {
    if (n - prev > 1) out.push('…')
    out.push(n)
    prev = n
  }
  return out
}

export function Pagination({ page = 1, total = 1, onChange }) {
  const go = (n) => onChange?.(Math.min(total, Math.max(1, n)))
  return (
    <nav aria-label="分页" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <button type="button" className="zzm-page" aria-label="上一页" disabled={page <= 1} onClick={() => go(page - 1)}
        style={box({ border: '1px solid rgba(0,0,0,.14)', color: '#8B8B85', cursor: 'pointer' })}>←</button>
      {pages(page, total).map((n, i) => n === '…' ? (
        <span key={'e' + i} aria-hidden="true" style={box({ color: '#B0B0AA' })}>…</span>
      ) : n === page ? (
        <span key={n} aria-current="page" style={box({ background: '#1D1D1B', color: '#FFFFFF', fontWeight: 600 })}>{n}</span>
      ) : (
        <button key={n} type="button" className="zzm-page" onClick={() => go(n)}
          style={box({ border: '1px solid rgba(0,0,0,.14)', color: '#3F3F3B', cursor: 'pointer' })}>{n}</button>
      ))}
      <button type="button" className="zzm-page" aria-label="下一页" disabled={page >= total} onClick={() => go(page + 1)}
        style={box({ border: '1px solid rgba(0,0,0,.14)', color: '#8B8B85', cursor: 'pointer' })}>→</button>
    </nav>
  )
}