// TapeDeck.jsx — v2: the deck is now a calm "Now playing" strip.
// Same API as the old hi-fi deck (section, onEject, swapState, counter) so
// app.jsx is untouched. The reading progress bar tracks real page scroll —
// the tape position is how far through the side you've read.
function SpinningReel({ color, playing }) {
  // small line-drawn tape glyph: two reels + a connecting window
  const reel = {
    width: 16, height: 16,
    borderRadius: '50%',
    border: '1.5px dashed var(--c-smoke)',
    animation: playing ? 'reel-spin 5s linear infinite' : 'none',
    flexShrink: 0,
  };
  return (
    <div data-noword="true" style={{
      display: 'flex',
      alignItems: 'center',
      gap: 5,
      padding: '7px 9px',
      background: color || 'var(--c-void)',
      transition: 'background 300ms',
      flexShrink: 0,
    }}>
      <div style={reel}></div>
      <div style={{ width: 14, height: 2, background: 'var(--c-smoke)', opacity: 0.5 }}></div>
      <div style={reel}></div>
    </div>
  );
}

function TapeDeck({ section, onEject, swapState, counter }) {
  const isEmpty = !section;
  const isPlaying = swapState === 'idle' && !!section;
  const [prog, setProg] = React.useState(0);
  const [hoverEject, setHoverEject] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - window.innerHeight;
      setProg(max > 60 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    // content height settles after swap
    const t = setTimeout(onScroll, 700);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      clearTimeout(t);
    };
  }, [section && section.id, swapState]);

  const contentAnim =
    swapState === 'ejecting' ? 'tape-eject 420ms var(--ease-snap) forwards' :
    swapState === 'loading'  ? 'tape-load 480ms var(--ease-out) both' :
    'none';

  return (
    <div data-noword="true" className="deck-strip" style={{
      background: '#FFFFFF',
      border: '1px solid var(--c-border)',
      boxShadow: 'var(--shadow-sm)',
      padding: '12px 18px',
      display: 'flex',
      alignItems: 'center',
      gap: 18,
      minHeight: 58,
      overflow: 'hidden',
    }}>
      <div
        key={(section ? section.id : 'empty') + swapState}
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 18,
          flex: 1,
          minWidth: 0,
          animation: contentAnim,
        }}>
        <SpinningReel color={section ? section.accent : undefined} playing={isPlaying} />

        {isEmpty ? (
          <div style={{
            fontFamily: 'var(--font-body)',
            fontSize: 13.5,
            color: 'var(--c-whisper)',
          }}>
            Nothing playing. Pick a side below.
          </div>
        ) : (
          <>
            <div style={{ minWidth: 0 }}>
              <div style={{
                fontFamily: 'var(--font-body)',
                fontSize: 10.5,
                fontWeight: 700,
                letterSpacing: '0.16em',
                textTransform: 'uppercase',
                color: 'var(--c-muted)',
              }}>
                {swapState === 'loading' ? 'Loading' : swapState === 'ejecting' ? 'Ejecting' : 'Now playing'}
              </div>
              <div className="deck-title" style={{
                fontFamily: 'var(--font-display)',
                fontSize: 17,
                fontWeight: 700,
                letterSpacing: '-0.02em',
                color: 'var(--c-smoke)',
                whiteSpace: 'nowrap',
              }}>
                Side {section.side} · {section.title}
              </div>
            </div>

            {/* reading progress = tape position */}
            <div className="desktop-only" style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 12, minWidth: 80 }}>
              <div style={{ flex: 1, height: 3, background: '#E9EDF1', position: 'relative' }}>
                <div style={{
                  position: 'absolute', top: 0, bottom: 0, left: 0,
                  width: `${Math.round(prog * 100)}%`,
                  background: section.accent,
                  transition: 'width 120ms linear',
                }}></div>
              </div>
              <div style={{
                fontFamily: 'var(--font-body)',
                fontSize: 12,
                color: 'var(--c-whisper)',
                fontVariantNumeric: 'tabular-nums',
                width: 36,
                textAlign: 'right',
                flexShrink: 0,
              }}>
                {Math.round(prog * 100)}%
              </div>
            </div>
          </>
        )}
      </div>

      {!isEmpty && (
        <button
          onClick={onEject}
          onMouseEnter={() => setHoverEject(true)}
          onMouseLeave={() => setHoverEject(false)}
          aria-label="Eject — back to the index"
          style={{
            appearance: 'none',
            background: 'transparent',
            border: `1px solid ${hoverEject ? 'var(--ink-coral)' : 'var(--c-border)'}`,
            color: hoverEject ? 'var(--ink-coral)' : 'var(--c-whisper)',
            fontFamily: 'var(--font-body)',
            fontSize: 11.5,
            fontWeight: 600,
            letterSpacing: '0.1em',
            textTransform: 'uppercase',
            padding: '8px 14px',
            cursor: 'pointer',
            transition: 'color 160ms, border-color 160ms',
            flexShrink: 0,
          }}>
          ⏏ Eject
        </button>
      )}
    </div>
  );
}

window.TapeDeck = TapeDeck;