// DjMixes - the dj → dj-mixes leaf. Renders window.DJ_MIXES (pages-data.jsx) as
// a stack of embedded SoundCloud players, each accented with the brand
// chartreuse via window.djPlayerSrc. Loaded after pages-data.jsx; rendered by
// SubcategoryPage the same way MotionGrid / PhotoGallery are (a special,
// non-card-driven subcategory body). Mirrors the site's mono / ruled vocabulary.

const DM_RULE = 'var(--rule)', DM_INK = 'var(--ink)', DM_INK2 = 'var(--ink-2)',
      DM_INK3 = 'var(--ink-3)', DM_PAPER2 = 'var(--paper-2)';

function DjMixCard({ mix, mobile }) {
  const [h, setH] = React.useState(false);
  const src = window.djPlayerSrc ? window.djPlayerSrc(mix.track) : '';
  return (
    <div style={{ border: `1px solid ${h ? DM_INK : DM_RULE}`, transition: 'border-color .18s',
      background: 'var(--paper)' }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        gap: 14, padding: mobile ? '14px 16px 12px' : '16px 20px 12px', borderBottom: `1px solid ${DM_RULE}` }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: mobile ? 17 : 19, fontWeight: 500, letterSpacing: -0.3,
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{mix.title}</div>
          {mix.tags && (
            <div className="mono" style={{ fontSize: 11, color: DM_INK3, letterSpacing: 0.2, marginTop: 4 }}>{mix.tags}</div>
          )}
        </div>
        <div className="mono tnum" style={{ fontSize: 12, color: DM_INK3, flexShrink: 0 }}>{mix.yr}</div>
      </div>
      {/* player */}
      <div style={{ padding: mobile ? '14px 16px' : '16px 20px' }}>
        <iframe title={mix.title} width="100%" height="166" frameBorder="no" scrolling="no"
          allow="autoplay; encrypted-media" src={src}
          style={{ display: 'block', border: 'none' }}></iframe>
      </div>
      {/* footer */}
      <div className="mono" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 12, padding: mobile ? '0 16px 14px' : '0 20px 16px', fontSize: 12, color: DM_INK3 }}>
        <span className="tnum">{mix.date}</span>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
          {mix.instagram && (
            <a href={mix.instagram} target="_blank" rel="noopener"
              style={{ color: DM_INK2, textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 6, transition: 'color .15s' }}
              onMouseEnter={(e) => { e.currentTarget.style.color = DM_INK; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = DM_INK2; }}>
              Osmosis on Instagram <span style={{ opacity: 0.7 }}>↗</span>
            </a>
          )}
          <a href={mix.permalink} target="_blank" rel="noopener"
            onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
            style={{ color: h ? DM_INK : DM_INK2, textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 6, transition: 'color .15s' }}>
            open on SoundCloud <span style={{ opacity: 0.7 }}>↗</span>
          </a>
        </div>
      </div>
    </div>
  );
}

function DjMixes({ mobile }) {
  const mixes = window.DJ_MIXES || [];
  const profile = (window.META && window.META.soundcloudUrl) || 'https://soundcloud.com/spencerussell';
  return (
    <div style={{ maxWidth: 720 }}>
      {/* intro line + profile link */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        gap: 16, marginBottom: mobile ? 18 : 24, flexWrap: 'wrap' }}>
        <div style={{ fontSize: mobile ? 13.5 : 15, color: DM_INK2, lineHeight: 1.55, maxWidth: 460, textWrap: 'pretty' }}>
          Recorded sets - listen here, or follow along on SoundCloud for the full archive.
        </div>
        <a href={profile} target="_blank" rel="noopener" className="mono"
          style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, padding: '9px 13px', flexShrink: 0,
            border: `1px solid ${DM_RULE}`, background: 'transparent', color: DM_INK, textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8, letterSpacing: 0.1,
            transition: 'background .12s, border-color .12s, color .12s' }}
          onMouseEnter={(e) => { e.currentTarget.style.background = DM_INK; e.currentTarget.style.color = 'var(--paper)'; e.currentTarget.style.borderColor = DM_INK; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = DM_INK; e.currentTarget.style.borderColor = DM_RULE; }}>
          all mixes on SoundCloud <span style={{ opacity: 0.6 }}>↗</span>
        </a>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 16 : 20 }}>
        {mixes.map((mix, i) => <DjMixCard key={mix.permalink || i} mix={mix} mobile={mobile} />)}
      </div>
    </div>
  );
}

window.DjMixes = DjMixes;