// screens_tip.jsx — Tip as its own step AFTER the split. -> window.
function TipScreen({ state, set, derived, currency, nav }) {
  const presets = [15, 18, 20, 25];
  const billTotal = derived.subtotal + derived.tax; // pre-tip amount owed
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <ScreenHeader title="Add a tip" onBack={() => nav(state.splitMode === 'items' ? 'assign' : 'split')}
        sub={state.merchant || null}
        right={<div className="ta-num" style={{ padding: '0 14px', fontFamily: 'var(--font-display)', fontWeight: 'var(--num-weight)', fontSize: 16 }}>{fmt(derived.grand, currency)}</div>} />
      <Steps active="Tip" />

      <div className="ta-scroll" style={{ flex: 1, padding: '10px 18px 8px' }}>
        <div style={{ textAlign: 'center', padding: '4px 0 2px' }}>
          <Label style={{ marginBottom: 8 }}>Tip{state.roundTipUp ? ' · rounded up' : ` · ${state.tipPct}% of ${fmt(derived.subtotal, currency)}`}</Label>
          <MoneyBig cents={derived.tip} currency={currency} size={54} color="var(--primary)" />
        </div>

        <div style={{ display: 'flex', gap: 8, margin: '16px 0 8px' }}>
          {presets.map((p) => (
            <button key={p} className="ta-press" onClick={() => set({ tipPct: p })} style={{ flex: 1, height: 54, borderRadius: 'var(--radius-sm)', cursor: 'pointer',
              border: state.tipPct === p ? 'none' : '1.5px solid var(--outline)', background: state.tipPct === p ? 'var(--primary)' : 'transparent',
              color: state.tipPct === p ? 'var(--on-primary)' : 'var(--on-surface)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18 }}>{p}%</button>
          ))}
        </div>
        <div style={{ padding: '4px 4px 12px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: 'var(--on-surface-var)', fontWeight: 700, marginBottom: 2 }}>
            <span>Custom</span><span>{state.tipPct}%</span>
          </div>
          <Slider value={state.tipPct} min={0} max={30} step={1} onChange={(v) => set({ tipPct: v })} />
        </div>

        {/* round-up toggle */}
        <button className="ta-press" onClick={() => set({ roundTipUp: !state.roundTipUp })} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12,
          background: state.roundTipUp ? 'var(--primary-container)' : 'var(--surface)', border: state.roundTipUp ? 'none' : '1.5px solid var(--outline)',
          borderRadius: 'var(--radius-sm)', padding: '11px 14px', cursor: 'pointer', marginBottom: 14, textAlign: 'left' }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 700, fontSize: 14.5, color: state.roundTipUp ? 'var(--on-primary-container)' : 'var(--on-surface)' }}>Round tip up to whole {curMeta(currency).symbol}</div>
            <div style={{ fontSize: 12, color: state.roundTipUp ? 'var(--on-primary-container)' : 'var(--on-surface-var)', opacity: 0.8 }}>e.g. {fmt(1377, currency)} → {fmt(1400, currency)}</div>
          </div>
          <span style={{ position: 'relative', width: 44, height: 26, borderRadius: 99, flexShrink: 0, background: state.roundTipUp ? 'var(--primary)' : 'var(--outline)' }}>
            <span style={{ position: 'absolute', top: 3, left: state.roundTipUp ? 21 : 3, width: 20, height: 20, borderRadius: 99, background: '#fff', transition: 'left .18s' }} />
          </span>
        </button>

        <Label style={{ margin: '4px 2px 8px' }}>Each person adds</Label>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
          {derived.rows.filter((r) => r.you || r.total > 0).map((r) => (
            <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 11, background: 'var(--surface)', borderRadius: 'var(--radius-sm)', padding: '9px 13px', boxShadow: 'var(--shadow-soft)' }}>
              <Avatar person={r} size={32} />
              <span style={{ flex: 1, fontWeight: 600, fontSize: 14.5 }}>{r.you ? 'You' : r.name}</span>
              <span className="ta-num" style={{ fontSize: 13, color: 'var(--on-surface-var)' }}>{fmt(r.share, currency)} +</span>
              <span className="ta-num" style={{ fontWeight: 800, color: 'var(--primary)', minWidth: 48, textAlign: 'right' }}>{fmt(r.tip, currency)}</span>
            </div>
          ))}
        </div>
      </div>

      {/* bill + tip = total due */}
      <div style={{ background: 'var(--surface)', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '12px 18px 14px', boxShadow: '0 -6px 24px rgba(0,0,0,0.05)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13.5, color: 'var(--on-surface-var)', marginBottom: 4, padding: '0 2px' }}>
          <span>Bill{derived.tax ? ' + tax' : ''}</span><span className="ta-num" style={{ fontWeight: 700 }}>{fmt(billTotal, currency)}</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13.5, color: 'var(--on-surface-var)', marginBottom: 8, padding: '0 2px' }}>
          <span>Tip</span><span className="ta-num" style={{ fontWeight: 700 }}>+ {fmt(derived.tip, currency)}</span>
        </div>
        {derived.roundingAdj !== 0 && (
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13.5, color: 'var(--on-surface-var)', marginBottom: 8, padding: '0 2px' }}>
            <span>Rounding</span><span className="ta-num" style={{ fontWeight: 700 }}>{derived.roundingAdj > 0 ? '+ ' : ''}{fmt(derived.roundingAdj, currency)}</span>
          </div>
        )}
        <div style={{ height: 1, background: 'var(--outline-faint)', margin: '0 0 8px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 11, padding: '0 2px' }}>
          <span style={{ fontWeight: 700 }}>Total due</span>
          <span className="ta-num" style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--num-weight)', fontSize: 25 }}>{fmt(derived.grand, currency)}</span>
        </div>
        <Button onClick={() => nav('settle')} leading={<IconArrowR s={20} />}>Settle up</Button>
      </div>
    </div>
  );
}

Object.assign(window, { TipScreen });