// Backread app dashboard — used as the static visual hook inside the
// video player frame. Has to look like a real, used app.

const _dot = (color, size = 6, radius = 2) => ({
  width: size, height: size, borderRadius: radius, background: color,
  display: 'inline-block', flexShrink: 0,
});

function DashboardMock() {
  return (
    <div style={mockStyles.shell}>
      <div style={mockStyles.titleBar}>
        <div style={mockStyles.dots}>
          <i style={{...mockStyles.dot, background:'#ff5f56'}} />
          <i style={{...mockStyles.dot, background:'#ffbd2e'}} />
          <i style={{...mockStyles.dot, background:'#27c93f'}} />
        </div>
        <div style={mockStyles.urlBar}>
          <span style={{opacity:.5}}>backread.app</span><span style={{opacity:.3}}>/library</span>
        </div>
        <div style={{width:54}} />
      </div>

      <div style={mockStyles.body}>
        <aside style={mockStyles.sidebar}>
          <div style={mockStyles.brandRow}>
            <div style={mockStyles.brandTile}>B</div>
            <div style={mockStyles.brandText}>Backread</div>
          </div>

          <div style={mockStyles.searchBox}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" style={{opacity:.5}}>
              <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>
            </svg>
            <span style={{opacity:.45, fontSize:11}}>Search 1,247 bookmarks</span>
          </div>

          <div style={mockStyles.navSection}>
            <div style={mockStyles.navHeading}>Library</div>
            {[
              ['All bookmarks', '1,247', false],
              ['Triage inbox', '23', true],
              ['Unread', '418', false],
              ['Favorites', '64', false],
            ].map(([l, c, hot], i) => (
              <div key={i} style={{...mockStyles.navItem, ...(i===1 ? mockStyles.navItemActive : {})}}>
                <span>{l}</span>
                <span style={{...mockStyles.count, ...(hot ? mockStyles.countHot : {})}}>{c}</span>
              </div>
            ))}
          </div>

          <div style={mockStyles.navSection}>
            <div style={mockStyles.navHeading}>Topics</div>
            {[
              ['#design', '#A78BFA', 184],
              ['#ai', '#F472B6', 312],
              ['#startups', '#FB923C', 156],
              ['#engineering', '#60A5FA', 98],
              ['#culture', '#34D399', 71],
              ['#funny', '#FBBF24', 42],
            ].map(([l, c, n], i) => (
              <div key={i} style={mockStyles.navItem}>
                <span style={{display:'inline-flex', alignItems:'center', gap:8}}>
                  <i style={_dot(c)} />
                  {l}
                </span>
                <span style={mockStyles.count}>{n}</span>
              </div>
            ))}
          </div>
        </aside>

        <main style={mockStyles.main}>
          <div style={mockStyles.mainHeader}>
            <div>
              <div style={{display:'flex', alignItems:'baseline', gap:10}}>
                <h3 style={mockStyles.mainTitle}>Triage inbox</h3>
                <span style={mockStyles.mainSubtitle}>23 to sort · low-confidence saves</span>
              </div>
            </div>
            <div style={mockStyles.filterChips}>
              <span style={{...mockStyles.chip, ...mockStyles.chipActive}}>All</span>
              <span style={mockStyles.chip}>Articles</span>
              <span style={mockStyles.chip}>Threads</span>
              <span style={mockStyles.chip}>Video</span>
              <span style={mockStyles.chip}>Image</span>
            </div>
          </div>

          <div style={mockStyles.cards}>
            <article style={mockStyles.card}>
              <div style={mockStyles.cardHeadRow}>
                <div style={mockStyles.avatar}>SK</div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={mockStyles.cardAuthor}>
                    Sara Kim <span style={mockStyles.handle}>@sarakim</span>
                    <span style={mockStyles.bullet}>·</span>
                    <span style={mockStyles.timeAgo}>3d</span>
                  </div>
                  <div style={mockStyles.cardKind}>Thread · 14 tweets</div>
                </div>
                <div style={mockStyles.confidence}><span style={mockStyles.confDot} />0.94</div>
              </div>
              <p style={mockStyles.cardBody}>
                "The dirty secret of every B2B SaaS dashboard is that nobody reads the second screen. Here's what we shipped after watching 30 hours of customer sessions —"
              </p>
              <div style={mockStyles.summaryBox}>
                <div style={mockStyles.summaryLabel}>SUMMARY</div>
                <div style={mockStyles.summaryText}>
                  After session research, the team cut all secondary navigation, made the primary chart 2× larger, and replaced filter dropdowns with prefilled chips. Activation up 38%.
                </div>
              </div>
              <div style={mockStyles.cardFoot}>
                <span style={mockStyles.tag}><i style={_dot('#A78BFA')}/>design</span>
                <span style={mockStyles.tag}><i style={_dot('#60A5FA')}/>engineering</span>
                <span style={mockStyles.cardFootSpacer}/>
                <span style={mockStyles.cardAction}>↗ x.com</span>
              </div>
            </article>

            <article style={mockStyles.card}>
              <div style={mockStyles.cardHeadRow}>
                <div style={{...mockStyles.avatar, background:'linear-gradient(135deg,#FB923C,#EC4899)'}}>JD</div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={mockStyles.cardAuthor}>
                    John Daoud <span style={mockStyles.handle}>@johndaoud</span>
                    <span style={mockStyles.bullet}>·</span>
                    <span style={mockStyles.timeAgo}>1w</span>
                  </div>
                  <div style={mockStyles.cardKind}>Link · arxiv.org</div>
                </div>
                <div style={mockStyles.confidence}><span style={{...mockStyles.confDot, background:'#FBBF24'}} />0.58</div>
              </div>
              <p style={mockStyles.cardBody}>
                "Stop overlooking this paper. The retrieval-only baseline beats every fine-tuned model on the new benchmark."
              </p>
              <div style={mockStyles.linkPreview}>
                <div style={mockStyles.linkThumb}><div style={mockStyles.linkThumbInner}>arXiv</div></div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={mockStyles.linkTitle}>Retrieval-Augmented Generation at Long Context</div>
                  <div style={mockStyles.linkUrl}>arxiv.org/abs/2410.18914</div>
                </div>
              </div>
              <div style={mockStyles.cardFoot}>
                <span style={mockStyles.triageHint}>Suggested: <b style={{color:'#F472B6'}}>#ai</b> — confirm?</span>
                <span style={mockStyles.cardFootSpacer}/>
                <button style={mockStyles.triageNo}>Skip</button>
                <button style={mockStyles.triageYes}>Confirm</button>
              </div>
            </article>

            <article style={mockStyles.card}>
              <div style={mockStyles.cardHeadRow}>
                <div style={{...mockStyles.avatar, background:'linear-gradient(135deg,#34D399,#60A5FA)'}}>RW</div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={mockStyles.cardAuthor}>
                    Rae Wen <span style={mockStyles.handle}>@raewen</span>
                    <span style={mockStyles.bullet}>·</span>
                    <span style={mockStyles.timeAgo}>2w</span>
                  </div>
                  <div style={mockStyles.cardKind}>Video · 0:48</div>
                </div>
                <div style={mockStyles.confidence}><span style={mockStyles.confDot} />0.89</div>
              </div>
              <div style={mockStyles.videoThumb}>
                <div style={mockStyles.videoOverlay}>
                  <div style={mockStyles.videoPlay}>▶</div>
                  <div style={mockStyles.videoDur}>0:48</div>
                </div>
              </div>
              <div style={mockStyles.cardFoot}>
                <span style={mockStyles.tag}><i style={_dot('#34D399')}/>culture</span>
                <span style={mockStyles.cardFootSpacer}/>
                <span style={mockStyles.cardAction}>↗ x.com</span>
              </div>
            </article>
          </div>
        </main>
      </div>
    </div>
  );
}

