// 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,
  playMode, onVoice,
  onOpenStickers,
}) {
  const voiceActive = playMode === "voice";

  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>

      <button
        onClick={onVoice}
        style={{ ...panelStyles.voice, background: voiceActive ? "var(--signal-deep)" : "var(--signal)" }}
      >
        {voiceActive ? (
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="5" width="3.5" height="14" rx="0.5"/><rect x="13.5" y="5" width="3.5" height="14" rx="0.5"/></svg>
        ) : (
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="8,5 19,12 8,19"/></svg>
        )}
        Voice
      </button>

      <div style={panelStyles.sectionHead}>
        <span style={panelStyles.sectionActive}>RECENT TRACKS</span>
      </div>

      <ul style={panelStyles.list}>
        {tracks.map((it, i) => {
          const isActive = playMode === "track" && activeId === it.id;
          return (
            <li key={it.id}>
              <button
                onClick={() => onPick(it)}
                style={{ ...panelStyles.row, background: isActive ? "var(--paper-2)" : "transparent" }}
              >
                <span style={{ ...panelStyles.num, color: isActive ? "var(--signal)" : "var(--ink-3)" }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                <span style={panelStyles.thumbWrap}>
                  <img
                    src={it.cover ?? it.figure}
                    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}>{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}>Stickers on Telegram</span>
          <span style={panelStyles.embedSub}>Tap to open in 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: "6px 0 0", maxWidth: 520, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" },
  voice:        { display: "inline-flex", alignItems: "center", gap: 8, padding: "11px 24px", borderRadius: 999, color: "white", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, border: 0, cursor: "pointer", alignSelf: "flex-start", marginTop: 18, transition: "background 220ms cubic-bezier(0.2,0.8,0.2,1), transform 120ms cubic-bezier(0.2,0.8,0.2,1)" },

  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)" },
  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;