// mariusson — NowPlaying strip (info on the centered work)
// Bauhaus typography, asymmetric layout, role-aware actions.
// "Commission" is NOT here — it lives on the artist's profile.
// Click the artist name → open profile (where commission lives).

function NowPlaying({ mobile, work, role, depth, liked, saved, onLike, onSave, onArtist, onRoom, onDetail }) {
  // Default to collapsed on mobile (we want minimal UI by default);
  // expanded by default on desktop (richer real-estate to fill).
  const [collapsed, setCollapsed] = React.useState(!!mobile);

  if (collapsed) {
    return (
      <div data-atlas-panel style={{
        display: 'flex', alignItems: 'stretch',
        background: BAU.paper, border: `1px solid var(--rule)`,
        borderRadius: 'var(--r-pill)',
        overflow: 'hidden',
        boxShadow: 'var(--shadow-soft)',
        pointerEvents: 'auto',
        animation: 'an-fade-up 0.3s var(--ease-out)',
      }}>
        <div style={{ padding: '10px 18px', display: 'flex', flexDirection: 'column', gap: 2, minWidth: 220, maxWidth: 320 }}>
          <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 16, color: BAU.ink, lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {work.title}
          </span>
          <span style={{ fontFamily: 'var(--sans)', fontSize: 11, color: BAU.graphite, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {work.artist} · <span style={{ fontStyle: 'italic' }}>{work.year}</span>
          </span>
        </div>
        <button onClick={() => setCollapsed(false)} title="Expand"
          aria-label="Expand work info"
          style={{
            background: BAU.ink, color: BAU.paper, border: 'none',
            padding: '0 18px', cursor: 'pointer',
            fontFamily: 'var(--mono)', fontSize: 14,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>↗</button>
      </div>
    );
  }

  return (
    <div data-atlas-panel style={{
      width: '100%', pointerEvents: 'auto',
      animation: 'an-fade-up 0.3s var(--ease-out)',
    }}>
      <div style={{
        background: BAU.paper, border: `1px solid var(--rule)`,
        borderRadius: 'var(--r-lg)',
        boxShadow: 'var(--shadow-soft)',
        overflow: 'hidden',
        position: 'relative',
      }}>
        {/* Collapse button — sits inside the panel, top-right */}
        <button onClick={() => setCollapsed(true)} title="Collapse" style={{
          position: 'absolute', top: 12, right: 12, zIndex: 2,
          background: 'transparent', border: `1px solid ${BAU.ink}`,
          borderRadius: '50%',
          width: 26, height: 26, padding: 0, cursor: 'pointer',
          fontFamily: 'var(--mono)', fontSize: 12, color: BAU.ink,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>−</button>

        {/* Desktop: asymmetric grid (title 2fr + meta 1fr).
            Mobile: vertical stack — title up top, meta below as a single
            horizontal row of compact chips so the card stays short. */}
        {mobile ? (
          <div style={{ padding: '16px 16px 12px 16px' }}>
            <h2 style={{
              fontFamily: 'var(--serif)', fontSize: 22, margin: 0,
              lineHeight: 1.05, letterSpacing: '-0.01em', fontWeight: 400,
              paddingRight: 30,
            }}>
              <span style={{ fontStyle: 'italic' }}>{work.title}</span>
            </h2>
            <button onClick={onArtist} style={{
              marginTop: 8, padding: 0, background: 'transparent', border: 'none',
              fontSize: 13, color: BAU.ink, cursor: 'pointer',
              borderBottom: `1px solid ${BAU.ink}`,
              fontFamily: 'var(--sans)',
            }}>
              {work.artist}
              {work.verified && <span style={{ display: 'inline-block', width: 7, height: 7, borderRadius: '50%', background: BAU.blue, marginLeft: 6, verticalAlign: 'middle' }} />}
            </button>
            <div style={{
              marginTop: 12,
              display: 'flex', flexWrap: 'wrap', gap: '6px 14px',
            }}>
              <MetaItem label="Year" value={work.year} />
              <MetaItem label="Region" value={work.region} />
              <MetaItem label="Style" value={work.style} />
              <MetaItem label="Method" value={work.method} />
            </div>
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 0 }}>
            <div style={{ padding: '20px 18px 14px 18px', borderRight: `1px solid ${BAU.rule}`, paddingRight: 38 }}>
              <h2 style={{
                fontFamily: 'var(--serif)', fontSize: 32, margin: 0,
                lineHeight: 1, letterSpacing: '-0.015em', fontWeight: 400,
              }}>
                <span style={{ fontStyle: 'italic' }}>{work.title}</span>
              </h2>
              <button onClick={onArtist} style={{
                marginTop: 8, padding: 0, background: 'transparent', border: 'none',
                fontSize: 14, color: BAU.ink, cursor: 'pointer',
                borderBottom: `1px solid ${BAU.ink}`,
                fontFamily: 'var(--sans)',
              }}>
                {work.artist}
                {work.verified && <span style={{ display: 'inline-block', width: 7, height: 7, borderRadius: '50%', background: BAU.blue, marginLeft: 6, verticalAlign: 'middle' }} />}
              </button>
            </div>
            <div style={{ padding: '20px 16px 14px 16px', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <MetaItem label="Year" value={work.year} />
              <MetaItem label="Region" value={work.region} />
              <MetaItem label="Style" value={work.style} />
              <MetaItem label="Method" value={work.method} />
            </div>
          </div>
        )}

        {/* Actions row */}
        <div style={{
          display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap',
          padding: '12px 18px', borderTop: `1px solid ${BAU.rule}`,
        }}>
          <ActionBtn onClick={onLike} active={liked} kind="like" />
          <ActionBtn onClick={onSave} active={saved} kind="save" />
          <ActionBtn onClick={onRoom} kind="room" />
          <div style={{ flex: 1 }} />
          <button onClick={onArtist} style={{
            background: BAU.ink, color: BAU.paper, border: 'none',
            borderRadius: 'var(--r-pill)',
            padding: '8px 16px',
            fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: BAU.red }} />
            Artist
          </button>
          <button onClick={onDetail} style={{
            background: 'transparent', border: `1px solid ${BAU.ink}`,
            borderRadius: 'var(--r-pill)',
            padding: '8px 14px',
            fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase', cursor: 'pointer', color: BAU.ink,
          }}>View</button>
        </div>
      </div>
    </div>
  );
}

function MetaItem({ label, value }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <span style={{ fontFamily: 'var(--mono)', fontSize: 8.5, letterSpacing: '0.16em', color: BAU.graphite, textTransform: 'uppercase' }}>{label}</span>
      <span style={{ fontFamily: 'var(--serif)', fontSize: 14, fontStyle: 'italic', color: BAU.ink, lineHeight: 1.2 }}>{value}</span>
    </div>
  );
}

function ActionBtn({ onClick, active, kind }) {
  const labels = { like: '♡', save: '◎', room: '↩' };
  const titles = { like: 'Like', save: 'Save', room: 'Room' };
  return (
    <button onClick={onClick} title={titles[kind]} style={{
      background: active ? BAU.ink : 'transparent',
      color: active ? BAU.paper : BAU.ink,
      border: `1px solid ${BAU.ink}`,
      borderRadius: '50%',
      width: 36, height: 36,
      fontFamily: 'var(--mono)', fontSize: 13,
      cursor: 'pointer',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      transition: 'all 0.2s var(--ease-out)',
    }}>{labels[kind]}</button>
  );
}

Object.assign(window, { NowPlaying, MetaItem, ActionBtn });