// screens_split.jsx — Split (subtotal only) + Assign items. -> window.
// Tip is a separate later step. person[0] is always "You".

// Multi-amount editor: enter each thing a person ordered as its own amount;
// they sum to that person's share. Returns the list of cents on save.
function EditAmountSheet({ open, person, items, currency, onSave, onClose }) {
  const [list, setList] = React.useState([]);
  const [entry, setEntry] = React.useState(0);
  React.useEffect(() => { if (open) { setList(items || []); setEntry(0); } }, [open, person && person.id]);

  const press = (d) => setEntry((c) => Math.min(c * 10 + d, 9999999));
  const back = () => setEntry((c) => Math.floor(c / 10));
  const commit = () => { if (entry > 0) { setList((l) => [...l, entry]); setEntry(0); } };
  const removeAt = (i) => setList((l) => l.filter((_, k) => k !== i));
  const total = list.reduce((a, b) => a + b, 0) + entry;
  const done = () => { onSave(entry > 0 ? [...list, entry] : list); onClose(); };

  const Key = ({ label, onClick }) => (
    <button className="ta-press" onClick={onClick} style={{ border: 'none', background: 'transparent', cursor: 'pointer',
      height: 50, borderRadius: 14, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24, color: 'var(--on-surface)' }}>{label}</button>
  );

  return (
    <Sheet open={open} onClose={onClose} title={person ? (person.you || person.name === 'You' ? 'Your items' : `${person.name}'s items`) : 'Amount'}>
      {list.length > 0 && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginBottom: 12 }}>
          {list.map((c, i) => (
            <span key={i} className="ta-num" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'var(--surface-variant)', color: 'var(--on-surface)', borderRadius: 99, padding: '6px 8px 6px 13px', fontWeight: 700, fontSize: 14 }}>
              {fmt(c, currency)}
              <button className="ta-press" onClick={() => removeAt(i)} style={{ width: 20, height: 20, borderRadius: 99, border: 'none', cursor: 'pointer', background: 'rgba(0,0,0,0.12)', color: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><IconClose s={13} /></button>
            </span>
          ))}
        </div>
      )}
      <div style={{ textAlign: 'center', padding: '2px 0 4px' }}>
        <Label style={{ marginBottom: 4 }}>{list.length ? 'Add another amount' : 'Amount'}</Label>
        <MoneyBig cents={entry} currency={currency} size={42} color={entry ? 'var(--on-surface)' : 'var(--on-surface-var)'} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 4, margin: '6px 0 10px' }}>
        {[1,2,3,4,5,6,7,8,9].map((n) => <Key key={n} label={n} onClick={() => press(n)} />)}
        <Key label="00" onClick={() => setEntry((c) => Math.min(c * 100, 9999999))} />
        <Key label={0} onClick={() => press(0)} />
        <button className="ta-press" onClick={back} style={{ border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--on-surface-var)' }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6H9L3 12l6 6h11a1 1 0 001-1V7a1 1 0 00-1-1z"/><path d="M16 10l-4 4M12 10l4 4"/></svg>
        </button>
      </div>
      <button className="ta-press" onClick={commit} disabled={entry <= 0} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '11px 0', marginBottom: 12,
        border: '1.5px dashed var(--outline)', borderRadius: 'var(--radius-sm)', background: 'transparent', cursor: entry > 0 ? 'pointer' : 'default', opacity: entry > 0 ? 1 : 0.4,
        color: 'var(--primary)', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14 }}>
        <IconPlus s={17} /> Add another item
      </button>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12, padding: '0 2px' }}>
        <span style={{ fontWeight: 700, color: 'var(--on-surface-var)' }}>Their share</span>
        <span className="ta-num" style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--num-weight)', fontSize: 22 }}>{fmt(total, currency)}</span>
      </div>
      <Button onClick={done}>Done</Button>
    </Sheet>
  );
}

