/* S6 — checkout handoff + single $29 payment. */
const DSch = window.SparkleClassicDesignSystem_7a1470;

function TrustRow() {
  const { Icon } = DSch;
  const items = [['lock', 'Secure payment'], ['clock', 'Ready in 24h'], ['heart', 'Made by a real person']];
  return (
    <div style={{ display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap', marginTop: 14 }}>
      {items.map(([icon, t]) => (
        <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 700, color: 'var(--plum-accent)' }}>
          <Icon name={icon} size={15} aria-hidden="true" /> {t}
        </span>
      ))}
    </div>
  );
}

function CheckoutScreen({ data, onBack, onPaid }) {
  const { Button, Card, Input, Icon } = DSch;
  const [paying, setPaying] = React.useState(false);
  const pet = data.petName || 'Your pet';
  const total = orderTotal(data);

  const pay = () => {
    setPaying(true);
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    setTimeout(onPaid, reduce ? 0 : 1100);
  };

  if (paying) {
    return (
      <div style={{ padding: '64px 24px', textAlign: 'center', minHeight: 440, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <div className="spk-spin" style={{ width: 46, height: 46, boxShadow: 'var(--ofx-edges)', borderRadius: '50%', borderTop: '4px solid var(--plum-ink)', borderRight: '4px solid transparent', marginBottom: 20 }} aria-hidden="true" />
        <h2 className="spk-h2" style={{ fontSize: 22, margin: '0 0 6px' }}>Confirming payment&hellip;</h2>
        <p className="spk-muted" style={{ fontSize: 14, margin: 0 }}>Hang tight — don&rsquo;t close this page.</p>
      </div>
    );
  }

  return (
    <div style={{ padding: '2px 18px 30px' }}>
      <StepRail step={1} />
      <h1 className="spk-h2" style={{ fontSize: 25, textAlign: 'center', margin: '16px 0 6px' }}>Secure checkout</h1>
      <p className="spk-muted" style={{ textAlign: 'center', margin: '0 0 16px', fontSize: 14 }}>
        Your game, delivered in about 24 hours, or your money back.
      </p>

      {/* order summary */}
      <Card surface="cream" padding="md" style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          {data.photoUrl ? (
            <img src={data.photoUrl} alt="" style={{ width: 54, height: 54, objectFit: 'cover', boxShadow: 'var(--ofx-edges)', flex: '0 0 auto' }} />
          ) : (
            <div style={{ width: 54, height: 54, background: 'var(--mint)', boxShadow: 'var(--ofx-edges)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sprite-outline)', flex: '0 0 auto' }}>
              <Icon name="gamepad" size={24} />
            </div>
          )}
          <div style={{ flex: 1, minWidth: 0 }}>
            <strong style={{ fontSize: 16, color: 'var(--plum-ink)' }}>{pet}&rsquo;s platformer</strong>
            <div className="spk-muted" style={{ fontSize: 13 }}>Custom retro game · private link</div>
          </div>
          <strong style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--plum-ink)' }}>${BASE_PRICE}</strong>
        </div>

        {data.toyAddon && (
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 12, paddingTop: 12, borderTop: '2px solid var(--border-soft)' }}>
            {data.toyPhotoUrl ? (
              <img src={data.toyPhotoUrl} alt="" style={{ width: 54, height: 54, objectFit: 'cover', boxShadow: 'var(--ofx-edges)', flex: '0 0 auto' }} />
            ) : (
              <div style={{ width: 54, height: 54, background: 'var(--sunshine)', boxShadow: 'var(--ofx-edges)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sprite-outline)', flex: '0 0 auto' }}>
                <Icon name="heart" size={22} />
              </div>
            )}
            <div style={{ flex: 1, minWidth: 0 }}>
              <strong style={{ fontSize: 16, color: 'var(--plum-ink)' }}>Favorite toy add-on</strong>
              <div className="spk-muted" style={{ fontSize: 13 }}>Pixel toy hidden in the game</div>
            </div>
            <strong style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--plum-ink)' }}>${TOY_PRICE}</strong>
          </div>
        )}

        <div style={{ borderTop: '2px solid var(--border-soft)', marginTop: 12, paddingTop: 10, display: 'flex', justifyContent: 'space-between', fontWeight: 800, color: 'var(--plum-ink)' }}>
          <span style={{ whiteSpace: 'nowrap' }}>Total today</span><span>${total}.00</span>
        </div>
      </Card>

      {/* payment fields (mock) */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Input label="Email" type="email" placeholder="you@email.com" leftIcon={<Icon name="mail" />} defaultValue={data.email || ''} />
        <Input label="Card number" placeholder="1234 1234 1234 1234" leftIcon={<Icon name="credit-card" />} inputMode="numeric" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <Input label="Expiry" placeholder="MM / YY" inputMode="numeric" />
          <Input label="CVC" placeholder="123" inputMode="numeric" />
        </div>
      </div>

      <Button variant="primary" size="lg" fullWidth onClick={pay} leftIcon={<Icon name="lock" />} style={{ marginTop: 20 }}>
        {`Pay $${total}`}
      </Button>
      <TrustRow />

      <div style={{ textAlign: 'center', marginTop: 16 }}>
        <button onClick={onBack} style={{ background: 'none', border: 'none', color: 'var(--plum-accent)', textDecoration: 'underline', cursor: 'pointer', fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="arrow-left" size={14} /> Back to your pet&rsquo;s details
        </button>
        <p className="spk-muted" style={{ fontSize: 12, marginTop: 8 }}>
          Change your mind? Your photo and details stay saved here.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { CheckoutScreen });