// share/Share.jsx — Share tab screens.
//   ShareList         — root: active links + subscription URL + revoked
//   ShareCreate       — large sheet: scope picker + expiry + detail toggle
//   ShareDetail       — per-link inspector: stats + revoke
//   ShareSubscription — personal token-based .ics
//   ShareEmpty        — no links yet

function ShareList({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <BigTitle title="Share"
        leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)' }}>3 active · 12 views today</div>}
        trailing={<><PillBtn><Icon name="plus" size={18} stroke={2.4}/></PillBtn><Avatar initial="L"/></>}/>

      {/* Personal subscription card */}
      <div style={{ padding: '8px 16px 0' }}>
        <div className="card padded" style={{ padding: 16, borderLeft: `4px solid ${'#5E5CE6'}`, borderRadius: 16 }}>
          <div className="between" style={{ alignItems: 'flex-start' }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--io-indigo)' }}>Your subscription URL</div>
              <div className="hd" style={{ fontSize: 17, marginTop: 4, letterSpacing: -0.3 }}>Lukas · all feeds</div>
              <div className="fn" style={{ color: 'var(--io-label-secondary)', marginTop: 4 }}>Subscribe from any device · token-based .ics</div>
            </div>
            <span className="pill info">Always-on</span>
          </div>
          <div style={{
            marginTop: 12, padding: '8px 10px',
            background: 'var(--io-fill-quaternary)', borderRadius: 8,
            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
            fontSize: 12, color: 'var(--io-label-secondary)',
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>https://portal.lukas.dev/i/a8c5…2f9.ics</div>
          <div className="row" style={{ marginTop: 10, gap: 12 }}>
            <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Copy</span>
            <span style={{ color: 'var(--io-label-tertiary)' }}>·</span>
            <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Show QR</span>
            <span style={{ color: 'var(--io-label-tertiary)' }}>·</span>
            <span className="bd" style={{ color: 'var(--io-red)', fontWeight: 500 }}>Rotate token</span>
          </div>
        </div>
      </div>

      {/* Stats */}
      <SectionHead label="This week"/>
      <div className="stat-row">
        <div className="stat-tile"><div className="lb">Active</div><div className="vl">3</div></div>
        <div className="stat-tile"><div className="lb">Views · 7d</div><div className="vl">128</div></div>
        <div className="stat-tile"><div className="lb">Subscribers</div><div className="vl">5</div></div>
      </div>

      {/* Active links */}
      <SectionHead label="Active links"/>
      <div style={{ padding: '0 16px' }}>
        <div className="link-card" style={{ color: 'var(--feed-work)' }}>
          <div className="between" style={{ alignItems: 'flex-start' }}>
            <div>
              <div className="ttl">Work · this week</div>
              <div className="meta">1 feed · Mar 10 – 16 · times hidden</div>
            </div>
            <span className="pill low">Active</span>
          </div>
          <div className="url">portal.lukas.dev/s/aB7r2dHj…</div>
          <div className="between" style={{ marginTop: 10 }}>
            <div className="fn" style={{ color: 'var(--io-label-secondary)' }}><span data-num>42</span> views · expires <span data-num>Mar 23</span></div>
            <span className="fn" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Manage</span>
          </div>
        </div>

        <div className="link-card" style={{ color: 'var(--feed-uni)' }}>
          <div className="between" style={{ alignItems: 'flex-start' }}>
            <div>
              <div className="ttl">University · semester</div>
              <div className="meta">2 feeds · Jan 8 – Jun 7 · full details</div>
            </div>
            <span className="pill low">Active</span>
          </div>
          <div className="url">portal.lukas.dev/s/9p3qLm…</div>
          <div className="between" style={{ marginTop: 10 }}>
            <div className="fn" style={{ color: 'var(--io-label-secondary)' }}><span data-num>74</span> views · expires <span data-num>Jun 7</span></div>
            <span className="fn" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Manage</span>
          </div>
        </div>

        <div className="link-card" style={{ color: 'var(--feed-family)' }}>
          <div className="between" style={{ alignItems: 'flex-start' }}>
            <div>
              <div className="ttl">Family · shared with Maya</div>
              <div className="meta">3 feeds · never expires · full details</div>
            </div>
            <span className="pill low">Active</span>
          </div>
          <div className="url">portal.lukas.dev/s/k7Bm…</div>
          <div className="between" style={{ marginTop: 10 }}>
            <div className="fn" style={{ color: 'var(--io-label-secondary)' }}><span data-num>12</span> views · no expiry</div>
            <span className="fn" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Manage</span>
          </div>
        </div>
      </div>

      {/* Revoked */}
      <SectionHead label="Recently revoked"/>
      <div style={{ padding: '0 16px' }}>
        <div className="link-card revoked">
          <div className="between" style={{ alignItems: 'flex-start' }}>
            <div>
              <div className="ttl">Recruiter screen · single day</div>
              <div className="meta">Revoked Mar 14 · was Feb 28</div>
            </div>
            <span className="pill heavy">Revoked</span>
          </div>
        </div>
        <div className="link-card revoked">
          <div className="between" style={{ alignItems: 'flex-start' }}>
            <div>
              <div className="ttl">Travel agent · expired</div>
              <div className="meta">Expired Mar 6 · was Mar 1 – 6</div>
            </div>
            <span className="pill mid">Expired</span>
          </div>
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="share"/>
    </FrameScreen>
  );
}
window.ShareList = ShareList;

// ───────────────────────────────────────────────────────────
// CREATE SHARE LINK — large sheet
// ───────────────────────────────────────────────────────────
function ShareCreate({ dark = false }) {
  const feeds = ['work', 'uni', 'personal', 'gym', 'society', 'family'];
  const selected = ['work', 'uni'];

  return (
    <FrameScreen dark={dark}>
      <div style={{ position: 'absolute', inset: 0, background: dark ? '#000' : '#F2F2F7', zIndex: 1 }}>
        <div className="between" style={{ padding: '60px 16px 12px' }}>
          <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Cancel</span>
          <span className="hd">New share link</span>
          <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 600 }}>Create</span>
        </div>

        {/* Name */}
        <div style={{ padding: '0 16px' }}>
          <div className="card" style={{ padding: 4 }}>
            <div className="lrow" style={{ paddingTop: 14, paddingBottom: 14, alignItems: 'baseline' }}>
              <span className="bd" style={{ flex: 1, fontSize: 17, color: 'var(--io-label)', letterSpacing: -0.4 }}>
                Work · this week
              </span>
              <span style={{ color: 'var(--io-label-tertiary)' }}><Icon name="close" size={16} stroke={2.4}/></span>
            </div>
          </div>
          <div className="hintrow"><Icon name="alert" size={12} stroke={2.4}/> Visible to anyone with the link. Choose a name only you'll recognise.</div>
        </div>

        {/* Feeds (multi-select) */}
        <div style={{ padding: '20px 24px 6px' }}>
          <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.7, fontWeight: 600 }}>Calendars to share</div>
        </div>
        <div style={{ padding: '0 16px', display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {feeds.map(f => (
            <span key={f} className={'feed-chip' + (selected.includes(f) ? ' on' : '')}>
              <span className="dot" style={{ background: FEED_HEX[f] }}/>
              {FEEDS[f].name}
              {selected.includes(f) && <Icon name="check" size={12} stroke={3}/>}
            </span>
          ))}
        </div>

        {/* Date range */}
        <div style={{ padding: '20px 16px 0' }}>
          <div className="card" style={{ padding: 4 }}>
            <div className="lrow">
              <div className="li-ti">Starts</div>
              <span style={{
                background: 'rgba(0,122,255,0.12)', color: 'var(--io-blue)',
                borderRadius: 8, padding: '4px 10px',
                fontSize: 16, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.2,
              }} data-num>Mon, Mar 10</span>
            </div>
            <div className="lrow">
              <div className="li-ti">Ends</div>
              <span style={{
                background: 'rgba(0,122,255,0.12)', color: 'var(--io-blue)',
                borderRadius: 8, padding: '4px 10px',
                fontSize: 16, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.2,
              }} data-num>Sun, Mar 16</span>
            </div>
          </div>
        </div>

        {/* Expiry — segmented */}
        <div style={{ padding: '20px 24px 6px' }}>
          <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.7, fontWeight: 600 }}>Link expiry</div>
        </div>
        <div style={{ padding: '0 16px' }}>
          <SegControl items={['1 day', '7 days', '30 days', 'Custom']} active="7 days"/>
        </div>

        {/* Visibility */}
        <div style={{ padding: '18px 16px 0' }}>
          <div className="card" style={{ padding: 4 }}>
            <div className="lrow">
              <div style={{ flex: 1 }}>
                <div className="li-ti">Show event details</div>
                <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>
                  Title, location, notes. Off shows only "Busy".
                </div>
              </div>
              <div style={{
                width: 51, height: 31, borderRadius: 999,
                background: dark ? '#39393D' : '#E9E9EA', position: 'relative', flexShrink: 0,
              }}>
                <div style={{ position: 'absolute', top: 2, left: 2, width: 27, height: 27, borderRadius: '50%', background: '#fff', boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}/>
              </div>
            </div>
            <div className="lrow">
              <div style={{ flex: 1 }}>
                <div className="li-ti">Require passcode</div>
                <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>4-digit code shared separately.</div>
              </div>
              <div style={{ width: 51, height: 31, borderRadius: 999, background: dark ? '#39393D' : '#E9E9EA', position: 'relative', flexShrink: 0 }}>
                <div style={{ position: 'absolute', top: 2, left: 2, width: 27, height: 27, borderRadius: '50%', background: '#fff', boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}/>
              </div>
            </div>
          </div>
        </div>

        <div className="scroll-pad"/>
      </div>
    </FrameScreen>
  );
}
window.ShareCreate = ShareCreate;

