import { useEffect, useState } from 'react'

// A small stat-tile row for a "My Characters" page: total characters, how many
// are online right now, and how many game accounts are linked. `scope` is the
// shard api object (admin or player self-service). Renders nothing until an
// account is linked, so the empty/link-prompt state below it stands alone.
//
// It fetches the same rosters GameAccounts loads; for a personal page that's at
// most a couple of extra live round-trips, and keeps this presentational bit
// decoupled from GameAccounts' per-account roster loading.

function Tile({ value, label }) {
  return (
    <div className="panel" style={{ padding: 20, textAlign: 'center' }}>
      <div className="display" style={{ fontSize: '1.6rem', color: 'var(--head)' }}>{value}</div>
      <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: 8 }}>
        {label}
      </div>
    </div>
  )
}

export default function CharacterStats({ scope }) {
  const [stats, setStats] = useState(null)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      try {
        const accounts = await scope.accounts()
        const linked = accounts.length
        if (linked === 0) {
          if (!cancelled) setStats({ linked: 0 })
          return
        }
        // Roster is a live round-trip and can be unavailable (503); tolerate a
        // partial result so a restarting shard doesn't blank the whole row.
        const rosters = await Promise.allSettled(accounts.map((a) => scope.roster(a.account)))
        let chars = 0
        let online = 0
        let complete = true
        for (const r of rosters) {
          if (r.status === 'fulfilled') {
            const cs = r.value.chars || []
            chars += cs.length
            online += cs.filter((c) => c.online).length
          } else {
            complete = false
          }
        }
        if (!cancelled) setStats({ linked, chars, online, complete })
      } catch {
        if (!cancelled) setStats({ error: true })
      }
    })()
    return () => { cancelled = true }
  }, [scope])

  // Hidden until we know an account is linked (or while first loading).
  if (!stats || stats.error || stats.linked === 0) return null

  // Counts depend on live rosters; show a dash if none came back.
  const count = (n) => (stats.complete || stats.chars > 0 ? n : '—')

  return (
    <section className="grid-3" style={{ gap: 14, marginBottom: 26 }}>
      <Tile value={count(stats.chars)} label="Characters" />
      <Tile value={count(stats.online)} label="Online now" />
      <Tile value={stats.linked} label={stats.linked === 1 ? 'Linked account' : 'Linked accounts'} />
    </section>
  )
}
