// screen-reg.jsx — WSOP 2026 late-reg countdowns.

const { useState: rU, useEffect: rE, useMemo: rM } = React;

function RegScreen({ onNav }) {
  const { Footer, fmtMoney, fmtCountdown } = window.PJ_UI;
  const [now, setNow] = rU(Date.now());

  rE(() => {
    const t = setInterval(() => setNow(Date.now()), 30000);
    return () => clearInterval(t);
  }, []);

  const events = rM(() => {
    const list = (window.WSOP_2026 || []).slice();
    return list.sort((a, b) => {
      const aOpen = new Date(a.regCloseAt).getTime() > now;
      const bOpen = new Date(b.regCloseAt).getTime() > now;
      if (aOpen !== bOpen) return aOpen ? -1 : 1; // open first
      return new Date(a.regCloseAt).getTime() - new Date(b.regCloseAt).getTime();
    });
  }, [now]);

  return (
    <div className="page">
      <div className="eyebrow gold" style={{ marginBottom: 8 }}>◆ Late reg — WSOP 2026</div>
      <h2 className="serif" style={{ fontSize: 40, lineHeight: 1, marginBottom: 8 }}>What's still open.</h2>
      <p className="paper" style={{ marginBottom: 28 }}>
        Sorted by reg close. Tap an event to open a swap pre-filled for it.
      </p>

      {events.map(e => {
        const closeMs = new Date(e.regCloseAt).getTime();
        const open = closeMs > now;
        const closesIn = fmtCountdown(e.regCloseAt);
        const startDate = new Date(e.startAt);
        const startStr = startDate.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
        return (
          <div
            key={e.id}
            className="card-row"
            onClick={() => onNav('/new?tournament=' + encodeURIComponent(e.name))}
            style={{ borderColor: open ? 'var(--line)' : 'rgba(231,76,60,0.35)' }}
          >
            <div style={{ minWidth: 0, flex: 1 }}>
              <div className="serif" style={{ fontSize: 16, color: 'var(--ivory)', marginBottom: 4, lineHeight: 1.2 }}>
                {e.name}
              </div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.06em' }}>
                {e.venue.toUpperCase()} · {startStr.toUpperCase()} · {fmtMoney(e.buyIn)}
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="num serif" style={{ fontSize: 22, color: open ? 'var(--green-bright)' : 'var(--red-bright)', lineHeight: 1 }}>
                {closesIn}
              </div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--muted)', letterSpacing: '0.10em', textTransform: 'uppercase', marginTop: 4 }}>
                {open ? 'till close' : 'closed'}
              </div>
            </div>
          </div>
        );
      })}

      <p className="help" style={{ textAlign: 'center', marginTop: 24 }}>
        Times are best-known WSOP 2026 published schedule. Confirm at the cage.
      </p>

      <Footer />
    </div>
  );
}

window.RegScreen = RegScreen;