// UpiQr.jsx — "Pay via UPI" QR block (manual/placeholder until a payment gateway is integrated)
//
// Generates a real, scannable UPI deep-link QR client-side (via vendor/qrcode-generator.js —
// no network call, no third-party image API). No payment confirmation happens automatically —
// admin marks the order "Paid" by hand in the admin panel once the money lands. Swap this out
// for a gateway checkout (Razorpay/Cashfree/etc.) later without touching the order flow.

const BB_UPI_VPA  = 'blocktechindia@okaxis';
const BB_UPI_NAME = 'Blissful Bites';

function buildUpiLink({ amount, note, ref }) {
  const params = new URLSearchParams({
    pa: BB_UPI_VPA,
    pn: BB_UPI_NAME,
    am: String(amount),
    cu: 'INR',
  });
  if (note) params.set('tn', note);
  if (ref) params.set('tr', ref);
  return `upi://pay?${params.toString()}`;
}

function UpiQr({ amount, note, ref }) {
  const [svg, setSvg] = React.useState('');
  const [copied, setCopied] = React.useState(false);
  const link = buildUpiLink({ amount, note, ref });

  React.useEffect(() => {
    if (!window.qrcode) { setSvg(''); return; }
    const qr = window.qrcode(0, 'M');
    qr.addData(link);
    qr.make();
    setSvg(qr.createSvgTag({ cellSize: 5, margin: 0, scalable: true }));
  }, [link]);

  const copyVpa = () => {
    navigator.clipboard?.writeText(BB_UPI_VPA).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    });
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, padding: '18px 16px', background: 'var(--bb-cream)', border: '1px solid var(--line-gold)', borderRadius: 14, textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 9.5, letterSpacing: '0.22em', color: 'var(--bb-gold-deep)' }}>SCAN TO PAY ₹{Number(amount).toLocaleString('en-IN')} VIA UPI</div>
      <div style={{ width: 170, height: 170, background: '#fff', borderRadius: 10, border: '1px solid var(--line)', display: 'grid', placeItems: 'center', padding: 8 }}
        dangerouslySetInnerHTML={{ __html: svg }} />
      <a href={link} className="btn btn-secondary" style={{ padding: '9px 18px', fontSize: 10 }}>Open in UPI app →</a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2 }}>
        <span style={{ fontFamily: 'monospace', fontSize: 13, color: 'var(--bb-cocoa)' }}>{BB_UPI_VPA}</span>
        <button onClick={copyVpa} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--bb-burgundy)', fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.12em', padding: 0, textDecoration: 'underline' }}>
          {copied ? 'COPIED ✓' : 'COPY'}
        </button>
      </div>
      <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 12, color: 'var(--fg-3)', maxWidth: 260, lineHeight: 1.5 }}>
        Pay with any UPI app (GPay, PhonePe, Paytm…), then tap "Place Order". We'll confirm receipt and start preparing your gift.
      </div>
    </div>
  );
}

window.UpiQr = UpiQr;
window.BB_UPI_VPA = BB_UPI_VPA;