// ── Every wipe this server has had ────────────────────────────────────────
//
// The list is what makes the rest of the page navigable — picking a wipe here
// filters the feed and the leaderboard — and it is also the proof R12 asks for:
// a wipe that ended is still here, with its record still attached. A Rust server
// wipes monthly, and a community site that forgot the previous map every time
// would throw away most of what it knows about its own players.
//
// `wipeId` is derived by the bridge PLUGIN from the save's creation time and
// stamped on every frame (PROTOCOL.md §8.2), so the id in this list is the same
// id the events and the leaderboard filter by. There is no second derivation
// anywhere that could disagree.

import { EmptyState, ErrorState, Loading, useAsync } from '../core.js'
import { ago, day } from '../lib/format.js'
import api from '../api.js'

export default function Wipes({ serverId, currentWipeId, selected, onSelect }) {
  const { data, loading, error } = useAsync(() => api.servers.wipes(serverId), [serverId])
  const wipes = data ? data.wipes : []

  if (loading) return <Loading />
  if (error) return <ErrorState error={error} />

  if (wipes.length === 0) {
    return (
      <EmptyState
        title="No wipes recorded"
        message="A wipe appears here once this server has reported something during it."
      />
    )
  }

  return (
    <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
      {wipes.map((wipe) => {
        const current = wipe.wipeId === currentWipeId
        const active = wipe.wipeId === selected
        return (
          <li key={wipe.wipeId} style={{ borderBottom: '1px solid var(--line-soft, var(--line))' }}>
            <button
              type="button"
              onClick={() => onSelect(wipe.wipeId)}
              style={{
                display: 'flex',
                width: '100%',
                gap: 12,
                alignItems: 'baseline',
                justifyContent: 'space-between',
                padding: '10px 6px',
                cursor: 'pointer',
                background: active ? 'var(--blue)' : 'transparent',
                border: 'none',
                color: 'inherit',
                font: 'inherit',
                textAlign: 'left',
              }}
            >
              <span>
                <strong style={{ color: 'var(--ink)' }}>
                  {/* The save's creation time is the wipe's own date; `firstSeen`
                      is when THIS website first heard about it, and they differ
                      by however long the module was not installed. The first is
                      the wipe, so it leads. */}
                  {day(wipe.saveCreatedAt || wipe.firstSeen)}
                </strong>
                {current && (
                  <span className="sans" style={{ color: 'var(--mode-live, #5fb98a)', fontSize: '0.74rem' }}>
                    {' · current'}
                  </span>
                )}
                <span className="sans" style={{ display: 'block', color: 'var(--dim)', fontSize: '0.74rem' }}>
                  {wipe.wipeId}
                </span>
              </span>
              <span className="sans" style={{ color: 'var(--dim)', fontSize: '0.78rem', whiteSpace: 'nowrap' }}>
                last heard {ago(wipe.lastSeen)}
              </span>
            </button>
          </li>
        )
      })}
    </ul>
  )
}