// song.js
// Экспорт: renderSong(payload) -> { kind, meta, html }

const SONG_STYLE = {
  // 0 = без затемнения, 0.15–0.30 обычно самое то
  darken: 0.25,

  // Фон: более светлый фиолетово-синий, но “неровный”
  gradientLayers: [
    "radial-gradient(1200px 900px at 25% 35%, rgba(0,255,255,0.16), rgba(0,0,0,0) 60%)",
    "radial-gradient(1200px 900px at 78% 60%, rgba(255,0,90,0.16), rgba(0,0,0,0) 58%)",
    "linear-gradient(135deg, rgb(12,16,50) 0%, rgb(40,20,120) 46%, rgb(161, 0, 182) 100%)",
  ],
  // “безопасные поля” от краёв 4K
  padding: { top: 220, right: 280, bottom: 220, left: 280 },

  maxTextWidthPx: 3000,

  baseFontPx: 200,
  minFontPx: 70,
  stepPx: 3,

  lineHeight: 1.16,
  fontWeight: 500,
};

function htmlToPlain(html) {
  if (!html) return "";
  return String(html)
    .replace(/<br\s*\/?>/gi, "\n")
    .replace(/<[^>]+>/g, "")
    .replace(/&nbsp;/g, " ")
    .replace(/&amp;/g, "&")
    .replace(/&lt;/g, "<")
    .replace(/&gt;/g, ">")
    .trim();
}

function escapeHtml(s) {
  return String(s)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;");
}

function renderSong(payload) {
  const text = htmlToPlain(payload.html) || payload.text || "";

  const bg = [
    `linear-gradient(0deg, rgba(0,0,0,${SONG_STYLE.darken}), rgba(0,0,0,${SONG_STYLE.darken}))`,
    ...SONG_STYLE.gradientLayers,
  ].join(", ");

  // ВАЖНО: никаких <script> тут — оно не выполнится после innerHTML.
  // Мы передадим параметры подбора через data-атрибуты,
  // а подгонку выполнит server.js после вставки экрана.
  const html = `
<style>
  .song-root{
    width:3840px; height:2160px;
    background-image:${bg};
    background-size:cover;
    background-position:center;
    color:#fff;
    font-family: Roboto, Arial, Helvetica, sans-serif;
  }
  .song-root{
  position: relative;
  overflow: hidden;
  background-image: ${SONG_STYLE.gradientLayers.join(", ")};
  background-size: cover;
  background-position: center;
}
.song-root::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,${SONG_STYLE.darken});
  pointer-events:none;
}
.song-frame{ position: relative; z-index: 1; }
  .song-frame{
    position:absolute; inset:0;
    padding:${SONG_STYLE.padding.top}px ${SONG_STYLE.padding.right}px ${SONG_STYLE.padding.bottom}px ${SONG_STYLE.padding.left}px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-sizing:border-box;
  }

  /* Окно текста: вся доступная зона, чтобы можно было точно мерить влезание */
  .song-window{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-sizing:border-box;
  }

  .song-text{
    width:100%;
    max-width:${SONG_STYLE.maxTextWidthPx}px;
    font-weight:${SONG_STYLE.fontWeight};
    line-height:${SONG_STYLE.lineHeight};
    text-shadow: 0 10px 40px rgba(0,0,0,0.55);
    white-space: pre-wrap;
    font-size:${SONG_STYLE.baseFontPx}px;
  }

  /* Убираем нижнюю подпись полностью — её теперь нет */
</style>

<div class="song-root"
     data-kind="song"
     data-base-font="${SONG_STYLE.baseFontPx}"
     data-min-font="${SONG_STYLE.minFontPx}"
     data-step="${SONG_STYLE.stepPx}">
  <div class="song-frame">
    <div class="song-window" id="songWindow">
      <div class="song-text" id="songText">${escapeHtml(text)}</div>
    </div>
  </div>
</div>
`;

  return { kind: "song", meta: {}, html };
}

module.exports = { renderSong };
