/* ── Discography + Lyrics Panel ── */

function DiscographySection() {
  const [selected, setSelected] = React.useState(null); // album
  const [track, setTrack] = React.useState(null);       // track with lyrics

  const openAlbum = (album) => {
    setSelected(album);
    setTrack(null);
  };
  const close = () => { setSelected(null); setTrack(null); };

  return (
    <section id="discography" data-screen-label="04 Discography" style={{ padding: '100px 0', background: C.black, borderTop: '1px solid #161616' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <SectionHeader num={4} title="DISCOGRAPHY" />
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(148px, 1fr))',
          gap: 3,
        }}>
          {ALBUMS.map((album, i) => (
            <AlbumThumb key={i} album={album} onClick={() => openAlbum(album)} />
          ))}
        </div>
      </div>

      {/* Side panel */}
      {selected && (
        <AlbumPanel
          album={selected}
          activeTrack={track}
          onTrack={setTrack}
          onClose={close}
        />
      )}
    </section>
  );
}

function AlbumThumb({ album, onClick }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ position: 'relative', aspectRatio: '1', overflow: 'hidden', cursor: 'pointer', border: `1px solid ${hov ? '#444' : '#1a1a1a'}`, transition: 'border-color 0.3s' }}>
      <img src={album.img} alt={album.title}
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block',
          transform: hov ? 'scale(1.06)' : 'scale(1)', transition: 'transform 0.4s ease',
          animation: 'tb-flicker-img 5s infinite' }}
      />
      {/* Hover overlay */}
      <div style={{
        position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.9)',
        opacity: hov ? 1 : 0, transition: 'opacity 0.3s',
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        alignItems: 'center', padding: 12, textAlign: 'center',
      }}>
        <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase', color: C.blue, marginBottom: 6 }}>
          {album.label} · {album.year}
        </div>
        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '1px', textTransform: 'uppercase', color: '#e0e0e0', lineHeight: 1.3, marginBottom: 10 }}>
          {album.title}
        </div>
        <div style={{ fontSize: 8, color: C.muted, letterSpacing: '1px', textTransform: 'uppercase' }}>
          {album.tracks.length} track{album.tracks.length !== 1 ? 's' : ''} · click to view
        </div>
      </div>
    </div>
  );
}

function AlbumPanel({ album, activeTrack, onTrack, onClose }) {
  return (
    <>
      {/* Backdrop */}
      <div onClick={onClose}
        style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', zIndex: 6000, animation: 'fadeIn 0.2s ease' }}
      />
      {/* Panel */}
      <div className="lyrics-panel"
        style={{ position: 'fixed', top: 0, right: 0, bottom: 0, width: 480, maxWidth: '92vw',
          background: '#0a0a0a', borderLeft: '1px solid #222', zIndex: 6001,
          display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>

        {/* Header */}
        <div style={{ padding: '28px 32px 24px', borderBottom: '1px solid #1a1a1a', display: 'flex', gap: 20, alignItems: 'flex-start', flexShrink: 0 }}>
          <img src={album.img} alt={album.title} style={{ width: 72, height: 72, objectFit: 'cover', flexShrink: 0, animation: 'tb-flicker-img 4s infinite', border: '1px solid #222' }}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: '2.5px', textTransform: 'uppercase', color: C.blue, marginBottom: 6 }}>
              {album.label} · {album.year}
            </div>
            <h3 style={{ fontSize: '0.95rem', fontWeight: 900, letterSpacing: '2px', textTransform: 'uppercase', color: '#e0e0e0', lineHeight: 1.2, marginBottom: 4, animation: 'tb-flicker 2.5s infinite' }}>
              {album.title}
            </h3>
            <div style={{ fontSize: 10, color: C.muted, letterSpacing: '1px' }}>Released: {album.date}</div>
          </div>
          <button onClick={onClose}
            style={{ background: 'none', border: 'none', color: '#555', fontSize: 24, cursor: 'pointer', lineHeight: 1, flexShrink: 0, padding: '0 0 0 8px' }}>×</button>
        </div>

        {/* Body: either tracklist or lyrics */}
        <div style={{ flex: 1, overflowY: 'auto' }}>
          {activeTrack ? (
            <LyricsView track={activeTrack} onBack={() => onTrack(null)} />
          ) : (
            <Tracklist tracks={album.tracks} onTrack={onTrack} />
          )}
        </div>

        {/* Footer: streaming links */}
        <div style={{ padding: '20px 32px', borderTop: '1px solid #1a1a1a', display: 'flex', gap: 8, flexWrap: 'wrap', flexShrink: 0 }}>
          <PlatformLink icon="fab fa-spotify" label="Spotify"/>
          <PlatformLink icon="fab fa-apple" label="Apple Music"/>
          <PlatformLink icon="fab fa-soundcloud" label="SoundCloud"/>
        </div>
      </div>
    </>
  );
}

function Tracklist({ tracks, onTrack }) {
  return (
    <div style={{ padding: '8px 0' }}>
      <div style={{ padding: '16px 32px 12px', fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.muted }}>
        TRACKLIST
      </div>
      {tracks.map((t, i) => (
        <TrackRow key={i} track={t} num={i + 1} onClick={() => t.lyrics && onTrack(t)} />
      ))}
    </div>
  );
}

function TrackRow({ track, num, onClick }) {
  const [hov, setHov] = React.useState(false);
  const hasLyrics = !!track.lyrics;
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        display: 'flex', alignItems: 'center', gap: 16,
        padding: '14px 32px', cursor: hasLyrics ? 'pointer' : 'default',
        background: hov && hasLyrics ? '#0f0f0f' : 'transparent',
        borderBottom: '1px solid #0f0f0f', transition: 'background 0.2s',
      }}>
      <span style={{ fontSize: 10, fontWeight: 600, color: '#333', width: 18, flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}>
        {String(num).padStart(2, '0')}
      </span>
      <span style={{ flex: 1, fontSize: 12, fontWeight: 600, letterSpacing: '1px', textTransform: 'uppercase', color: hov && hasLyrics ? '#e0e0e0' : '#bbb', transition: 'color 0.2s' }}>
        {track.title}
      </span>
      {hasLyrics && (
        <span style={{ fontSize: 8, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: hov ? C.blue : '#333', transition: 'color 0.2s' }}>
          LYRICS {hov ? '→' : ''}
        </span>
      )}
    </div>
  );
}

function LyricsView({ track, onBack }) {
  return (
    <div style={{ padding: '28px 32px' }}>
      <button onClick={onBack}
        style={{ background: 'none', border: 'none', color: C.muted, fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', cursor: 'pointer', padding: 0, marginBottom: 28, display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'Inter', transition: 'color 0.2s' }}
        onMouseEnter={e => e.currentTarget.style.color = '#e0e0e0'}
        onMouseLeave={e => e.currentTarget.style.color = C.muted}>
        ← BACK
      </button>
      <h4 style={{ fontSize: '1.1rem', fontWeight: 900, letterSpacing: '3px', textTransform: 'uppercase', color: '#e0e0e0', marginBottom: 32, animation: 'tb-flicker 2.5s infinite', borderLeft: '3px solid #e0e0e0', paddingLeft: 16 }}>
        {track.title}
      </h4>
      <pre style={{
        fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.9,
        color: '#bbb', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
        letterSpacing: '0.3px',
      }}>{track.lyrics}</pre>
    </div>
  );
}

Object.assign(window, { DiscographySection });