// HimLocal — v2 Profile, Itinerary screen, Cafés modal

const { useState: useStateProf } = React;
const ProfIcon = window.HomeIcon;

// ─── Profile (tabbed: Stays / Orders / Activities / Account) ───────────────
function V2ProfileScreen({ data, onClose, onOpenItin, onOpenReceipt, onEditPersonal, onEditAddress, onAddAddress }) {
  const p = data.profile;
  const [tab, setTab] = useStateProf('stays');
  return (
    <div className="v2-profile">
      <div className="v2-profile__head">
        <button className="v2-profile__close" onClick={onClose} aria-label="Close">×</button>
        <div className="v2-profile__row">
          <div className="v2-profile__avatar" style={{ backgroundImage:`url(${p.avatar})` }}/>
          <div>
            <div className="v2-profile__name">{p.name}</div>
            <div className="v2-profile__handle">{p.handle} · {p.city}</div>
          </div>
        </div>
        <div className="v2-profile__stats">
          <div className="v2-profile__stat"><div className="v2-profile__statn">{p.bookings.length}</div><div className="v2-profile__statl">Stays</div></div>
          <div className="v2-profile__stat"><div className="v2-profile__statn">{p.orders.length}</div><div className="v2-profile__statl">Orders</div></div>
          <div className="v2-profile__stat"><div className="v2-profile__statn">{(p.myActivities||[]).length}</div><div className="v2-profile__statl">Activities</div></div>
          <div className="v2-profile__stat"><div className="v2-profile__statn">{p.savedItins.length}</div><div className="v2-profile__statl">Trips</div></div>
        </div>
        <div className="v2-prof-tabs" style={{margin:'16px 0 4px'}}>
          {['stays','orders','activities','account'].map(t => (
            <button key={t} className={`v2-prof-tab ${tab === t ? 'is-on' : ''}`} onClick={() => setTab(t)}>{t === 'stays' ? 'Stays' : t === 'orders' ? 'Orders' : t === 'activities' ? 'Activities' : 'Account'}</button>
          ))}
        </div>
      </div>

      {tab === 'stays' && (<>
        <div className="v2-profile__sect"><div className="v2-profile__sect-t">Stays · upcoming & past</div></div>
        {p.bookings.map(b => (
          <div key={b.ref} className="v2-prow v2-prow--clickable" onClick={() => onOpenReceipt && onOpenReceipt('booking', b)}>
            <div className="v2-prow__icon" style={{background:b.status === 'Refunded' ? 'var(--bone-100)' : 'var(--leaf-100)',color:b.status === 'Refunded' ? 'var(--fg-3)' : 'var(--leaf-700)'}}>◈</div>
            <div className="v2-prow__body">
              <div className="v2-prow__name">{b.title}</div>
              <div className="v2-prow__meta">{b.dates} · {b.ref}</div>
              <span className={`v2-prow__status ${b.status === 'Confirmed' ? 'v2-prow__status--ok' : 'v2-prow__status--gone'}`}>{b.status}</span>
            </div>
            <div className="v2-prow__amt">₹{b.amount.toLocaleString()}</div>
          </div>
        ))}
        <div className="v2-profile__sect"><div className="v2-profile__sect-t">Saved itineraries</div></div>
        {p.savedItins.map(it => (
          <div key={it.id} className="v2-prow v2-prow--clickable" onClick={onOpenItin}>
            <div className="v2-prow__icon" style={{background:'var(--lavender-100)',color:'var(--lavender-700)'}}>◎</div>
            <div className="v2-prow__body">
              <div className="v2-prow__name">{it.title}</div>
              <div className="v2-prow__meta">{it.region} · {it.days} days · by {it.by}</div>
            </div>
            <div style={{font:'600 10px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--slate-600)'}}>Open →</div>
          </div>
        ))}
      </>)}

      {tab === 'orders' && (<>
        <div className="v2-profile__sect"><div className="v2-profile__sect-t">Shop orders</div></div>
        {p.orders.map(o => (
          <div key={o.ref} className="v2-prow v2-prow--clickable" onClick={() => onOpenReceipt && onOpenReceipt('order', o)}>
            <div className="v2-prow__icon" style={{background:'var(--sky-100)',color:'var(--sky-700)'}}>⊛</div>
            <div className="v2-prow__body">
              <div className="v2-prow__name">{o.title}</div>
              <div className="v2-prow__meta">{o.ref} · {o.eta}</div>
              <span className={`v2-prow__status ${o.status === 'Shipped' ? 'v2-prow__status--ship' : 'v2-prow__status--gone'}`}>{o.status}</span>
            </div>
            <div className="v2-prow__amt">₹{o.total.toLocaleString()}</div>
          </div>
        ))}
        <div className="v2-profile__sect"><div className="v2-profile__sect-t">Café orders</div></div>
        {(p.cafeOrders||[]).map(o => (
          <div key={o.ref} className="v2-prow v2-prow--clickable" onClick={() => onOpenReceipt && onOpenReceipt('cafe-order', o)}>
            <div className="v2-prow__icon" style={{background:'rgba(229,169,59,.18)',color:'#8B5A2B'}}>☕</div>
            <div className="v2-prow__body">
              <div className="v2-prow__name">{o.cafe} · {o.mode}</div>
              <div className="v2-prow__meta">{o.items} · {o.eta}</div>
              <span className={`v2-prow__status ${o.status === 'Completed' ? 'v2-prow__status--gone' : 'v2-prow__status--ship'}`}>{o.status}</span>
            </div>
            <div className="v2-prow__amt">₹{o.total.toLocaleString()}</div>
          </div>
        ))}
      </>)}

      {tab === 'activities' && (<>
        <div className="v2-profile__sect"><div className="v2-profile__sect-t">My activities</div></div>
        {(p.myActivities||[]).length === 0
          ? <div style={{padding:'40px 20px',textAlign:'center',color:'var(--fg-3)',font:'400 13px var(--font-body)'}}>No activities booked yet.</div>
          : p.myActivities.map(a => (
              <div key={a.ref} className="v2-prow v2-prow--clickable" onClick={() => onOpenReceipt && onOpenReceipt('activity', a)}>
                <div className="v2-prow__icon" style={{background:'var(--leaf-100)',color:'var(--leaf-700)'}}>★</div>
                <div className="v2-prow__body">
                  <div className="v2-prow__name">{a.title}</div>
                  <div className="v2-prow__meta">{a.vendor} · {a.date}</div>
                  <span className={`v2-prow__status ${a.status === 'Confirmed' ? 'v2-prow__status--ok' : 'v2-prow__status--gone'}`}>{a.status}{a.voucher ? ` · ${a.voucher}` : ''}</span>
                </div>
                <div className="v2-prow__amt">₹{a.total.toLocaleString()}</div>
              </div>
            ))}
      </>)}

      {tab === 'account' && (<>
        <div className="v2-profile__sect"><div className="v2-profile__sect-t">Personal</div></div>
        <div className="v2-prow v2-prow--clickable" onClick={onEditPersonal}>
          <div className="v2-prow__icon">⊕</div>
          <div className="v2-prow__body">
            <div className="v2-prow__name">{p.name}</div>
            <div className="v2-prow__meta">aanya.rana@example.com · +91 98765 43210</div>
          </div>
          <div style={{font:'600 10px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--leaf-700)'}}>EDIT</div>
        </div>

        <div className="v2-profile__sect"><div className="v2-profile__sect-t">Saved addresses</div></div>
        {p.addresses.map(a => (
          <div key={a.id} className="v2-prow v2-prow--clickable" onClick={() => onEditAddress && onEditAddress(a)}>
            <div className="v2-prow__icon">⊞</div>
            <div className="v2-prow__body">
              <div className="v2-prow__name">{a.label}{a.isDefault && <span style={{fontSize:9,padding:'2px 6px',marginLeft:6,background:'var(--leaf-100)',color:'var(--leaf-700)',borderRadius:4,letterSpacing:'.14em'}}>DEFAULT</span>}</div>
              <div className="v2-prow__meta" style={{whiteSpace:'normal',lineHeight:1.4}}>{a.line1}{a.line2 ? `, ${a.line2}` : ''} · {a.city} {a.pincode}</div>
            </div>
            <div style={{font:'600 10px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--leaf-700)'}}>EDIT</div>
          </div>
        ))}
        <button onClick={onAddAddress} style={{margin:'8px 18px 18px',padding:14,background:0,border:'2px dashed var(--border-2)',borderRadius:10,cursor:'pointer',font:'600 12.5px var(--font-body)',color:'var(--slate-700)',width:'calc(100% - 36px)'}}>+ Add new address</button>

        <div className="v2-profile__sect"><div className="v2-profile__sect-t">Payment methods</div></div>
        {(p.paymentMethods||[]).map(m => (
          <div key={m.id} className="v2-prow">
            <div className="v2-prow__icon">{m.kind === 'upi' ? '₹' : '▭'}</div>
            <div className="v2-prow__body">
              <div className="v2-prow__name">{m.label}</div>
              <div className="v2-prow__meta">{m.detail}</div>
            </div>
            {m.isDefault && <span style={{font:'600 9px var(--font-body)',letterSpacing:'.14em',color:'var(--leaf-700)'}}>DEFAULT</span>}
          </div>
        ))}

        <div className="v2-profile__sect"><div className="v2-profile__sect-t">Notifications</div></div>
        {Object.entries(p.notifications||{}).map(([k, v]) => (
          <div key={k} className="v2-prow" style={{cursor:'default'}}>
            <div className="v2-prow__body">
              <div className="v2-prow__name">{({tripReminders:'Trip reminders',orderUpdates:'Order updates',hostMessages:'Host messages',marketing:'Marketing',weeklyDigest:'Weekly digest'})[k] || k}</div>
            </div>
            <div className={`w2-toggle__sw ${v ? 'is-on' : ''}`} style={{width:42,height:24,borderRadius:999,background:v?'var(--leaf-700)':'var(--bone-200)',position:'relative',transition:'background 200ms',flexShrink:0}}>
              <div style={{position:'absolute',top:2,left:v?22:2,transition:'left 200ms',width:20,height:20,borderRadius:'50%',background:'white',boxShadow:'0 1px 3px rgba(14,26,36,.2)'}}/>
            </div>
          </div>
        ))}

        <div style={{padding:'18px',marginTop:8,borderTop:'1px solid var(--border-1)'}}>
          <button style={{width:'100%',padding:'12px',background:0,border:'1px solid var(--border-2)',borderRadius:10,font:'600 12.5px var(--font-body)',color:'var(--terracotta)',cursor:'pointer'}}>Sign out</button>
        </div>
      </>)}

      <div style={{padding:'30px 18px 50px',textAlign:'center',font:'400 11px var(--font-mono)',color:'var(--fg-3)',letterSpacing:'.04em'}}>HimLocal · v0.9.2 · Built in the mountains</div>
    </div>
  );
}
window.V2ProfileScreen = V2ProfileScreen;


