window.RazorpayModal = function RazorpayModal({ totals, rzKey, onClose, onSuccess }) {
  const { useState } = React;
  const [step, setStep] = useState(0);
  const [loading, setLoading] = useState(false);
  const [orderId] = useState(genOrderId);
  const [form, setForm] = useState({
    name:'', email:'', phone:'',
    address:'', city:'', pincode:''
  });
  const [errs, setErrs] = useState({});
  const set = (k,v)=>{ setForm(f=>({...f,[k]:v})); setErrs(e=>({...e,[k]:false})); };

  function validate() {
    const e={};
    if(!form.name) e.name=1;
    if(!form.email||!form.email.includes('@')) e.email=1;
    if(!form.phone||form.phone.replace(/\D/g,'').length<10) e.phone=1;
    if(!form.address) e.address=1;
    if(!form.city) e.city=1;
    if(!form.pincode||form.pincode.length<6) e.pincode=1;
    return e;
  }

  function openRazorpay() {
    const e=validate();
    if(Object.keys(e).length){ setErrs(e); return; }

    if(window.Razorpay && rzKey && !rzKey.includes('YourKey')) {
      const options = {
        key: rzKey,
        amount: Math.round(totals.total * 100),
        currency: 'INR',
        name: 'Divine Leaf',
        description: 'Organic Henna Powder',
        image: 'uploads/Screenshot 2026-05-01 at 5.03.28 PM.png',
        order_id: '',
        handler: function(response) {
          setStep(2);
          onSuccess && onSuccess(response);
        },
        prefill: {
          name: form.name,
          email: form.email,
          contact: form.phone,
        },
        notes: { address: form.address + ', ' + form.city + ' - ' + form.pincode },
        theme: { color: '#072654' },
        modal: { ondismiss: ()=>{ setLoading(false); } }
      };
      setLoading(true);
      const rz = new window.Razorpay(options);
      rz.on('payment.failed', ()=>{ setLoading(false); });
      rz.open();
    } else {
      setLoading(true);
      setTimeout(()=>{ setLoading(false); setStep(2); }, 2200);
    }
  }

  const rzSteps = ['Summary','Details'];

  return (
    <div className="rz-modal-overlay" onClick={e=>{if(e.target===e.currentTarget&&step<2)onClose();}}>
      <div className="rz-modal">
        <div className="rz-modal-header">
          <div className="rz-modal-title">
            {step===2 ? '✅ Payment Successful' : '🔒 Secure Checkout'}
          </div>
          {step<2 && <button className="rz-modal-close" onClick={onClose}>✕</button>}
        </div>
        <div className="rz-modal-body">

          {step<2 && (
            <div className="rz-steps">
              {rzSteps.map((l,i)=>(
                <React.Fragment key={i}>
                  <div className={`rz-step-pip ${step===i?'active':step>i?'done':''}`}>
                    {step>i?'✓':i+1}
                  </div>
                  <span className={`rz-step-label ${step===i?'active':''}`}>{l}</span>
                  {i<rzSteps.length-1 && <div className={`rz-step-line ${step>i?'done':''}`}/>}
                </React.Fragment>
              ))}
            </div>
          )}

          {step===0 && (
            <div>
              <div style={{fontFamily:'Playfair Display,Georgia,serif',fontSize:19,color:'var(--forest)',marginBottom:16}}>Order Summary</div>
              <div className="order-sum-row">
                <div className="order-sum-swatch"><img src={PRODUCT.img} alt="product"/></div>
                <div className="order-sum-details">
                  <div className="order-sum-name">{PRODUCT.name}</div>
                  <div className="order-sum-meta">{PRODUCT.meta}</div>
                </div>
                <div className="order-sum-price">₹{totals.subtotal.toFixed(0)}</div>
              </div>
              <div className="order-lines">
                <div className="order-line"><span>Subtotal</span><span className="amt">₹{totals.subtotal.toFixed(0)}</span></div>
                <div className="order-line"><span>Shipping</span><span className="amt">{totals.shipping===0?'FREE':'₹'+totals.shipping}</span></div>
                <div className="order-line total"><span>Total</span><span className="amt">₹{totals.total.toFixed(0)}</span></div>
              </div>
              <div className="rz-pay-methods">
                {['💳 Cards','🏦 NetBanking','📱 UPI','💰 Wallets','🏪 EMI'].map(m=>(
                  <div key={m} className="rz-pay-method">{m}</div>
                ))}
              </div>
              <button className="btn-rz-pay" onClick={()=>setStep(1)}>
                Continue →
              </button>
              <div className="rz-powered" style={{marginTop:12}}>Powered by <strong>Razorpay</strong> · 256-bit SSL Encrypted</div>
            </div>
          )}

          {step===1 && (
            <div className="form-grid">
              <div style={{fontFamily:'Playfair Display,Georgia,serif',fontSize:19,color:'var(--forest)',marginBottom:4}}>Your Details</div>
              <div className="form-group">
                <label className="form-label">Full Name</label>
                <input className={`form-input${errs.name?' err':''}`} placeholder="Priya Sharma" value={form.name} onChange={e=>set('name',e.target.value)}/>
              </div>
              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">Email</label>
                  <input className={`form-input${errs.email?' err':''}`} placeholder="priya@email.com" type="email" value={form.email} onChange={e=>set('email',e.target.value)}/>
                </div>
                <div className="form-group">
                  <label className="form-label">Phone</label>
                  <input className={`form-input${errs.phone?' err':''}`} placeholder="+91 98765 43210" value={form.phone} onChange={e=>set('phone',e.target.value)}/>
                </div>
              </div>
              <div className="form-group">
                <label className="form-label">Delivery Address</label>
                <input className={`form-input${errs.address?' err':''}`} placeholder="House No, Street, Area" value={form.address} onChange={e=>set('address',e.target.value)}/>
              </div>
              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">City</label>
                  <input className={`form-input${errs.city?' err':''}`} placeholder="Delhi" value={form.city} onChange={e=>set('city',e.target.value)}/>
                </div>
                <div className="form-group">
                  <label className="form-label">PIN Code</label>
                  <input className={`form-input${errs.pincode?' err':''}`} placeholder="110001" maxLength={6} value={form.pincode} onChange={e=>set('pincode',e.target.value.replace(/\D/g,'').slice(0,6))}/>
                </div>
              </div>
              <div className="order-line total" style={{marginTop:4}}>
                <span>Total Due</span>
                <span className="amt">₹{totals.total.toFixed(0)}</span>
              </div>
              <button className="btn-rz-pay" onClick={openRazorpay} disabled={loading}>
                {loading ? (
                  <span style={{display:'flex',alignItems:'center',gap:10}}>
                    <svg style={{animation:'spin 1s linear infinite'}} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>
                    Processing Payment…
                  </span>
                ) : (
                  <>Pay ₹{totals.total.toFixed(0)} via Razorpay</>
                )}
              </button>
              <div className="rz-powered">Powered by <strong>Razorpay</strong> · Your payment is 100% secure</div>
            </div>
          )}

          {step===2 && (
            <div className="success-screen">
              <div className="success-icon">🌿</div>
              <div className="success-title">Payment Successful!</div>
              <div className="success-sub">
                Thank you, {form.name||'friend'}! Your Divine Leaf Organic Henna is confirmed and will be shipped to {form.city||'your address'} within 3–5 business days.
              </div>
              <div className="success-order-id">Order ID: <strong>{orderId}</strong></div>
              <button className="btn-primary" onClick={()=>{ onClose(); onSuccess && onSuccess(); }}>
                Continue Shopping
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};