// This account's event participation (EVENTS.md §J, Phase 14a).
//
// **The screen's one real design decision is what an unranked row says.** A run
// whose participants were collected but whose results have not been published
// has a score and no rank, and that is a real state rather than an error — it is
// the same state the admin run console has shown since Phase 10. Rendering "—"
// with nothing explaining it would read as a bug; the row says "not published",
// which is a fact about the event rather than about the reader.
//
// The list is keyset-paged on the participation row's own id, not offset-paged:
// it gains a row every time the reader attends something.

import { useCallback, useState } from 'react'
import { Link } from 'react-router-dom'
import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
import { useAsync } from '../../lib/useAsync.js'
import { api } from '../../api/client.js'
import { eventDateTime } from '../../lib/eventCalendar.js'

const PAGE = 25

export default function PlayerEvents() {
  const [pages, setPages] = useState([])
  const [more, setMore] = useState(false)
  const [loadingMore, setLoadingMore] = useState(false)

  const load = useCallback(async () => {
    const result = await api.player.eventHistory({ limit: PAGE })
    setPages([result.entries || []])
    setMore((result.entries || []).length === PAGE)
    return result
  }, [])
  const { loading, error } = useAsync(load)

  const entries = pages.flat()

  const loadMore = async () => {
    const last = entries[entries.length - 1]
    if (!last) return
    setLoadingMore(true)
    try {
      const result = await api.player.eventHistory({ limit: PAGE, before: last.id })
      setPages((p) => [...p, result.entries || []])
      setMore((result.entries || []).length === PAGE)
    } finally {
      setLoadingMore(false)
    }
  }

  if (error) return <ErrorState message="Could not load your event history." />
  if (loading) return <Loading />
  if (entries.length === 0) {
    return <EmptyState>You have not taken part in an event yet.</EmptyState>
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {entries.map((e) => (
        <div key={e.id} className="panel" style={{ padding: '16px 20px', display: 'flex', gap: 18, flexWrap: 'wrap' }}>
          <span style={{ flex: 1, minWidth: 240 }}>
            <Link to={`/site/events/${e.slug}?run=${e.runId}`} style={{ fontSize: '1.05rem' }}>
              {e.title}
            </Link>
            <div className="dim sans" style={{ fontSize: '0.82rem', marginTop: 4 }}>
              {eventDateTime(e.scheduledFor, e.timezone)}
              {e.seriesName && ` · ${e.seriesName}`}
            </div>
          </span>
          <span style={{ textAlign: 'right', minWidth: 140 }}>
            <div className="sans" style={{ color: 'var(--head)' }}>
              {e.rank != null ? `Rank ${e.rank}` : <span className="dim">Results not published</span>}
            </div>
            <div className="dim sans" style={{ fontSize: '0.82rem' }}>Score {e.score}</div>
          </span>
        </div>
      ))}
      {more && (
        <button className="btn" onClick={loadMore} disabled={loadingMore}>
          {loadingMore ? 'Loading…' : 'Show more'}
        </button>
      )}
    </div>
  )
}