/* Shared engagement widget for editorial /articles/*.html pages */
(function () {
  const articleId = Number(document.body.getAttribute('data-article-id') || '0');
  if (!articleId) return;

  const root = document.getElementById('engage-root');
  if (!root) return;

  const token = localStorage.getItem('portal119_token') || '';
  let visitorId = localStorage.getItem('portal119_visitor_id') || '';

  const headers = () => {
    const h = { 'Content-Type': 'application/json' };
    if (token) h['Authorization'] = 'Bearer ' + token;
    return h;
  };

  const shareUrl = location.href;
  const title = document.title || '';

  root.innerHTML = `
    <div class="engage-box">
      <div class="engage-row">
        <button type="button" data-share="whatsapp">WhatsApp</button>
        <button type="button" data-share="facebook">Facebook</button>
        <button type="button" data-share="x">X</button>
        <button type="button" data-share="telegram">Telegram</button>
        <button type="button" data-share="copy">העתק קישור</button>
      </div>
      <div class="engage-row">
        <button type="button" id="like-btn">♡ לייק (0)</button>
        <span id="comments-label">תגובות (0)</span>
      </div>
      <textarea id="comment-text" rows="3" placeholder="${token ? 'כתבו תגובה…' : 'התחברו באתר כדי לכתוב תגובה'}"></textarea>
      <button type="button" id="comment-btn"${token ? '' : ' disabled'}>פרסם תגובה</button>
      <div id="comments-list"></div>
      <p id="engage-status"></p>
    </div>
  `;

  const likeBtn = root.querySelector('#like-btn');
  const commentsLabel = root.querySelector('#comments-label');
  const commentsList = root.querySelector('#comments-list');
  const statusEl = root.querySelector('#engage-status');
  const commentText = root.querySelector('#comment-text');
  let liked = false;

  function setStatus(msg) { statusEl.textContent = msg || ''; }

  function renderComments(comments) {
    commentsList.innerHTML = (comments || []).map(c => `
      <div class="comment">
        <strong>${escapeHtml(c.author_name || 'משתמש')}</strong>
        <div>${escapeHtml(c.text || '')}</div>
      </div>
    `).join('') || '<p class="muted">אין תגובות עדיין</p>';
  }

  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, ch => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
    }[ch]));
  }

  async function ensureVisitor() {
    if (token || visitorId) return;
    try {
      const res = await fetch('/api/visit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ path: location.pathname })
      });
      const data = await res.json();
      if (data.visitor_id) {
        visitorId = data.visitor_id;
        localStorage.setItem('portal119_visitor_id', visitorId);
      }
    } catch (_) {}
  }

  async function load() {
    const q = visitorId ? ('?visitor_id=' + encodeURIComponent(visitorId)) : '';
    const res = await fetch('/api/articles/' + articleId + '/engagement' + q, { headers: headers() });
    if (!res.ok) return;
    const data = await res.json();
    liked = !!data.liked_by_me;
    likeBtn.textContent = (liked ? '♥' : '♡') + ' לייק (' + (data.likes_count || 0) + ')';
    commentsLabel.textContent = 'תגובות (' + (data.comments_count || 0) + ')';
    renderComments(data.comments || []);
  }

  likeBtn.addEventListener('click', async () => {
    await ensureVisitor();
    const res = await fetch('/api/articles/' + articleId + '/like', {
      method: 'POST',
      headers: headers(),
      body: JSON.stringify({ visitor_id: visitorId || null })
    });
    if (!res.ok) { setStatus('לייק נכשל'); return; }
    const data = await res.json();
    liked = !!data.liked;
    likeBtn.textContent = (liked ? '♥' : '♡') + ' לייק (' + (data.likes_count || 0) + ')';
    setStatus(liked ? 'נוסף לייק' : 'הלייק הוסר');
  });

  root.querySelector('#comment-btn').addEventListener('click', async () => {
    if (!token) { setStatus('יש להתחבר באתר כדי להגיב'); return; }
    const text = commentText.value.trim();
    if (!text) return;
    const res = await fetch('/api/articles/' + articleId + '/comments', {
      method: 'POST',
      headers: headers(),
      body: JSON.stringify({ text })
    });
    if (!res.ok) { setStatus('פרסום נכשל'); return; }
    commentText.value = '';
    setStatus('התגובה פורסמה');
    await load();
  });

  root.querySelectorAll('[data-share]').forEach(btn => {
    btn.addEventListener('click', () => {
      const kind = btn.getAttribute('data-share');
      const u = encodeURIComponent(shareUrl);
      const t = encodeURIComponent(title + '\n' + shareUrl);
      const titleEnc = encodeURIComponent(title);
      if (kind === 'whatsapp') window.open('https://wa.me/?text=' + t, '_blank');
      else if (kind === 'facebook') window.open('https://www.facebook.com/sharer/sharer.php?u=' + u, '_blank');
      else if (kind === 'x') window.open('https://twitter.com/intent/tweet?text=' + titleEnc + '&url=' + u, '_blank');
      else if (kind === 'telegram') window.open('https://t.me/share/url?url=' + u + '&text=' + titleEnc, '_blank');
      else if (kind === 'copy') {
        navigator.clipboard.writeText(shareUrl).then(() => setStatus('הקישור הועתק'));
      }
    });
  });

  const style = document.createElement('style');
  style.textContent = `
    .engage-box{margin:28px 0;padding:16px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
    .engage-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
    .engage-box button{border:1px solid #cbd5e1;background:#f8fafc;border-radius:999px;padding:8px 12px;cursor:pointer;font:inherit}
    .engage-box textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:10px;padding:10px;font:inherit;margin-bottom:8px}
    .comment{padding:10px 0;border-bottom:1px solid #e2e8f0}
    .muted{color:#64748b}
    #engage-status{color:#0f766e;font-size:0.92rem}
  `;
  document.head.appendChild(style);
  ensureVisitor().then(load);
})();