const { useState: useStatePM } = React;

function PaymentScreen({ id }) {
  const { orders, submitPaymentReference, go, toast } = useStore();
  const [utr, setUtr] = useStatePM('');
  const [loading, setLoading] = useStatePM(false);
  const [success, setSuccess] = useStatePM(false);

  const order = orders.find(x => x.id === id);
  if (!order) return React.createElement('div', { className: 'page-wrap' }, 'Order not found');

  const payeeUpi = 'sales@kasdap'; // Customizable UPI ID
  const payeeName = 'Kasdap Healthcare';
  const upiLink = `upi://pay?pa=${payeeUpi}&pn=${encodeURIComponent(payeeName)}&am=${order.total}&cu=INR&tn=${encodeURIComponent('Order ' + order.id)}`;
  const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(upiLink)}`;

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!utr.trim()) return toast('Please enter a valid Transaction UTR number', 'warn');
    setLoading(true);
    try {
      if (window.KasdapAPI && window.KasdapAPI.live) {
        await submitPaymentReference(order.id, utr.trim());
      }
      // Update local state (optimistic)
      if (order.address) {
        order.address.utr = utr.trim();
        order.address.payment_status = 'pending_verification';
      }
      setSuccess(true);
      toast('Payment details submitted successfully!', 'ok');
    } catch (err) {
      toast(err.message || 'Submission failed', 'err');
    } finally {
      setLoading(false);
    }
  };

  if (success) {
    return React.createElement('div', { className: 'page-wrap' },
      React.createElement('div', { className: 'card card-pad', style: { maxWidth: 560, margin: '20px auto', textAlign: 'center' } },
        React.createElement('div', { className: 'ok-card' },
          React.createElement('div', { className: 'ok-ring' }, React.createElement(Icon, { name: 'check', size: 36 })),
          React.createElement('h2', { style: { fontSize: '1.5rem', margin: '14px 0 8px' } }, 'Payment reference submitted!'),
          React.createElement('p', { className: 'muted' }, 'We are verifying your transaction. Your order will be processed as soon as payment is confirmed by our accounts team.'),
          React.createElement('div', { style: { margin: '20px 0', padding: 16, borderRadius: 12, background: 'var(--surface-2)', border: '1px solid var(--border)', textAlign: 'left' } },
            React.createElement('div', { className: 'eyebrow' }, 'Transaction Reference'),
            React.createElement('div', { className: 'mono', style: { fontSize: '1.2rem', fontWeight: 700, marginTop: 4 } }, utr.trim()),
            React.createElement('div', { className: 'muted', style: { fontSize: '.84rem', marginTop: 6 } }, `Order ID: ${order.id} · ${fmt(order.total)}`)),
          React.createElement('div', { style: { display: 'flex', gap: 10, justifyContent: 'center' } },
            React.createElement('button', { className: 'btn btn-ghost', onClick: () => go('catalog') }, 'Back to Catalogue'),
            React.createElement('button', { className: 'btn btn-accent', onClick: () => go('order', { id: order.id }) }, React.createElement(Icon, { name: 'truck', size: 16 }), 'View Order Details')))
      )
    );
  }

  return React.createElement('div', { className: 'page-wrap' },
    React.createElement('div', { className: 'crumb' },
      React.createElement('button', { onClick: () => go('catalog') }, React.createElement(Icon, { name: 'back', size: 14 }), 'Catalogue'),
      React.createElement(Icon, { name: 'chevron', size: 13 }), React.createElement('span', { style: { color: 'var(--text-2)' } }, 'Payment')),
    React.createElement('h1', { style: { fontSize: '1.8rem', marginBottom: 4 } }, 'Complete Payment'),
    React.createElement('p', { className: 'muted', style: { marginBottom: 22, fontSize: '.9rem' } }, 'Scan the QR code below or transfer to the bank account and submit your UTR reference number.'),
    React.createElement('div', { className: 'co', style: { alignItems: 'start' } },
      React.createElement('div', { className: 'card card-pad', style: { flex: 1.2 } },
        React.createElement('div', { style: { display: 'flex', gap: 24, flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' } },
          React.createElement('div', { style: { textAlign: 'center', background: '#fff', padding: 16, borderRadius: 16, border: '1px solid var(--border)', display: 'inline-block' } },
            React.createElement('img', { src: qrUrl, alt: 'UPI QR Code', style: { display: 'block', width: 200, height: 200 } }),
            React.createElement('div', { style: { fontSize: '.75rem', color: '#555', marginTop: 8, fontWeight: 700 } }, 'Scan to pay with any UPI App')),
          React.createElement('div', { style: { flex: 1, minWidth: 260 } },
            React.createElement('div', { className: 'eyebrow', style: { marginBottom: 8 } }, 'Bank Transfer (NEFT/IMPS/RTGS)'),
            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8, fontSize: '.84rem' } },
              React.createElement('div', null, React.createElement('span', { className: 'muted' }, 'Account Name: '), React.createElement('strong', null, 'KASDAP HEALTHCARE PRIVATE LIMITED')),
              React.createElement('div', null, React.createElement('span', { className: 'muted' }, 'Bank Name: '), React.createElement('strong', null, 'HDFC Bank')),
              React.createElement('div', null, React.createElement('span', { className: 'muted' }, 'Account Number: '), React.createElement('strong', { className: 'mono', style: { fontSize: '.95rem' } }, '50200088998877')),
              React.createElement('div', null, React.createElement('span', { className: 'muted' }, 'IFSC Code: '), React.createElement('strong', { className: 'mono', style: { fontSize: '.95rem' } }, 'HDFC0000104')),
              React.createElement('div', null, React.createElement('span', { className: 'muted' }, 'Branch: '), React.createElement('strong', null, 'Hadapsar, Pune'))))
        )
      ),
      React.createElement('div', { className: 'co-aside', style: { flex: 0.8 } },
        React.createElement('div', { className: 'card card-pad' },
          React.createElement('div', { className: 'card-title', style: { marginBottom: 14 } }, 'Payment Details'),
          React.createElement('div', { className: 'sumrow tot', style: { borderTop: 'none', paddingTop: 0, marginBottom: 18 } }, React.createElement('span', null, 'Amount to Pay'), React.createElement('span', { className: 'v' }, fmt(order.total))),
          React.createElement('form', { onSubmit: handleSubmit },
            React.createElement('div', { className: 'field', style: { marginBottom: 14 } },
              React.createElement('label', null, 'UTR / Transaction ID (12-digit)'),
              React.createElement('input', { className: 'input mono', value: utr, onChange: e => setUtr(e.target.value.replace(/[^0-9a-zA-Z]/g, '')), placeholder: 'Enter UTR number', required: true, maxLength: 20 })),
            React.createElement('button', { className: 'btn btn-accent btn-block btn-lg', type: 'submit', disabled: loading },
              React.createElement(Icon, { name: 'shieldCheck', size: 16 }), loading ? 'Submitting…' : 'Confirm Payment'))
        )
      )
    )
  );
}

Object.assign(window, { PaymentScreen });