// Desktop profile panel: course introduction, voice note, looks and sticker pack.

function PlayStateIcon({ playing, locked = false }) {
  if (locked) {
    return (
      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        <rect x="7" y="10" width="10" height="9" rx="2" />
        <path d="M9 10V7a3 3 0 0 1 6 0v3" />
      </svg>
    );
  }
  return playing ? (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>
  ) : (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="m8 5 11 7-11 7V5Z"/></svg>
  );
}

function LobbyPanel({
  heroCharacter,
  voiceTrack,
  tracks,
  activeId, onPick,
  playing,
  playback,
  formatDuration,
  onOpenStickers,
  stickers,
}) {
  const voiceAvailable = Boolean(voiceTrack.audio);
  const voiceSelected = activeId === voiceTrack.id;
  const progress = playback.duration > 0
    ? Math.min(100, (playback.currentTime / playback.duration) * 100)
    : 0;

  return (
    <aside style={panelStyles.panel} aria-label="Профіль AI Creator Lab">
      <header style={panelStyles.header}>
        <p style={panelStyles.locality}>{heroCharacter.locality}</p>
        <h1 style={panelStyles.name}>{heroCharacter.name}</h1>
        <div style={panelStyles.bio}>
          <p style={panelStyles.bioIntro}>
            {heroCharacter.bioLead}
          </p>
          <p style={panelStyles.bioCourse}>{heroCharacter.bioTail}</p>
          <p style={panelStyles.bioAuthor}>
            Майстерню веде{" "}
            <a
              className="author-link"
              href={heroCharacter.author.url}
              target="_blank"
              rel="noopener noreferrer"
              style={panelStyles.authorLink}
              aria-label={`${heroCharacter.author.name} у Telegram`}
            >
              <span>{heroCharacter.author.name}</span>
              <span style={panelStyles.authorArrow} aria-hidden>↗</span>
            </a>
          </p>
        </div>
      </header>

      <section aria-labelledby="voice-heading" style={panelStyles.voiceSection}>
        <button
          type="button"
          className={`voice-row${voiceSelected ? " is-selected" : ""}`}
          onClick={() => onPick(voiceTrack)}
          disabled={!voiceAvailable}
          aria-pressed={voiceSelected && playing}
          style={{
            ...panelStyles.voiceRow,
            background: voiceSelected ? "var(--signal-deep)" : "var(--signal)",
            color: "#fff",
            cursor: voiceAvailable ? "pointer" : "default",
          }}
        >
          <span style={{
            ...panelStyles.voiceIcon,
            background: "#fff",
            color: "var(--signal)",
          }}>
            <PlayStateIcon playing={voiceSelected && playing} locked={!voiceAvailable} />
          </span>
          <span style={panelStyles.voiceBody}>
            <span id="voice-heading" style={panelStyles.voiceEyebrow}>
              {voiceSelected && playing ? "ЗАРАЗ ЗВУЧИТЬ" : "ПОЧНИ З ГОЛОСУ"}
            </span>
            <span style={panelStyles.voiceTitle}>{voiceTrack.track}</span>
          </span>
          <span style={panelStyles.voiceMeta}>
            {voiceAvailable && (
              <span style={panelStyles.voiceTime}>
                {voiceSelected
                  ? `${formatDuration(playback.currentTime)} / ${formatDuration(playback.duration, voiceTrack.duration)}`
                  : voiceTrack.duration}
              </span>
            )}
            {!voiceAvailable && <span style={panelStyles.soon}>СКОРО</span>}
          </span>
          {voiceAvailable && voiceSelected && (
            <span style={panelStyles.voiceProgress} aria-hidden>
              <span style={{ ...panelStyles.voiceProgressFill, width: `${progress}%` }} />
            </span>
          )}
        </button>
      </section>

      <section aria-labelledby="looks-heading" style={panelStyles.looksSection}>
        <div style={panelStyles.sectionHead}>
          <h2 id="looks-heading" style={panelStyles.sectionActive}>ОБЕРИ ОБРАЗ І ПОСЛУХАЙ ТРЕК</h2>
        </div>

        <ul style={panelStyles.list}>
          {tracks.map((it) => {
            const selected = activeId === it.id;
            const isPlaying = selected && playing;
            const duration = selected && playback.duration
              ? formatDuration(playback.duration, it.duration)
              : it.duration;
            return (
              <li key={it.id} className="track-row-list-item">
                <button
                  type="button"
                  className={`track-row${selected ? " is-selected" : ""}`}
                  onClick={() => onPick(it)}
                  aria-pressed={isPlaying}
                  style={{
                    ...panelStyles.row,
                    background: selected ? "var(--ink)" : "var(--paper-2)",
                    color: selected ? "#fff" : "var(--ink)",
                    boxShadow: selected ? "0 14px 30px rgba(16,16,18,0.14)" : "none",
                  }}
                >
                  <span style={panelStyles.thumbWrap}>
                    <img src={it.cover} alt="" style={panelStyles.thumb} />
                    <span style={{ ...panelStyles.trackPlay, opacity: selected ? 1 : 0 }}>
                      <PlayStateIcon playing={isPlaying} />
                    </span>
                  </span>
                  <span style={panelStyles.body}>
                    <span style={{ ...panelStyles.title, color: selected ? "#fff" : "var(--ink)" }}>{it.artist}</span>
                    <span style={{ ...panelStyles.sub, color: selected ? "rgba(255,255,255,0.66)" : "var(--ink-2)" }}>{it.track}</span>
                  </span>
                  <span style={panelStyles.duration}>
                    {selected && playback.duration
                      ? `${formatDuration(playback.currentTime)} / ${duration}`
                      : duration}
                  </span>
                  {selected && (
                    <span style={panelStyles.trackProgress} aria-hidden>
                      <span style={{ ...panelStyles.trackProgressFill, width: `${progress}%` }} />
                    </span>
                  )}
                </button>
              </li>
            );
          })}
        </ul>
      </section>

      <button
        type="button"
        className="sticker-banner"
        onClick={onOpenStickers}
        style={panelStyles.stickerBanner}
        aria-label="Відкрити набір стікерів у Telegram"
      >
        <span style={panelStyles.stickerCopy}>
          <span style={panelStyles.stickerEyebrow}>
            <span style={panelStyles.telegramMark} aria-hidden>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M21.8 3.2 18.6 20c-.2 1.2-.9 1.5-1.9.9l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.1 13.8 1.3 12.3c-1.1-.3-1.1-1.1.2-1.6L20.3 3c.9-.3 1.7.2 1.5.2Z"/></svg>
            </span>
            ПЕРСОНАЖ ЖИВЕ ДАЛІ
          </span>
          <span style={panelStyles.stickerTitle}>Стікерпак у Telegram <span aria-hidden>↗</span></span>
        </span>
        <span style={panelStyles.stickerDeck} aria-hidden>
          {stickers.map((sticker, index) => (
            <img
              key={sticker.src}
              className={`sticker-preview sticker-preview-${index + 1}`}
              src={sticker.src}
              alt=""
              style={{ ...panelStyles.stickerPreview, ...panelStyles.stickerPositions[index] }}
            />
          ))}
        </span>
      </button>

      <style>{`
        .voice-row:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(240,68,46,0.24); }
        .author-link:hover { color: #087fb8 !important; text-decoration: none !important; }
        .author-link:hover span:last-child { transform: translate(1px, -1px); }
        .voice-row:active:not(:disabled), .track-row:active { transform: scale(0.992); }
        .track-row:hover:not(.is-selected) { background: #eeece7 !important; transform: translateY(-2px); }
        .track-row:hover > span:first-child > span { opacity: 1 !important; }
        .track-row:focus-visible, .voice-row:focus-visible, .sticker-banner:focus-visible { outline: none !important; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--signal) !important; }
        .sticker-banner:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(16,16,18,0.22) !important; }
        .sticker-banner:hover .sticker-preview-1 { transform: translate(-8px,-7px) rotate(-13deg) scale(1.08); }
        .sticker-banner:hover .sticker-preview-2 { transform: translate(-3px,-12px) rotate(-5deg) scale(1.1); }
        .sticker-banner:hover .sticker-preview-3 { transform: translate(3px,-13px) rotate(5deg) scale(1.1); }
        .sticker-banner:hover .sticker-preview-4 { transform: translate(9px,-7px) rotate(13deg) scale(1.08); }
        @media (prefers-reduced-motion: reduce) {
          .author-link, .voice-row, .track-row, .sticker-banner, .sticker-preview { animation: none !important; transition: none !important; }
        }
      `}</style>
    </aside>
  );
}

