/* global React, addStubCard */
// PaymentGateSheet (Hub phase 1) — the single card-on-file gate reused by
// every join flow: waitlist now; pools, open seats, and group-seat accepts
// next. The product promise is baked into the copy — you'll never be
// charged until your match is confirmed. Pre-Stripe this saves a TEST
// card; no real money moves anywhere in beta.

function PaymentGateSheet({ open, onClose, onAdded, userId, context }) {
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');

  React.useEffect(() => { if (open) { setBusy(false); setErr(''); } }, [open]);
  if (!open) return null;

  async function save() {
    if (busy) return;
    setBusy(true); setErr('');
    try {
      await addStubCard(userId);
      onAdded && onAdded();
    } catch (e) {
      setErr(e.message || 'Could not save the card.');
      setBusy(false);
    }
  }

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 900,
      background: 'rgba(14,28,19,0.55)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxWidth: 480, background: 'var(--paper)',
        borderRadius: '24px 24px 0 0', padding: '22px 20px 30px',
        boxShadow: '0 -12px 40px rgba(14,28,19,0.3)',
      }}>
        <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--forest)', opacity: 0.55, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          Payment method
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--forest)', lineHeight: 1.05, marginTop: 8, letterSpacing: '-0.01em' }}>
          Add a card to join
        </div>
        <div className="caption-serif" style={{ fontSize: 14, opacity: 0.7, marginTop: 6, lineHeight: 1.5 }}>
          {context || 'A card on file is what lets us lock your tee time the instant a match forms.'}
        </div>

        {/* The test card */}
        <div style={{
          marginTop: 16, borderRadius: 18, padding: '18px 18px 16px', position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(135deg, var(--forest-dark) 0%, var(--forest) 55%, var(--moss) 100%)',
          color: 'var(--cream)', boxShadow: 'var(--shadow-md)',
        }}>
          <div className="grain" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.75, fontWeight: 700 }}>Sandbox test card</span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 14, letterSpacing: '0.04em' }}>VISA</span>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, letterSpacing: '0.12em', marginTop: 18 }}>
              •••• •••• •••• 4242
            </div>
            <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', opacity: 0.65, marginTop: 10, letterSpacing: '0.06em' }}>
              NO REAL MONEY MOVES IN BETA
            </div>
          </div>
        </div>

        {/* The promise */}
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginTop: 14 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--forest)', flexShrink: 0, marginTop: 4 }}/>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--forest)', lineHeight: 1.45 }}>
            You'll never be charged until your match is confirmed.
            <span style={{ display: 'block', fontWeight: 400, fontSize: 12, opacity: 0.65, marginTop: 2 }}>
              Joining a waitlist is free — your card is only charged when your foursome locks in.
            </span>
          </div>
        </div>

        {err && <div style={{ fontSize: 12, color: 'var(--loss, #B23B2B)', fontWeight: 600, marginTop: 10 }}>{err}</div>}

        <button onClick={save} disabled={busy} style={{
          marginTop: 16, width: '100%', padding: '14px 14px', borderRadius: 13,
          background: 'var(--forest)', border: 'none', color: 'var(--cream)',
          fontSize: 14, fontWeight: 800, cursor: 'pointer', opacity: busy ? 0.6 : 1,
        }}>
          {busy ? 'Saving…' : 'Save card & continue'}
        </button>
        <button onClick={onClose} style={{
          marginTop: 8, width: '100%', padding: '10px 0', background: 'transparent', border: 'none',
          color: 'var(--forest)', fontSize: 12, fontWeight: 700, cursor: 'pointer', opacity: 0.6,
        }}>
          Not now
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { PaymentGateSheet });