// ─── Itinerary screen (within Explore experience) ──────────────
function V2StopRow({ stop, poi, onBook, onOpen, onMoveUp, onMoveDown, onRemove, onMoveTo, canUp, canDown, days, dayIndex }) {
  const [showMove, setShowMove] = useStateProf(false);
  if (!poi) return null;
  const isFixed = stop.state === 'fixed';
  const isCafe  = poi.kind === 'cafe';

  return (
    <div className={`app-stop ${isFixed ? 'app-stop--fixed' : isCafe ? 'app-stop--cafe' : 'app-stop--fluid'}`}
      onClick={() => onOpen(poi.id)}>
      <div className="app-stop__handle" onClick={e => e.stopPropagation()}>
        <button className="app-stop__hbtn" disabled={isFixed || !canUp} aria-label="Move up"
          onClick={e => { e.stopPropagation(); onMoveUp && onMoveUp(); }}>▲</button>
        <button className="app-stop__hbtn" disabled={isFixed || !canDown} aria-label="Move down"
          onClick={e => { e.stopPropagation(); onMoveDown && onMoveDown(); }}>▼</button>
      </div>
      <div className="app-stop__img" style={{ backgroundImage:`url(${poi.img})` }}/>
      <div className="app-stop__body">
        <div className="app-stop__name">{poi.name}</div>
        <div className="app-stop__meta">{poi.kind.toUpperCase()} · {poi.alt.toLocaleString()} m{stop.ref ? ` · ${stop.ref}` : ''}</div>
        {isFixed && <span className="app-stop__badge">Confirmed · {stop.source || 'Direct'}</span>}
        {isCafe && (
          <button className="hla-cafelink" onClick={e => e.stopPropagation()}>View menu &amp; info ↗<span className="hla-cafelink__ext"> · External</span></button>
        )}
        {stop.conflict && (
          <div className="hla-conflict" style={{marginTop:6}}>
            <span className="hla-conflict__i">i</span>
            <div style={{flex:1,fontSize:11,lineHeight:1.4}}>Stay starts 11 May — itinerary opens 10 May.</div>
          </div>
        )}
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:4,alignItems:'flex-end'}} onClick={e => e.stopPropagation()}>
        {!isFixed && !isCafe && (
          <button className="app-stop__cta" onClick={e => { e.stopPropagation(); onBook(stop.id); }}>Book</button>
        )}
        {!isFixed && days && days.length > 1 && (
          <button className="app-stop__move" title="Move to different day"
            onClick={e => { e.stopPropagation(); setShowMove(v => !v); }}>Move →</button>
        )}
        {!isFixed && (
          <button className="app-stop__remove" title="Remove" aria-label="Remove from itinerary"
            onClick={e => { e.stopPropagation(); onRemove && onRemove(); }}>×</button>
        )}
        {isFixed && <span style={{fontSize:13,color:'var(--leaf-700)'}}>🔒</span>}
      </div>
      {showMove && days && (
        <div className="app-stop__movemenu" onClick={e => e.stopPropagation()}>
          <div className="app-stop__movemenu-h">Move to which day?</div>
          {days.map((d, ddi) => (
            <button key={ddi} disabled={ddi === dayIndex}
              className="app-stop__movemenu-row"
              onClick={() => { onMoveTo && onMoveTo(ddi); setShowMove(false); }}>
              <span className="app-stop__movemenu-d">{d.date}</span>
              <span className="app-stop__movemenu-l">{d.label}</span>
              <span className="app-stop__movemenu-c">{d.stops.length}</span>
            </button>
          ))}
          <button className="app-stop__movemenu-cancel" onClick={() => setShowMove(false)}>Cancel</button>
        </div>
      )}
    </div>
  );
}
window.V2StopRow = V2StopRow;

