// site-episode.jsx — drewmcguire.ai episode detail page (DC-005)

const SOURCE_KIND_ACCENT = {
  Document:  { color: 'var(--amber-400)', glyph: '§' },
  Filing:    { color: 'var(--teal-400)',  glyph: '◊' },
  Statement: { color: 'var(--paper)',     glyph: '"' },
  Article:   { color: 'var(--teal-300)',  glyph: '¶' },
  Dataset:   { color: 'var(--red-400)',   glyph: '#' },
};

function SourceRow({ s, idx, open, onToggle }) {
  const tone = SOURCE_KIND_ACCENT[s.kind] || SOURCE_KIND_ACCENT.Document;
  return (
    <div style={{
      borderTop: '1px solid rgba(236, 231, 220, 0.1)',
      transition: 'background .2s',
      background: open ? 'rgba(236, 231, 220, 0.03)' : 'transparent',
    }}>
      <button
        className="g-source-row"
        onClick={onToggle}
        aria-expanded={open}
        style={{
          width: '100%', textAlign: 'left',
          padding: '20px 4px',
          display: 'grid',
          gridTemplateColumns: '60px 110px 1fr 140px 24px',
          gap: 20,
          alignItems: 'center',
          cursor: 'pointer',
        }}
      >
        <span className="t-mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--gray-400)' }}>
          {String(idx + 1).padStart(2, '0')}
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <span style={{ color: tone.color, fontFamily: "'IBM Plex Serif', serif", fontSize: 18, lineHeight: 1, width: 16, display: 'inline-block', textAlign: 'center' }}>{tone.glyph}</span>
          <span className="t-mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: tone.color }}>{s.kind}</span>
        </span>
        <span style={{ minWidth: 0 }}>
          <div className="t-cond" style={{ fontSize: 18, letterSpacing: '-0.005em', textTransform: 'uppercase', color: 'var(--paper)', lineHeight: 1.15 }}>
            {s.name}
          </div>
          <div className="t-mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: 'var(--gray-400)', marginTop: 2 }}>
            {s.org}
          </div>
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, justifyContent: 'flex-end' }}>
          {s.verified && (
            <span style={{
              border: '1px solid var(--teal-500)',
              color: 'var(--teal-400)',
              padding: '3px 8px',
              fontFamily: "'IBM Plex Mono', monospace",
              fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase',
            }}>Verified</span>
          )}
          <Kicker>{s.year}</Kicker>
        </span>
        <span style={{
          color: 'var(--gray-300)',
          fontFamily: "'IBM Plex Mono', monospace",
          fontSize: 16,
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
          transition: 'transform .2s',
          display: 'inline-block',
        }}>+</span>
      </button>
      {open && (
        <div style={{
          padding: '4px 4px 28px',
          paddingLeft: 90, // align with name column
        }}>
          <div style={{
            borderLeft: `2px solid ${tone.color}`,
            paddingLeft: 18,
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'start',
          }} className="g-2col">
            <div>
              <Kicker color={tone.color}>Excerpt</Kicker>
              <p className="t-serif" style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--paper)', marginTop: 10, marginBottom: 0 }}>
                {s.excerpt}
              </p>
            </div>
            <div style={{ background: 'var(--ink-870)', padding: 18, border: '1px solid rgba(236, 231, 220, 0.06)' }}>
              <Kicker>Reference</Kicker>
              <div className="t-mono" style={{ fontSize: 12, color: 'var(--paper)', marginTop: 8, lineHeight: 1.65 }}>
                <div>org / {s.org}</div>
                <div>kind / {s.kind}</div>
                <div>year / {s.year}</div>
                <div>file / {s.name}</div>
              </div>
              <div style={{ marginTop: 14 }}>
                <a href="#" className="t-mono" style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--amber-400)', borderBottom: '1px solid var(--amber-500)', paddingBottom: 2 }}>
                  Open primary source →
                </a>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function SourceLibrary({ sources }) {
  const [openIdx, setOpenIdx] = React.useState(0);
  const counts = sources.reduce((m, s) => ((m[s.kind] = (m[s.kind] || 0) + 1), m), {});
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <Bureau>Source library</Bureau>
          <h2 className="t-cond" style={{ margin: '16px 0 0', fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 0.95, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
            {sources.length} sources<br/>on file.
          </h2>
        </div>
        <div style={{ display: 'flex', gap: 22 }}>
          {Object.entries(counts).map(([kind, n]) => {
            const tone = SOURCE_KIND_ACCENT[kind] || SOURCE_KIND_ACCENT.Document;
            return (
              <div key={kind}>
                <Kicker color={tone.color}>{kind}</Kicker>
                <div className="t-cond" style={{ fontSize: 32, lineHeight: 1, marginTop: 6, color: 'var(--paper)' }}>{n}</div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ marginTop: 32, borderBottom: '1px solid rgba(236, 231, 220, 0.1)' }}>
        {sources.map((s, idx) => (
          <SourceRow key={s.name} s={s} idx={idx} open={openIdx === idx} onToggle={() => setOpenIdx(openIdx === idx ? -1 : idx)} />
        ))}
      </div>
    </div>
  );
}

function VideoEmbedMock({ ep }) {
  return (
    <div style={{
      position: 'relative', aspectRatio: '16 / 9',
      background: '#020304',
      border: '1px solid rgba(236, 231, 220, 0.08)',
      overflow: 'hidden',
    }} className="grain">
      <div style={{
        position: 'absolute', inset: 0,
        background: `
          radial-gradient(ellipse at 30% 55%, rgba(42, 134, 147, 0.18) 0%, transparent 55%),
          radial-gradient(ellipse at 75% 70%, rgba(229, 172, 88, 0.08) 0%, transparent 55%),
          linear-gradient(180deg, #05080A 0%, #0A1213 100%)
        `,
      }} />
      {/* faux still */}
      <div style={{ position: 'absolute', left: '12%', top: '20%', width: '38%', height: '60%' }}>
        <ImageStub kind="satellite" accent="var(--teal-400)" />
      </div>
      {/* letterbox */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 38, background: 'var(--ink-950)' }} />
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 38, background: 'var(--ink-950)' }} />
      {/* timecode */}
      <div style={{ position: 'absolute', top: 12, left: 18 }}>
        <Kicker color="var(--gray-300)">DC-005 · 00:00</Kicker>
      </div>
      <div style={{ position: 'absolute', top: 12, right: 18 }}>
        <Kicker color="var(--amber-400)">● ON THE RECORD</Kicker>
      </div>
      {/* play button */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <button style={{
          width: 88, height: 88,
          borderRadius: '50%',
          border: '2px solid var(--paper)',
          background: 'rgba(7, 9, 10, 0.55)',
          color: 'var(--paper)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
          backdropFilter: 'blur(6px)',
          transition: 'background .2s, transform .2s',
        }}
        onMouseOver={(e) => { e.currentTarget.style.background = 'var(--amber-400)'; e.currentTarget.style.color = 'var(--ink-950)'; e.currentTarget.style.borderColor = 'var(--amber-400)'; e.currentTarget.style.transform = 'scale(1.05)'; }}
        onMouseOut={(e)  => { e.currentTarget.style.background = 'rgba(7, 9, 10, 0.55)'; e.currentTarget.style.color = 'var(--paper)'; e.currentTarget.style.borderColor = 'var(--paper)'; e.currentTarget.style.transform = 'scale(1)'; }}
        aria-label="Play video">
          <span style={{ fontSize: 26, marginLeft: 5 }}>▶</span>
        </button>
      </div>
      {/* lower-third faux */}
      <div style={{
        position: 'absolute', bottom: 56, left: 28, display: 'flex', color: 'var(--paper)',
      }}>
        <div style={{
          background: 'var(--ink-950)',
          padding: '10px 14px',
          borderLeft: '3px solid var(--amber-400)',
          fontFamily: "'IBM Plex Mono', monospace",
        }}>
          <Kicker color="var(--gray-400)">File</Kicker>
          <div className="t-mono" style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--paper)', marginTop: 4 }}>DM-2026 / 05</div>
        </div>
        <div style={{ background: 'rgba(5, 8, 10, 0.92)', padding: '10px 18px', borderLeft: '1px solid rgba(236,231,220,0.18)' }}>
          <div className="t-cond" style={{ fontWeight: 700, fontSize: 18, letterSpacing: '-0.005em', textTransform: 'uppercase', lineHeight: 1 }}>Drew McGuire</div>
          <Kicker color="var(--gray-300)" style={{ fontSize: 9 }}>Off-grid. On record.</Kicker>
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 12, right: 18 }}>
        <Kicker color="var(--gray-300)">{ep.runtime}</Kicker>
      </div>
    </div>
  );
}

