export function ShareSection(roomName: string): HTMLElement {
  const url = `${window.location.origin}${window.location.pathname}?room=${encodeURIComponent(roomName)}`;

  const section = document.createElement("div");
  section.className = "share-section";

  section.innerHTML = `
    <p class="share-label">Share this poll</p>
    <div class="share-row">
      <code class="share-url" title="${url}">${url}</code>
      <button class="share-copy-btn">Copy link</button>
    </div>
  `;

  const copyBtn = section.querySelector<HTMLButtonElement>(".share-copy-btn")!;

  copyBtn.addEventListener("click", async () => {
    try {
      await navigator.clipboard.writeText(url);
      copyBtn.textContent = "Copied!";
      copyBtn.classList.add("share-copy-btn--success");
      setTimeout(() => {
        copyBtn.textContent = "Copy link";
        copyBtn.classList.remove("share-copy-btn--success");
      }, 2000);
    } catch {
      // Fallback: select the text
      const range = document.createRange();
      const urlEl = section.querySelector(".share-url");
      if (urlEl) {
        range.selectNode(urlEl);
        window.getSelection()?.removeAllRanges();
        window.getSelection()?.addRange(range);
      }
    }
  });

  return section;
}