// Bookmark detail / reading view

function BookmarkDetail({ bookmarkId, onBack }) {
  const b = SAMPLE.bookmarks.find(x => x.id === bookmarkId) || SAMPLE.bookmarks[0];
  const collection = SAMPLE.collections.find(c => c.id === b.collection);

  return (
    <div className="main-inner" style={{maxWidth: 880}}>
      <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:24}}>
        <button className="btn btn-bare btn-sm" onClick={onBack}>
          <I.ChevronRight className="icon icon-sm" style={{transform:'rotate(180deg)'}} /> Back
        </button>
        <div className="grow" style={{flex:1}} />
        <button className="btn btn-ghost btn-sm"><I.External className="icon icon-sm" /> Open original</button>
        <button className="btn btn-ghost btn-sm"><I.Archive className="icon icon-sm" /></button>
        <button className="btn btn-ghost btn-sm"><I.More className="icon icon-sm" /></button>
      </div>

      {/* Hero */}
      <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:14}}>
        <StatusPill status={b.status} />
        <span className="collection-chip"><I.Folder /> {collection?.name}</span>
        <span style={{fontSize:11, color:'var(--text-4)'}}>·</span>
        <span style={{fontSize:11, color:'var(--text-4)'}}>Saved {b.time} ago</span>
      </div>

      <h1 style={{fontSize:32, fontWeight:700, lineHeight:1.2, letterSpacing:'-0.03em', margin:'0 0 8px', color:'var(--text-1)', textWrap:'pretty'}}>
        {b.title}
      </h1>
      <a style={{fontSize:13, color:'var(--blue)', display:'inline-flex', alignItems:'center', gap:6}}>
        <I.Link className="icon icon-xs" /> {b.url}
      </a>

      {/* Image placeholder */}
      <div style={{
        marginTop:24, height:240, borderRadius:14, border:'0.5px solid var(--border)',
        background: `repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 10px, var(--surface-3) 10px, var(--surface-3) 20px)`,
        display:'flex', alignItems:'center', justifyContent:'center',
      }}>
        <span className="mono" style={{fontSize:11, color:'var(--text-4)', letterSpacing:'0.04em'}}>
          [og:image — {b.domain}]
        </span>
      </div>

      {/* AI Summary */}
      <div className="card" style={{marginTop:24, padding:20}}>
        <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:12}}>
          <div style={{width:22, height:22, borderRadius:6, background:'var(--blue-bg)', color:'var(--blue)', display:'inline-flex', alignItems:'center', justifyContent:'center'}}>
            <I.Sparkle className="icon icon-xs" />
          </div>
          <div style={{fontSize:11, fontWeight:700, color:'var(--text-4)', letterSpacing:'0.08em', textTransform:'uppercase'}}>AI Summary</div>
          <div style={{flex:1}} />
          <button className="btn btn-bare btn-sm" style={{fontSize:11}}>Regenerate</button>
        </div>
        <p style={{fontSize:14, lineHeight:1.65, color:'var(--text-2)', margin:0, textWrap:'pretty'}}>
          {b.ai_summary}
        </p>

        <div style={{marginTop:16, paddingTop:14, borderTop:'0.5px dashed var(--border)'}}>
          <div style={{fontSize:10, fontWeight:700, color:'var(--text-4)', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:8}}>Key points</div>
          <ul style={{margin:0, paddingLeft:0, listStyle:'none', display:'flex', flexDirection:'column', gap:8}}>
            {[
              "Scaling alone has flatlined since GPT-5; quality and post-training drive gains.",
              "Three case studies of recent models that improved without parameter increases.",
              "Implication: differentiation is about data, RL, and architectural priors.",
            ].map((pt, i) => (
              <li key={i} style={{display:'flex', gap:10, fontSize:13, color:'var(--text-2)', lineHeight:1.55}}>
                <span style={{flexShrink:0, width:20, height:20, borderRadius:6, background:'var(--blue-bg)', color:'var(--blue)', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:10, fontWeight:700, fontFamily:'DM Mono'}}>{i+1}</span>
                <span style={{flex:1}}>{pt}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Tags + actions row */}
      <div style={{display:'flex', alignItems:'center', gap:8, marginTop:20, flexWrap:'wrap'}}>
        <span style={{fontSize:11, fontWeight:600, color:'var(--text-4)', textTransform:'uppercase', letterSpacing:'0.08em'}}>Tags</span>
        {b.tags.map(t => <span key={t} className="tag">#{t}</span>)}
        <button className="tag" style={{cursor:'pointer'}}><I.Plus className="icon icon-xs" style={{width:10, height:10}} /> Add tag</button>
      </div>

      {/* Article body placeholder */}
      <div style={{marginTop:32}}>
        <div style={{fontSize:11, fontWeight:700, color:'var(--text-4)', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:12}}>Article</div>
        <div style={{fontSize:15, lineHeight:1.75, color:'var(--text-2)', textWrap:'pretty'}}>
          <p>The frontier of capability has, quietly, stopped responding the way it used to. For a decade, every order-of-magnitude increase in compute begat a corresponding bump on the benchmarks. That bargain has thinned. {b.desc}</p>
          <p>What changed isn't a single thing — it's that the cheap wins are gone. Models trained on the open web have memorized most of it. Models trained with RLHF have plateaued where human raters can't reliably distinguish answers. The remaining problems require taste — a sense of what to optimize for that humans themselves struggle to articulate.</p>
          <p style={{padding:'12px 16px', borderLeft:'3px solid var(--blue)', background:'var(--surface-2)', borderRadius:'0 8px 8px 0', margin:'24px 0'}}>
            "We are not running out of compute. We are running out of <em>obviously good things to do with it.</em>"
          </p>
          <p>The next chapter, then, is less about size and more about shape. About picking the right losses, the right environments, the right curricula. About what it means to "post-train" an intelligence rather than to grow one.</p>
        </div>
      </div>

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

      {/* Related */}
      <div style={{fontSize:11, fontWeight:700, color:'var(--text-4)', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:12}}>Related in your library</div>
      <div className="bookmark-list">
        {SAMPLE.bookmarks.filter(x => x.id !== b.id && x.collection === b.collection).slice(0, 3).map((rel, i) => (
          <BookmarkRow key={rel.id} b={rel} idx={i} selected={false} onSelect={()=>{}} onClick={()=>{}} />
        ))}
      </div>

      <div style={{height:48}} />
    </div>
  );
}

window.BookmarkDetail = BookmarkDetail;
