import { roomName } from '../utils/store.js';

export function ShareSection() {
  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('.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();
      range.selectNode(section.querySelector('.share-url'));
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  });

  return section;
}