function VoicesBlock({ voices }) {
  return (
    <div>
      <Bureau>Three voices</Bureau>
      <div className="g-voices-3" style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid rgba(236, 231, 220, 0.08)' }}>
        {voices.map((v, i) => {
          const color = v.color === 'amber' ? 'var(--amber-400)' : v.color === 'teal' ? 'var(--teal-400)' : 'var(--red-400)';
          return (
            <div key={v.role} style={{ padding: '24px 24px 28px', borderLeft: i > 0 ? '1px solid rgba(236, 231, 220, 0.08)' : 'none' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <Kicker color={color}>{v.role}</Kicker>
                <span className="t-cond" style={{ fontSize: 26, color: color, letterSpacing: '-0.01em' }}>{v.pct}%</span>
              </div>
              {/* bar */}
              <div style={{ marginTop: 12, height: 4, background: 'rgba(236,231,220,0.08)', position: 'relative' }}>
                <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${v.pct}%`, background: color }} />
              </div>
              <p className="t-body" style={{ marginTop: 16, fontSize: 13 }}>{v.note}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function TranscriptBlock({ entries }) {
  return (
    <div>
      <Bureau>Transcript · chapters</Bureau>
      <div style={{ marginTop: 24, borderTop: '1px solid rgba(236, 231, 220, 0.1)' }}>
        {entries.map((row, i) => (
          <div key={i} className="g-transcript" style={{ display: 'grid', gridTemplateColumns: '90px 160px 1fr', gap: 28, padding: '22px 4px', borderBottom: '1px solid rgba(236, 231, 220, 0.08)', alignItems: 'baseline' }}>
            <Kicker color="var(--amber-400)">{row.t}</Kicker>
            <Kicker color="var(--gray-400)">{row.tag}</Kicker>
            <p className="t-serif" style={{ margin: 0, fontSize: 18, lineHeight: 1.55, color: 'var(--paper)' }}>{row.text}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function EpisodePage({ slug = 'dc-005' }) {
  const ep = window.EPISODES.find(e => e.slug === slug) || window.EPISODES[0];
  if (!ep || ep.status !== 'published') {
    return (
      <main>
        <PageHeader
          kicker="Not yet on file"
          title="This file is forthcoming."
          subtitle="Subscribe to be notified the night it drops."
        />
        <section className="section">
          <div className="container">
            <div style={{ maxWidth: 520 }}><NewsletterForm /></div>
          </div>
        </section>
      </main>
    );
  }

  return (
    <main>
      {/* FILE HEADER */}
      <section style={{ padding: '32px 0 0', borderBottom: '1px solid rgba(236, 231, 220, 0.08)' }}>
        <div className="container">
          <Reveal>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '12px 18px',
              border: '1px solid rgba(236, 231, 220, 0.2)',
              borderBottom: 'none',
              width: 'fit-content',
              background: 'var(--ink-870)',
            }}>
              <Kicker color="var(--paper)">File / {ep.id}</Kicker>
              <span style={{ width: 1, height: 14, background: 'rgba(236,231,220,0.25)' }} />
              <Kicker color="var(--paper)">DM-2026</Kicker>
              <span style={{ width: 1, height: 14, background: 'rgba(236,231,220,0.25)' }} />
              <Kicker color="var(--teal-400)">Public record</Kicker>
            </div>
          </Reveal>

          <div className="g-ep-header" style={{ padding: '48px 0 80px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'start' }}>
            <Reveal>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
                  {ep.themes.map(t => (
                    <span key={t} className="t-mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--teal-400)', padding: '4px 8px', border: '1px solid rgba(88,171,184,0.4)' }}>{t}</span>
                  ))}
                </div>
                <h1 className="t-cond" style={{
                  margin: '24px 0 0',
                  fontSize: 'clamp(56px, 7.5vw, 108px)',
                  lineHeight: 0.92,
                  letterSpacing: '-0.02em',
                  textTransform: 'uppercase',
                }}>
                  {ep.title}
                </h1>
                <p className="t-bodyL" style={{ marginTop: 28, maxWidth: 640 }}>
                  {ep.deck}
                </p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 32, flexWrap: 'wrap' }}>
                  <Kicker color="var(--gray-300)">Published · {ep.date}</Kicker>
                  <Kicker color="var(--gray-300)">Runtime · {ep.runtime}</Kicker>
                  <a
                    href={`https://${SITE.youtube}/${ep.slug}`}
                    target="_blank" rel="noopener"
                    style={{
                      background: 'var(--amber-400)', color: 'var(--ink-950)',
                      padding: '12px 22px',
                      fontFamily: "'IBM Plex Mono', monospace",
                      fontSize: 11, fontWeight: 600, letterSpacing: '0.28em', textTransform: 'uppercase',
                      transition: 'background .15s',
                    }}
                    onMouseOver={(e) => e.currentTarget.style.background = 'var(--amber-300)'}
                    onMouseOut={(e)  => e.currentTarget.style.background = 'var(--amber-400)'}
                  >Watch on YouTube</a>
                </div>
              </div>
            </Reveal>

            <Reveal delay={120}>
              <div style={{ background: 'var(--ink-870)', border: '1px solid rgba(236, 231, 220, 0.1)', padding: 28 }}>
                <Kicker color="var(--amber-400)">The Number</Kicker>
                <div className="t-cond" style={{ marginTop: 14, fontSize: 'clamp(60px, 7vw, 96px)', lineHeight: 0.86, letterSpacing: '-0.03em' }}>
                  {ep.keyNumber}
                </div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 12 }}>
                  <span className="t-cond" style={{ fontSize: 28, color: 'var(--amber-400)', textTransform: 'lowercase', letterSpacing: '0.01em' }}>{ep.keyUnit}</span>
                </div>
                <p className="t-body" style={{ marginTop: 20 }}>{ep.keyContext}</p>
                <div style={{
                  marginTop: 22,
                  padding: '10px 14px',
                  border: '1.5px solid var(--red-500)',
                  color: 'var(--red-500)',
                  fontFamily: "'IBM Plex Mono', monospace",
                  fontWeight: 700, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                  display: 'inline-block',
                }}>Trade Secret · OR-DEQ 2023</div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* VIDEO */}
      <section className="section">
        <div className="container">
          <Reveal>
            <VideoEmbedMock ep={ep} />
          </Reveal>
        </div>
      </section>

      {/* THREE VOICES */}
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="container">
          <Reveal>
            <VoicesBlock voices={ep.voices} />
          </Reveal>
        </div>
      </section>

      {/* SOURCE LIBRARY */}
      <section className="section section--lg" style={{ background: 'var(--ink-870)', borderTop: '1px solid rgba(236, 231, 220, 0.06)', borderBottom: '1px solid rgba(236, 231, 220, 0.06)' }}>
        <div className="container">
          <Reveal>
            <SourceLibrary sources={ep.sources} />
          </Reveal>
        </div>
      </section>

      {/* TRANSCRIPT */}
      <section className="section section--lg">
        <div className="container">
          <Reveal>
            <TranscriptBlock entries={ep.transcript} />
          </Reveal>
        </div>
      </section>

      {/* RELATED */}
      <section className="section" style={{ paddingTop: 24, paddingBottom: 120, borderTop: '1px solid rgba(236, 231, 220, 0.08)' }}>
        <div className="container">
          <Reveal>
            <Bureau>On the desk · forthcoming</Bureau>
          </Reveal>
          <Reveal delay={80}>
            <div className="g-cards" style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
              {window.EPISODES.filter(e => e.status === 'forthcoming').map(e => <EpisodeCard key={e.id} ep={e} />)}
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { EpisodePage });