// ───────────────────────────────────────────────────────────
// SHARE DETAIL — per-link inspector
// ───────────────────────────────────────────────────────────
function ShareDetail({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Share" title="Link"/>

      <div style={{ padding: '4px 20px 0' }}>
        <div className="row" style={{ gap: 8 }}>
          <span style={{ width: 12, height: 12, borderRadius: 50, background: FEED_HEX.work }}/>
          <span className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.7, fontWeight: 600 }}>Share link</span>
        </div>
        <div className="t1" style={{ marginTop: 6, letterSpacing: -0.5 }}>Work · this week</div>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', marginTop: 6, lineHeight: 1.4 }}>
          Mar 10 – Mar 16 · times hidden as Busy
        </div>
      </div>

      <div style={{ padding: '16px 16px 0' }}>
        <div className="card padded" style={{ padding: 14 }}>
          <div className="url" style={{
            background: 'var(--io-fill-quaternary)', borderRadius: 8, padding: '10px 12px',
            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 12,
            color: 'var(--io-label-secondary)',
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>https://portal.lukas.dev/s/aB7r2dHjK3pX9q…</div>
          <div className="row" style={{ marginTop: 12, gap: 14 }}>
            <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Copy</span>
            <span style={{ color: 'var(--io-label-tertiary)' }}>·</span>
            <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Show QR</span>
            <span style={{ color: 'var(--io-label-tertiary)' }}>·</span>
            <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Share via…</span>
          </div>
        </div>
      </div>

      {/* Stats */}
      <div className="stat-row" style={{ marginTop: 12 }}>
        <div className="stat-tile"><div className="lb">Views</div><div className="vl">42</div></div>
        <div className="stat-tile"><div className="lb">Subscribers</div><div className="vl">3</div></div>
        <div className="stat-tile"><div className="lb">Created</div><div className="vl" style={{ fontSize: 17, fontWeight: 500 }}>Mar 10</div></div>
      </div>

      <SectionHead label="Scope"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card" style={{ padding: 4 }}>
          <div className="lrow">
            <div className="li-ic" style={{ background: FEED_HEX.work }}><Icon name="calendar" size={16} stroke={2.2}/></div>
            <div className="li-ti">Work</div>
            <div className="li-de">142 events</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
          <div className="lrow">
            <div className="li-ti">Date range</div>
            <div className="li-de" data-num>Mar 10 – Mar 16</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
          <div className="lrow">
            <div className="li-ti">Detail visibility</div>
            <div className="li-de">Times only (Busy)</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
          <div className="lrow">
            <div className="li-ti">Expires</div>
            <div className="li-de" data-num>Mar 23 · in 7 days</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
        </div>
      </div>

      <SectionHead label="Recent activity"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card" style={{ padding: 4 }}>
          {[
            { d: 'Today · 9:14 AM', s: 'Subscribed by 92.40.xxx — Outlook' },
            { d: 'Today · 8:02 AM', s: 'Viewed by 81.20.xxx — Safari' },
            { d: 'Yesterday · 7:45 PM', s: 'Viewed by 92.40.xxx — Outlook' },
            { d: 'Yesterday · 11:20 AM', s: 'Subscribed by 51.6.xxx — iOS Calendar' },
          ].map((r, i, a) => (
            <div key={i} className="lrow" style={{ paddingTop: 11, paddingBottom: 11, borderTop: i > 0 ? '0.5px solid var(--io-separator)' : 'none' }}>
              <div style={{ flex: 1 }}>
                <div className="ca" style={{ fontWeight: 500 }}>{r.d}</div>
                <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>{r.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '16px 16px 0', display: 'grid', gap: 10 }}>
        <button style={{
          border: 'none', cursor: 'pointer',
          background: 'var(--io-bg-elev)', color: 'var(--io-blue)',
          borderRadius: 14, padding: '14px 18px',
          fontSize: 17, fontWeight: 500, letterSpacing: -0.4,
        }}>Rotate token</button>
        <button style={{
          border: 'none', cursor: 'pointer',
          background: 'var(--io-bg-elev)', color: 'var(--io-red)',
          borderRadius: 14, padding: '14px 18px',
          fontSize: 17, fontWeight: 500, letterSpacing: -0.4,
        }}>Revoke link</button>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="share"/>
    </FrameScreen>
  );
}
window.ShareDetail = ShareDetail;

// ───────────────────────────────────────────────────────────
// SUBSCRIPTION URL · detail
// ───────────────────────────────────────────────────────────
function ShareSubscription({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Share" title="Subscription URL"/>

      <div style={{ padding: '4px 20px 0' }}>
        <div className="eyebrow" style={{ color: 'var(--io-indigo)' }}>Personal subscription</div>
        <div className="t1" style={{ marginTop: 6, letterSpacing: -0.5 }}>One URL · all your feeds.</div>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', marginTop: 6, lineHeight: 1.4 }}>
          Subscribe from your watch, your laptop, or someone else's phone. Read-only. Token rotates only if you tap rotate.
        </div>
      </div>

      {/* big QR (placeholder block) */}
      <div style={{ padding: '20px 16px 0' }}>
        <div className="card" style={{ padding: 22, display: 'grid', placeItems: 'center' }}>
          <div style={{
            width: 220, height: 220, borderRadius: 16,
            background: 'var(--io-bg-elev)',
            border: '1px solid var(--io-separator)',
            display: 'grid', placeItems: 'center',
            position: 'relative', overflow: 'hidden',
          }}>
            {/* placeholder QR — diagonal stripes + finder squares */}
            <div style={{
              position: 'absolute', inset: 12,
              backgroundImage: `
                linear-gradient(45deg, var(--io-label) 18%, transparent 18%, transparent 50%, var(--io-label) 50%, var(--io-label) 68%, transparent 68%),
                linear-gradient(-45deg, var(--io-label) 18%, transparent 18%, transparent 50%, var(--io-label) 50%, var(--io-label) 68%, transparent 68%)
              `,
              backgroundSize: '14px 14px',
              opacity: 0.85,
            }}/>
            {[{l:8,t:8},{r:8,t:8},{l:8,b:8}].map((p, i) => (
              <div key={i} style={{
                position: 'absolute',
                left: p.l, right: p.r, top: p.t, bottom: p.b,
                width: 42, height: 42,
                background: 'var(--io-bg-elev)',
                border: '6px solid var(--io-label)',
                boxShadow: 'inset 0 0 0 6px var(--io-bg-elev), inset 0 0 0 14px var(--io-label)',
              }}/>
            ))}
            <div style={{
              position: 'absolute', width: 48, height: 48,
              background: 'var(--io-bg-elev)',
              borderRadius: 10,
              display: 'grid', placeItems: 'center',
              color: 'var(--io-indigo)',
            }}>
              <Icon name="calendar" size={24} stroke={2.4}/>
            </div>
          </div>
          <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 12 }}>Scan in Apple Calendar → Add subscription</div>
        </div>
      </div>

      <SectionHead label="URL"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card padded" style={{ padding: 14 }}>
          <div style={{
            background: 'var(--io-fill-quaternary)', borderRadius: 8, padding: '10px 12px',
            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 12,
            color: 'var(--io-label-secondary)', lineHeight: 1.5,
            wordBreak: 'break-all',
          }}>https://portal.lukas.dev/i/a8c5e2f9b4d61aa97f3c2.ics</div>
          <div className="row" style={{ marginTop: 12, gap: 12 }}>
            <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Copy</span>
            <span style={{ color: 'var(--io-label-tertiary)' }}>·</span>
            <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Open in Calendar</span>
          </div>
        </div>
      </div>

      <SectionHead label="Settings"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card" style={{ padding: 4 }}>
          <div className="lrow">
            <div className="li-ti">Include feeds</div>
            <div className="li-de">All 7</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
          <div className="lrow">
            <div className="li-ti">Generated bedtime events</div>
            <div style={{
              width: 51, height: 31, borderRadius: 999,
              background: 'var(--io-green)', position: 'relative', flexShrink: 0,
            }}>
              <div style={{ position: 'absolute', top: 2, left: 22, width: 27, height: 27, borderRadius: '50%', background: '#fff', boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}/>
            </div>
          </div>
          <div className="lrow">
            <div className="li-ti">Token rotated</div>
            <div className="li-de">Feb 10 · 35 days ago</div>
          </div>
        </div>
      </div>

      <div style={{ padding: '16px 16px 0' }}>
        <button style={{
          width: '100%', border: 'none', cursor: 'pointer',
          background: 'var(--io-bg-elev)', color: 'var(--io-red)',
          borderRadius: 14, padding: '14px 18px',
          fontSize: 17, fontWeight: 500, letterSpacing: -0.4,
        }}>Rotate token now</button>
      </div>
      <div style={{ padding: '12px 24px 0' }}>
        <div className="fn" style={{ color: 'var(--io-label-tertiary)', lineHeight: 1.4 }}>
          Rotating invalidates every device subscribed to this URL. You'll need to re-subscribe everywhere.
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="share"/>
    </FrameScreen>
  );
}
window.ShareSubscription = ShareSubscription;

// ───────────────────────────────────────────────────────────
// EMPTY
// ───────────────────────────────────────────────────────────
function ShareEmpty({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <BigTitle title="Share"
        leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)' }}>No active links</div>}
        trailing={<><PillBtn><Icon name="plus" size={18} stroke={2.4}/></PillBtn><Avatar initial="L"/></>}/>

      {/* Subscription card still shows */}
      <div style={{ padding: '8px 16px 0' }}>
        <div className="card padded" style={{ padding: 16, borderLeft: `4px solid var(--io-indigo)`, borderRadius: 16 }}>
          <div className="eyebrow" style={{ color: 'var(--io-indigo)' }}>Your subscription URL</div>
          <div className="hd" style={{ fontSize: 17, marginTop: 4, letterSpacing: -0.3 }}>Lukas · all feeds</div>
          <div className="fn" style={{ color: 'var(--io-label-secondary)', marginTop: 4 }}>Available since you signed in.</div>
        </div>
      </div>

      <div style={{
        margin: '40px 28px 0', textAlign: 'center',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
      }}>
        <div style={{
          width: 76, height: 76, borderRadius: 18,
          background: 'var(--io-fill-tertiary)',
          color: 'var(--io-blue)',
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name="share" size={36} stroke={1.8}/>
        </div>
        <div className="t2" style={{ letterSpacing: -0.4 }}>No share links yet.</div>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', maxWidth: 280, lineHeight: 1.4 }}>
          Create a link to share one feed or a date range. Revoke any time. Detail visibility is up to you.
        </div>
        <button style={{
          marginTop: 8, border: 'none', cursor: 'pointer',
          background: 'var(--io-blue)', color: '#fff',
          borderRadius: 12, padding: '13px 22px',
          fontSize: 17, fontWeight: 600, letterSpacing: -0.4,
        }}>Create your first link</button>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="share"/>
    </FrameScreen>
  );
}
window.ShareEmpty = ShareEmpty;