// screens-brief.jsx — Brief detail (the page you land on when you tap a
// daily or custom brief in Library, before you open the full player).
// Replaces the old "Catch-up detail" screen.

function ScreenBriefDetail() {
  return (
    <div className="rv-screen rv" style={{
      background: 'linear-gradient(180deg, #E2EEFC 0%, var(--bg) 40%, var(--bg) 100%)',
    }}>
      <StatusBar time="11:14"/>

      {/* Top bar */}
      <div style={{ position: 'absolute', top: 56, left: 0, right: 0, padding: '6px 18px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 5 }}>
        <button style={iconBtnBriefDetail}><IcChevD s={20} stroke="var(--text)"/></button>
        <div style={{ textAlign: 'center' }}>
          <div className="rv-overline" style={{ fontSize: 10 }}>CUSTOM BRIEF</div>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-2)', marginTop: 1 }}>Built just now &middot; 3 cards</div>
        </div>
        <button style={iconBtnBriefDetail}><IcMore s={20} stroke="var(--text)"/></button>
      </div>

      <div style={{ position: 'absolute', top: 108, left: 0, right: 0, bottom: 0, overflow: 'auto', paddingBottom: 130 }}>
        {/* Cover */}
        <div style={{ padding: '8px 24px 18px' }}>
          <div style={{ display: 'flex', gap: 14 }}>
            <CoverArt size={104} radius={14} variant="magenta" showTitle={false}/>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div className="rv-overline" style={{ fontSize: 10, marginBottom: 6 }}>DEEP DIVE · 14 MIN</div>
                <div style={{
                  fontFamily: 'var(--serif)', fontStyle: 'italic',
                  fontSize: 22, lineHeight: 1.1, color: 'var(--text)', letterSpacing: '-0.015em', textWrap: 'balance',
                }}>
                  On Anthropic's agent post
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <SourceDotRow srcs={['anthropic','stratechery','theverge','github']} size={13}/>
                <span style={{ fontSize: 11.5, color: 'var(--text-3)' }}>4 sources</span>
              </div>
            </div>
          </div>

          {/* Reverb's setup line — italic editorial */}
          <div style={{
            marginTop: 16,
            borderLeft: '2px solid var(--magenta)', paddingLeft: 12,
          }}>
            <div className="rv-overline" style={{ fontSize: 9.5, marginBottom: 4 }}>WHY YOU ASKED FOR THIS</div>
            <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14.5, lineHeight: 1.4, color: 'var(--text)' }}>
              You picked the three cards on Anthropic's loop-first framing. We pulled the post, two replies, and a peek at the code.
            </div>
          </div>

          {/* Play button row */}
          <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
            <button style={{
              flex: 1, height: 50, borderRadius: 14, border: 0,
              background: 'var(--accent)', color: '#fff',
              fontFamily: 'var(--display)', fontWeight: 700, fontSize: 15, letterSpacing: '-0.01em',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              boxShadow: '0 2px 0 rgba(24,30,50,0.18), 0 10px 22px rgba(61,143,224,0.30)',
            }}>
              <IcPlay s={16}/> Play
            </button>
            <button style={{
              width: 50, height: 50, borderRadius: 14, border: '0.5px solid var(--line-strong)',
              background: 'var(--bg-1)', color: 'var(--text-2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><IcThumbUp s={16}/></button>
            <button style={{
              width: 50, height: 50, borderRadius: 14, border: '0.5px solid var(--line-strong)',
              background: 'var(--bg-1)', color: 'var(--text-2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><IcShare s={16}/></button>
          </div>
        </div>

        {/* Sources block — expandable */}
        <div style={{ padding: '0 18px 18px' }}>
          <div style={{
            background: 'var(--bg-1)', border: '0.5px solid var(--line)',
            borderRadius: 16, overflow: 'hidden',
          }}>
            <div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '0.5px solid var(--line)' }}>
              <div>
                <div className="rv-overline" style={{ fontSize: 10, marginBottom: 2 }}>SOURCES</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>4 fetched · 1 partial</div>
              </div>
              <IcUp s={15} stroke="var(--text-3)"/>
            </div>
            <SrcRow src="anthropic"   title="A loop-first view of agentic systems"            host="anthropic.com"   chars="18.4k" ok/>
            <SrcRow src="stratechery" title="Agents, Scaffolds, and the Coming Bottleneck"    host="stratechery.com" chars="12.1k" ok/>
            <SrcRow src="theverge"    title="Anthropic publishes a manifesto for AI engineers" host="theverge.com"   chars="6.8k"  ok/>
            <SrcRow src="github"      title="anthropic/claude-code · agent_loop.ts"           host="github.com"     chars="2.3k"  partial/>
          </div>
        </div>

        {/* Chapters */}
        <div style={{ padding: '6px 22px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span className="rv-overline">CHAPTERS · 5</span>
          <span style={{ fontSize: 11, color: 'var(--text-3)' }}>tap to jump</span>
        </div>
        <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          <ChapterRow time="0:00"  title="What Anthropic actually said"      srcs={['anthropic']}/>
          <ChapterRow time="2:18"  title="Stratechery's strategic reading"   srcs={['stratechery']}/>
          <ChapterRow time="5:42"  title="The dev experience, per The Verge" srcs={['theverge']}/>
          <ChapterRow time="9:10"  title="What the actual code reveals"      srcs={['github']}/>
          <ChapterRow time="11:48" title="Where this leaves the agent stack" srcs={['anthropic','stratechery']}/>
        </div>
      </div>

      <HomeIndicator/>
    </div>
  );
}

const iconBtnBriefDetail = {
  width: 38, height: 38, borderRadius: 12, border: '0.5px solid var(--line)',
  background: 'var(--bg-1)', display: 'flex', alignItems: 'center', justifyContent: 'center',
};

function SrcRow({ src, title, host, chars, ok, partial }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderBottom: '0.5px solid var(--line)' }}>
      <Favicon src={src} size={24} radius={6}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
        <div style={{ display: 'flex', gap: 8, fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>
          <span>{host}</span><span>·</span><span className="rv-mono">{chars}</span>
        </div>
      </div>
      <span style={{
        width: 8, height: 8, borderRadius: 999,
        background: ok ? 'var(--good)' : partial ? 'var(--warn)' : 'var(--bad)',
      }}/>
    </div>
  );
}

function ChapterRow({ time, title, srcs }) {
  return (
    <div style={{
      padding: '12px 14px', borderRadius: 14,
      background: 'transparent',
      display: 'flex', gap: 12, alignItems: 'center',
    }}>
      <span style={{ fontSize: 12, color: 'var(--text-3)', fontFamily: 'var(--mono)', width: 38, flexShrink: 0 }}>{time}</span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)', lineHeight: 1.3, letterSpacing: '-0.01em' }}>{title}</div>
      </div>
      <SourceDotRow srcs={srcs} size={12}/>
    </div>
  );
}

Object.assign(window, { ScreenBriefDetail });