Profeto/frontend/src/pages/matches/ui.tsx

/**
 * Matches 页面族共享的原子 UI 小件(无业务状态)。
 *
 * D3: 从 Matches.tsx 内联定义上移到模块级 —— Switch 原先定义在组件函数
 * 体内(每次渲染重建组件对象),它没有内部 state,提升后渲染结果一致。
 */
import type { Match } from './types'

export function Spinner({ className = '' }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 20 20"
      className={`h-3.5 w-3.5 animate-spin ${className}`}
      fill="none"
      aria-hidden="true"
    >
      <circle cx="10" cy="10" r="7.5" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.25" />
      <path d="M17.5 10A7.5 7.5 0 0010 2.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  )
}

/** 骨架占位行:低调脉动灰块 */
export function SkeletonRows({ n = 4 }: { n?: number }) {
  return (
    <>
      {Array.from({ length: n }).map((_, i) => (
        <div key={i} className="flex items-center gap-4 border-b border-ink-200 px-1 py-3.5">
          <div className="skeleton h-3 w-16" />
          <div className="skeleton h-3 flex-1" />
          <div className="skeleton h-3 w-10" />
          <div className="skeleton h-3 flex-1" />
          <div className="skeleton h-3 w-16" />
        </div>
      ))}
    </>
  )
}

/** 状态/模式一组的文字切换 */
export function Switch({ value, onChange, items }: {
  value: string
  onChange: (v: string) => void
  items: { v: string; label: string; title?: string }[]
}) {
  return (
    <span className="inline-flex items-center gap-2.5">
      {items.map((it, i) => (
        <span key={it.v} className="inline-flex items-center gap-2.5">
          {i > 0 && <span className="text-ink-300" aria-hidden="true">/</span>}
          <button
            onClick={() => onChange(it.v)}
            title={it.title}
            className={`relative tab ${value === it.v ? 'tab-on' : ''} text-xs`}
          >
            {it.label}
          </button>
        </span>
      ))}
    </span>
  )
}

/** 日期分组头显示:今日/明天/周几 · 年月日 */
export function formatDateHeader(dateKey: string): string {
  if (!dateKey) return '未开赛'
  const d = new Date(dateKey + 'T00:00:00')
  if (isNaN(d.getTime())) return dateKey
  const today = new Date()
  const todayKey = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
  const tmr = new Date(today)
  tmr.setDate(tmr.getDate() + 1)
  const tmrKey = `${tmr.getFullYear()}-${String(tmr.getMonth() + 1).padStart(2, '0')}-${String(tmr.getDate()).padStart(2, '0')}`
  const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()]
  if (dateKey === todayKey) return `今日 ${weekday}`
  if (dateKey === tmrKey) return `明日 ${weekday}`
  return `${d.getMonth() + 1}月${d.getDate()}日 ${weekday}`
}

/** UTC ISO → 本地日期 YYYY-MM-DD(用于分组) */
export function toLocalDateKey(iso: string): string {
  const d = new Date(iso)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

/** 按本地日期分组(非 UTC),保持时间序 */
export function groupByDate(list: Match[]): Array<[string, Match[]]> {
  const map = new Map<string, Match[]>()
  for (const m of list) {
    const key = toLocalDateKey(m.match_date)
    const arr = map.get(key)
    if (arr) arr.push(m)
    else map.set(key, [m])
  }
  return [...map.entries()]
}

/** 日期 key 辅助:YYYY-MM-DD(本地时区) */
function dateKey(d: Date): string {
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

/** 未来 3 天窗口:今天 00:00 → 第 3 天 00:00(即今天/明天/后天) */
function addDays(d: Date, n: number): string {
  const x = new Date(d)
  x.setFullYear(x.getFullYear(), x.getMonth(), x.getDate() + n)
  return dateKey(x)
}

/** 比赛是否在未来 3 天内(用于默认视图过滤) */
export function withinNext3Days(matchDate: string): boolean {
  const key = toLocalDateKey(matchDate)
  return key >= dateKey(new Date()) && key < addDays(new Date(), 3)
}