// ReturnScribe — Purchase detail + edit · Two-tier paywall · Downgrade sheet

// ─────────────────────────────────────────────────────────────
// DetailRow — label/value (shared)
// ─────────────────────────────────────────────────────────────
function DetailRow({ t, label, value, tabular, isLast }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '13px 16px', position: 'relative', minHeight: 46, gap: 12,
    }}>
      <span style={{ color: t.text2, ...applyType(RSType.body), flexShrink: 0 }}>{label}</span>
      <span style={{ color: t.text1, ...applyType(RSType.body), ...(tabular ? RSTabular : {}), textAlign: 'right', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{value}</span>
      {!isLast && <div style={{ position: 'absolute', left: 16, right: 16, bottom: 0, height: 0.5, background: t.border }}/>}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PURCHASE DETAIL (pushed)
// ─────────────────────────────────────────────────────────────
function PurchaseDetailScreen({ t, purchase, nav }) {
  const [p, setP] = React.useState(purchase);
  const [menu, setMenu] = React.useState(false);
  const [editing, setEditing] = React.useState(false);
  const [deleting, setDeleting] = React.useState(false);
  const [editedKeys, setEditedKeys] = React.useState({});

  const pct = p.windowTotal ? p.windowDaysLeft / p.windowTotal : 0;
  const tone = p.windowDaysLeft <= 0 ? t.text3 : p.windowDaysLeft <= 3 ? t.warning : t.success;
  const windowOpen = p.windowTotal > 0 && p.windowDaysLeft > 0;

  function handleSave(next, changed) {
    setP(next);
    setEditedKeys(k => ({ ...k, ...changed }));
    setEditing(false);
  }

  return (
    <div style={{ position: 'relative', minHeight: '100%' }}>
      <NavBar t={t} title="" onBack={() => nav.pop()}
        trailing={
          <button onClick={() => setMenu(true)} style={iconBtn(t)}>
            <Icon name="ellipsis" size={20} color={t.text1}/>
          </button>
        }/>

      {/* Hero */}
      <div style={{ padding: '8px 24px 24px', display: 'flex', alignItems: 'flex-start', gap: 16 }}>
        <MerchantLogo name={p.merchant} cat={p.cat} t={t} size={56}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ color: t.text2, ...applyType(RSType.footnote), textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>
              {p.merchant}
            </span>
            {editedKeys.merchant && <EditedTag t={t}/>}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2 }}>
            <Money value={p.amount} size={44} color={t.text1} weight={600}/>
            {editedKeys.amount && <EditedTag t={t}/>}
          </div>
          <div style={{ color: t.text2, ...applyType(RSType.callout), marginTop: 6 }}>{p.item}</div>
        </div>
      </div>

      {/* Return window */}
      <div style={{ padding: '0 16px' }}>
        <Card t={t} padding={18}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ color: t.text2, ...applyType(RSType.footnote), textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>
                Return window
              </div>
              {windowOpen ? (
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
                  <span style={{ color: tone, ...applyType(RSType.title1), fontWeight: 600, ...RSTabular }}>{p.windowDaysLeft}</span>
                  <span style={{ color: t.text2, ...applyType(RSType.callout) }}>of {p.windowTotal} days left</span>
                </div>
              ) : (
                <div style={{ color: t.text2, ...applyType(RSType.title2), marginTop: 6 }}>
                  {p.windowTotal === 0 ? 'Final sale' : 'Window closed'}
                </div>
              )}
            </div>
            <Icon name="clock" size={28} color={tone}/>
          </div>
          {windowOpen && (
            <>
              <div style={{ marginTop: 14, height: 4, background: t.border, borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${pct * 100}%`, background: tone, borderRadius: 2 }}/>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
                <span style={{ color: t.text3, ...applyType(RSType.caption) }}>Return by {p.returnBy}</span>
                <span style={{ color: tone, ...applyType(RSType.caption), fontWeight: 600 }}>{Math.round(pct * 100)}% remaining</span>
              </div>
            </>
          )}
        </Card>
      </div>

      {/* Actions */}
      {windowOpen && (
        <div style={{ padding: '16px 16px 4px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <PressScale>
            <Button t={t} kind="primary" icon={<Icon name="check" size={18} color="#fff"/>}>Mark returned</Button>
          </PressScale>
          <PressScale>
            <Button t={t} kind="secondary" icon={<Icon name="clock" size={18} color={t.accent}/>}>Snooze 3 days</Button>
          </PressScale>
        </div>
      )}

      {/* Items */}
      <SectionHead t={t} title={`Items (${p.items.length})`}/>
      <Card t={t} padding={0} style={{ margin: '0 16px' }}>
        {p.items.map((it, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', minHeight: 52, position: 'relative',
          }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ color: t.text1, ...applyType(RSType.body), whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.name}</div>
              <div style={{ color: t.text2, ...applyType(RSType.footnote), marginTop: 1, ...RSTabular }}>
                {it.qty} × ${it.unit.toFixed(2)}
              </div>
            </div>
            <span style={{ color: t.text1, ...applyType(RSType.body), ...RSTabular }}>${(it.qty * it.unit).toFixed(2)}</span>
            {i < p.items.length - 1 && <div style={{ position: 'absolute', left: 16, right: 16, bottom: 0, height: 0.5, background: t.border }}/>}
          </div>
        ))}
      </Card>

      {/* Order details */}
      <SectionHead t={t} title="Order"/>
      <Card t={t} padding={0} style={{ margin: '0 16px' }}>
        <DetailRow t={t} label="Order"        value={p.orderId} tabular/>
        <DetailRow t={t} label="Purchased"    value={p.purchaseDate}/>
        <DetailRow t={t} label="Refund type"  value={p.refundType}/>
        <DetailRow t={t} label="Payment"      value={p.payment} tabular/>
        <DetailRow t={t} label="Source"       value={p.source} isLast/>
      </Card>

      <div style={{ height: 24 }}/>

      <ActionMenu t={t} open={menu} onClose={() => setMenu(false)} items={[
        { label: 'Edit', icon: 'sliders', onClick: () => setEditing(true) },
        { label: 'Delete', icon: 'xmark', danger: true, onClick: () => setDeleting(true) },
      ]}/>

      <PurchaseEditSheet t={t} open={editing} onClose={() => setEditing(false)} purchase={p} onSave={handleSave}/>

      <Sheet t={t} open={deleting} onClose={() => setDeleting(false)} title="Delete purchase?">
        <div style={{ padding: '16px 24px 8px', textAlign: 'center' }}>
          <p style={{ color: t.text2, ...applyType(RSType.callout), lineHeight: 1.5 }}>
            <b style={{ color: t.text1 }}>{p.merchant}</b> · {p.item} will be removed from ReturnScribe.
          </p>
        </div>
        <div style={{ padding: '12px 16px 8px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <PressScale>
            <Button t={t} kind="primary" style={{ background: t.danger }} onClick={() => { setDeleting(false); nav.pop(); }}>Delete</Button>
          </PressScale>
          <button onClick={() => setDeleting(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: t.accent, ...applyType(RSType.headline), padding: 10 }}>Cancel</button>
        </div>
      </Sheet>
    </div>
  );
}

function EditedTag({ t }) {
  return (
    <span style={{
      ...applyType(RSType.caption), color: t.accent, fontWeight: 700,
      background: t.accentDim, padding: '2px 7px', borderRadius: 99, textTransform: 'uppercase', letterSpacing: 0.4,
    }}>Edited</span>
  );
}

// ─────────────────────────────────────────────────────────────
// PURCHASE EDIT SHEET
// ─────────────────────────────────────────────────────────────
function PurchaseEditSheet({ t, open, onClose, purchase, onSave }) {
  const [draft, setDraft] = React.useState(purchase);
  const [picker, setPicker] = React.useState(null); // 'currency' | 'refund'
  const orig = React.useRef(purchase);
  React.useEffect(() => { if (open) { setDraft(purchase); orig.current = purchase; } }, [open]);

  const set = (k, v) => setDraft(d => ({ ...d, [k]: v }));
  const edited = (k) => draft[k] !== orig.current[k];
  const itemsEdited = () => JSON.stringify(draft.items) !== JSON.stringify(orig.current.items);

  function setItem(i, k, v) {
    setDraft(d => ({ ...d, items: d.items.map((it, j) => j === i ? { ...it, [k]: v } : it) }));
  }
  function delItem(i) {
    setDraft(d => ({ ...d, items: d.items.filter((_, j) => j !== i) }));
  }
  function addItem() {
    setDraft(d => ({ ...d, items: [...d.items, { name: '', qty: 1, unit: 0 }] }));
  }

  function save() {
    const total = draft.items.reduce((s, it) => s + it.qty * it.unit, 0);
    const next = { ...draft, amount: draft.items.length ? total : draft.amount, item: draft.items[0]?.name || draft.item };
    const changed = {};
    ['merchant', 'amount', 'currency', 'purchaseDate', 'returnBy', 'refundType'].forEach(k => {
      if (next[k] !== orig.current[k]) changed[k] = true;
    });
    if (itemsEdited()) changed.items = true;
    onSave(next, changed);
  }

  return (
    <Sheet t={t} open={open} onClose={onClose} title="Edit purchase" maxHeight={760}
      trailing={
        <button onClick={save} style={{ background: 'none', border: 'none', cursor: 'pointer', color: t.accent, ...applyType(RSType.headline) }}>Save</button>
      }>
      <SectionHead t={t} title="Purchase"/>
      <Card t={t} padding={0} style={{ margin: '0 16px' }}>
        <Field t={t} label="Merchant" value={draft.merchant} onChange={v => set('merchant', v)} edited={edited('merchant')}/>
        <Field t={t} label="Amount" prefix="$" type="number" value={String(draft.amount)} onChange={v => set('amount', parseFloat(v) || 0)} edited={edited('amount')}/>
        <Field t={t} label="Currency" value={draft.currency} options onPick={() => setPicker('currency')} edited={edited('currency')}/>
        <Field t={t} label="Purchase date" value={draft.purchaseDate} onChange={v => set('purchaseDate', v)} edited={edited('purchaseDate')}/>
        <Field t={t} label="Return by" value={draft.returnBy} onChange={v => set('returnBy', v)} isLast edited={edited('returnBy')}/>
      </Card>

      <SectionHead t={t} title="Items"
        action={<button onClick={addItem} style={{ background: 'none', border: 'none', cursor: 'pointer', color: t.accent, ...applyType(RSType.footnote), fontWeight: 600, display: 'flex', alignItems: 'center', gap: 3, padding: '7px 10px', margin: '-7px -10px', minHeight: 30 }}>
          <Icon name="plus" size={14} color={t.accent} weight={2.4}/>Add item
        </button>}/>
      <div style={{ margin: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {draft.items.map((it, i) => (
          <SwipeToDelete key={i} t={t} onDelete={() => delItem(i)}>
            <div style={{ background: t.surface1, border: `0.5px solid ${t.border}`, borderRadius: 12, padding: '10px 14px' }}>
              <input value={it.name} placeholder="Item name" onChange={e => setItem(i, 'name', e.target.value)} style={{
                border: 'none', outline: 'none', background: 'transparent', color: t.text1,
                ...applyType(RSType.body), width: '100%', fontFamily: RSFont.sys, marginBottom: 8,
              }}/>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                <Stepper t={t} value={it.qty} onChange={v => setItem(i, 'qty', v)}/>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                  <span style={{ color: t.text2, ...applyType(RSType.subhead) }}>$</span>
                  <input value={String(it.unit)} inputMode="decimal" onChange={e => setItem(i, 'unit', parseFloat(e.target.value) || 0)} style={{
                    border: 'none', outline: 'none', background: 'transparent', color: t.text1, textAlign: 'right',
                    ...applyType(RSType.subhead), width: 70, fontFamily: RSFont.sys, ...RSTabular,
                  }}/>
                  <span style={{ color: t.text3, ...applyType(RSType.footnote) }}>each</span>
                </div>
              </div>
            </div>
          </SwipeToDelete>
        ))}
        <div style={{ padding: '4px 4px 0', color: t.text3, ...applyType(RSType.caption) }}>Swipe an item left to delete.</div>
      </div>

      <SectionHead t={t} title="Refund type"/>
      <Card t={t} padding={0} style={{ margin: '0 16px' }}>
        <Field t={t} label="On return" value={draft.refundType} options onPick={() => setPicker('refund')} isLast edited={edited('refundType')}/>
      </Card>

      <div style={{ height: 12 }}/>

      <PickerSheet t={t} open={picker === 'currency'} onClose={() => setPicker(null)} title="Currency"
        value={draft.currency} options={RSData.currencies} onPick={v => set('currency', v)}/>
      <PickerSheet t={t} open={picker === 'refund'} onClose={() => setPicker(null)} title="Refund type"
        value={draft.refundType} options={RSData.refundTypes} onPick={v => set('refundType', v)}/>
    </Sheet>
  );
}

// Swipe-to-delete wrapper
function SwipeToDelete({ t, children, onDelete }) {
  const [dx, setDx] = React.useState(0);
  const [open, setOpen] = React.useState(false);
  const start = React.useRef(null);
  const W = 84;
  return (
    <div style={{ position: 'relative', borderRadius: 12, overflow: 'hidden' }}>
      <button onClick={onDelete} style={{
        position: 'absolute', top: 0, bottom: 0, right: 0, width: W, border: 'none', cursor: 'pointer',
        background: t.danger, color: '#fff', ...applyType(RSType.footnote), fontWeight: 700,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>Delete</button>
      <div
        onPointerDown={e => { start.current = e.clientX - (open ? -W : 0); }}
        onPointerMove={e => {
          if (start.current == null) return;
          const d = Math.min(0, Math.max(-W, e.clientX - start.current - (open ? W : 0)));
          setDx(d);
        }}
        onPointerUp={() => {
          const willOpen = dx < -W / 2;
          setOpen(willOpen); setDx(willOpen ? -W : 0); start.current = null;
        }}
        style={{
          position: 'relative', transform: `translateX(${dx}px)`,
          transition: start.current == null ? 'transform 220ms cubic-bezier(.22,.61,.36,1)' : 'none',
          touchAction: 'pan-y',
        }}>
        {children}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TWO-TIER PAYWALL (modal)
// ─────────────────────────────────────────────────────────────
function PaywallScreen({ t, onClose }) {
  const [cadence, setCadence] = React.useState('annual'); // monthly | annual
  const [tier, setTier] = React.useState('max');
  const plans = RSData.plans;

  const priceFor = (pl) => cadence === 'annual' ? pl.annual : pl.monthly;
  const cadSuffix = cadence === 'annual' ? '/yr' : '/mo';
  const selected = plans[tier];

  const cta = tier === 'max'
    ? 'Start 7-day free trial'
    : `Subscribe — $${selected.monthly.toFixed(2)}/mo`;

  const TierCard = ({ pl, featured }) => {
    const a = tier === pl.id;
    return (
      <CardPress onClick={() => setTier(pl.id)}>
        <div style={{
          position: 'relative', borderRadius: 18, padding: '16px 16px',
          background: t.surface1,
          border: a ? `2px solid ${t.accent}` : `1px solid ${t.border}`,
          boxShadow: a ? `0 6px 22px ${t.accent}26` : 'none',
          transition: 'border-color 160ms, box-shadow 160ms',
        }}>
          {featured && pl.trial && (
            <div style={{
              position: 'absolute', top: -10, left: 16,
              background: t.accent, color: '#fff', ...applyType(RSType.caption), fontWeight: 700,
              padding: '3px 10px', borderRadius: 99, textTransform: 'uppercase', letterSpacing: 0.5, whiteSpace: 'nowrap',
            }}>7-day free trial</div>
          )}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            {/* radio */}
            <div style={{
              width: 22, height: 22, borderRadius: 99, flexShrink: 0,
              border: a ? `7px solid ${t.accent}` : `2px solid ${t.text3}`,
              transition: 'border 160ms',
            }}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ color: t.text1, ...applyType(RSType.title2) }}>{pl.name}</span>
                {featured && <Icon name="sparkles" size={16} color={t.accent}/>}
              </div>
              <div style={{ color: t.text2, ...applyType(RSType.footnote), marginTop: 2 }}>{pl.line}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ color: t.text1, fontFamily: RSFont.num, fontSize: 22, fontWeight: 700, ...RSTabular }}>
                ${priceFor(pl).toFixed(2)}
              </div>
              <div style={{ color: t.text3, ...applyType(RSType.caption) }}>{cadSuffix}</div>
            </div>
          </div>
        </div>
      </CardPress>
    );
  };

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
      {/* close */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '12px 16px 0' }}>
        <button onClick={onClose} style={iconBtn(t)}><Icon name="xmark" size={18} color={t.text1}/></button>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '4px 20px 8px' }}>
        <div style={{
          width: 56, height: 56, borderRadius: 16, marginBottom: 16,
          background: t.accentDim, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="sparkles" size={28} color={t.accent}/>
        </div>
        <h1 style={{ margin: 0, color: t.text1, ...applyType(RSType.large), fontSize: 30 }}>Unlock ReturnScribe</h1>
        <p style={{ color: t.text2, ...applyType(RSType.callout), margin: '10px 0 0' }}>
          Never miss a refund. Track every return window and renewal across all your mailboxes.
        </p>

        {/* cadence toggle */}
        <div style={{ marginTop: 22 }}>
          <BigSegmented t={t} active={cadence} onChange={setCadence}
            accent={t.success}
            items={[{ id: 'monthly', label: 'Monthly' }, { id: 'annual', label: 'Annual', tag: 'Save 17%' }]}/>
        </div>

        {/* tiers */}
        <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <TierCard pl={plans.max} featured/>
          <TierCard pl={plans.pro}/>
        </div>

        {/* footer links */}
        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          <div style={{ display: 'flex', gap: 18 }}>
            <button style={ftLink(t)}>Restore Purchases</button>
            <button style={ftLink(t)}>Manage Subscription</button>
          </div>
          <div style={{ display: 'flex', gap: 6, color: t.text3, ...applyType(RSType.caption) }}>
            <button style={ftLink(t)}>Terms</button><span>·</span><button style={ftLink(t)}>Privacy</button>
          </div>
        </div>
      </div>

      {/* sticky CTA */}
      <div style={{ padding: '12px 16px 26px', borderTop: `0.5px solid ${t.border}`, background: t.canvas }}>
        <PressScale>
          <Button t={t} kind="primary" onClick={onClose}>{cta}</Button>
        </PressScale>
        <div style={{ textAlign: 'center', color: t.text3, ...applyType(RSType.caption), marginTop: 8 }}>
          {tier === 'max'
            ? `7 days free, then $${priceFor(plans.max).toFixed(2)}${cadSuffix}. Cancel anytime.`
            : `$${priceFor(plans.pro).toFixed(2)}${cadSuffix}. Cancel anytime.`}
        </div>
      </div>
    </div>
  );
}

function ftLink(t) {
  return { background: 'none', border: 'none', cursor: 'pointer', color: t.accent, ...applyType(RSType.footnote), fontWeight: 600, padding: 0 };
}

// ─────────────────────────────────────────────────────────────
// DOWNGRADE SHEET — Max trial ending → Pro (mailbox picker if >1)
// ─────────────────────────────────────────────────────────────
function DowngradeSheet({ t, open, onClose }) {
  const mailboxes = RSData.mailboxList;
  const [keep, setKeep] = React.useState(mailboxes[0].id);
  const needsPicker = mailboxes.length > 1;

  return (
    <Sheet t={t} open={open} onClose={onClose} title="Switch to Pro" maxHeight={620}>
      <div style={{ padding: '8px 24px 4px', textAlign: 'center' }}>
        <div style={{
          width: 52, height: 52, borderRadius: 14, margin: '0 auto 14px',
          background: t.warning + '1A', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="clock" size={26} color={t.warning}/>
        </div>
        <div style={{ color: t.text1, ...applyType(RSType.title2) }}>Your Max trial is ending</div>
        <p style={{ color: t.text2, ...applyType(RSType.callout), margin: '8px 0 0', lineHeight: 1.5 }}>
          Pro includes <b style={{ color: t.text1 }}>1 mailbox</b> and 90-day history. Choose the mailbox
          to keep — the others will be disconnected.
        </p>
      </div>

      {needsPicker && (
        <div style={{ padding: '18px 16px 4px' }}>
          <Card t={t} padding={0}>
            {mailboxes.map((m, i) => {
              const a = m.id === keep;
              return (
                <button key={m.id} onClick={() => setKeep(m.id)} style={{
                  width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px',
                  border: 'none', background: 'transparent', cursor: 'pointer', position: 'relative',
                  borderTop: i ? `0.5px solid ${t.border}` : 'none',
                }}>
                  <div style={{
                    width: 22, height: 22, borderRadius: 99, flexShrink: 0,
                    border: a ? `7px solid ${t.accent}` : `2px solid ${t.text3}`,
                  }}/>
                  <div style={{ flex: 1, textAlign: 'left' }}>
                    <div style={{ color: t.text1, ...applyType(RSType.body) }}>{m.address}</div>
                    <div style={{ color: t.text2, ...applyType(RSType.footnote), marginTop: 1 }}>{m.provider} · {m.count} receipts</div>
                  </div>
                </button>
              );
            })}
          </Card>
          <div style={{ padding: '10px 12px 0', color: t.text3, ...applyType(RSType.caption) }}>
            Disconnected mailboxes can be reconnected anytime by upgrading back to Max.
          </div>
        </div>
      )}

      <div style={{ padding: '18px 16px 8px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <PressScale>
          <Button t={t} kind="primary" onClick={onClose}>Switch to Pro</Button>
        </PressScale>
        <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: t.accent, ...applyType(RSType.headline), padding: 10 }}>
          Keep Max — $9.99/mo
        </button>
      </div>
    </Sheet>
  );
}

Object.assign(window, {
  PurchaseDetailScreen, PurchaseEditSheet, SwipeToDelete, PaywallScreen, DowngradeSheet, DetailRow, EditedTag,
});