// screen-myswaps.jsx — list of swaps for this device/handle.

const { useState: mU, useEffect: mE } = React;

function MySwapsScreen({ onNav }) {
  const { Footer, fmtMoney, fmtPct, fmtDateTime } = window.PJ_UI;
  const [swaps, setSwaps] = mU([]);
  const [loading, setLoading] = mU(true);
  const [err, setErr] = mU(null);

  mE(() => {
    (async () => {
      try {
        const list = await window.pjListMySwaps();
        setSwaps(list);
      } catch (e) { setErr(e.message || String(e)); }
      finally { setLoading(false); }
    })();
  }, []);

  const groups = {
    pending: swaps.filter(s => s.status === 'pending'),
    locked: swaps.filter(s => s.status === 'locked'),
    settled: swaps.filter(s => s.status === 'settled' || s.status === 'cancelled')
  };

  const me = (window.pjGetHandle() || '').toLowerCase();
  const myDevice = window.pjDeviceId;

  return (
    <div className="page">
      <div className="eyebrow gold" style={{ marginBottom: 8 }}>◆ Your swaps</div>
      <h2 className="serif" style={{ fontSize: 40, lineHeight: 1, marginBottom: 8 }}>The book.</h2>
      <p className="paper" style={{ marginBottom: 28 }}>
        Every swap you've started or signed. Tap to view the record.
      </p>

      {loading && <p className="mono muted center">Loading…</p>}
      {err && (
        <div className="card" style={{ borderColor: 'rgba(231,76,60,0.5)', background: 'var(--red-tint)' }}>
          <div className="mono" style={{ fontSize: 12, color: 'var(--red-bright)' }}>{err}</div>
        </div>
      )}

      {!loading && swaps.length === 0 && (
        <div className="card center" style={{ padding: 32 }}>
          <div className="serif" style={{ fontSize: 24, marginBottom: 8 }}>No swaps yet.</div>
          <p className="paper" style={{ marginBottom: 20 }}>Start one. It takes 3 seconds.</p>
          <button className="btn btn-gold" onClick={() => onNav('/new')}>Start a swap</button>
        </div>
      )}

      {['pending', 'locked', 'settled'].map(key => (
        groups[key].length > 0 && (
          <section key={key} style={{ marginBottom: 28 }}>
            <div className="row-between" style={{ marginBottom: 10 }}>
              <div className="eyebrow gold">
                {key === 'pending' ? '◆ Pending' : key === 'locked' ? '◆ Locked' : '◆ Settled'}
              </div>
              <div className="mono muted" style={{ fontSize: 11 }}>{groups[key].length}</div>
            </div>
            {groups[key].map(s => {
              const isOrig = s.originator_device_id === myDevice
                || (me && (s.originator_handle || '').toLowerCase() === me);
              const counterparty = isOrig ? (s.acceptor_handle || 'awaiting') : s.originator_handle;
              const myPct = isOrig ? s.originator_pct : s.acceptor_pct;
              const theirPct = isOrig ? s.acceptor_pct : s.originator_pct;
              const role = isOrig ? 'originator' : 'acceptor';
              return (
                <div
                  key={s.id}
                  className="card-row"
                  onClick={() => onNav(`/s/${s.id}?role=${role}&token=${s.secret_token || ''}`)}
                >
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div className="serif" style={{ fontSize: 16, color: 'var(--ivory)', marginBottom: 4 }}>
                      {s.tournament_name}
                    </div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.06em' }}>
                      {fmtMoney(s.buy_in)} · {fmtPct(myPct)} ↔ {fmtPct(theirPct)} · {counterparty || '—'}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <span className={'tag ' + (s.status === 'locked' ? 'tag-gold' : s.status === 'pending' ? 'tag-amber' : 'tag-green')}>
                      {s.status}
                    </span>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', marginTop: 4 }}>
                      {fmtDateTime(s.locked_at || s.accepted_at || s.created_at)}
                    </div>
                  </div>
                </div>
              );
            })}
          </section>
        )
      ))}

      <Footer />
    </div>
  );
}

window.MySwapsScreen = MySwapsScreen;