// Left lobby panel — hero block + Recent Tracks list + Telegram link
// Stickers is NOT a catalog — it's a link to Telegram.

function LobbyPanel({
  heroCharacter,
  tracks,
  activeId, onPick,
  playing,
  onOpenStickers,
}) {
  return (
    <aside style={panelStyles.panel}>
      <h1 style={panelStyles.name}>{heroCharacter.name}</h1>
      {heroCharacter.locality && <p style={panelStyles.locality}>{heroCharacter.locality}</p>}
      <p style={panelStyles.bio}>{heroCharacter.bio}</p>

      <div style={panelStyles.sectionHead}>
        <span style={panelStyles.sectionActive}>ОСТАННІ ТРЕКИ</span>
      </div>

      <ul style={panelStyles.list}>
        {tracks.map((it, i) => {
          const isActive = playing && activeId === it.id;
          const locked = !it.cover;
          return (
            <li key={it.id}>
              <button
                onClick={locked ? undefined : () => onPick(it)}
                disabled={locked}
                style={{
                  ...panelStyles.row,
                  background: isActive ? "var(--paper-2)" : "transparent",
                  opacity: locked ? 0.35 : 1,
                  cursor: locked ? "not-allowed" : "pointer",
                }}
              >
                <span style={{ ...panelStyles.num, color: isActive ? "var(--signal)" : "var(--ink-3)" }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                <span style={panelStyles.thumbWrap}>
                  {locked ? (
                    <span style={panelStyles.thumbPlaceholder} />
                  ) : (
                    <img
                      src={it.cover}
                      alt=""
                      style={{
                        ...panelStyles.thumb,
                        filter: it.tint,
                        transform: `scale(${it.pose?.scale ?? 1}) ${it.pose?.flipX ? "scaleX(-1)" : ""}`,
                      }}
                    />
                  )}
                </span>
                <span style={panelStyles.body}>
                  <span style={panelStyles.title}>{it.artist}</span>
                  <span style={panelStyles.sub}>{it.track}</span>
                </span>
                {isActive ? (
                  <span style={panelStyles.eqMini} aria-hidden>
                    <i style={{ ...panelStyles.eqBar, animationDelay: "0ms"   }} />
                    <i style={{ ...panelStyles.eqBar, animationDelay: "120ms" }} />
                    <i style={{ ...panelStyles.eqBar, animationDelay: "240ms" }} />
                  </span>
                ) : (
                  <span style={panelStyles.duration}>{locked ? "Скоро" : it.duration}</span>
                )}
              </button>
            </li>
          );
        })}
      </ul>

      {/* Telegram CTA — single link, no catalog */}
      <button onClick={onOpenStickers} style={panelStyles.embed}>
        <span style={panelStyles.embedIcon}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
            <path d="M14 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h6l7-7V7a3 3 0 0 0-3-3z"/>
            <path d="M13 20v-4a3 3 0 0 1 3-3h4"/>
          </svg>
        </span>
        <span style={panelStyles.embedText}>
          <span style={panelStyles.embedTitle}>Стікери в Telegram</span>
          <span style={panelStyles.embedSub}>Натисніть, щоб відкрити в Telegram</span>
        </span>
        <span style={panelStyles.embedAdd}>
          OPEN
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M9 7h8v8"/></svg>
        </span>
      </button>

      <style>{`
        @keyframes lobby-eq {
          0%, 100% { transform: scaleY(0.35); }
          50%      { transform: scaleY(1.0);  }
        }
      `}</style>
    </aside>
  );
}

const panelStyles = {
  panel:        { display: "flex", flexDirection: "column", height: "100%", padding: "12px 8px 0", gap: 0 },
  name:         { fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 120, lineHeight: 0.92, letterSpacing: "-0.04em", margin: 0, color: "var(--ink)" },
  locality:     { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, color: "var(--ink-2)", margin: "12px 0 0" },
  bio:          { fontSize: 14, lineHeight: 1.5, color: "var(--ink-2)", margin: "26px 0 0", maxWidth: 520, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" },

  sectionHead:  { display: "flex", alignItems: "baseline", marginTop: 36, fontFamily: "var(--font-display)" },
  sectionActive:{ fontWeight: 800, fontSize: 26, letterSpacing: "-0.01em", color: "var(--signal)" },

  list:         { listStyle: "none", margin: "12px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 4 },
  row:          { display: "grid", gridTemplateColumns: "44px 56px 1fr auto", columnGap: 16, alignItems: "center", width: "100%", padding: "8px 12px", background: "transparent", border: 0, borderRadius: 14, textAlign: "left", cursor: "pointer", transition: "background 160ms cubic-bezier(0.2,0.8,0.2,1)" },
  num:          { fontFamily: "var(--font-display)", fontWeight: 300, fontSize: 26, fontVariantNumeric: "tabular-nums", transition: "color 160ms cubic-bezier(0.2,0.8,0.2,1)" },
  thumbWrap:    { width: 56, height: 56, borderRadius: 12, overflow: "hidden", background: "var(--paper-2)", display: "flex", alignItems: "flex-end", justifyContent: "center" },
  thumb:        { width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", transition: "transform 220ms cubic-bezier(0.2,0.8,0.2,1)" },
  thumbPlaceholder: { width: "100%", height: "100%", background: "repeating-linear-gradient(45deg, var(--rule) 0px, var(--rule) 1px, transparent 1px, transparent 8px)" },
  body:         { display: "flex", flexDirection: "column", gap: 2 },
  title:        { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, color: "var(--ink)" },
  sub:          { fontSize: 13, color: "var(--ink-2)" },
  duration:     { fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 12, color: "var(--ink-3)", fontVariantNumeric: "tabular-nums" },

  eqMini:       { display: "inline-flex", alignItems: "center", gap: 3, height: 14 },
  eqBar:        { display: "inline-block", width: 3, height: "100%", background: "var(--signal)", borderRadius: 1, transformOrigin: "center", animation: "lobby-eq 700ms ease-in-out infinite" },

  embed:        { display: "flex", alignItems: "center", gap: 12, background: "var(--shadow-ink)", color: "#fff", borderRadius: 16, padding: "10px 10px 10px 14px", marginTop: "auto", border: 0, cursor: "pointer", textAlign: "left", transition: "background 160ms cubic-bezier(0.2,0.8,0.2,1)" },
  embedIcon:    { width: 38, height: 38, borderRadius: 999, background: "var(--tg-blue)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
  embedText:    { flex: 1, display: "flex", flexDirection: "column", gap: 1 },
  embedTitle:   { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14 },
  embedSub:     { fontSize: 11, color: "rgba(255,255,255,0.55)" },
  embedAdd:     { display: "inline-flex", alignItems: "center", gap: 6, background: "var(--tg-blue)", color: "#fff", borderRadius: 999, padding: "8px 14px", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 11, letterSpacing: "0.08em", border: 0 },
};

window.LobbyPanel = LobbyPanel;