function V2ItineraryScreen({ data, days, byId, onHold, onBook, onOpenStop, onReorder, onRemove, onMoveToDay }) {
  return (
    <div className="v2-itin">
      <div style={{padding:'0 18px 28px'}}>
        <div className="hla-creator-banner" style={{marginBottom:18}}>
          <div className="hla-creator-banner__avatar">ST</div>
          <div className="hla-creator-banner__body">
            <div className="hla-creator-banner__lbl">Following · Top creator</div>
            <div className="hla-creator-banner__name">Sourabh Thakur · A week in the cold desert</div>
          </div>
          <button className="hla-creator-banner__cta">View →</button>
        </div>
        <div style={{marginBottom:14}}>
          <div className="hla-eyebrow">Your itinerary</div>
          <div style={{fontFamily:'var(--font-display)',fontSize:26,fontWeight:500,letterSpacing:'-.02em',color:'var(--slate-700)',marginTop:4}}>Spiti <em style={{fontWeight:400,fontStyle:'italic'}}>circuit</em> · 3 days</div>
          <div style={{fontFamily:'var(--font-mono)',fontSize:12,color:'var(--fg-3)',marginTop:4,letterSpacing:'.04em'}}>10 — 12 May 2026</div>
        </div>
        <div style={{marginBottom:14,padding:'10px 12px',background:'var(--grad-soft-lavender)',border:'1px solid rgba(123,111,203,.18)',borderRadius:8,font:'500 11.5px var(--font-body)',color:'var(--ink-on-soft-lavender)',display:'flex',alignItems:'center',gap:8}}>
          <span style={{color:'var(--lavender-700)',fontSize:14}}>⌃</span>
          <strong>▲ ▼</strong> reorder &amp; cross days. <strong>Move →</strong> picks any day. Fixed stays locked.
        </div>
        {days.map((d, di) => {
          const hasPrev = di > 0;
          const hasNext = di < days.length - 1;
          return (
            <div key={di} style={{position:'relative',paddingLeft:22,marginBottom:18}}>
              {di < days.length - 1 && <div style={{position:'absolute',left:5,top:14,bottom:-14,borderLeft:'1.5px dashed var(--border-2)',pointerEvents:'none'}}/>}
              <div style={{display:'flex',alignItems:'baseline',gap:8,marginBottom:10,marginLeft:-22,paddingLeft:22,position:'relative'}}>
                <div style={{position:'absolute',left:0,top:4,width:12,height:12,borderRadius:'50%',background:'var(--bg-paper)',border:'2px solid var(--slate-700)'}}/>
                <div style={{font:'600 10px var(--font-mono)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--fg-3)'}}>{d.date}</div>
                <div style={{fontFamily:'var(--font-display)',fontSize:17,fontWeight:500,fontStyle:'italic',color:'var(--slate-700)'}}>{d.label}</div>
              </div>
              {d.stops.length === 0 && (
                <div style={{padding:'12px 14px',background:'var(--bone-100)',border:'1px dashed var(--border-2)',borderRadius:8,font:'500 12px var(--font-body)',color:'var(--fg-3)',textAlign:'center',marginBottom:8}}>
                  No stops yet. Add from the map.
                </div>
              )}
              {d.stops.map((s, si) => {
                const lastIdx = d.stops.length - 1;
                const canUp = si > 0 || hasPrev;
                const canDown = si < lastIdx || hasNext;
                return (
                  <V2StopRow key={`${di}-${si}-${s.id}`} stop={s} poi={byId[s.id]}
                    onBook={onBook}
                    onOpen={() => onOpenStop(s.id)}
                    onMoveUp={() => onReorder && onReorder(di, si, -1)}
                    onMoveDown={() => onReorder && onReorder(di, si, +1)}
                    onRemove={() => onRemove && onRemove(di, si)}
                    onMoveTo={(toDay) => onMoveToDay && onMoveToDay(di, si, toDay)}
                    canUp={canUp} canDown={canDown}
                    days={days} dayIndex={di}/>
                );
              })}
            </div>
          );
        })}
      </div>
    </div>
  );
}
window.V2ItineraryScreen = V2ItineraryScreen;

