// screens-library.jsx — Briefs library (Daily / Custom)
// The single archive for all briefs Reverb has produced. Two tabs:
//   - Daily  : auto morning briefs (chronological)
//   - Custom : briefs you built (feed multi-select or pasted URLs)

function ScreenBriefs({ tab = 'daily' }) {
  return (
    <div className="rv-screen rv">
      <StatusBar time="3:42"/>

      {/* Top bar */}
      <div style={{ position: 'absolute', top: 56, left: 0, right: 0, padding: '6px 20px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 5 }}>
        <h1 style={{
          margin: 0, fontFamily: 'var(--display)', fontWeight: 800,
          fontSize: 28, lineHeight: 1, letterSpacing: '-0.04em', color: 'var(--text)',
        }}>Briefs</h1>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={iconBtnBriefs}><IcSearch s={18} stroke="var(--text-2)"/></button>
          <button style={iconBtnBriefs}><IcMore s={18} stroke="var(--text-2)"/></button>
        </div>
      </div>

      {/* Segmented control: Daily / Custom */}
      <div style={{ position: 'absolute', top: 110, left: 0, right: 0, padding: '0 20px', zIndex: 4 }}>
        <div style={{
          display: 'flex', padding: 4, borderRadius: 14,
          background: 'var(--bg-2)', border: '0.5px solid var(--line)',
          gap: 2,
        }}>
          <SegBtn active={tab === 'daily'} label="Daily" count={12} kind="daily"/>
          <SegBtn active={tab === 'custom'} label="Custom" count={7} kind="custom"/>
        </div>
      </div>

      <div style={{ position: 'absolute', top: 168, left: 0, right: 0, bottom: 0, overflow: 'auto', paddingBottom: 200 }}>
        {tab === 'daily' ? <DailyTab/> : <CustomTab/>}
      </div>

      <MiniPlayer title="The Wednesday Brief" progress={0.32}/>
      <TabBar active="library"/>
      <HomeIndicator/>
    </div>
  );
}

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

function SegBtn({ label, count, active, kind }) {
  return (
    <div style={{
      flex: 1, padding: '9px 6px', borderRadius: 10,
      background: active ? 'var(--bg-1)' : 'transparent',
      border: active ? '0.5px solid var(--line-strong)' : 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
      fontSize: 13, fontWeight: active ? 700 : 500,
      color: active ? 'var(--text)' : 'var(--text-3)',
      letterSpacing: '-0.015em',
      boxShadow: active ? '0 1px 3px rgba(24,30,50,0.06)' : 'none',
    }}>
      <span>{label}</span>
      <span style={{
        fontSize: 10, fontWeight: 700,
        color: active ? 'var(--accent)' : 'var(--text-4)',
        background: active ? 'var(--accent-tint)' : 'transparent',
        padding: '1px 6px', borderRadius: 999,
      }}>{count}</span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DAILY TAB — auto morning briefs, chronological
// ─────────────────────────────────────────────────────────────
function DailyTab() {
  return (
    <>
      <div className="rv-overline" style={{ padding: '14px 20px 6px' }}>STREAK</div>
      <div style={{ padding: '0 16px 16px' }}>
        <div style={{
          padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12,
          background: 'var(--bg-1)', border: '0.5px solid var(--line)', borderRadius: 14,
        }}>
          <AwesomeBadge count={42}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 14, color: 'var(--text)', letterSpacing: '-0.025em' }}>
              42 days · longest run yet
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 1 }}>5 of 7 days this week</div>
          </div>
          <button style={{
            padding: '6px 10px', borderRadius: 999, border: '0.5px solid var(--line-strong)',
            background: 'var(--bg-2)', fontSize: 11.5, fontWeight: 600, color: 'var(--text-2)',
          }}>History</button>
        </div>
      </div>

      <div className="rv-overline" style={{ padding: '4px 20px 10px' }}>THIS WEEK</div>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <BriefCard
          kind="daily"
          kicker="WED · MAR 14"
          title="The Wednesday Brief"
          duration="7 min · 6 segments"
          srcs={['bloomberg','semianalysis','ft','livemint','nba','anthropic']}
          extraCount={3}
          variant="sky"
          status="progress"
          progress={0.32}
        />
        <BriefCard
          kind="daily"
          kicker="TUE · MAR 13"
          title="The Tuesday Brief"
          duration="6 min · 5 segments"
          srcs={['ft','bloomberg','reuters','espn']}
          extraCount={2}
          variant="midnight"
          status="done"
        />
        <BriefCard
          kind="daily"
          kicker="MON · MAR 12"
          title="The Monday Brief"
          duration="8 min · 7 segments"
          srcs={['bloomberg','stratechery','arxiv','livemint','nyt']}
          extraCount={4}
          variant="plum"
          status="done"
        />
      </div>

      <div className="rv-overline" style={{ padding: '22px 20px 10px' }}>LAST WEEK</div>
      <div style={{ padding: '0 16px 30px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <BriefCard kind="daily" kicker="FRI · MAR 8" title="The Friday Brief" duration="5 min · 4 segments"
          srcs={['ft','bloomberg','reuters']} variant="teal" status="done"/>
        <BriefCard kind="daily" kicker="THU · MAR 7" title="The Thursday Brief" duration="6 min · 5 segments"
          srcs={['ft','bloomberg','livemint']} variant="sand" status="done"/>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// CUSTOM TAB — briefs you've built, by source path
// ─────────────────────────────────────────────────────────────
function CustomTab() {
  return (
    <>
      <div className="rv-overline" style={{ padding: '14px 20px 6px' }}>YOU'VE BUILT</div>
      <div style={{ padding: '0 20px 14px', fontSize: 12.5, color: 'var(--text-3)' }}>
        7 custom briefs &middot; 1h 14m total listening time.
      </div>

      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <BriefCard
          kind="custom"
          kicker="WED · MAR 14 · FROM FEED"
          title="On Anthropic's agent post"
          duration="14 min · 5 chapters · 4 sources"
          srcs={['anthropic','stratechery','theverge','github']}
          variant="magenta"
          status="new"
          buildSource="3 cards picked from feed"
          srcIcon="feed"
        />
        <BriefCard
          kind="custom"
          kicker="TUE · MAR 13 · 5 URLS"
          title="HBM3E supply, all the way through"
          duration="11 min · 6 chapters"
          srcs={['semianalysis','ft','bloomberg','reuters','axios']}
          variant="sky"
          status="done"
          buildSource="Pasted 5 URLs"
          srcIcon="link"
        />
        <BriefCard
          kind="custom"
          kicker="MON · MAR 12 · FROM FEED"
          title="The export-rule revision, decoded"
          duration="9 min · 4 chapters · 3 sources"
          srcs={['reuters','axios','economist']}
          variant="rose"
          status="done"
          buildSource="2 cards picked from feed"
          srcIcon="feed"
        />
        <BriefCard
          kind="custom"
          kicker="SUN · MAR 11 · 3 URLS"
          title="Wemby's mid-season form, deep"
          duration="6 min · 3 chapters"
          srcs={['nba','espn']}
          extraCount={1}
          variant="plum"
          status="done"
          buildSource="Pasted 3 URLs"
          srcIcon="link"
        />
      </div>

      {/* Empty-state CTA for building more */}
      <div style={{ padding: '22px 18px 30px' }}>
        <div style={{
          padding: '16px 16px 16px 14px',
          background: 'var(--text)', color: '#fff',
          borderRadius: 16,
          display: 'flex', alignItems: 'center', gap: 14,
          boxShadow: '0 2px 0 rgba(24,30,50,0.18)',
        }}>
          <ColorChip size={44} kind="plus" bg="var(--accent)" fg="#fff" radius={11}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 14.5, letterSpacing: '-0.025em' }}>
              Want a brief on something specific?
            </div>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.65)', marginTop: 2 }}>
              Multi-select from Feed, or paste URLs.
            </div>
          </div>
          <IcChevR s={16} stroke="rgba(255,255,255,0.7)"/>
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// BriefCard — single card for both Daily and Custom briefs
// Custom briefs show their build source (feed picks or URLs).
// ─────────────────────────────────────────────────────────────
function BriefCard({ kicker, title, duration, srcs, extraCount, variant, status, progress, kind, buildSource, srcIcon }) {
  return (
    <div style={{
      display: 'flex', gap: 12, padding: 12,
      background: 'var(--bg-1)', border: '0.5px solid var(--line)',
      borderRadius: 16,
      boxShadow: '0 1px 0 rgba(24,30,50,0.03)',
    }}>
      <div style={{ position: 'relative', flexShrink: 0 }}>
        <CoverArt size={88} radius={12} variant={variant} showTitle={false}/>
        {status === 'progress' && (
          <div style={{
            position: 'absolute', inset: 0, borderRadius: 12,
            background: 'rgba(0,0,0,0.40)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{ width: 32, height: 32, borderRadius: 999, background: '#fff', color: 'var(--text)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <IcPlay s={14}/>
            </div>
          </div>
        )}
        {/* Source badge — only on custom briefs */}
        {kind === 'custom' && srcIcon && (
          <div style={{
            position: 'absolute', top: -5, right: -5,
            width: 22, height: 22, borderRadius: 7,
            background: 'var(--text)', color: '#fff',
            border: '2.5px solid var(--bg-1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {srcIcon === 'feed' ? <IcFeed s={11}/> : <IcLink s={11}/>}
          </div>
        )}
      </div>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        <div className="rv-overline" style={{ fontSize: 9.5, marginBottom: 4 }}>{kicker}</div>
        <div style={{
          fontFamily: 'var(--serif)', fontStyle: 'italic',
          fontSize: 17, lineHeight: 1.15, color: 'var(--text)',
          textWrap: 'balance', marginBottom: 6,
        }} dangerouslySetInnerHTML={{ __html: title }}/>
        <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginBottom: 8 }}>{duration}</div>
        <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <SourceDotRow srcs={srcs} size={12}/>
            {extraCount > 0 && <span style={{ fontSize: 10.5, color: 'var(--text-3)' }}>+{extraCount}</span>}
          </div>
          <StatusPill kind={status}/>
        </div>

        {status === 'progress' && (
          <div style={{ marginTop: 8, height: 2, background: 'rgba(24,30,50,0.10)', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: `${progress*100}%`, height: '100%', background: 'var(--accent)' }}/>
          </div>
        )}
      </div>
    </div>
  );
}

// Exports — supply both daily and custom states
function ScreenBriefsDaily()  { return <ScreenBriefs tab="daily"/>; }
function ScreenBriefsCustom() { return <ScreenBriefs tab="custom"/>; }

Object.assign(window, {
  ScreenBriefs, ScreenBriefsDaily, ScreenBriefsCustom,
  BriefCard,
});