// Name a new guest before adding them (no auto-assigned names).
function AddPersonSheet({ open, onClose, onAdd }) {
  const [name, setName] = React.useState('');
  React.useEffect(() => { if (open) setName(''); }, [open]);
  const submit = () => { if (name.trim()) { onAdd(name.trim()); onClose(); } };
  return (
    <Sheet open={open} onClose={onClose} title="Add a person">
      <input autoFocus value={name} onChange={(e) => setName(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') submit(); }} placeholder="Enter a name"
        style={{ width: '100%', height: 50, borderRadius: 'var(--radius-sm)', border: '1.5px solid var(--outline)', background: 'var(--surface-variant)', color: 'var(--on-surface)',
          fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 16.5, padding: '0 16px', outline: 'none', marginBottom: 14 }} />
      <Button onClick={submit} disabled={!name.trim()} leading={<IconPlus s={19} />}>Add to split</Button>
    </Sheet>
  );
}

// ── Split (assign the bill; no tip yet) ───────────────────────
function SplitScreen({ state, set, derived, currency, nav, clearBill }) {
  const [editing, setEditing] = React.useState(null);
  const [adding, setAdding] = React.useState(false);
  const modes = [
    { value: 'even', label: 'Evenly', icon: <IconPeople s={16} /> },
    { value: 'people', label: 'By person', icon: <IconDollar s={15} /> },
  ];
  if (state.entry === 'receipt') modes.push({ value: 'items', label: 'By item', icon: <IconTag s={15} /> });

  const lineItemsOf = (id) => (state.customItems && state.customItems[id]) || [];
  const sumOf = (id) => lineItemsOf(id).reduce((a, b) => a + b, 0);
  const setLineItems = (id, arr) => set({
    customItems: { ...(state.customItems || {}), [id]: arr },
    customCents: { ...state.customCents, [id]: arr.reduce((a, b) => a + b, 0) },
  });

  // By-person starts blank: each person's items are entered individually.
  // New people seed to an empty list (creating a remainder to assign); we never
  // overwrite amounts already entered. "Even up" is the one-tap shortcut.
  React.useEffect(() => {
    if (state.splitMode !== 'people') return;
    const ci = state.customItems || {};
    const missing = state.people.filter((p) => ci[p.id] == null);
    if (missing.length === 0) return;
    const cc = { ...state.customCents }, items = { ...ci };
    missing.forEach((p) => { items[p.id] = []; cc[p.id] = 0; });
    set({ customCents: cc, customItems: items });
  }, [state.splitMode, state.people.length]);

  const evenUp = () => {
    const parts = evenSplit(derived.subtotal, state.people.length);
    const cc = {}, items = {};
    state.people.forEach((p, i) => { cc[p.id] = parts[i]; items[p.id] = [parts[i]]; });
    set({ customCents: cc, customItems: items });
  };
  const giveRemainder = (id) => {
    const assigned = state.people.reduce((a, p) => a + sumOf(p.id), 0);
    const rem = derived.subtotal - assigned;
    if (rem === 0) return;
    setLineItems(id, [...lineItemsOf(id), rem]);
  };
  const addPersonNamed = (name) => {
    const np = { id: 'p' + Date.now(), name, color: AVATAR_COLORS[state.people.length % AVATAR_COLORS.length] };
    set({ people: [...state.people, np], customCents: { ...state.customCents, [np.id]: 0 }, customItems: { ...(state.customItems || {}), [np.id]: [] } });
  };
  const removePerson = (id) => {
    if (id === state.people[0].id) return; // can't remove You
    const cc = { ...state.customCents }; delete cc[id];
    const ci = { ...(state.customItems || {}) }; delete ci[id];
    set({ people: state.people.filter((p) => p.id !== id), customCents: cc, customItems: ci,
      items: state.items.map((it) => ({ ...it, assignees: (it.assignees || []).filter((x) => x !== id) })) });
  };

  const assignedSum = state.people.reduce((a, p) => a + sumOf(p.id), 0);
  const remainder = derived.subtotal - assignedSum;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <ScreenHeader title="Divvy the bill" onBack={() => nav('home')}
        right={<div className="ta-num" style={{ padding: '0 14px', fontFamily: 'var(--font-display)', fontWeight: 'var(--num-weight)', fontSize: 16 }}>{fmt(derived.subtotal, currency)}</div>} />
      <Steps active="Divvy" />

      <div style={{ padding: '6px 18px 0' }}>
        <Segmented options={modes} value={state.splitMode} onChange={(v) => set({ splitMode: v })} />
      </div>

      <div className="ta-scroll ta-fade" key={state.splitMode} style={{ flex: 1, padding: '14px 18px 8px' }}>
        {state.splitMode === 'even' && (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, paddingTop: 12 }}>
            <Label>How many people? (including you)</Label>
            <Stepper value={state.partySize} min={1} max={20} onChange={(v) => set({ partySize: v })} />
            <Card style={{ width: '100%', textAlign: 'center', padding: '20px 18px', marginTop: 4 }}>
              <Label style={{ marginBottom: 6 }}>Each person's share</Label>
              <MoneyBig cents={derived.rows[0] ? derived.rows[0].share : 0} currency={currency} size={48} color="var(--primary)" />
              <div style={{ fontSize: 12.5, color: 'var(--on-surface-var)', marginTop: 8 }}>before tip · added next step</div>
            </Card>
          </div>
        )}

        {state.splitMode === 'people' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Label>Each person's share</Label>
              <button className="ta-press" onClick={evenUp} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--primary)', fontWeight: 700, fontSize: 13.5, display: 'flex', alignItems: 'center', gap: 5 }}>
                <IconUndo s={15} /> Even up
              </button>
            </div>
            {state.people.map((p, i) => (
              <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface)', borderRadius: 'var(--radius)', padding: '10px 12px', boxShadow: 'var(--shadow-soft)' }}>
                <Avatar person={p} size={40} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700 }}>{p.name}{i === 0 && <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--on-surface-var)', marginLeft: 6 }}>· you</span>}</div>
                  {lineItemsOf(p.id).length > 1 && <div style={{ fontSize: 11.5, color: 'var(--on-surface-var)', marginTop: 1 }}>{lineItemsOf(p.id).length} items</div>}
                </div>
                <button className="ta-press ta-num" onClick={() => setEditing(p.id)} style={{ border: '1.5px solid var(--outline)', background: 'transparent', borderRadius: 99, padding: '7px 14px', cursor: 'pointer', fontWeight: 700, fontSize: 15, color: 'var(--on-surface)', fontVariantNumeric: 'tabular-nums' }}>
                  {fmt(sumOf(p.id), currency)}
                </button>
                {i !== 0 && <IconButton size={32} onClick={() => removePerson(p.id)}><IconClose s={17} /></IconButton>}
              </div>
            ))}
            <button className="ta-press" onClick={() => setAdding(true)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', border: '1.5px dashed var(--outline)', borderRadius: 'var(--radius)', background: 'transparent', cursor: 'pointer', color: 'var(--on-surface-var)', fontWeight: 700, whiteSpace: 'nowrap' }}>
              <div style={{ width: 40, height: 40, borderRadius: 99, background: 'var(--surface-variant)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconPlus s={20} /></div>
              Add a person
            </button>

            {remainder !== 0 && (
              <div className="ta-pop" style={{ background: 'var(--secondary-container)', color: 'var(--on-secondary-container)', borderRadius: 'var(--radius)', padding: '12px 14px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                  <span style={{ fontWeight: 700, fontSize: 14 }}>{remainder > 0 ? `${fmt(remainder, currency)} left to assign` : `${fmt(-remainder, currency)} over`}</span>
                  <button className="ta-press" onClick={evenUp} style={{ border: 'none', background: 'rgba(0,0,0,0.08)', borderRadius: 99, padding: '5px 12px', cursor: 'pointer', fontWeight: 700, fontSize: 12.5, color: 'inherit' }}>Split evenly</button>
                </div>
                <div style={{ fontSize: 12, fontWeight: 700, opacity: 0.7, marginBottom: 7 }}>{remainder > 0 ? 'GIVE IT TO' : 'TAKE IT FROM'}</div>
                <div className="ta-scroll" style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 2 }}>
                  {state.people.map((p) => (
                    <button key={p.id} className="ta-press" onClick={() => giveRemainder(p.id)} style={{ display: 'flex', alignItems: 'center', gap: 7, flexShrink: 0, border: 'none', background: 'var(--surface)', color: 'var(--on-surface)', borderRadius: 99, padding: '6px 12px 6px 6px', cursor: 'pointer', fontWeight: 700, fontSize: 13 }}>
                      <Avatar person={p} size={26} /> {p.name.split(' ')[0]}
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {state.splitMode === 'items' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <Card soft onClick={() => nav('assign')}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--secondary-container)', color: 'var(--on-secondary-container)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconReceipt s={24} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700 }}>{state.items.length} items · {state.merchant}</div>
                  <div style={{ fontSize: 13, color: 'var(--on-surface-var)' }}>{derived.absorbedByYou > 0 ? `${fmt(derived.absorbedByYou, currency)} unassigned → you` : 'All items assigned'}</div>
                </div>
                <IconChevron s={20} style={{ color: 'var(--on-surface-var)' }} />
              </div>
            </Card>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {derived.rows.filter((r) => r.base > 0).map((r) => (
                <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '4px 4px' }}>
                  <Avatar person={r} size={34} />
                  <span style={{ flex: 1, fontWeight: 600 }}>{r.name}{r.you && <span style={{ fontSize: 11, color: 'var(--on-surface-var)', marginLeft: 6 }}>· you</span>}</span>
                  <span className="ta-num" style={{ fontWeight: 700 }}>{fmt(r.share, currency)}</span>
                </div>
              ))}
            </div>
            <Button variant="tonal" onClick={() => nav('assign')} leading={<IconTag s={19} />}>Edit item assignments</Button>
            <button className="ta-press" onClick={clearBill} style={{ alignSelf: 'center', border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--danger)', fontWeight: 700, fontSize: 13, display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap', padding: '4px 0' }}>
              <IconTrash s={15} /> Clear receipt &amp; start over
            </button>
          </div>
        )}
      </div>

      <div style={{ background: 'var(--surface)', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '12px 18px 14px', boxShadow: '0 -6px 24px rgba(0,0,0,0.05)' }}>
        {state.splitMode === 'people' && remainder !== 0 && (
          <div style={{ textAlign: 'center', fontSize: 12.5, color: 'var(--on-surface-var)', fontWeight: 600, marginBottom: 10 }}>
            {remainder > 0 ? `${fmt(remainder, currency)} still to assign before you can continue` : `${fmt(-remainder, currency)} over — adjust the shares to continue`}
          </div>
        )}
        <Button disabled={state.splitMode === 'people' && remainder !== 0} onClick={() => nav('tip')} leading={<IconArrowR s={20} />}>Add tip</Button>
      </div>

      <EditAmountSheet open={!!editing} person={state.people.find((p) => p.id === editing)} items={editing ? lineItemsOf(editing) : []} currency={currency}
        onSave={(arr) => setLineItems(editing, arr)} onClose={() => setEditing(null)} />
      <AddPersonSheet open={adding} onClose={() => setAdding(false)} onAdd={addPersonNamed} />
    </div>
  );
}

