// screens-now-playing.jsx — Now Playing (full-screen), Citation sheet

// ─────────────────────────────────────────────────────────────
// NOW PLAYING — the soul of Reverb
// ─────────────────────────────────────────────────────────────
function ScreenNowPlaying() {
  return (
    <div className="rv-screen rv" style={{
      background: 'linear-gradient(180deg, #E2EEFC 0%, #F0F2EE 40%, var(--bg) 80%, var(--bg) 100%)',
    }}>
      <StatusBar time="7:31"/>

      {/* Soft accent halo behind cover */}
      <div style={{
        position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)',
        width: 540, height: 540, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(61,143,224,0.18) 0%, rgba(61,143,224,0) 60%)',
        pointerEvents: 'none',
      }}/>

      {/* 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={iconBtnPlayer}><IcChevD s={20} stroke="var(--text)"/></button>
        <div style={{ textAlign: 'center' }}>
          <div className="rv-overline" style={{ fontSize: 10, color: 'var(--text-3)' }}>NOW PLAYING</div>
          <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--text-2)', marginTop: 1 }}>Today's brief</div>
        </div>
        <button style={iconBtnPlayer}><IcMore s={20} stroke="var(--text)"/></button>
      </div>

      <div style={{ position: 'absolute', top: 104, left: 0, right: 0, bottom: 0, overflow: 'auto', paddingBottom: 200 }}>
        {/* Cover art — gentle breathe */}
        <div style={{ padding: '8px 36px 22px', display: 'flex', justifyContent: 'center' }}>
          <div style={{ animation: 'rv-breathe 5s ease-in-out infinite' }}>
            <CoverArt
              title="The Wednesday Brief"
              kicker="Mar 14 · 7 min · 6 segments"
              size={300} radius={20} variant="sky"/>
          </div>
        </div>

        {/* Title + meta */}
        <div style={{ padding: '0 24px 16px', textAlign: 'center' }}>
          <h2 style={{
            margin: 0, fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 26, lineHeight: 1.08, color: 'var(--text)',
            letterSpacing: '-0.015em',
          }}>
            The Wednesday Brief
          </h2>
          <div style={{ marginTop: 6, fontSize: 13, color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 8, justifyContent: 'center' }}>
            <span>NPR style</span>
            <span style={{ width: 3, height: 3, background: 'var(--text-4)', borderRadius: '50%' }}/>
            <span>Niraj's voice</span>
            <span style={{ width: 3, height: 3, background: 'var(--text-4)', borderRadius: '50%' }}/>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--accent-soft)' }}>
              <span style={{ width: 6, height: 6, background: 'var(--accent)', borderRadius: '50%' }}/>
              Calm
            </span>
          </div>
        </div>

        {/* Scrubber */}
        <div style={{ padding: '0 24px 12px' }}>
          <div style={{ height: 44, display: 'flex', alignItems: 'center' }}>
            <Waveform bars={62} height={36} progress={0.32}/>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-3)', marginTop: 4 }} className="rv-mono">
            <span>2:14</span>
            <span>−4:46</span>
          </div>
        </div>

        {/* Transport */}
        <div style={{ padding: '4px 24px 24px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 28 }}>
          <button style={iconBtnPlayer}><IcSegPrev s={26} stroke="var(--text-2)"/></button>
          <button style={iconBtnPlayer}><IcChevL s={26} stroke="var(--text)"/></button>
          <button style={{
            width: 72, height: 72, borderRadius: 999, border: 0,
            background: 'var(--accent)', color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 16px 36px rgba(61,143,224,0.40), 0 4px 0 rgba(24,30,50,0.18)',
          }}>
            <IcPause s={28}/>
          </button>
          <button style={iconBtnPlayer}><IcChevR s={26} stroke="var(--text)"/></button>
          <button style={iconBtnPlayer}><IcSegNext s={26} stroke="var(--text-2)"/></button>
        </div>

        {/* Segments title */}
        <div style={{ padding: '14px 22px 8px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <span className="rv-overline">Segments · 6</span>
          <span style={{ fontSize: 11, color: 'var(--text-3)' }}>tap to jump</span>
        </div>

        {/* Segment timeline */}
        <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <Segment
            idx={1} time="0:00" duration="0:42" title="Today's headlines, in 40 seconds"
            heard
            srcs={['bloomberg','ft']}
          />
          <Segment
            idx={2} time="0:42" duration="1:32" title="Nvidia, Hynix, and the HBM bottleneck"
            heard
            srcs={['semianalysis','bloomberg']}
          />
          <SegmentActive
            idx={3} time="2:14" duration="1:36" title="Anthropic's coding-agent post, decoded"
            srcs={['anthropic','stratechery','theverge']}
          />
          <Segment
            idx={4} time="3:50" duration="1:18" title="India Q4: setup before earnings"
            srcs={['livemint','ft']}
          />
          <Segment
            idx={5} time="5:08" duration="1:24" title="The export-rule revision, plainly"
            srcs={['reuters','axios']}
          />
          <Segment
            idx={6} time="6:32" duration="0:28" title="Wemby is back — what it does to the West"
            srcs={['espn','nba']}
          />
        </div>

        {/* Voice / engine note */}
        <div style={{ padding: '24px 22px 8px' }}>
          <div style={{
            padding: '12px 14px',
            background: 'var(--bg-1)', border: '0.5px solid var(--line)',
            borderRadius: 16, display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: 'var(--bg-2)', color: 'var(--text-2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <IcWave s={18}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)' }}>Voice: Niraj-Anchor</div>
              <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 1 }}>Kokoro 1.0 · warm, measured</div>
            </div>
            <span className="rv-pill" style={{ background: 'var(--bg-2)', color: 'var(--text-3)' }}>Change</span>
          </div>
        </div>
      </div>

      <HomeIndicator/>
    </div>
  );
}

