import { useMemo } from 'react'
import { useAsync } from '../lib/useAsync.js'
import { useShardFeed } from '../lib/useShardFeed.js'
import { bucketize } from '../data/regionBuckets.js'
import { api } from '../api/client.js'

// Compact live "Players Online" widget. Loads the presence.online aggregate once,
// then keeps the total + region breakdown current from the presence.online SSE
// kind. The raw byRegion map is rolled up into display buckets (see
// data/regionBuckets.js). NOT a page — drop it into any panel/column.
const PRESENCE_KINDS = new Set(['presence.online'])

export default function PlayersOnline() {
  const { loading, error, data } = useAsync(() => api.shard.presence())
  const { events } = useShardFeed({ filter: PRESENCE_KINDS, max: 4 })

  // The freshest snapshot wins: the newest buffered presence.online event, else
  // the initial fetch.
  const snapshot = events[0] || data

  const { total, rows } = useMemo(() => {
    const count = Number(snapshot?.count) || 0
    const { rows: bucketRows } = bucketize(snapshot?.byRegion)
    return { total: count, rows: bucketRows }
  }, [snapshot])

  return (
    <section className="panel" style={{ padding: 20 }}>
      <div
        className="sans"
        style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}
      >
        <span
          style={{
            color: 'var(--accent)',
            fontSize: '0.7rem',
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
          }}
        >
          Players online
        </span>
        <span className="display" style={{ fontSize: '1.5rem', color: 'var(--head)', lineHeight: 1 }}>
          {loading ? '—' : total}
        </span>
      </div>

      {error && (
        <p className="sans dim" style={{ margin: '12px 0 0', fontSize: '0.84rem' }}>
          Population is unavailable right now.
        </p>
      )}

      {!loading && !error && (
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
          {rows.length === 0 ? (
            <p className="sans dim" style={{ margin: 0, fontSize: '0.84rem' }}>
              {total > 0 ? 'Locations are settling…' : 'The realm is quiet.'}
            </p>
          ) : (
            rows.map((r) => (
              <div
                key={r.id}
                className="sans"
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: 12,
                  fontSize: '0.9rem',
                  color: 'var(--ink)',
                }}
              >
                <span>{r.label}</span>
                {/* tabular figures keep the right-aligned counts in a clean column */}
                <span className="dim" style={{ fontVariantNumeric: 'tabular-nums' }}>{r.count}</span>
              </div>
            ))
          )}
        </div>
      )}
    </section>
  )
}