const panelStyles = {
  panel: { display: "flex", flexDirection: "column", height: "100%", maxWidth: 570, padding: "10px 0 0", boxSizing: "border-box" },
  header: { display: "flex", flexDirection: "column" },
  locality: { order: 0, margin: 0, fontFamily: "var(--font-display)", fontWeight: 750, fontSize: 10, lineHeight: 1, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--signal)" },
  authorLink: { display: "inline-flex", alignItems: "center", gap: 4, marginLeft: 3, color: "#1688bd", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 12, lineHeight: 1, textDecoration: "none", transition: "color var(--t-fast) var(--ease)" },
  authorArrow: { color: "var(--tg-blue)", fontSize: 9, transition: "transform var(--t-fast) var(--ease)" },
  name: { order: 1, margin: "16px 0 0", maxWidth: 570, fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 70, lineHeight: 0.9, letterSpacing: "-0.055em", color: "var(--ink)" },
  bio: { order: 2, display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 9, margin: "24px 0 0", maxWidth: 550 },
  bioIntro: { margin: 0, maxWidth: 520, fontFamily: "var(--font-display)", fontWeight: 750, fontSize: 14, lineHeight: 1.4, color: "var(--ink)" },
  bioCourse: { margin: 0, maxWidth: 520, fontSize: 13, lineHeight: 1.52, color: "var(--ink-2)" },
  bioAuthor: { display: "flex", alignItems: "center", margin: "3px 0 0", fontSize: 12, fontWeight: 550, lineHeight: 1.3, color: "var(--ink-2)" },

  voiceSection: { marginTop: 25 },
  voiceRow: { position: "relative", display: "grid", gridTemplateColumns: "54px minmax(0,1fr) auto", columnGap: 15, alignItems: "center", width: "100%", minHeight: 74, padding: "10px 18px 10px 10px", border: 0, borderRadius: 19, overflow: "hidden", textAlign: "left", boxShadow: "0 12px 26px rgba(240,68,46,0.18)", transition: "transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease)" },
  voiceIcon: { width: 54, height: 54, borderRadius: 15, display: "grid", placeItems: "center" },
  voiceBody: { display: "flex", flexDirection: "column", gap: 3, minWidth: 0 },
  voiceEyebrow: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 8, letterSpacing: "0.13em", opacity: 0.72 },
  voiceTitle: { fontFamily: "var(--font-display)", fontWeight: 850, fontSize: 16, lineHeight: 1.15, letterSpacing: "-0.02em" },
  voiceMeta: { display: "flex", alignItems: "center", justifyContent: "flex-end" },
  voiceTime: { fontFamily: "var(--font-mono)", fontSize: 10, opacity: 0.68 },
  soon: { padding: "5px 8px", borderRadius: 999, background: "rgba(240,68,46,0.1)", color: "var(--signal)", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 9, letterSpacing: "0.1em" },
  voiceProgress: { position: "absolute", left: 16, right: 16, bottom: 0, height: 2, background: "rgba(255,255,255,0.24)" },
  voiceProgressFill: { display: "block", height: "100%", background: "currentColor", transition: "width 180ms linear" },

  looksSection: { marginTop: 30 },
  sectionHead: { display: "flex", alignItems: "baseline", justifyContent: "space-between" },
  sectionActive: { margin: 0, fontFamily: "var(--font-display)", fontWeight: 850, fontSize: 18, lineHeight: 1, letterSpacing: "-0.02em", color: "var(--ink)" },
  list: { listStyle: "none", margin: "12px 0 0", padding: 0, display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 10 },
  row: { position: "relative", display: "flex", flexDirection: "column", alignItems: "stretch", width: "100%", minHeight: 150, padding: 8, border: 0, borderRadius: 18, textAlign: "left", cursor: "pointer", overflow: "hidden", transition: "transform var(--t-base) var(--ease), background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)" },
  thumbWrap: { position: "relative", width: "100%", height: 82, borderRadius: 13, overflow: "hidden", background: "#fff" },
  thumb: { width: "100%", height: "100%", display: "block", objectFit: "cover", objectPosition: "center top" },
  trackPlay: { position: "absolute", inset: 0, display: "grid", placeItems: "center", background: "rgba(16,16,18,0.54)", color: "#fff", transition: "opacity var(--t-fast) var(--ease)" },
  body: { display: "flex", flexDirection: "column", gap: 3, minWidth: 0, padding: "10px 4px 3px" },
  title: { fontFamily: "var(--font-display)", fontWeight: 820, fontSize: 14, lineHeight: 1.05, color: "var(--ink)" },
  sub: { fontSize: 10, lineHeight: 1.2, color: "var(--ink-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
  duration: { position: "absolute", top: 14, right: 14, zIndex: 3, padding: "4px 6px", borderRadius: 999, background: "rgba(255,255,255,0.86)", fontFamily: "var(--font-mono)", fontSize: 8, color: "var(--ink-3)", fontVariantNumeric: "tabular-nums", backdropFilter: "blur(8px)" },
  trackProgress: { position: "absolute", left: 12, right: 12, bottom: 5, height: 2, borderRadius: 99, overflow: "hidden", background: "rgba(255,255,255,0.18)" },
  trackProgressFill: { display: "block", height: "100%", borderRadius: 99, background: "var(--signal)", transition: "width 180ms linear" },

  stickerBanner: { position: "relative", display: "flex", width: "100%", minHeight: 112, marginTop: "auto", padding: "17px 18px", overflow: "hidden", border: 0, borderRadius: 22, background: "linear-gradient(110deg,#101012 0%,#17171b 62%,#202027 100%)", color: "#fff", cursor: "pointer", textAlign: "left", boxShadow: "0 14px 34px rgba(16,16,18,0.16)", transition: "transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease)" },
  stickerCopy: { position: "relative", zIndex: 2, display: "flex", flexDirection: "column", alignItems: "flex-start", width: 245 },
  stickerEyebrow: { display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 8, letterSpacing: "0.12em", color: "rgba(255,255,255,0.82)" },
  telegramMark: { display: "grid", placeItems: "center", width: 22, height: 22, borderRadius: 999, background: "var(--tg-blue)", color: "#fff" },
  stickerTitle: { marginTop: 8, maxWidth: 220, fontFamily: "var(--font-display)", fontWeight: 880, fontSize: 21, lineHeight: 1.02, letterSpacing: "-0.025em" },
  stickerDeck: { position: "absolute", zIndex: 1, top: 0, right: -5, width: 310, height: "100%" },
  stickerPreview: { position: "absolute", width: 110, height: 110, objectFit: "contain", transformOrigin: "50% 85%", filter: "drop-shadow(0 8px 8px rgba(0,0,0,0.42)) drop-shadow(0 0 1px rgba(255,255,255,0.55))", transition: "transform 260ms var(--ease)" },
  stickerPositions: [
    { left: 0, top: 24, transform: "rotate(-11deg)" },
    { left: 57, top: 7, transform: "rotate(-4deg)" },
    { left: 116, top: 5, transform: "rotate(4deg)" },
    { left: 174, top: 22, transform: "rotate(11deg)" },
  ],
};

window.LobbyPanel = LobbyPanel;