const iconBtnPlayer = {
  width: 44, height: 44, borderRadius: 12, border: 0, background: 'transparent',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
};

// ─────────────────────────────────────────────────────────────
// Segment row (collapsed)
// ─────────────────────────────────────────────────────────────
function Segment({ idx, time, duration, title, heard, srcs }) {
  return (
    <div style={{
      padding: '12px 14px', borderRadius: 16,
      background: 'transparent',
      display: 'flex', gap: 12, alignItems: 'flex-start',
      opacity: heard ? 0.55 : 1,
    }}>
      <div style={{
        width: 26, height: 26, borderRadius: 8, flexShrink: 0,
        background: heard ? 'transparent' : 'var(--bg-2)',
        border: heard ? '0.5px solid var(--line)' : 'none',
        color: heard ? 'var(--text-3)' : 'var(--text-2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 11, fontWeight: 600,
      }}>
        {heard ? <IcCheck s={13} w={2}/> : idx}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)', lineHeight: 1.35, textWrap: 'balance' }}>
          {title}
        </div>
        <div style={{ marginTop: 5, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontSize: 11, color: 'var(--text-3)' }} className="rv-mono">{time} · {duration}</span>
          <SourceDotRow srcs={srcs} size={12}/>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Active segment — expanded with host lines + citations
// ─────────────────────────────────────────────────────────────
function SegmentActive({ idx, time, duration, title, srcs }) {
  return (
    <div style={{
      padding: '14px 16px 16px', borderRadius: 20,
      background: 'linear-gradient(180deg, rgba(61,143,224,0.10) 0%, rgba(61,143,224,0.04) 100%)',
      border: '0.5px solid rgba(61,143,224,0.28)',
      boxShadow: '0 18px 40px rgba(61,143,224,0.10)',
    }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <div style={{
          width: 26, height: 26, borderRadius: 8, flexShrink: 0,
          background: 'var(--accent)', color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 11, fontWeight: 700,
          boxShadow: '0 4px 10px rgba(61,143,224,0.35)',
        }}>
          {idx}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 18, lineHeight: 1.2, color: 'var(--text)',
            letterSpacing: '-0.015em', textWrap: 'balance',
          }}>{title}</div>
          <div style={{ marginTop: 5, display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 11, color: 'var(--accent-soft)' }} className="rv-mono">
              ▸ {time} / {duration}
            </span>
            <span style={{ fontSize: 11, color: 'var(--text-3)' }}>2 voices</span>
          </div>
        </div>
      </div>

      {/* Host lines */}
      <div style={{ marginTop: 14, paddingLeft: 38, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <HostLine speaker="ANCHOR" past>
          Anthropic dropped a long post about coding agents this morning — less the model, more the scaffolding.
        </HostLine>
        <HostLine speaker="ANCHOR" active>
          Their argument, per <Citation src="anthropic"/>, is that the loop matters more than the weights. Stratechery's read — <Citation src="stratechery"/> — pushes that further: this is the bottleneck for every agent shop.
        </HostLine>
        <HostLine speaker="ANCHOR" upcoming>
          The Verge has the practitioner angle on what changes for devs <Citation src="theverge"/>.
        </HostLine>
      </div>

      {/* Feedback row */}
      <div style={{ marginTop: 14, paddingLeft: 38, display: 'flex', alignItems: 'center', gap: 8 }}>
        <FeedbackBtn icon={IcThumbUp} label="More of this"/>
        <FeedbackBtn icon={IcThumbDn} label="Less"/>
        <div style={{ flex: 1 }}/>
        <span style={{ fontSize: 11, color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
          <IcCheck s={11} w={2} stroke="var(--good)"/> heard
        </span>
      </div>
    </div>
  );
}

function HostLine({ speaker, children, past, active, upcoming }) {
  const color = active ? 'var(--text)'
    : past ? 'var(--text-3)'
    : 'var(--text-3)';
  return (
    <div>
      <div style={{
        fontSize: 9.5, fontWeight: 700, letterSpacing: '0.16em',
        color: active ? 'var(--accent)' : 'var(--text-4)',
        marginBottom: 4,
      }}>{speaker}{active && ' · NOW'}</div>
      <div style={{
        fontSize: 14, lineHeight: 1.5, color,
        fontWeight: active ? 500 : 400,
      }}>
        {children}
      </div>
    </div>
  );
}

function Citation({ src }) {
  const s = window.SOURCE_LIB[src] || {};
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '2px 8px 2px 4px', borderRadius: 999,
      background: 'var(--bg-2)', border: '0.5px solid var(--line-strong)',
      fontSize: 11.5, color: 'var(--text-2)', fontWeight: 500,
      verticalAlign: '1px',
    }}>
      <Favicon src={src} size={13} radius={3}/>
      <span>{s.host}</span>
    </span>
  );
}

function FeedbackBtn({ icon: Icon, label }) {
  return (
    <button style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '7px 12px', borderRadius: 999, border: '0.5px solid var(--line-strong)',
      background: 'var(--bg-2)', color: 'var(--text-2)',
      fontFamily: 'var(--sans)', fontSize: 11.5, fontWeight: 500,
    }}>
      <Icon s={13} w={1.8}/>{label}
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// CITATION SHEET — bottom sheet over Now Playing
// ─────────────────────────────────────────────────────────────
function ScreenCitationSheet() {
  return (
    <div className="rv-screen rv" style={{
      background: 'linear-gradient(180deg, #E2EEFC 0%, var(--bg) 40%)',
    }}>
      <StatusBar time="7:31"/>

      {/* Dimmed underlying NowPlaying — just hint art */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
        <div style={{ padding: '110px 36px 22px', display: 'flex', justifyContent: 'center' }}>
          <CoverArt title="The Wednesday Brief" kicker="Mar 14 · 7 min" size={220} radius={20} variant="sky"/>
        </div>
        <div style={{ textAlign: 'center', padding: '0 24px' }}>
          <h2 style={{ margin: 0, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--text-2)' }}>
            The Wednesday Brief
          </h2>
        </div>
      </div>

      {/* Scrim */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 30 }}/>

      {/* Sheet */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: 'var(--bg-1)',
        borderTopLeftRadius: 28, borderTopRightRadius: 28,
        border: '0.5px solid var(--line-strong)',
        borderBottom: 0,
        padding: '12px 20px 30px',
        zIndex: 40,
        boxShadow: '0 -24px 60px rgba(0,0,0,0.6)',
      }}>
        {/* Grabber */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14 }}>
          <div style={{ width: 38, height: 4, background: 'var(--text-4)', borderRadius: 999 }}/>
        </div>

        {/* Host header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
          <Favicon src="stratechery" size={36} radius={10}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>STRATECHERY.COM</div>
            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)', marginTop: 1 }}>Ben Thompson</div>
          </div>
          <button style={{
            padding: '6px 12px', borderRadius: 999, border: '0.5px solid var(--line-strong)',
            background: 'transparent', color: 'var(--text-2)', fontSize: 11.5, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            <IcLink s={11}/> Open
          </button>
        </div>

        {/* Headline */}
        <div style={{
          fontFamily: 'var(--serif)', fontStyle: 'italic',
          fontSize: 22, lineHeight: 1.18, color: 'var(--text)',
          letterSpacing: '-0.015em', marginBottom: 8, textWrap: 'balance',
        }}>
          Agents, Scaffolds, and the Coming Bottleneck
        </div>
        <div style={{ fontSize: 13, color: 'var(--text-3)', marginBottom: 14 }}>
          Mar 13 · 12 min read
        </div>

        {/* Snippet */}
        <div style={{
          padding: '14px 16px', borderRadius: 14,
          background: 'var(--bg-2)', border: '0.5px solid var(--line)',
          fontSize: 13.5, lineHeight: 1.55, color: 'var(--text-2)',
          marginBottom: 16,
        }}>
          <span style={{
            display: 'block', fontFamily: 'var(--serif)', fontStyle: 'italic',
            color: 'var(--accent-soft)', fontSize: 22, lineHeight: 0.2,
          }}>"</span>
          The interesting thing about Anthropic's framing is not the new model — it's the admission that loop quality, not capability, is the binding constraint for agent products at scale.
        </div>

        {/* Heard at */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, fontSize: 12.5, color: 'var(--text-3)' }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }}/>
          Heard at <span className="rv-mono" style={{ color: 'var(--text-2)' }}>2:31</span> · Segment 3
        </div>

        {/* Actions */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button style={{
            width: '100%', height: 50, borderRadius: 14, border: 0,
            background: 'var(--bg-2)', color: 'var(--text)',
            fontWeight: 500, fontSize: 14,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            border: '0.5px solid var(--line-strong)',
          }}>
            <IcLink s={15}/> Open in Safari
          </button>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{
              flex: 1, height: 46, borderRadius: 14, border: '0.5px solid var(--line)',
              background: 'transparent', color: 'var(--text-2)',
              fontSize: 13, fontWeight: 500,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
            }}>
              <IcPin s={14}/> Pin this source
            </button>
            <button style={{
              flex: 1, height: 46, borderRadius: 14, border: '0.5px solid var(--line)',
              background: 'transparent', color: 'var(--text-3)',
              fontSize: 13, fontWeight: 500,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
            }}>
              <IcThumbDn s={14}/> Not useful
            </button>
          </div>
        </div>
      </div>

      <HomeIndicator/>
    </div>
  );
}

Object.assign(window, { ScreenNowPlaying, ScreenCitationSheet });