const mockStyles = {
  shell: { width: '100%', height: '100%', background: '#0C0C13', borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column', color: '#E8E8F0', fontFamily: "'Geist', sans-serif", fontSize: 12, position: 'relative' },
  titleBar: { height: 32, flexShrink: 0, background: '#15151F', borderBottom: '0.5px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', padding: '0 12px', gap: 12 },
  dots: { display: 'flex', gap: 6, width: 54 },
  dot: { width: 11, height: 11, borderRadius: '50%' },
  urlBar: { flex: 1, height: 20, background: 'rgba(0,0,0,0.3)', border: '0.5px solid rgba(255,255,255,0.06)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Geist Mono', monospace", fontSize: 10.5, letterSpacing: 0.02 },
  body: { flex: 1, display: 'flex', minHeight: 0 },
  sidebar: { width: 200, flexShrink: 0, background: '#0F0F18', borderRight: '0.5px solid rgba(255,255,255,0.06)', padding: '14px 10px', display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden' },
  brandRow: { display: 'flex', alignItems: 'center', gap: 8, padding: '2px 6px 4px' },
  brandTile: { width: 20, height: 20, borderRadius: 6, background: 'linear-gradient(135deg, #8B5CF6, #EC4899)', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12, color: '#fff', boxShadow: '0 4px 12px -2px rgba(236,72,153,0.45)' },
  brandText: { fontWeight: 600, fontSize: 13, letterSpacing: -0.01 },
  searchBox: { height: 26, background: 'rgba(255,255,255,0.04)', border: '0.5px solid rgba(255,255,255,0.06)', borderRadius: 7, display: 'flex', alignItems: 'center', gap: 6, padding: '0 8px', color: '#888' },
  navSection: { display: 'flex', flexDirection: 'column', gap: 1 },
  navHeading: { fontSize: 9, fontWeight: 600, letterSpacing: 0.12, textTransform: 'uppercase', color: '#5E5E70', padding: '6px 6px 4px' },
  navItem: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 7px', borderRadius: 6, fontSize: 11.5, color: '#B8B8C8' },
  navItemActive: { background: 'rgba(139,92,246,0.13)', color: '#F4F4F8', boxShadow: 'inset 0 0 0 0.5px rgba(139,92,246,0.3)' },
  count: { fontSize: 10, color: '#5E5E70', fontFamily: "'Geist Mono', monospace", fontVariantNumeric: 'tabular-nums' },
  countHot: { color: '#fff', background: 'linear-gradient(135deg, #8B5CF6, #EC4899)', padding: '1px 6px', borderRadius: 999, fontSize: 9.5, fontWeight: 600 },
  main: { flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' },
  mainHeader: { padding: '14px 18px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14, flexWrap: 'wrap', borderBottom: '0.5px solid rgba(255,255,255,0.04)' },
  mainTitle: { fontSize: 16, fontWeight: 600, margin: 0, letterSpacing: -0.01 },
  mainSubtitle: { fontSize: 11, color: '#7A7A88' },
  filterChips: { display: 'flex', gap: 6 },
  chip: { fontSize: 10.5, padding: '3px 9px', borderRadius: 999, border: '0.5px solid rgba(255,255,255,0.08)', color: '#9090A0', background: 'rgba(255,255,255,0.02)' },
  chipActive: { color: '#fff', background: 'rgba(255,255,255,0.08)', borderColor: 'rgba(255,255,255,0.18)' },
  cards: { padding: 14, display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden', flex: 1 },
  card: { background: '#15151F', border: '0.5px solid rgba(255,255,255,0.06)', borderRadius: 10, padding: 14, display: 'flex', flexDirection: 'column', gap: 10 },
  cardHeadRow: { display: 'flex', alignItems: 'flex-start', gap: 10 },
  avatar: { width: 26, height: 26, borderRadius: 999, background: 'linear-gradient(135deg,#A78BFA,#EC4899)', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600, color: '#fff', flexShrink: 0 },
  cardAuthor: { fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' },
  handle: { color: '#7A7A88', fontWeight: 400 },
  bullet: { color: '#5E5E70' },
  timeAgo: { color: '#7A7A88', fontWeight: 400, fontSize: 11 },
  cardKind: { fontSize: 10.5, color: '#7A7A88', marginTop: 1, fontFamily: "'Geist Mono', monospace" },
  confidence: { display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10, color: '#9090A0', fontFamily: "'Geist Mono', monospace", padding: '3px 7px', borderRadius: 999, background: 'rgba(255,255,255,0.03)', border: '0.5px solid rgba(255,255,255,0.06)', flexShrink: 0 },
  confDot: { width: 6, height: 6, borderRadius: '50%', background: '#34D399' },
  cardBody: { margin: 0, fontSize: 12.5, lineHeight: 1.5, color: '#D8D8E0', fontWeight: 400 },
  summaryBox: { background: 'linear-gradient(135deg, rgba(139,92,246,0.07), rgba(236,72,153,0.07))', border: '0.5px solid rgba(139,92,246,0.18)', borderRadius: 8, padding: '10px 12px' },
  summaryLabel: { fontSize: 9, letterSpacing: 0.14, fontWeight: 600, color: '#A78BFA', fontFamily: "'Geist Mono', monospace", marginBottom: 4 },
  summaryText: { fontSize: 11.5, lineHeight: 1.5, color: '#C8C8D8' },
  linkPreview: { display: 'flex', gap: 10, background: '#0C0C13', border: '0.5px solid rgba(255,255,255,0.06)', borderRadius: 8, padding: 8, alignItems: 'center' },
  linkThumb: { width: 56, height: 56, borderRadius: 6, background: 'linear-gradient(135deg,#1E293B,#0F172A)', flexShrink: 0, display:'grid', placeItems:'center' },
  linkThumbInner: { fontFamily: "'Geist Mono', monospace", fontSize: 10, color: '#94A3B8', fontWeight: 600 },
  linkTitle: { fontSize: 12, fontWeight: 600, lineHeight: 1.35, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
  linkUrl: { fontSize: 10.5, color: '#7A7A88', fontFamily: "'Geist Mono', monospace", marginTop: 2 },
  videoThumb: { height: 120, borderRadius: 8, background: 'linear-gradient(135deg,#1E1B2E,#2D1B2E)', backgroundImage: `radial-gradient(ellipse at 30% 40%, rgba(236,72,153,0.25), transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(139,92,246,0.22), transparent 55%), linear-gradient(135deg,#1E1B2E,#2D1B2E)`, position: 'relative' },
  videoOverlay: { position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' },
  videoPlay: { width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', color: '#15151F', display: 'grid', placeItems: 'center', fontSize: 11, paddingLeft: 3 },
  videoDur: { position: 'absolute', bottom: 8, right: 8, fontFamily: "'Geist Mono', monospace", fontSize: 10, padding: '2px 6px', background: 'rgba(0,0,0,0.6)', borderRadius: 4 },
  cardFoot: { display: 'flex', alignItems: 'center', gap: 8 },
  cardFootSpacer: { flex: 1 },
  tag: { display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10.5, color: '#A0A0B0', fontFamily: "'Geist Mono', monospace" },
  cardAction: { fontSize: 10.5, color: '#7A7A88', fontFamily: "'Geist Mono', monospace" },
  triageHint: { fontSize: 11, color: '#9090A0' },
  triageNo: { appearance: 'none', border: '0.5px solid rgba(255,255,255,0.1)', background: 'transparent', color: '#9090A0', fontSize: 10.5, fontWeight: 500, padding: '4px 10px', borderRadius: 6, cursor: 'pointer', fontFamily: 'inherit' },
  triageYes: { appearance: 'none', border: 0, background: 'linear-gradient(135deg, #8B5CF6, #EC4899)', color: '#fff', fontSize: 10.5, fontWeight: 600, padding: '4px 10px', borderRadius: 6, cursor: 'pointer', fontFamily: 'inherit' },
};

window.DashboardMock = DashboardMock;