// ── Assign items ──────────────────────────────────────────────
function AssignScreen({ state, set, derived, currency, nav, clearBill }) {
  const [active, setActive] = React.useState('everyone');
  const [adding, setAdding] = React.useState(false);
  const addPersonNamed = (name) => {
    const np = { id: 'p' + Date.now(), name, color: AVATAR_COLORS[state.people.length % AVATAR_COLORS.length] };
    set({ people: [...state.people, np], customCents: { ...state.customCents, [np.id]: 0 }, customItems: { ...(state.customItems || {}), [np.id]: [] } });
    setActive(np.id);
  };
  const isEveryone = active === 'everyone';
  const totalById = Object.fromEntries(derived.rows.map((r) => [r.id, r.total]));

  const tapItem = (itemId) => {
    set({ items: state.items.map((it) => {
      if (it.id !== itemId) return it;
      if (isEveryone) {
        const all = state.people.map((p) => p.id);
        const already = (it.assignees || []).length === all.length;
        return { ...it, assignees: already ? [] : all };
      }
      const has = (it.assignees || []).includes(active);
      return { ...it, assignees: has ? it.assignees.filter((x) => x !== active) : [...(it.assignees || []), active] };
    }) });
  };

  const unassignedCount = state.items.filter((it) => !(it.assignees || []).length).length;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <ScreenHeader title="Assign items" onBack={() => nav('split')}
        sub={isEveryone ? 'Tap items everyone shared' : `Tap items for ${state.people.find((p) => p.id === active)?.name || ''}`}
        right={<button className="ta-press" onClick={clearBill} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--danger)', fontWeight: 700, fontSize: 13, padding: '0 12px', display: 'flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap' }}><IconUndo s={15} />Clear</button>} />

      {/* who am I tagging? (running totals under each name; scrolls for many people) */}
      <div className="ta-scroll" style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '2px 18px 12px', flexShrink: 0 }}>
        <button className="ta-press" onClick={() => setActive('everyone')} style={{ border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, flexShrink: 0, width: 58 }}>
          <div style={{ width: 46, height: 46, borderRadius: 99, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: isEveryone ? 'var(--primary)' : 'var(--surface-variant)', color: isEveryone ? 'var(--on-primary)' : 'var(--on-surface-var)',
            boxShadow: isEveryone ? '0 0 0 2.5px var(--surface), 0 0 0 5px var(--primary)' : 'none' }}><IconUsers s={22} /></div>
          <span style={{ fontSize: 11.5, fontWeight: 700, color: isEveryone ? 'var(--on-surface)' : 'var(--on-surface-var)' }}>Shared</span>
          <span style={{ fontSize: 10.5, color: 'transparent' }}>·</span>
        </button>
        {state.people.map((p) => {
          const on = p.id === active;
          return (
            <button key={p.id} className="ta-press" onClick={() => setActive(p.id)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, flexShrink: 0, width: 58 }}>
              <Avatar person={p} size={46} ring={on} dim={!on} />
              <span style={{ fontSize: 11.5, fontWeight: 700, color: on ? 'var(--on-surface)' : 'var(--on-surface-var)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 58 }}>{p.you ? 'You' : p.name.split(' ')[0]}</span>
              <span className="ta-num" style={{ fontSize: 10.5, fontWeight: 700, color: on ? 'var(--primary)' : 'var(--on-surface-var)' }}>{fmt(totalById[p.id] || 0, currency)}</span>
            </button>
          );
        })}
        <button className="ta-press" onClick={() => setAdding(true)} title="Add a person" style={{ border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, flexShrink: 0, width: 58 }}>
          <div style={{ width: 46, height: 46, borderRadius: 99, border: '1.5px dashed var(--outline)', background: 'transparent', color: 'var(--on-surface-var)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconPlus s={22} /></div>
          <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--on-surface-var)' }}>Add</span>
          <span style={{ fontSize: 10.5, color: 'transparent' }}>·</span>
        </button>
      </div>

      <div className="ta-scroll" style={{ flex: 1, padding: '0 18px 8px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {state.items.map((it) => {
          const who = it.assignees || [];
          const mine = isEveryone ? who.length === state.people.length : who.includes(active);
          const share = who.length ? Math.round(it.price / who.length) : it.price;
          return (
            <div key={it.id} className="ta-press" onClick={() => tapItem(it.id)} style={{ display: 'flex', alignItems: 'center', gap: 12,
              background: mine ? 'var(--primary-container)' : 'var(--surface)', borderRadius: 'var(--radius)', padding: '12px 14px',
              boxShadow: mine ? 'none' : 'var(--shadow-soft)', border: who.length ? 'none' : '1.5px dashed var(--outline)', cursor: 'pointer' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, color: mine ? 'var(--on-primary-container)' : 'var(--on-surface)' }}>{it.name}</div>
                <div className="ta-num" style={{ fontSize: 12.5, color: mine ? 'var(--on-primary-container)' : 'var(--on-surface-var)', opacity: 0.85, marginTop: 1 }}>
                  {fmt(it.price, currency)}{who.length > 1 && ` · ${fmt(share, currency)} each`}
                </div>
              </div>
              {who.length > 0 ? (
                <div style={{ display: 'flex', marginRight: 2 }}>
                  {who.slice(0, 4).map((pid, i) => {
                    const per = state.people.find((p) => p.id === pid); if (!per) return null;
                    return <div key={pid} style={{ marginLeft: i ? -10 : 0, boxShadow: '0 0 0 2px var(--surface)', borderRadius: 99 }}><Avatar person={per} size={26} /></div>;
                  })}
                </div>
              ) : (
                <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--on-surface-var)', whiteSpace: 'nowrap' }}>→ You</span>
              )}
            </div>
          );
        })}
      </div>

      <div style={{ background: 'var(--surface)', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '12px 18px 14px', boxShadow: '0 -6px 24px rgba(0,0,0,0.05)' }}>
        {unassignedCount > 0 && <div style={{ textAlign: 'center', fontSize: 12.5, color: 'var(--on-surface-var)', marginBottom: 10, fontWeight: 600 }}>{unassignedCount} unassigned item{unassignedCount > 1 ? 's' : ''} ({fmt(derived.absorbedByYou, currency)}) go to you</div>}
        <Button onClick={() => nav('tip')} leading={<IconArrowR s={20} />}>Add tip</Button>
      </div>

      <AddPersonSheet open={adding} onClose={() => setAdding(false)} onAdd={addPersonNamed} />
    </div>
  );
}

Object.assign(window, { EditAmountSheet, SplitScreen, AssignScreen });