// ─── Cafés external-redirect modal ─────────────────────────────
function V2CafesModal({ cafes, onClose }) {
  return (
    <div className="v2-ext-backdrop" onClick={onClose}>
      <div className="v2-ext-sheet" onClick={e => e.stopPropagation()}>
        <div className="v2-ext-sheet__lbl">External · Zomato passthrough</div>
        <div className="v2-ext-sheet__title">Cafés &amp; <em>kitchens</em></div>
        <div className="v2-ext-sheet__body">
          We don't book café tables ourselves. Tap a café to open the menu in the Zomato app — you'll come back here to check in on the return.
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:8,marginBottom:14}}>
          {cafes.map(c => (
            <button key={c.id} style={{display:'flex',gap:10,padding:8,background:'var(--bone-100)',border:'1px solid var(--border-1)',borderRadius:10,cursor:'pointer',textAlign:'left',width:'100%'}}>
              <div style={{width:54,height:54,backgroundImage:`url(${c.img})`,backgroundSize:'cover',backgroundPosition:'center',borderRadius:6,flexShrink:0}}/>
              <div style={{flex:1,minWidth:0}}>
                <div style={{font:'600 13px var(--font-body)',color:'var(--slate-700)'}}>{c.name}</div>
                <div style={{font:'400 11px var(--font-body)',color:'var(--fg-3)',marginTop:2}}>{c.loc}</div>
                <div style={{font:'400 11px var(--font-body)',color:'var(--fg-2)',fontStyle:'italic',marginTop:3}}>{c.tag}</div>
              </div>
              <div style={{font:'500 14px var(--font-body)',color:'var(--lavender-700)',alignSelf:'center'}}>↗</div>
            </button>
          ))}
        </div>
        <div className="v2-ext-sheet__row">
          <button className="v2-ext-sheet__btn v2-ext-sheet__btn--ghost" onClick={onClose}>Cancel</button>
        </div>
      </div>
    </div>
  );
}
window.V2CafesModal = V2CafesModal;

// ─── Razorpay-style payment sheet (re-used for Book & Shop checkout) ──
function V2PaymentSheet({ title, amount, lineItems = [], onClose, onPaid }) {
  const [step, setStep] = useStateProf('confirm');
  return (
    <div style={{position:'absolute',inset:0,background:'rgba(14,26,36,.5)',zIndex:80}} onClick={onClose}>
      <div style={{position:'absolute',left:0,right:0,bottom:0,background:'var(--bg-paper)',borderRadius:'16px 16px 0 0',padding:'16px 18px 36px',boxShadow:'0 -10px 40px rgba(14,26,36,.25)'}} onClick={e => e.stopPropagation()}>
        {step === 'confirm' && (
          <>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:14}}>
              <div>
                <div style={{font:'600 10px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--fg-3)'}}>Razorpay · Secure checkout</div>
                <div style={{fontFamily:'var(--font-display)',fontSize:20,fontWeight:500,marginTop:3,color:'var(--slate-700)'}}>{title}</div>
              </div>
              <button style={{width:30,height:30,borderRadius:'50%',border:0,background:'var(--bone-100)',font:'500 18px var(--font-body)',cursor:'pointer',color:'var(--slate-700)'}} onClick={onClose}>×</button>
            </div>
            {(lineItems.length ? lineItems : [['Total', `₹${amount.toLocaleString()}`]]).map(([l, r], i) => (
              <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'7px 0',borderBottom:'1px dashed var(--border-1)',font:'400 13px var(--font-body)'}}>
                <span>{l}</span><span style={{fontFamily:'var(--font-mono)'}}>{r}</span>
              </div>
            ))}
            <div style={{display:'flex',justifyContent:'space-between',padding:'10px 0 0',fontWeight:600,fontSize:14,marginBottom:14}}>
              <span>Total</span><span style={{fontFamily:'var(--font-mono)'}}>₹{amount.toLocaleString()}</span>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:6,marginBottom:12}}>
              {['UPI', 'Card', 'Net banking', 'Wallet'].map((m, i) => (
                <button key={m} style={{height:34,padding:0,background:i===0?'var(--leaf-100)':'transparent',border:`1px solid ${i===0?'var(--leaf-700)':'var(--border-2)'}`,borderRadius:4,font:`600 ${m.length > 6 ? '9' : '11'}px var(--font-body)`,color:i===0?'var(--leaf-800)':'var(--fg-1)',cursor:'pointer'}}>{m}</button>
              ))}
            </div>
            <button className="hla-btn hla-btn--primary hla-btn--block"
              onClick={() => { setStep('paying'); setTimeout(() => setStep('done'), 1200); }}>
              Confirm &amp; pay ₹{amount.toLocaleString()}
            </button>
          </>
        )}
        {step === 'paying' && (
          <div style={{textAlign:'center',padding:'44px 0',fontFamily:'var(--font-display)',fontStyle:'italic',color:'var(--fg-2)',fontSize:16}}>Authorising with your bank…</div>
        )}
        {step === 'done' && (
          <div style={{textAlign:'center',padding:'16px 0 8px'}}>
            <div style={{width:64,height:64,borderRadius:'50%',background:'var(--himlocal-green)',color:'#0F2410',display:'flex',alignItems:'center',justifyContent:'center',font:'700 28px var(--font-body)',margin:'0 auto 16px',boxShadow:'0 0 0 8px rgba(11,218,81,.15)'}}>✓</div>
            <div style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:500,color:'var(--slate-700)',margin:'0 0 8px'}}>Reserved.</div>
            <div style={{color:'var(--fg-2)',fontSize:14,marginBottom:22}}>Your host has been notified.</div>
            <button className="hla-btn hla-btn--confirm hla-btn--block" onClick={onPaid}>Done</button>
          </div>
        )}
      </div>
    </div>
  );
}
window.V2PaymentSheet = V2PaymentSheet;